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

package/predictive-text-input/types.d.ts

@@ -1,39 +1,93 @@
 import type { RefObject } from "react";
 import type { ListItemDisplayProps } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/**
+ * Props for the `PredictiveTextInput` component.
+ *
+ * `T` is the shape of each option item returned by `fetchOptions`.
+ * `V` is the extracted value type produced by `valueExtractor`.
+ */
 export interface PredictiveTextInputProps<T, V> extends React.AriaAttributes {
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
-    /** Minimum number of characters, before options are shown */
+    /**
+     * Minimum number of characters the user must type before `fetchOptions` is
+     * called and the dropdown opens.
+     *
+     * @default 3
+     */
     minimumCharacters?: number | undefined;
+    /**
+     * Placeholder text shown inside the input when it is empty.
+     *
+     * @default "Enter here..."
+     */
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     disabled?: boolean | undefined;
+    /**
+     * Applies error styling to the input wrapper.
+     */
     error?: boolean | undefined;
+    /**
+     * The currently confirmed option. Updating this prop resets the displayed
+     * text and clears the dropdown options list. Pass `undefined` to clear the
+     * selection.
+     */
     selectedOption?: T | undefined;
+    /**
+     * Horizontal alignment of the dropdown relative to the input element.
+     */
     alignment?: DropdownAlignmentType | undefined;
+    /**
+     * CSS `z-index` applied to the dropdown overlay.
+     */
     dropdownZIndex?: number | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default `document.body`
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Custom width for the dropdown. When specified, the dropdown will use this
-     * width instead of matching the input element width.
+     * Custom width for the dropdown. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
      */
     dropdownWidth?: string | undefined;
-    /** Async Function to populate options */
+    /**
+     * Async function called with the current input string to retrieve matching
+     * options. A rejected promise triggers the error state in the
+     * dropdown.
+     *
+     * @param input The current text in the input field.
+     */
     fetchOptions: (input: string) => Promise<T[]>;
-    /** Function to derive value from an item */
+    /**
+     * Derives the submitted value `V` from a selected item `T`.
+     */
     valueExtractor?: ((item: T) => V) | undefined;
-    /** Function to derive options display value from an item */
+    /**
+     * Derives the display label for each option in the dropdown list.
+     */
     listExtractor?: ((item: T) => string | ListItemDisplayProps) | undefined;
-    /** Function to derive display value for selected option */
+    /**
+     * Derives the text shown in the input field after an option is selected.
+     */
     displayValueExtractor?: ((option: T) => string) | undefined;
-    /** Callback function when option is selected */
+    /**
+     * Called when the user selects an option from the dropdown or clears the
+     * field.
+     *
+     * @param option The selected item, or `undefined` when cleared.
+     * @param extractedValue The value produced by `valueExtractor`, or `undefined` when cleared.
+     */
     onSelectOption?: ((option: T | undefined, extractedValue: V | undefined) => void) | undefined;
 }

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

@@ -1,2 +1,9 @@
 import type { ProgressIndicatorProps } from "./types";
+/**
+ * A horizontal step-progress bar that tracks a user's position through a
+ * multi-step flow.
+ *
+ * Use `ProgressIndicator` when you need to communicate progress through an
+ * ordered sequence of steps.
+ */
 export declare const ProgressIndicator: <T>({ steps, currentIndex, displayExtractor, className, ...otherProps }: ProgressIndicatorProps<T>) => import("react/jsx-runtime").JSX.Element | null;

package/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sources":["../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["ProgressIndicator","_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"q+BASO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,uBAAKb,UAAWc,EAAKC,EAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAA,MAAA,CAAKjB,UAAWkB,EAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,EAAgBP,SAE3BC,EAAA,MAAA,CACIjB,UAAWc,EACPU,EACAH,GAAeI,MAPlBhB,EAUH,MAgEVQ,SAAKjB,UAAWkB,EAAcF,SACzBb,EA3BLU,EAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAgBP,SAAA,CAE3BH,EAACa,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAACS,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAgBP,SAE3BH,EAACa,EAAWC,OAAM,CACd3B,UAAWc,EACPkB,EACAX,GACIY,GAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAACiB,EAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}
+{"version":3,"file":"progress-indicator.js","sources":["../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\n/**\n * A horizontal step-progress bar that tracks a user's position through a\n * multi-step flow.\n *\n * Use `ProgressIndicator` when you need to communicate progress through an\n * ordered sequence of steps.\n */\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["ProgressIndicator","_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"q+BAgBO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,uBAAKb,UAAWc,EAAKC,EAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAA,MAAA,CAAKjB,UAAWkB,EAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,EAAgBP,SAE3BC,EAAA,MAAA,CACIjB,UAAWc,EACPU,EACAH,GAAeI,MAPlBhB,EAUH,MAgEVQ,SAAKjB,UAAWkB,EAAcF,SACzBb,EA3BLU,EAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAgBP,SAAA,CAE3BH,EAACa,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAACS,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAgBP,SAE3BH,EAACa,EAAWC,OAAM,CACd3B,UAAWc,EACPkB,EACAX,GACIY,GAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAACiB,EAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}

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

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

package/progress-indicator/types.d.ts

@@ -1,6 +1,24 @@
+/**
+ * Props for the `ProgressIndicator` component.
+ *
+ * The type parameter `T` represents the shape of each step item in the
+ * `steps` array.
+ */
 export interface ProgressIndicatorProps<T> {
+    /**
+     * Ordered list of step items to render as progress bars and labels.
+     */
     steps: T[];
+    /**
+     * Zero-based index of the current active step.
+     * All steps at or before this index are visually highlighted.
+     */
     currentIndex: number;
+    /**
+     * Derives the display label for a step item.
+     *
+     * @remarks Falls back to `item.toString()` when omitted.
+     */
     displayExtractor?: ((item: T) => string) | undefined;
     className?: string | undefined;
     id?: string | undefined;

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

@@ -1,2 +1,7 @@
 import type { RadioButtonProps } from "./types";
+/**
+ * A single radio button input.
+ *
+ * Use `RadioButton` as an input within a radio group.
+ */
 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.map

@@ -1 +1 @@
-{"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"}
+{"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\n/**\n * A single radio button input.\n *\n * Use `RadioButton` as an input within a radio group.\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":"4WAYO,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_1c4v6v.css

@@ -1,8 +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;}
+@layer fds{.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);}}
+.i1pcowd9{cursor:pointer;}@media (pointer: fine){.i1pcowd9:hover+svg{color:var(--fds-colour-icon-hover);}}}

package/radio-button/types.d.ts

@@ -1,5 +1,16 @@
+/** Visual size variant for the radio button. */
 export type RadioButtonSize = "small" | "default";
+/** Props for the `RadioButton` component. */
 export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Visual size of the radio button icon.
+     *
+     * @default "default"
+     */
     displaySize?: RadioButtonSize | undefined;
+    /**
+     * When `true` and `disabled` is also `true`, the radio button remains
+     * keyboard-focusable. `onChange` is still suppressed.
+     */
     focusableWhenDisabled?: boolean | undefined;
 }

package/schedule/internal-types.d.ts

@@ -0,0 +1,18 @@
+import type { RefObject } from "react";
+/** Shared props passed to the day-view and week-view sub-components. */
+export interface CommonScheduleViewProps {
+    /** The currently displayed date in `YYYY-MM-DD` format. */
+    date: string;
+    /** Whether the schedule is in a loading state. */
+    loading: boolean;
+    /** Earliest visible time in `HH:mm` format. */
+    minTime: string;
+    /** Latest visible time in `HH:mm` format. */
+    maxTime: string;
+    /** Time in `HH:mm` format to scroll into view on mount. */
+    initialScrollTime?: string | undefined;
+    /** Ref to the scrollable container element. */
+    containerRef: RefObject<HTMLDivElement>;
+    /** Message displayed inside blocked time slots. */
+    blockedMessage?: string | undefined;
+}

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

@@ -1,4 +1,4 @@
-.a1gk5ipc{color:var(--fds-colour-icon);}
+@layer fds{.a1gk5ipc{color:var(--fds-colour-icon);}
 .ac6jj8s{width:2rem;}
 .syko8xg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}
 .lfazoz2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:25rem;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
@@ -27,4 +27,4 @@
 .s1cpyxi3{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
 .s2as1da{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
 .t42sdto{--fds-internal-scheduleDayView-timeline-top:0px;position:absolute;width:100%;height:2px;background:var(--fds-colour-icon-primary);top:var(--fds-internal-scheduleDayView-timeline-top);z-index:2;}
-.e1xn1uhc{width:100%;height:47px;}
+.e1xn1uhc{width:100%;height:47px;}}

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

@@ -1,4 +1,5 @@
-import type { CommonScheduleViewProps, ScheduleEmptySlotProps, ScheduleEntityProps, SchedulePopoverProps } from "../types";
+import type { CommonScheduleViewProps } from "../internal-types";
+import type { ScheduleEmptySlotProps, ScheduleEntityProps, SchedulePopoverProps } from "../types";
 export interface ScheduleDayViewProps extends CommonScheduleViewProps {
     serviceData: ScheduleEntityProps[];
     isMobile: boolean;

package/schedule/schedule-header/schedule-header.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{Button as i}from"../../button/button.js";import{DateNavigator as o}from"../../date-navigator/date-navigator.js";import{InputSelect as l}from"../../input-select/input-select.js";import{Typography as r}from"../../typography/index.js";import"../../util/calendar-helper.js";import{DateHelper as n}from"../../util/date-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{scheduleHeaderWrapper as s,leftSection as c,button as d,dateNavigator as m,rightSection as p,text as u,DROPDOWN_WIDTH as y}from"./schedule-header.styles.js";const D=D=>{var{date:v,view:j="day",minDate:h,maxDate:k,onPreviousDayClick:f,onNextDayClick:w,onCalendarDateSelect:C,onViewChange:x,onTodayClick:b}=D,g=e(D,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const N=[{label:"Day",value:"day"},{label:"Week",value:"week"}],Y=N.find((e=>e.value===j));return t("div",Object.assign({className:s},g,{children:[t("div",{className:c,children:[a(i,{className:d,styleType:"light",onClick:b,children:"Today"}),a(o,{className:m,selectedDate:v,minDate:h,maxDate:k,view:j,onLeftArrowClick:e=>{if("week"===j){const t=n.toDayjs(e).subtract(1,"week");f(t.format("YYYY-MM-DD"))}else f(e)},onRightArrowClick:e=>{if("week"===j){const t=n.toDayjs(e).add(1,"week");w(t.format("YYYY-MM-DD"))}else w(e)},onCalendarDateSelect:C})]}),t("div",{className:p,children:[a(r.BodyMD,{className:u,children:"View by:"}),a(l,{options:N,selectedOption:Y,onSelectOption:e=>null==x?void 0:x(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:y})]})]}))};export{D as ScheduleHeader};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{Button as i}from"../../button/button.js";import{DateNavigator as o}from"../../date-navigator/date-navigator.js";import{InputSelect as l}from"../../input-select/input-select.js";import{Typography as r}from"../../typography/index.js";import"../../util/calendar-helper.js";import{DateHelper as n}from"../../util/date-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{scheduleHeaderWrapper as s,leftSection as c,button as d,dateNavigator as m,rightSection as p,text as u,DROPDOWN_WIDTH as y}from"./schedule-header.styles.js";const D=D=>{var{date:v,view:j="day",minDate:h,maxDate:k,onPreviousDayClick:w,onNextDayClick:f,onCalendarDateSelect:C,onViewChange:x,onTodayClick:b}=D,g=e(D,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const N=[{label:"Day",value:"day"},{label:"Week",value:"week"}],Y=N.find((e=>e.value===j));return t("div",Object.assign({className:s},g,{children:[t("div",{className:c,children:[a(i,{className:d,styleType:"light",onClick:b,children:"Today"}),a(o,{className:m,selectedDate:v,minDate:h,maxDate:k,view:j,onLeftArrowClick:e=>{if("week"===j){const t=n.toDayjs(e).subtract(1,"week");w(t.format("YYYY-MM-DD"))}else w(e)},onRightArrowClick:e=>{if("week"===j){const t=n.toDayjs(e).add(1,"week");f(t.format("YYYY-MM-DD"))}else f(e)},onCalendarDateSelect:C})]}),t("div",{className:p,children:[a(r.BodyMD,{className:u,children:"View by:"}),a(l,{"data-testid":"view-selector",options:N,selectedOption:Y,onSelectOption:e=>null==x?void 0:x(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:y})]})]}))};export{D as ScheduleHeader};
 //# sourceMappingURL=schedule-header.js.map

package/schedule/schedule-header/schedule-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-header.js","sources":["../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { InputSelect } from \"../../input-select\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport * as styles from \"./schedule-header.styles\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <div className={styles.scheduleHeaderWrapper} {...otherProps}>\n            <div className={styles.leftSection}>\n                <Button\n                    className={styles.button}\n                    styleType=\"light\"\n                    onClick={onTodayClick}\n                >\n                    Today\n                </Button>\n                <DateNavigator\n                    className={styles.dateNavigator}\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </div>\n\n            <div className={styles.rightSection}>\n                <Typography.BodyMD className={styles.text}>\n                    View by:\n                </Typography.BodyMD>\n                <InputSelect\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={styles.DROPDOWN_WIDTH}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["ScheduleHeader","_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","Object","assign","className","styles.scheduleHeaderWrapper","styles.leftSection","children","_jsx","Button","styles.button","styleType","onClick","DateNavigator","styles.dateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","styles.rightSection","Typography","BodyMD","styles.text","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","styles.DROPDOWN_WIDTH"],"mappings":"6vBAqBO,MAAMA,EAAkBC,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,EAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,GAAkCZ,aAC9CQ,EAAA,MAAA,CAAKG,UAAWE,EAAkBC,SAAA,CAC9BC,EAACC,GACGL,UAAWM,EACXC,UAAU,QACVC,QAASpB,EAAYe,SAAA,UAIzBC,EAACK,EAAa,CACVT,UAAWU,EACXC,aAAc/B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN+B,iBApCcC,IAC1B,GAAa,SAAThC,EAAiB,CACjB,MACMiC,EADiBC,EAAWC,QAAQH,GACNI,SAAS,EAAG,QAChDjC,EAAmB8B,EAAaI,OAAO,cAC3C,MACIlC,EAAmB6B,EACvB,EA8BYM,kBA3BeN,IAC3B,GAAa,SAAThC,EAAiB,CACjB,MACMuC,EADiBL,EAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCpC,EAAemC,EAASF,OAAO,cACnC,MACIjC,EAAe4B,EACnB,EAqBY3B,qBAAsBA,OAI9BW,EAAA,MAAA,CAAKG,UAAWsB,EAAmBnB,SAAA,CAC/BC,EAACmB,EAAWC,OAAM,CAACxB,UAAWyB,EAAWtB,SAAA,aAGzCC,EAACsB,EAAW,CACRC,QAASpC,EACTqC,eAAgBlC,EAChBmC,eAAiBjC,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDqC,cAAgBlC,GAAWA,EAAOJ,MAClCuC,sBAAwBnC,GAAWA,EAAOJ,MAC1CwC,cAAeC,UAGrB"}
+{"version":3,"file":"schedule-header.js","sources":["../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { InputSelect } from \"../../input-select\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport * as styles from \"./schedule-header.styles\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <div className={styles.scheduleHeaderWrapper} {...otherProps}>\n            <div className={styles.leftSection}>\n                <Button\n                    className={styles.button}\n                    styleType=\"light\"\n                    onClick={onTodayClick}\n                >\n                    Today\n                </Button>\n                <DateNavigator\n                    className={styles.dateNavigator}\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </div>\n\n            <div className={styles.rightSection}>\n                <Typography.BodyMD className={styles.text}>\n                    View by:\n                </Typography.BodyMD>\n                <InputSelect\n                    data-testid=\"view-selector\"\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={styles.DROPDOWN_WIDTH}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["ScheduleHeader","_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","Object","assign","className","styles.scheduleHeaderWrapper","styles.leftSection","children","_jsx","Button","styles.button","styleType","onClick","DateNavigator","styles.dateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","styles.rightSection","Typography","BodyMD","styles.text","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","styles.DROPDOWN_WIDTH"],"mappings":"6vBAqBO,MAAMA,EAAkBC,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,EAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,GAAkCZ,aAC9CQ,EAAA,MAAA,CAAKG,UAAWE,EAAkBC,SAAA,CAC9BC,EAACC,GACGL,UAAWM,EACXC,UAAU,QACVC,QAASpB,EAAYe,SAAA,UAIzBC,EAACK,EAAa,CACVT,UAAWU,EACXC,aAAc/B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN+B,iBApCcC,IAC1B,GAAa,SAAThC,EAAiB,CACjB,MACMiC,EADiBC,EAAWC,QAAQH,GACNI,SAAS,EAAG,QAChDjC,EAAmB8B,EAAaI,OAAO,cAC3C,MACIlC,EAAmB6B,EACvB,EA8BYM,kBA3BeN,IAC3B,GAAa,SAAThC,EAAiB,CACjB,MACMuC,EADiBL,EAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCpC,EAAemC,EAASF,OAAO,cACnC,MACIjC,EAAe4B,EACnB,EAqBY3B,qBAAsBA,OAI9BW,SAAKG,UAAWsB,EAAmBnB,SAAA,CAC/BC,EAACmB,EAAWC,OAAM,CAACxB,UAAWyB,EAAWtB,SAAA,aAGzCC,EAACsB,EAAW,CAAA,cACI,gBACZC,QAASpC,EACTqC,eAAgBlC,EAChBmC,eAAiBjC,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDqC,cAAgBlC,GAAWA,EAAOJ,MAClCuC,sBAAwBnC,GAAWA,EAAOJ,MAC1CwC,cAAeC,UAGrB"}

package/schedule/schedule-header/schedule-header.styles_1n2u5vj.css

@@ -1,6 +1,6 @@
-.smt7il1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:var(--fds-spacing-16);color:var(--fds-colour-text-primary);gap:var(--fds-spacing-16);}
+@layer fds{.smt7il1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:var(--fds-spacing-16);color:var(--fds-colour-text-primary);gap:var(--fds-spacing-16);}
 .lzjgzr2{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:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .lzjgzr2{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;}
 .r1xv7b6y{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:var(--fds-spacing-16);}:where(body.fds-breakpoint-lg-max) .r1xv7b6y{display:none;}
 .d19djkwt{width:100%;max-width:400px;}
 .t1cre13t{color:var(--fds-colour-text-subtler);}
-.bzltxmo{min-width:5rem;}:where(body.fds-breakpoint-lg-max) .bzltxmo{display:none;}
+.bzltxmo{min-width:5rem;}:where(body.fds-breakpoint-lg-max) .bzltxmo{display:none;}}

package/schedule/schedule-week-view/schedule-week-view.styles_x7x50m.css

@@ -1,4 +1,4 @@
-.lmprb8g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:25rem;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
+@layer fds{.lmprb8g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:25rem;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
 .h1595692{display:-ms-grid;display:grid;-ms-grid-columns:42px repeat(7, 1fr);grid-template-columns:42px repeat(7, 1fr);max-height:130px;}
 .b155xk04{min-width:42px;position:-webkit-sticky;position:sticky;z-index:2;}
 .snwncax{display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:7;grid-column-end:9;}
@@ -7,4 +7,4 @@
 .b16u8uwa{display:-ms-grid;display:grid;-ms-grid-columns:42px repeat(7, 1fr);grid-template-columns:42px repeat(7, 1fr);overflow-x:hidden;overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .s1w10b64{-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:7;grid-column-end:9;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;}
 .tbbbluc{--fds-internal-scheduleWeekView-timeline-top:0px;position:absolute;width:100%;height:2px;background:var(--fds-colour-icon-primary);top:var(--fds-internal-scheduleWeekView-timeline-top);z-index:2;}.tbbbluc::before{content:"";position:absolute;left:-6px;top:-6px;width:var(--fds-spacing-12);height:var(--fds-spacing-12);border-radius:var(--fds-radius-full);background:var(--fds-colour-icon-primary);z-index:1;}
-.sej7vmd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.sej7vmd:last-child{border-right:none;}
+.sej7vmd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.sej7vmd:last-child{border-right:none;}}

package/schedule/schedule-week-view/time-cell.styles_1sorjz8.css

@@ -1,4 +1,4 @@
-.s1o4jdyi{--fds-internal-scheduleWeekView-slotContentContainer-height:47px;--fds-internal-scheduleWeekView-slotContentContainer-offsetTop:0px;overflow:hidden;width:calc(100% - 1px);padding:4px;top:var(--fds-internal-scheduleWeekView-slotContentContainer-offsetTop);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);z-index:1;height:var(--fds-internal-scheduleWeekView-slotContentContainer-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:absolute;border-radius:var(--fds-radius-sm);color:inherit;}
+@layer fds{.s1o4jdyi{--fds-internal-scheduleWeekView-slotContentContainer-height:47px;--fds-internal-scheduleWeekView-slotContentContainer-offsetTop:0px;overflow:hidden;width:calc(100% - 1px);padding:4px;top:var(--fds-internal-scheduleWeekView-slotContentContainer-offsetTop);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);z-index:1;height:var(--fds-internal-scheduleWeekView-slotContentContainer-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:absolute;border-radius:var(--fds-radius-sm);color:inherit;}
 .s15inga4{border-left:var(--fds-border-width-040) solid var(--fds-colour-icon-success);}
 .s25hl9{color:var(--fds-colour-text-inverse);}
 .s14imce{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}
@@ -11,4 +11,4 @@
         (100% - 14px) * var(--fds-internal-scheduleWeekView-slotColumnOverlay-actualWidthPercentage) /
             100
     );height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:visible;z-index:1;}
-.h1h4fvzf{--fds-internal-scheduleWeekView-hiddenColumns-minHeight:48px;--fds-internal-scheduleWeekView-hiddenColumns-height:auto;background-color:unset;border:none;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;cursor:pointer;color:var(--fds-colour-text-primary);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);min-height:var(--fds-internal-scheduleWeekView-hiddenColumns-minHeight);height:var(--fds-internal-scheduleWeekView-hiddenColumns-height);}.h1h4fvzf:hover{border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-sm-subtle);}
+.h1h4fvzf{--fds-internal-scheduleWeekView-hiddenColumns-minHeight:48px;--fds-internal-scheduleWeekView-hiddenColumns-height:auto;background-color:unset;border:none;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;cursor:pointer;color:var(--fds-colour-text-primary);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);min-height:var(--fds-internal-scheduleWeekView-hiddenColumns-minHeight);height:var(--fds-internal-scheduleWeekView-hiddenColumns-height);}.h1h4fvzf:hover{border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-sm-subtle);}}

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

@@ -1,4 +1,5 @@
-import type { CommonScheduleViewProps, ScheduleEntityProps, ScheduleSlotProps } from "../types";
+import type { CommonScheduleViewProps } from "../internal-types";
+import type { ScheduleEntityProps, ScheduleSlotProps } from "../types";
 export interface ScheduleWeekViewProps extends CommonScheduleViewProps {
     serviceData: ScheduleEntityProps[];
     onSlotClick?: (data: ScheduleSlotProps, e: React.MouseEvent) => void | undefined;

package/schedule/schedule.d.ts

@@ -1,2 +1,5 @@
 import type { ScheduleProps } from "./types";
+/**
+ * A grid visualisation of slot-based time availability for services across day and week views.
+ */
 export declare const Schedule: ({ id, className, view, date, serviceData, loading, minTime, maxTime, initialScrollTime, minDate, maxDate, emptyContentMessage, emptySlotPopover, onPreviousDayClick, onNextDayClick, onCalendarDateSelect, onTodayClick, onEmptySlotClick, blockedMessage, onClickHiddenSlots, "data-testid": testId, ...otherProps }: ScheduleProps) => import("react/jsx-runtime").JSX.Element;

package/schedule/schedule.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule.js","sources":["../../src/schedule/schedule.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ErrorDisplay } from \"../error-display\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport * as styles from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { CommonScheduleViewProps, ScheduleProps } from \"./types\";\n\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const isSmallScreen = useMaxWidthMediaQuery(\"lg\");\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n    let visibleServiceData = filteredServiceData;\n    if (isSmallScreen) {\n        visibleServiceData =\n            filteredServiceData.length > 0\n                ? [filteredServiceData[visibleServiceIdx]]\n                : [];\n    }\n    const showPrevArrow = isSmallScreen && visibleServiceIdx > 0;\n    const showNextArrow =\n        isSmallScreen && visibleServiceIdx < filteredServiceData.length - 1;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderEmptyContent = () => (\n        <div className={clsx(styles.emptyTableContainer, \"empty-container\")}>\n            <ErrorDisplay\n                className={styles.noResultsFound}\n                type=\"no-item-found\"\n                description={emptyContentMessage}\n            />\n        </div>\n    );\n\n    const commonScheduleViewProps: CommonScheduleViewProps = {\n        date,\n        loading,\n        minTime,\n        maxTime,\n        initialScrollTime,\n        containerRef: contentContainerRef,\n        blockedMessage,\n    };\n\n    const renderScheduleView = () => (\n        <div\n            className={styles.scheduleBodyContainer}\n            ref={contentContainerRef}\n            data-id=\"schedule-container\"\n        >\n            {effectiveView === \"day\" ? (\n                <ScheduleDayView\n                    {...commonScheduleViewProps}\n                    serviceData={visibleServiceData}\n                    emptySlotPopover={emptySlotPopover}\n                    isMobile={isSmallScreen}\n                    onNextService={handleNextService}\n                    onPrevService={handlePrevService}\n                    showPrevArrow={showPrevArrow}\n                    showNextArrow={showNextArrow}\n                    onEmptySlotClick={onEmptySlotClick}\n                />\n            ) : (\n                <ScheduleWeekView\n                    {...commonScheduleViewProps}\n                    serviceData={serviceData}\n                    onClickHiddenSlots={onClickHiddenSlots}\n                />\n            )}\n        </div>\n    );\n\n    return (\n        <div\n            id={id}\n            className={clsx(\n                styles.container,\n                loading && styles.containerLoading,\n                className\n            )}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            {isEmptyContent ? renderEmptyContent() : renderScheduleView()}\n        </div>\n    );\n};\n"],"names":["Schedule","_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","isSmallScreen","useMaxWidthMediaQuery","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","showPrevArrow","showNextArrow","useEffect","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","commonScheduleViewProps","containerRef","_jsxs","Object","assign","clsx","styles.container","styles.containerLoading","children","_jsx","ScheduleHeader","onViewChange","newView","styles.emptyTableContainer","ErrorDisplay","styles.noResultsFound","type","description","styles.scheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","ScheduleWeekView"],"mappings":"6oCAYO,MAAMA,EAAYC,IAAA,IAAAC,GACrBA,EAAEC,UACFA,EAASC,KACTA,EAAO,MAAKC,KACZA,EAAIC,YACJA,EAAWC,QACXA,GAAU,EAAKC,QACfA,EAAU,QAAOC,QACjBA,EAAU,QAAOC,kBACjBA,EAAoBF,EAAOG,QAC3BA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,iBACnBA,EAAgBC,mBAChBA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,iBACZA,EAAgBC,eAChBA,EAAcC,mBACdA,EACA,cAAeC,EAAS,YAAUrB,EAC/BsB,EAAUC,EAAAvB,EAtBQ,CAAA,KAAA,YAAA,OAAA,OAAA,cAAA,UAAA,UAAA,UAAA,oBAAA,UAAA,UAAA,sBAAA,mBAAA,qBAAA,iBAAA,uBAAA,eAAA,mBAAA,iBAAA,qBAAA,gBA2BrB,MAAOwB,EAAaC,GAAkBC,EAAyBvB,GACzDwB,EAAgBC,EAAsB,MACtCC,EAAgBF,EAAgB,MAAQH,EACxCM,EAAsBC,EAAuB,OAC5CC,EAAmBC,GAAwBP,EAAS,GACrDQ,EAAwC,IAAvB7B,EAAY8B,QAAgBC,EAAAA,QAAQ/B,GACrDgC,EAAsBC,GACxB,IACIjC,EAAYkC,KAAKC,kCACVA,GAAO,CACVC,MAAOD,EAAQC,MAAMC,QAAQC,GAASA,EAAKvC,OAASA,SAE5D,CAACC,EAAaD,IAElB,IAAIwC,EAAqBP,EACrBV,IACAiB,EACIP,EAAoBF,OAAS,EACvB,CAACE,EAAoBL,IACrB,IAEd,MAAMa,EAAgBlB,GAAiBK,EAAoB,EACrDc,GACFnB,GAAiBK,EAAoBK,EAAoBF,OAAS,EAEtEY,GAAU,KACNd,EAAqB,EAAE,GACxB,CAACI,IAKJ,MAIMW,GAAmBC,GAAY,KACjChC,SAAAA,GAAgB,GACjB,CAACA,IAEEiC,GAAoBD,GAAY,KAC7BZ,GACLJ,GAAsBkB,GAClBA,EAAMd,EAAoBF,OAAS,EAAIgB,EAAM,EAAIA,GACpD,GACF,CAACd,IAEEe,GAAoBH,GAAY,KAClChB,GAAsBkB,GAASA,EAAM,EAAIA,EAAM,EAAIA,GAAK,GACzD,IAgBGE,GAAmD,CACrDjD,OACAE,UACAC,UACAC,UACAC,oBACA6C,aAAcxB,EACdX,kBA+BJ,OACIoC,EAAA,MAAAC,OAAAC,OAAA,CACIxD,GAAIA,EACJC,UAAWwD,EACPC,EACArD,GAAWsD,EACX1D,GACH,cACYmB,GACTC,EAAU,CAAAuC,SAAA,CAEdC,EAACC,EAAc,CAAA,UACH,kBACR3D,KAAMA,EACND,KAAM0B,EACNnB,QAASA,EACTC,QAASA,EACTG,mBAAoBA,EACpBC,eAAgBA,EAChBC,qBAAsBA,EACtBgD,aA3FcC,IACtBxC,EAAewC,EAAQ,EA2FfhD,aAAc+B,KApEtBc,EAAA,MAuEK5B,EAvEL,CAAKhC,UAAWwD,EAAKQ,EAA4B,mBAAkBL,SAC/DC,EAACK,GACGjE,UAAWkE,EACXC,KAAK,gBACLC,YAAa1D,MAiBjBV,UAAWqE,EACXC,IAAK1C,EAAmB,UAChB,qBAAoB+B,SAET,QAAlBhC,EACGiC,EAACW,mBACOpB,GAAuB,CAC3BhD,YAAauC,EACb/B,iBAAkBA,EAClB6D,SAAU/C,EACVgD,cAAezB,GACf0B,cAAexB,GACfP,cAAeA,EACfC,cAAeA,GACf5B,iBAAkBA,KAGtB4C,EAACe,EAAgBrB,OAAAC,OAAA,CAAA,EACTJ,IACJhD,YAAaA,EACbe,mBAAoBA,UA+B1B"}
+{"version":3,"file":"schedule.js","sources":["../../src/schedule/schedule.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ErrorDisplay } from \"../error-display\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport type { CommonScheduleViewProps } from \"./internal-types\";\nimport * as styles from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\n/**\n * A grid visualisation of slot-based time availability for services across day and week views.\n */\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const isSmallScreen = useMaxWidthMediaQuery(\"lg\");\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n    let visibleServiceData = filteredServiceData;\n    if (isSmallScreen) {\n        visibleServiceData =\n            filteredServiceData.length > 0\n                ? [filteredServiceData[visibleServiceIdx]]\n                : [];\n    }\n    const showPrevArrow = isSmallScreen && visibleServiceIdx > 0;\n    const showNextArrow =\n        isSmallScreen && visibleServiceIdx < filteredServiceData.length - 1;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderEmptyContent = () => (\n        <div className={clsx(styles.emptyTableContainer, \"empty-container\")}>\n            <ErrorDisplay\n                className={styles.noResultsFound}\n                type=\"no-item-found\"\n                description={emptyContentMessage}\n            />\n        </div>\n    );\n\n    const commonScheduleViewProps: CommonScheduleViewProps = {\n        date,\n        loading,\n        minTime,\n        maxTime,\n        initialScrollTime,\n        containerRef: contentContainerRef,\n        blockedMessage,\n    };\n\n    const renderScheduleView = () => (\n        <div\n            className={styles.scheduleBodyContainer}\n            ref={contentContainerRef}\n            data-id=\"schedule-container\"\n        >\n            {effectiveView === \"day\" ? (\n                <ScheduleDayView\n                    {...commonScheduleViewProps}\n                    serviceData={visibleServiceData}\n                    emptySlotPopover={emptySlotPopover}\n                    isMobile={isSmallScreen}\n                    onNextService={handleNextService}\n                    onPrevService={handlePrevService}\n                    showPrevArrow={showPrevArrow}\n                    showNextArrow={showNextArrow}\n                    onEmptySlotClick={onEmptySlotClick}\n                />\n            ) : (\n                <ScheduleWeekView\n                    {...commonScheduleViewProps}\n                    serviceData={serviceData}\n                    onClickHiddenSlots={onClickHiddenSlots}\n                />\n            )}\n        </div>\n    );\n\n    return (\n        <div\n            id={id}\n            className={clsx(\n                styles.container,\n                loading && styles.containerLoading,\n                className\n            )}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            {isEmptyContent ? renderEmptyContent() : renderScheduleView()}\n        </div>\n    );\n};\n"],"names":["Schedule","_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","isSmallScreen","useMaxWidthMediaQuery","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","showPrevArrow","showNextArrow","useEffect","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","commonScheduleViewProps","containerRef","_jsxs","Object","assign","clsx","styles.container","styles.containerLoading","children","_jsx","ScheduleHeader","onViewChange","newView","styles.emptyTableContainer","ErrorDisplay","styles.noResultsFound","type","description","styles.scheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","ScheduleWeekView"],"mappings":"6oCAgBO,MAAMA,EAAYC,IAAA,IAAAC,GACrBA,EAAEC,UACFA,EAASC,KACTA,EAAO,MAAKC,KACZA,EAAIC,YACJA,EAAWC,QACXA,GAAU,EAAKC,QACfA,EAAU,QAAOC,QACjBA,EAAU,QAAOC,kBACjBA,EAAoBF,EAAOG,QAC3BA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,iBACnBA,EAAgBC,mBAChBA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,iBACZA,EAAgBC,eAChBA,EAAcC,mBACdA,EACA,cAAeC,EAAS,YAAUrB,EAC/BsB,EAAUC,EAAAvB,EAtBQ,CAAA,KAAA,YAAA,OAAA,OAAA,cAAA,UAAA,UAAA,UAAA,oBAAA,UAAA,UAAA,sBAAA,mBAAA,qBAAA,iBAAA,uBAAA,eAAA,mBAAA,iBAAA,qBAAA,gBA2BrB,MAAOwB,EAAaC,GAAkBC,EAAyBvB,GACzDwB,EAAgBC,EAAsB,MACtCC,EAAgBF,EAAgB,MAAQH,EACxCM,EAAsBC,EAAuB,OAC5CC,EAAmBC,GAAwBP,EAAS,GACrDQ,EAAwC,IAAvB7B,EAAY8B,QAAgBC,EAAAA,QAAQ/B,GACrDgC,EAAsBC,GACxB,IACIjC,EAAYkC,KAAKC,kCACVA,GAAO,CACVC,MAAOD,EAAQC,MAAMC,QAAQC,GAASA,EAAKvC,OAASA,SAE5D,CAACC,EAAaD,IAElB,IAAIwC,EAAqBP,EACrBV,IACAiB,EACIP,EAAoBF,OAAS,EACvB,CAACE,EAAoBL,IACrB,IAEd,MAAMa,EAAgBlB,GAAiBK,EAAoB,EACrDc,GACFnB,GAAiBK,EAAoBK,EAAoBF,OAAS,EAEtEY,GAAU,KACNd,EAAqB,EAAE,GACxB,CAACI,IAKJ,MAIMW,GAAmBC,GAAY,KACjChC,SAAAA,GAAgB,GACjB,CAACA,IAEEiC,GAAoBD,GAAY,KAC7BZ,GACLJ,GAAsBkB,GAClBA,EAAMd,EAAoBF,OAAS,EAAIgB,EAAM,EAAIA,GACpD,GACF,CAACd,IAEEe,GAAoBH,GAAY,KAClChB,GAAsBkB,GAASA,EAAM,EAAIA,EAAM,EAAIA,GAAK,GACzD,IAgBGE,GAAmD,CACrDjD,OACAE,UACAC,UACAC,UACAC,oBACA6C,aAAcxB,EACdX,kBA+BJ,OACIoC,EAAA,MAAAC,OAAAC,OAAA,CACIxD,GAAIA,EACJC,UAAWwD,EACPC,EACArD,GAAWsD,EACX1D,GACH,cACYmB,GACTC,EAAU,CAAAuC,SAAA,CAEdC,EAACC,EAAc,CAAA,UACH,kBACR3D,KAAMA,EACND,KAAM0B,EACNnB,QAASA,EACTC,QAASA,EACTG,mBAAoBA,EACpBC,eAAgBA,EAChBC,qBAAsBA,EACtBgD,aA3FcC,IACtBxC,EAAewC,EAAQ,EA2FfhD,aAAc+B,KApEtBc,EAAA,MAuEK5B,EAvEL,CAAKhC,UAAWwD,EAAKQ,EAA4B,mBAAkBL,SAC/DC,EAACK,GACGjE,UAAWkE,EACXC,KAAK,gBACLC,YAAa1D,MAiBjBV,UAAWqE,EACXC,IAAK1C,EAAmB,UAChB,qBAAoB+B,SAET,QAAlBhC,EACGiC,EAACW,mBACOpB,GAAuB,CAC3BhD,YAAauC,EACb/B,iBAAkBA,EAClB6D,SAAU/C,EACVgD,cAAezB,GACf0B,cAAexB,GACfP,cAAeA,EACfC,cAAeA,GACf5B,iBAAkBA,KAGtB4C,EAACe,EAAgBrB,OAAAC,OAAA,CAAA,EACTJ,IACJhD,YAAaA,EACbe,mBAAoBA,UA+B1B"}

package/schedule/schedule.styles_fdy5a1.css

@@ -1,5 +1,5 @@
-.c1340rqu{min-width:320px;max-width:90vw;box-sizing:border-box;}
+@layer fds{.c1340rqu{min-width:320px;max-width:90vw;box-sizing:border-box;}
 .c1hp3fsj:hover{cursor:not-allowed;}
 .s1kpvet5{height:100%;position:relative;overflow:hidden;}
 .e1b7vyxh{display:-ms-grid;display:grid;overflow:auto;position:relative;-ms-grid-columns:280px auto;grid-template-columns:280px auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);}
-.niqne7l{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}
+.niqne7l{-ms-grid-column:1/-1;grid-column:1/-1;-ms-grid-row:2;grid-row:2;padding:var(--fds-spacing-72) 0;}}

package/schedule/shared/with-optional-popover.js

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

package/schedule/shared/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { SchedulePopoverProps } from \"../types\";\nimport * as styles from \"./with-optional-popover.styles\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return (\n        <PopoverTrigger\n            className={styles.popoverTrigger}\n            zIndex={2}\n            {...popoverTriggerProps}\n        />\n    );\n};\n"],"names":["WithOptionalPopover","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign","className","styles.popoverTrigger","zIndex"],"mappings":"g/BAaO,MAAMA,EAAsB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OACIC,EAACC,EAAcC,OAAAC,OAAA,CACXC,UAAWC,EACXC,OAAQ,GACJf,GACN"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { SchedulePopoverProps } from \"../types\";\nimport * as styles from \"./with-optional-popover.styles\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return (\n        <PopoverTrigger\n            className={styles.popoverTrigger}\n            zIndex={2}\n            {...popoverTriggerProps}\n        />\n    );\n};\n"],"names":["WithOptionalPopover","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign","className","styles.popoverTrigger","zIndex"],"mappings":"m/BAaO,MAAMA,EAAsB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OACIC,EAACC,EAAcC,OAAAC,OAAA,CACXC,UAAWC,EACXC,OAAQ,GACJf,GACN"}

package/schedule/shared/with-optional-popover.styles_7mv3p2.css

@@ -1 +1 @@
-.p1gm2ee7{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+@layer fds{.p1gm2ee7{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}

package/schedule/time-indicator/time-indicator.styles_1eaxyes.css

@@ -1,6 +1,6 @@
-.t1by6gzt{position:-webkit-sticky;position:sticky;z-index:3;}
+@layer fds{.t1by6gzt{position:-webkit-sticky;position:sticky;z-index:3;}
 .twl5iae{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:42px;background:var(--fds-colour-bg);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .t1eau6os{min-height:96px;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;color:var(--fds-colour-text-subtler);padding-right:var(--fds-spacing-8);font-weight:var(--fds-font-weight-bold);position:relative;}
 .h1y5vs3p{position:absolute;top:-18px;}
 .t1juq8yz{--fds-internal-schedule-timeIndicator-timelineCircle-top:0px;position:absolute;right:-6px;top:calc(var(--fds-internal-schedule-timeIndicator-timelineCircle-top) - 6px);width:var(--fds-spacing-12);height:var(--fds-spacing-12);border-radius:var(--fds-radius-full);background:var(--fds-colour-icon-primary);z-index:4;}
-.t1wl3tbi{display:none;}
+.t1wl3tbi{display:none;}}