npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1629) hide show

package/predictive-text-input/predictive-text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"predictive-text-input.js","sources":["../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n className,\n \"data-testid\": testId,\n selectedOption,\n minimumCharacters = 3,\n fetchOptions,\n placeholder = \"Enter here...\",\n readOnly = false,\n disabled = false,\n error,\n valueExtractor,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n const getDisplayValue = (item: T \| undefined): string => {\n if (!item) return \"\";\n return displayValueExtractor\n ? displayValueExtractor(item)\n : item.toString();\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [input, setInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [searchedInput, setSearchedInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [options, setOptions] = useState<T[]>([]);\n const [isLoading, setIsLoading] = useState<boolean>(true);\n const [isError, setIsError] = useState<boolean>(false);\n const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n !!selectedOption\n );\n const [prevOptionSelected, setPrevOptionSelected] = useState<T \| undefined>(\n selectedOption\n );\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const internalId = useId();\n const [resultAnnouncement, setResultAnnouncement] = useState<string \| null>(\n null\n );\n const instructionId = `${internalId}-instruction`;\n\n const nodeRef = useRef<HTMLDivElement \| null>(null);\n const selectorRef = useRef<HTMLInputElement \| null>(null);\n\n const fetchOptionsRef = useRef(fetchOptions);\n\n // =============================================================================\n // DEBOUNCE FUNCTIONS\n // =============================================================================\n const handleFetchOptions = useCallback(async (input: string) => {\n if (!fetchOptionsRef.current) return;\n setIsError(false);\n setIsLoading(true);\n try {\n const fetchedOptions = await fetchOptionsRef.current(input);\n setSearchedInput(input);\n setOptions(fetchedOptions ?? []);\n setIsLoading(false);\n } catch {\n setIsError(true);\n setIsLoading(false);\n }\n }, []);\n\n const fetchOptionsDebounced = useCallback(\n debounce((input: string) => {\n handleFetchOptions(input);\n }, 500),\n [handleFetchOptions]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n fetchOptionsRef.current = fetchOptions;\n }, [fetchOptions]);\n\n useEffect(() => {\n /**\n Should not fetch options for the following the scenario :\n * 1. When input < minimumCharacters\n * 2. When user selected option from dropdown becomes input\n * 3. Initial selectedOption passed in as input\n */\n if (input && input.length >= minimumCharacters) {\n if (!isOptionSelected) {\n setIsOpen(true);\n fetchOptionsDebounced(input);\n } else if (input !== searchedInput) {\n fetchOptionsDebounced(input);\n }\n } else {\n fetchOptionsDebounced.cancel();\n }\n\n if (input === \"\" && prevOptionSelected) {\n onSelectOption?.(undefined, undefined);\n handleDropdownDismiss();\n setPrevOptionSelected(undefined);\n }\n\n if (selectedOption && input !== getDisplayValue(selectedOption)) {\n setIsOptionSelected(false);\n }\n }, [input, selectedOption]);\n\n useEffect(() => {\n setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setPrevOptionSelected(selectedOption);\n setOptions([]);\n setIsOptionSelected(!!selectedOption);\n }, [selectedOption]);\n\n useEffect(() => {\n const state = getItemsLoadState();\n const count = options?.length ?? 0;\n\n if (state === \"loading\" && input.length >= minimumCharacters) {\n setResultAnnouncement(\"Loading suggested results\");\n return;\n }\n\n if (state === \"fail\") {\n setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n return;\n }\n\n if (isOpen && !isLoading && !isError) {\n if (count === 0) {\n setResultAnnouncement(input ? \"No results found.\" : null);\n } else {\n setResultAnnouncement(\n `${count} result${\n count > 1 ? \"s\" : \"\"\n } found. Press down arrow to scroll through the list.`\n );\n }\n }\n }, [options, input, isError, isLoading]);\n\n // =============================================================================\n // Cleanup: cancel debounce on unmount\n // =============================================================================\n useEffect(() => {\n return () => {\n fetchOptionsDebounced.cancel();\n };\n }, [fetchOptionsDebounced]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setInput(getDisplayValue(item));\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(true);\n setPrevOptionSelected(item);\n setIsOpen(false);\n onSelectOption?.(item, extractedValue);\n };\n\n const handleOpen = () => {\n if (!isOptionSelected && input.length >= minimumCharacters) {\n setIsFocused(true);\n }\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n };\n\n const handleNodeFocus = () => {\n setIsFocused(true);\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n !isOpen &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setIsFocused(false);\n handleOnBlur();\n }\n };\n\n const handleListDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n selectorRef.current?.focus();\n };\n\n const handleOnClear = () => {\n setInput(\"\");\n setOptions([]);\n setIsOptionSelected(false);\n setIsOpen(false);\n onSelectOption?.(undefined, undefined);\n };\n\n const handleOnBlur = () => {\n if (!isOptionSelected) {\n if (prevOptionSelected) {\n const prevValue = getDisplayValue(prevOptionSelected);\n setInput(prevValue);\n setIsOpen(false);\n } else {\n handleOnClear();\n }\n }\n };\n\n const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInput(e.target.value);\n setIsOptionSelected(false);\n };\n\n const handleDropdownDismiss = (item?: T) => {\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(!!item);\n setOptions([]);\n setIsLoading(true);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getItemsLoadState = (): ItemsLoadStateType => {\n if (isError) return \"fail\";\n return isLoading ? \"loading\" : \"success\";\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputElement = () => {\n return (\n <InputWrapper\n className={className}\n data-testid={testId}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={isFocused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <VisuallyHidden id={instructionId} aria-hidden>\n Type in {minimumCharacters} or more characters for suggested\n results.\n </VisuallyHidden>\n {resultAnnouncement && (\n <VisuallyHidden aria-live=\"polite\">\n {resultAnnouncement}\n </VisuallyHidden>\n )}\n <Input\n role=\"combobox\"\n ref={selectorRef}\n id={internalId}\n type=\"text\"\n value={input}\n onChange={handleTyping}\n placeholder={placeholder}\n readOnly={readOnly}\n disabled={disabled}\n allowClear\n onClear={handleOnClear}\n aria-expanded={isOpen}\n aria-controls={internalId}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n onBlur={\n input.length < minimumCharacters\n ? handleOnBlur\n : undefined\n }\n styleType=\"no-border\"\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n {...otherProps}\n />\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <>\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n itemsLoadState={getItemsLoadState()}\n itemTruncationType={\"end\"}\n itemMaxLines={1}\n labelDisplayType={\"next-line\"}\n disableItemFocus\n onRetry={() => handleFetchOptions(input)}\n width={dropdownWidth}\n matchElementWidth\n />\n </>\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderInputElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["PredictiveTextInput","_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"predictive-text-input.js","sources":["../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n className,\n \"data-testid\": testId,\n selectedOption,\n minimumCharacters = 3,\n fetchOptions,\n placeholder = \"Enter here...\",\n readOnly = false,\n disabled = false,\n error,\n valueExtractor,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n const getDisplayValue = (item: T \| undefined): string => {\n if (!item) return \"\";\n return displayValueExtractor\n ? displayValueExtractor(item)\n : item.toString();\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [input, setInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [searchedInput, setSearchedInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [options, setOptions] = useState<T[]>([]);\n const [isLoading, setIsLoading] = useState<boolean>(true);\n const [isError, setIsError] = useState<boolean>(false);\n const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n !!selectedOption\n );\n const [prevOptionSelected, setPrevOptionSelected] = useState<T \| undefined>(\n selectedOption\n );\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const internalId = useId();\n const [resultAnnouncement, setResultAnnouncement] = useState<string \| null>(\n null\n );\n const instructionId = `${internalId}-instruction`;\n\n const nodeRef = useRef<HTMLDivElement \| null>(null);\n const selectorRef = useRef<HTMLInputElement \| null>(null);\n\n const fetchOptionsRef = useRef(fetchOptions);\n\n // =============================================================================\n // DEBOUNCE FUNCTIONS\n // =============================================================================\n const handleFetchOptions = useCallback(async (input: string) => {\n if (!fetchOptionsRef.current) return;\n setIsError(false);\n setIsLoading(true);\n try {\n const fetchedOptions = await fetchOptionsRef.current(input);\n setSearchedInput(input);\n setOptions(fetchedOptions ?? []);\n setIsLoading(false);\n } catch {\n setIsError(true);\n setIsLoading(false);\n }\n }, []);\n\n const fetchOptionsDebounced = useCallback(\n debounce((input: string) => {\n handleFetchOptions(input);\n }, 500),\n [handleFetchOptions]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n fetchOptionsRef.current = fetchOptions;\n }, [fetchOptions]);\n\n useEffect(() => {\n /**\n Should not fetch options for the following the scenario :\n * 1. When input < minimumCharacters\n * 2. When user selected option from dropdown becomes input\n * 3. Initial selectedOption passed in as input\n */\n if (input && input.length >= minimumCharacters) {\n if (!isOptionSelected) {\n setIsOpen(true);\n fetchOptionsDebounced(input);\n } else if (input !== searchedInput) {\n fetchOptionsDebounced(input);\n }\n } else {\n fetchOptionsDebounced.cancel();\n }\n\n if (input === \"\" && prevOptionSelected) {\n onSelectOption?.(undefined, undefined);\n handleDropdownDismiss();\n setPrevOptionSelected(undefined);\n }\n\n if (selectedOption && input !== getDisplayValue(selectedOption)) {\n setIsOptionSelected(false);\n }\n }, [input, selectedOption]);\n\n useEffect(() => {\n setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setPrevOptionSelected(selectedOption);\n setOptions([]);\n setIsOptionSelected(!!selectedOption);\n }, [selectedOption]);\n\n useEffect(() => {\n const state = getItemsLoadState();\n const count = options?.length ?? 0;\n\n if (state === \"loading\" && input.length >= minimumCharacters) {\n setResultAnnouncement(\"Loading suggested results\");\n return;\n }\n\n if (state === \"fail\") {\n setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n return;\n }\n\n if (isOpen && !isLoading && !isError) {\n if (count === 0) {\n setResultAnnouncement(input ? \"No results found.\" : null);\n } else {\n setResultAnnouncement(\n `${count} result${\n count > 1 ? \"s\" : \"\"\n } found. Press down arrow to scroll through the list.`\n );\n }\n }\n }, [options, input, isError, isLoading]);\n\n // =============================================================================\n // Cleanup: cancel debounce on unmount\n // =============================================================================\n useEffect(() => {\n return () => {\n fetchOptionsDebounced.cancel();\n };\n }, [fetchOptionsDebounced]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setInput(getDisplayValue(item));\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(true);\n setPrevOptionSelected(item);\n setIsOpen(false);\n onSelectOption?.(item, extractedValue);\n };\n\n const handleOpen = () => {\n if (!isOptionSelected && input.length >= minimumCharacters) {\n setIsFocused(true);\n }\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n };\n\n const handleNodeFocus = () => {\n setIsFocused(true);\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n !isOpen &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setIsFocused(false);\n handleOnBlur();\n }\n };\n\n const handleListDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n selectorRef.current?.focus();\n };\n\n const handleOnClear = () => {\n setInput(\"\");\n setOptions([]);\n setIsOptionSelected(false);\n setIsOpen(false);\n onSelectOption?.(undefined, undefined);\n };\n\n const handleOnBlur = () => {\n if (!isOptionSelected) {\n if (prevOptionSelected) {\n const prevValue = getDisplayValue(prevOptionSelected);\n setInput(prevValue);\n setIsOpen(false);\n } else {\n handleOnClear();\n }\n }\n };\n\n const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInput(e.target.value);\n setIsOptionSelected(false);\n };\n\n const handleDropdownDismiss = (item?: T) => {\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(!!item);\n setOptions([]);\n setIsLoading(true);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getItemsLoadState = (): ItemsLoadStateType => {\n if (isError) return \"fail\";\n return isLoading ? \"loading\" : \"success\";\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputElement = () => {\n return (\n <InputWrapper\n className={className}\n data-testid={testId}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={isFocused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <VisuallyHidden id={instructionId} aria-hidden>\n Type in {minimumCharacters} or more characters for suggested\n results.\n </VisuallyHidden>\n {resultAnnouncement && (\n <VisuallyHidden aria-live=\"polite\">\n {resultAnnouncement}\n </VisuallyHidden>\n )}\n <Input\n role=\"combobox\"\n ref={selectorRef}\n id={internalId}\n type=\"text\"\n value={input}\n onChange={handleTyping}\n placeholder={placeholder}\n readOnly={readOnly}\n disabled={disabled}\n allowClear\n onClear={handleOnClear}\n aria-expanded={isOpen}\n aria-controls={internalId}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n onBlur={\n input.length < minimumCharacters\n ? handleOnBlur\n : undefined\n }\n styleType=\"no-border\"\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n {...otherProps}\n />\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <>\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n itemsLoadState={getItemsLoadState()}\n itemTruncationType={\"end\"}\n itemMaxLines={1}\n labelDisplayType={\"next-line\"}\n disableItemFocus\n onRetry={() => handleFetchOptions(input)}\n width={dropdownWidth}\n matchElementWidth\n />\n </>\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderInputElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["PredictiveTextInput","_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

@@ -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/radio-button/radio-button.styles_1c4v6v.css CHANGED Viewed

@@ -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/schedule/const.js CHANGED Viewed

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

package/schedule/const.js.map CHANGED Viewed

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

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r,Fragment as i}from"react/jsx-runtime";import{ChevronLeftIcon as t,ChevronRightIcon as n}from"@lifesg/react-icons";import{useRef as o,useMemo as l}from"react";import{ThemedLoadingSpinner as s}from"../../animations/themed-loading-spinner/themed-loading-spinner.js";import{DateHelper as c}from"../../util/date-helper.js";import{TimeHelper as a}from"../../util/time-helper.js";import{useTimelineOffset as m,useInitialScroll as d}from"../shared/hooks.js";import{minutesToTime as h,findSlotsStartingInTimeRange as u,calculateSlotOffset as p,isTimeCellCovered as f}from"../shared/utils.js";import{WithOptionalPopover as T}from"../shared/with-optional-popover.js";import{TimeIndicator as v}from"../time-indicator/time-indicator.js";import*as C from"./schedule-day-view.styles.js";const{ServiceContainer:S,ServiceColumn:g,ArrowContainer:y,ArrowButton:$,ServiceHeaderContainer:k,Title:b,Description:j,SlotContent:w,SlotTime:P,SlotAvailability:x,SlotCell:L,EmptySlot:M,SlotGrid:A,Timeline:W,SlotColumn:B,ScheduleContainer:D,LoadingContainer:N,HeaderContainer:R,BlankCell:z,BodyContainer:E}=C,H=({serviceData:C,isMobile:H,onNextService:I,onPrevService:G,onEmptySlotClick:O,showPrevArrow:U,showNextArrow:q,minTime:F,maxTime:J,initialScrollTime:K,containerRef:Q,loading:V,emptySlotPopover:X,blockedMessage:Y="Unavailable"})=>{const Z=m(F,J),_=d(V,F,K),ee=o(null),re=l((()=>a.generateTimings(30,"24hr",F,J)),[F,J]),ie=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&f(e.slots,r))(e,i)&&X){const r={startTime:i,endTime:c.addMinutesToTime(i,30),name:e.name};return X(r)}},te=(t,n)=>{const o=a.calculateDuration(t.startTime,t.endTime),l=p(t.startTime,n);return e(w,{$status:t.status,$duration:o,$offsetTop:l,onClick:e=>t.onClick&&t.onClick(t,e),children:o>=15&&r(i,{children:[r(P,{children:[a.parseInput(t.startTime,"12hr"),"–"," ",a.parseInput(t.endTime,"12hr")]}),e(x,{children:"blocked"===t.status?Y:`${t.booked} / ${t.capacity}`})]})})},ne=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=a.timeToMinutes(r),t=h(i+30);return u(e.slots,r,t)})(r,i);return t.length>0?e(L,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const o=ie(r,t,i);return e(T,{containerRef:Q,customPopover:o,children:te(t,i)},`${t.id}-${n}`)}))},i):e(L,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(O){const i=c.addMinutesToTime(e,30);O({startTime:e,endTime:i,name:r})}})(i,r.name),children:e(T,{containerRef:Q,customPopover:ie(r,void 0,i),children:e(M,{})})},i)};return e(D,{children:V?e(N,{children:e(s,{})}):r(i,{children:[r(R,{ref:ee,onScroll:e=>{ee.current&&_.current&&(_.current.scrollLeft=ee.current.scrollLeft)},$isMobile:H,children:[e(z,{}),e(S,{$columnCount:C.length,children:C.map((i=>r(g,{children:[H&&e(y,{children:U&&G&&e($,{styleType:"light",sizeType:"small",onClick:G,"aria-label":"Previous service",icon:e(t,{"aria-hidden":!0})})}),r(k,{children:[e(b,{children:i.name}),r(j,{children:[e("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),H&&q&&I&&e($,{styleType:"light",sizeType:"small",onClick:I,"aria-label":"Next service",icon:e(n,{"aria-hidden":!0})})]},i.id)))})]}),r(E,{ref:_,onScroll:e=>{if(ee.current&&_.current){const e=17,r=_.current.scrollWidth-_.current.clientWidth-e,i=_.current.scrollLeft;i>r?(_.current.scrollLeft=r,ee.current.scrollLeft=r):ee.current.scrollLeft=i}},children:[e(v,{minTime:F,maxTime:J,format:"24hr",timelineOffset:Z}),r(A,{$columnCount:C.length,children:[null!==Z&&e(W,{$top:Z}),C.map((r=>e(B,{children:re.map((e=>ne(r,e)))},r.id)))]})]})]})})};export{H as ScheduleDayView};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{ChevronLeftIcon as i,ChevronRightIcon as s}from"@lifesg/react-icons";import o from"clsx";import{useRef as l,useMemo as n}from"react";import{ThemedLoadingSpinner as a}from"../../animations/themed-loading-spinner/themed-loading-spinner.js";import{Button as m}from"../../button/button.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as d}from"../../typography/index.js";import{DateHelper as p}from"../../util/date-helper.js";import{TimeHelper as h}from"../../util/time-helper.js";import{useTimelineOffset as u,useInitialScroll as f}from"../shared/hooks.js";import{minutesToTime as v,findSlotsStartingInTimeRange as N,calculateSlotOffset as T,isTimeCellCovered as j}from"../shared/utils.js";import{ScheduleSlotContent as y}from"../schedule-slot-content/schedule-slot-content.js";import{WithOptionalPopover as g}from"../shared/with-optional-popover.js";import{TimeIndicator as b}from"../time-indicator/time-indicator.js";import{tokens as k,scheduleContainer as x,loadingContainer as S,blankCell as M,headerContainer as $,headerContainerMobile as C,bodyContainer as P,serviceContainer as w,serviceColumn as L,arrowContainer as D,arrowButton as R,serviceHeaderContainer as W,title as q,description as z,slotGrid as A,timeline as B,slotColumn as I,emptySlot as E,slotCell as G,slotCellDashed as O,slotContentAvailable as U,slotContentBlocked as F,slotContent as H,slotTime as J,slotAvailability as K}from"./schedule-day-view.styles.js";const Q=({slot:i,timeSlotStart:s,blockedMessage:o})=>{const l=T(i.startTime,s),n=h.calculateDuration(i.startTime,i.endTime);return e(y,{slot:i,offsetTop:l,tokens:k.slotContent,classNames:{container:H,blocked:F,available:U},children:n>=15&&t(r,{children:[t("span",{className:J,children:[h.parseInput(i.startTime,"12hr"),"–"," ",h.parseInput(i.endTime,"12hr")]}),e("span",{className:K,children:"blocked"===i.status?o:`${i.booked} / ${i.capacity}`})]})})},V=({serviceData:T,isMobile:y,onNextService:U,onPrevService:F,onEmptySlotClick:H,showPrevArrow:J,showNextArrow:K,minTime:V,maxTime:X,initialScrollTime:Y,containerRef:Z,loading:_,emptySlotPopover:ee,blockedMessage:te="Unavailable"})=>{const re=u(V,X),ie=f(_,V,Y),se=l(null),oe=l(null),le=l(null),ne=l(null),ae=n((()=>h.generateTimings(30,"24hr",V,X)),[V,X]);c(oe,{[k.serviceContainer.columnCount]:`${T.length}`}),c(le,{[k.slotGrid.columnCount]:`${T.length}`}),c(ne,{[k.timeline.top]:null===re?null:`${re}px`});const me=(e,t,r)=>{if(null==t?void 0:t.customPopover)return t.customPopover;if(!((e,t)=>!!e.slots&&j(e.slots,t))(e,r)&&ee){const t={startTime:r,endTime:p.addMinutesToTime(r,30),name:e.name};return ee(t)}},ce=(t,r)=>e(Q,{slot:t,timeSlotStart:r,blockedMessage:te}),de=e=>o(G,e.endsWith(":00")&&O),pe=(t,r)=>e("div",{className:de(r),onClick:()=>((e,t)=>{if(H){const r=p.addMinutesToTime(e,30);H({startTime:e,endTime:r,name:t})}})(r,t.name),"data-testid":`empty-slot-${t.id}-${r}`,children:e(g,{containerRef:Z,customPopover:me(t,void 0,r),children:e("div",{className:E})})},r),he=(t,r)=>{const i=((e,t)=>{if(!e.slots)return[];const r=h.timeToMinutes(t),i=v(r+30);return N(e.slots,t,i)})(t,r);return i.length>0?((t,r,i)=>e("div",{className:de(r),children:i.map(((i,s)=>e(g,{containerRef:Z,customPopover:me(t,i,r),children:ce(i,r)},`${i.id}-${s}`)))},r))(t,r,i):pe(t,r)};return e("div",{className:x,children:_?e("div",{className:S,children:e(a,{"data-testid":"loading-spinner"})}):t(r,{children:[t("div",{ref:se,onScroll:e=>{se.current&&ie.current&&(ie.current.scrollLeft=se.current.scrollLeft)},className:o($,y&&C),children:[e("div",{className:M}),e("div",{ref:oe,className:w,children:T.map((r=>t("div",{className:L,children:[y&&e("div",{className:D,children:J&&F&&e(m,{className:R,styleType:"light",sizeType:"small",onClick:F,"aria-label":"Previous service",icon:e(i,{"aria-hidden":!0})})}),t("div",{className:W,children:[e(d.BodyMD,{className:q,children:r.name}),t(d.BodySM,{className:z,children:[e("span",{children:r.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),y&&K&&U&&e(m,{className:R,styleType:"light",sizeType:"small",onClick:U,"aria-label":"Next service",icon:e(s,{"aria-hidden":!0})})]},r.id)))})]}),t("div",{className:P,ref:ie,onScroll:e=>{if(se.current&&ie.current){const e=17,t=ie.current.scrollWidth-ie.current.clientWidth-e,r=ie.current.scrollLeft;r>t?(ie.current.scrollLeft=t,se.current.scrollLeft=t):se.current.scrollLeft=r}},children:[e(b,{minTime:V,maxTime:X,format:"24hr",timelineOffset:re}),t("div",{ref:le,className:A,children:[null!==re&&e("div",{ref:ne,className:B}),T.map((t=>e("div",{className:I,children:ae.map((e=>he(t,e)))},t.id)))]})]})]})})};export{V as ScheduleDayView};
 //# sourceMappingURL=schedule-day-view.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"schedule-day-view.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport type { MouseEvent } from \"react\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n calculateSlotOffset,\n findSlotsStartingInTimeRange,\n isTimeCellCovered,\n minutesToTime,\n useInitialScroll,\n useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nconst {\n ServiceContainer,\n ServiceColumn,\n ArrowContainer,\n ArrowButton,\n ServiceHeaderContainer,\n Title,\n Description,\n SlotContent,\n SlotTime,\n SlotAvailability,\n SlotCell,\n EmptySlot,\n SlotGrid,\n Timeline,\n SlotColumn,\n ScheduleContainer,\n LoadingContainer,\n HeaderContainer,\n BlankCell,\n BodyContainer,\n} = styles;\n\nexport const ScheduleDayView = ({\n serviceData,\n isMobile,\n onNextService,\n onPrevService,\n onEmptySlotClick,\n showPrevArrow,\n showNextArrow,\n minTime,\n maxTime,\n initialScrollTime,\n containerRef,\n loading,\n emptySlotPopover,\n blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const timelineOffset = useTimelineOffset(minTime, maxTime);\n const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n const headerRef = useRef<HTMLDivElement>(null);\n const timeSlots = useMemo(\n () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n [minTime, maxTime]\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n // Handle empty slot click with slot details\n const handleEmptySlotClick = (time: string, serviceName: string) => {\n if (onEmptySlotClick) {\n const endTimeString = DateHelper.addMinutesToTime(time, 30);\n onEmptySlotClick({\n startTime: time,\n endTime: endTimeString,\n name: serviceName,\n });\n }\n };\n\n // Synchronize horizontal scrolling between header and body\n const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n if (headerRef.current && bodyRef.current) {\n // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n const SCROLL_BUFFER = 17;\n const maxScrollLeft =\n bodyRef.current.scrollWidth -\n bodyRef.current.clientWidth -\n SCROLL_BUFFER;\n const currentScrollLeft = bodyRef.current.scrollLeft;\n if (currentScrollLeft > maxScrollLeft) {\n bodyRef.current.scrollLeft = maxScrollLeft;\n headerRef.current.scrollLeft = maxScrollLeft;\n } else {\n headerRef.current.scrollLeft = currentScrollLeft;\n }\n }\n };\n const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n if (headerRef.current && bodyRef.current) {\n bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n // Find all slots that should be displayed in a given time cell\n const findSlotsForTimeCell = (\n service: ScheduleEntityProps,\n timeSlot: string\n ): ScheduleSlotProps[] => {\n if (!service.slots) return [];\n const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n const slots = findSlotsStartingInTimeRange(\n service.slots,\n timeSlot,\n nextTime\n );\n\n return slots;\n };\n\n // Check if a time slot is covered by any existing booking\n const isServiceTimeSlotCovered = (\n service: ScheduleEntityProps,\n timeSlot: string\n ): boolean => {\n return service.slots\n ? isTimeCellCovered(service.slots, timeSlot)\n : false;\n };\n\n const getPopoverConfig = (\n service: ScheduleEntityProps,\n slot: ScheduleSlotProps \| undefined,\n time: string\n ) => {\n if (slot?.customPopover) {\n return slot.customPopover;\n }\n if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n const endTimeString = DateHelper.addMinutesToTime(time, 30);\n const emptySlotData = {\n startTime: time,\n endTime: endTimeString,\n name: service.name,\n };\n return emptySlotPopover(emptySlotData);\n }\n\n return undefined;\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderHeader = () => {\n return (\n <ServiceContainer $columnCount={serviceData.length}>\n {serviceData.map((service) => (\n <ServiceColumn key={service.id}>\n {isMobile && (\n <ArrowContainer>\n {showPrevArrow && onPrevService && (\n <ArrowButton\n styleType=\"light\"\n sizeType=\"small\"\n onClick={onPrevService}\n aria-label=\"Previous service\"\n icon={<ChevronLeftIcon aria-hidden />}\n />\n )}\n </ArrowContainer>\n )}\n <ServiceHeaderContainer>\n <Title>{service.name}</Title>\n <Description>\n <span>\n {\n service.slots.filter(\n (cell) =>\n cell.status === \"available\"\n ).length\n }\n </span>{\" \"}\n available\n </Description>\n </ServiceHeaderContainer>\n {isMobile && showNextArrow && onNextService && (\n <ArrowButton\n styleType=\"light\"\n sizeType=\"small\"\n onClick={onNextService}\n aria-label=\"Next service\"\n icon={<ChevronRightIcon aria-hidden />}\n />\n )}\n </ServiceColumn>\n ))}\n </ServiceContainer>\n );\n };\n\n const renderSlotContent = (\n slot: ScheduleSlotProps,\n timeSlotStart: string\n ) => {\n const duration = TimeHelper.calculateDuration(\n slot.startTime,\n slot.endTime\n );\n const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n return (\n <SlotContent\n $status={slot.status}\n $duration={duration}\n $offsetTop={offsetTop}\n onClick={(e: MouseEvent) =>\n slot.onClick && slot.onClick(slot, e)\n }\n >\n {duration >= 15 && (\n <>\n <SlotTime>\n {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n {\"\\u2013\"}{\" \"}\n {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n </SlotTime>\n <SlotAvailability>\n {slot.status === \"blocked\"\n ? blockedMessage\n : `${slot.booked} / ${slot.capacity}`}\n </SlotAvailability>\n </>\n )}\n </SlotContent>\n );\n };\n\n const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n const slots = findSlotsForTimeCell(service, time);\n if (slots.length > 0) {\n return (\n <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n {slots.map((slot, index) => {\n const popoverConfig = getPopoverConfig(\n service,\n slot,\n time\n );\n return (\n <WithOptionalPopover\n key={`${slot.id}-${index}`}\n containerRef={containerRef}\n customPopover={popoverConfig}\n >\n {renderSlotContent(slot, time)}\n </WithOptionalPopover>\n );\n })}\n </SlotCell>\n );\n } else {\n return (\n <SlotCell\n key={time}\n $dashed={time.endsWith(\":00\")}\n onClick={() => handleEmptySlotClick(time, service.name)}\n >\n <WithOptionalPopover\n containerRef={containerRef}\n customPopover={getPopoverConfig(\n service,\n undefined,\n time\n )}\n >\n <EmptySlot />\n </WithOptionalPopover>\n </SlotCell>\n );\n }\n };\n\n const renderTimeSlotGrid = () => {\n return (\n <SlotGrid $columnCount={serviceData.length}>\n {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n {serviceData.map((service) => (\n <SlotColumn key={service.id}>\n {timeSlots.map((time) => renderSlotCell(service, time))}\n </SlotColumn>\n ))}\n </SlotGrid>\n );\n };\n\n return (\n <ScheduleContainer>\n {loading ? (\n <LoadingContainer>\n <ThemedLoadingSpinner />\n </LoadingContainer>\n ) : (\n <>\n {/* Service Name Header Row /}\n <HeaderContainer\n ref={headerRef}\n onScroll={handleHeaderScroll}\n $isMobile={isMobile}\n >\n <BlankCell />\n {renderHeader()}\n </HeaderContainer>\n\n <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n {/ Time labels /}\n <TimeIndicator\n minTime={minTime}\n maxTime={maxTime}\n format=\"24hr\"\n timelineOffset={timelineOffset}\n />\n {/ Time slot grid */}\n {renderTimeSlotGrid()}\n </BodyContainer>\n </>\n )}\n </ScheduleContainer>\n );\n};\n"],"names":["ServiceContainer","ServiceColumn","ArrowContainer","ArrowButton","ServiceHeaderContainer","Title","Description","SlotContent","SlotTime","SlotAvailability","SlotCell","EmptySlot","SlotGrid","Timeline","SlotColumn","ScheduleContainer","LoadingContainer","HeaderContainer","BlankCell","BodyContainer","styles","ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","parseInput","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","$isMobile","$columnCount","styleType","sizeType","icon","ChevronLeftIcon","filter","cell","ChevronRightIcon","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","$top"],"mappings":"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"}
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 clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { Button } from \"../../button\";\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n calculateSlotOffset,\n findSlotsStartingInTimeRange,\n isTimeCellCovered,\n minutesToTime,\n ScheduleSlotContent,\n useInitialScroll,\n useTimelineOffset,\n} from \"../schedule-slot-content\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\ninterface SlotContentItemProps {\n slot: ScheduleSlotProps;\n timeSlotStart: string;\n blockedMessage: string;\n}\n\nconst SlotContentItem = ({\n slot,\n timeSlotStart,\n blockedMessage,\n}: SlotContentItemProps) => {\n const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n return (\n <ScheduleSlotContent\n slot={slot}\n offsetTop={offsetTop}\n tokens={styles.tokens.slotContent}\n classNames={{\n container: styles.slotContent,\n blocked: styles.slotContentBlocked,\n available: styles.slotContentAvailable,\n }}\n >\n {duration >= 15 && (\n <>\n <span className={styles.slotTime}>\n {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n {\"\\u2013\"} {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n </span>\n <span className={styles.slotAvailability}>\n {slot.status === \"blocked\"\n ? blockedMessage\n : `${slot.booked} / ${slot.capacity}`}\n </span>\n </>\n )}\n </ScheduleSlotContent>\n );\n};\n\nexport const ScheduleDayView = ({\n serviceData,\n isMobile,\n onNextService,\n onPrevService,\n onEmptySlotClick,\n showPrevArrow,\n showNextArrow,\n minTime,\n maxTime,\n initialScrollTime,\n containerRef,\n loading,\n emptySlotPopover,\n blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const timelineOffset = useTimelineOffset(minTime, maxTime);\n const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n const headerRef = useRef<HTMLDivElement>(null);\n const serviceContainerRef = useRef<HTMLDivElement>(null);\n const slotGridRef = useRef<HTMLDivElement>(null);\n const timelineRef = useRef<HTMLDivElement>(null);\n const timeSlots = useMemo(\n () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n [minTime, maxTime]\n );\n\n useApplyStyle(serviceContainerRef, {\n [styles.tokens.serviceContainer.columnCount]: `${serviceData.length}`,\n });\n\n useApplyStyle(slotGridRef, {\n [styles.tokens.slotGrid.columnCount]: `${serviceData.length}`,\n });\n\n useApplyStyle(timelineRef, {\n [styles.tokens.timeline.top]:\n timelineOffset === null ? null : `${timelineOffset}px`,\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n // Handle empty slot click with slot details\n const handleEmptySlotClick = (time: string, serviceName: string) => {\n if (onEmptySlotClick) {\n const endTimeString = DateHelper.addMinutesToTime(time, 30);\n onEmptySlotClick({\n startTime: time,\n endTime: endTimeString,\n name: serviceName,\n });\n }\n };\n\n // Synchronize horizontal scrolling between header and body\n const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n if (headerRef.current && bodyRef.current) {\n // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n const SCROLL_BUFFER = 17;\n const maxScrollLeft =\n bodyRef.current.scrollWidth -\n bodyRef.current.clientWidth -\n SCROLL_BUFFER;\n const currentScrollLeft = bodyRef.current.scrollLeft;\n if (currentScrollLeft > maxScrollLeft) {\n bodyRef.current.scrollLeft = maxScrollLeft;\n headerRef.current.scrollLeft = maxScrollLeft;\n } else {\n headerRef.current.scrollLeft = currentScrollLeft;\n }\n }\n };\n const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n if (headerRef.current && bodyRef.current) {\n bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n // Find all slots that should be displayed in a given time cell\n const findSlotsForTimeCell = (\n service: ScheduleEntityProps,\n timeSlot: string\n ): ScheduleSlotProps[] => {\n if (!service.slots) return [];\n const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n const slots = findSlotsStartingInTimeRange(\n service.slots,\n timeSlot,\n nextTime\n );\n\n return slots;\n };\n\n // Check if a time slot is covered by any existing booking\n const isServiceTimeSlotCovered = (\n service: ScheduleEntityProps,\n timeSlot: string\n ): boolean => {\n return service.slots\n ? isTimeCellCovered(service.slots, timeSlot)\n : false;\n };\n\n const getPopoverConfig = (\n service: ScheduleEntityProps,\n slot: ScheduleSlotProps \| undefined,\n time: string\n ) => {\n if (slot?.customPopover) {\n return slot.customPopover;\n }\n if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n const endTimeString = DateHelper.addMinutesToTime(time, 30);\n const emptySlotData = {\n startTime: time,\n endTime: endTimeString,\n name: service.name,\n };\n return emptySlotPopover(emptySlotData);\n }\n\n return undefined;\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderHeader = () => {\n return (\n <div ref={serviceContainerRef} className={styles.serviceContainer}>\n {serviceData.map((service) => (\n <div key={service.id} className={styles.serviceColumn}>\n {isMobile && (\n <div className={styles.arrowContainer}>\n {showPrevArrow && onPrevService && (\n <Button\n className={styles.arrowButton}\n styleType=\"light\"\n sizeType=\"small\"\n onClick={onPrevService}\n aria-label=\"Previous service\"\n icon={<ChevronLeftIcon aria-hidden />}\n />\n )}\n </div>\n )}\n <div className={styles.serviceHeaderContainer}>\n <Typography.BodyMD className={styles.title}>\n {service.name}\n </Typography.BodyMD>\n <Typography.BodySM className={styles.description}>\n <span>\n {\n service.slots.filter(\n (cell) =>\n cell.status === \"available\"\n ).length\n }\n </span>{\" \"}\n available\n </Typography.BodySM>\n </div>\n {isMobile && showNextArrow && onNextService && (\n <Button\n className={styles.arrowButton}\n styleType=\"light\"\n sizeType=\"small\"\n onClick={onNextService}\n aria-label=\"Next service\"\n icon={<ChevronRightIcon aria-hidden />}\n />\n )}\n </div>\n ))}\n </div>\n );\n };\n\n const renderSlotContent = (\n slot: ScheduleSlotProps,\n timeSlotStart: string\n ) => {\n return (\n <SlotContentItem\n slot={slot}\n timeSlotStart={timeSlotStart}\n blockedMessage={blockedMessage}\n />\n );\n };\n\n const getSlotCellClassName = (time: string) =>\n clsx(styles.slotCell, time.endsWith(\":00\") && styles.slotCellDashed);\n\n const renderFilledSlotCell = (\n service: ScheduleEntityProps,\n time: string,\n slots: ScheduleSlotProps[]\n ) => {\n return (\n <div key={time} className={getSlotCellClassName(time)}>\n {slots.map((slot, index) => (\n <WithOptionalPopover\n key={`${slot.id}-${index}`}\n containerRef={containerRef}\n customPopover={getPopoverConfig(service, slot, time)}\n >\n {renderSlotContent(slot, time)}\n </WithOptionalPopover>\n ))}\n </div>\n );\n };\n\n const renderEmptySlotCell = (\n service: ScheduleEntityProps,\n time: string\n ) => {\n return (\n <div\n key={time}\n className={getSlotCellClassName(time)}\n onClick={() => handleEmptySlotClick(time, service.name)}\n data-testid={`empty-slot-${service.id}-${time}`}\n >\n <WithOptionalPopover\n containerRef={containerRef}\n customPopover={getPopoverConfig(service, undefined, time)}\n >\n <div className={styles.emptySlot} />\n </WithOptionalPopover>\n </div>\n );\n };\n\n const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n const slots = findSlotsForTimeCell(service, time);\n\n return slots.length > 0\n ? renderFilledSlotCell(service, time, slots)\n : renderEmptySlotCell(service, time);\n };\n\n const renderTimeSlotGrid = () => {\n return (\n <div ref={slotGridRef} className={styles.slotGrid}>\n {timelineOffset !== null && (\n <div ref={timelineRef} className={styles.timeline} />\n )}\n {serviceData.map((service) => (\n <div key={service.id} className={styles.slotColumn}>\n {timeSlots.map((time) => renderSlotCell(service, time))}\n </div>\n ))}\n </div>\n );\n };\n\n return (\n <div className={styles.scheduleContainer}>\n {loading ? (\n <div className={styles.loadingContainer}>\n <ThemedLoadingSpinner data-testid=\"loading-spinner\" />\n </div>\n ) : (\n <>\n {/* Service Name Header Row /}\n <div\n ref={headerRef}\n onScroll={handleHeaderScroll}\n className={clsx(\n styles.headerContainer,\n isMobile && styles.headerContainerMobile\n )}\n >\n <div className={styles.blankCell} />\n {renderHeader()}\n </div>\n\n <div\n className={styles.bodyContainer}\n ref={bodyRef}\n onScroll={handleBodyScroll}\n >\n {/ Time labels /}\n <TimeIndicator\n minTime={minTime}\n maxTime={maxTime}\n format=\"24hr\"\n timelineOffset={timelineOffset}\n />\n {/ Time slot grid */}\n {renderTimeSlotGrid()}\n </div>\n </>\n )}\n </div>\n );\n};\n"],"names":["SlotContentItem","slot","timeSlotStart","blockedMessage","offsetTop","calculateSlotOffset","startTime","duration","TimeHelper","calculateDuration","endTime","_jsx","ScheduleSlotContent","tokens","styles.tokens","slotContent","classNames","container","styles.slotContent","blocked","styles.slotContentBlocked","available","styles.slotContentAvailable","children","_jsxs","_Fragment","className","styles.slotTime","parseInput","styles.slotAvailability","status","booked","capacity","ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","serviceContainerRef","slotGridRef","timelineRef","timeSlots","useMemo","generateTimings","useApplyStyle","serviceContainer","columnCount","length","slotGrid","timeline","top","getPopoverConfig","service","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","DateHelper","addMinutesToTime","name","renderSlotContent","getSlotCellClassName","clsx","styles.slotCell","endsWith","styles.slotCellDashed","renderEmptySlotCell","onClick","serviceName","endTimeString","handleEmptySlotClick","id","WithOptionalPopover","undefined","styles.emptySlot","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","map","index","renderFilledSlotCell","styles.scheduleContainer","styles.loadingContainer","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","styles.headerContainer","styles.headerContainerMobile","styles.blankCell","styles.serviceContainer","styles.serviceColumn","styles.arrowContainer","Button","styles.arrowButton","styleType","sizeType","icon","ChevronLeftIcon","styles.serviceHeaderContainer","Typography","BodyMD","styles.title","BodySM","styles.description","filter","cell","ChevronRightIcon","styles.bodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","styles.slotGrid","styles.timeline","styles.slotColumn"],"mappings":"qyDA+BA,MAAMA,EAAkB,EACpBC,OACAC,gBACAC,qBAEA,MAAMC,EAAYC,EAAoBJ,EAAKK,UAAWJ,GAChDK,EAAWC,EAAWC,kBAAkBR,EAAKK,UAAWL,EAAKS,SAEnE,OACIC,EAACC,EAAmB,CAChBX,KAAMA,EACNG,UAAWA,EACXS,OAAQC,EAAcC,YACtBC,WAAY,CACRC,UAAWC,EACXC,QAASC,EACTC,UAAWC,GACdC,SAEAhB,GAAY,IACTiB,EAAAC,EAAA,CAAAF,SAAA,CACIC,EAAA,OAAA,CAAME,UAAWC,EAAeJ,SAAA,CAC3Bf,EAAWoB,WAAW3B,EAAKK,UAAW,QACtC,IAAQ,IAAGE,EAAWoB,WAAW3B,EAAKS,QAAS,WAEpDC,EAAA,OAAA,CAAMe,UAAWG,WACI,YAAhB5B,EAAK6B,OACA3B,EACA,GAAGF,EAAK8B,YAAY9B,EAAK+B,iBAIzB,EAIjBC,EAAkB,EAC3BC,cACAC,WACAC,gBACAC,gBACAC,mBACAC,gBACAC,gBACAC,UACAC,UACAC,oBACAC,eACAC,UACAC,oBACA3C,kBAAiB,kBAKjB,MAAM4C,GAAiBC,EAAkBP,EAASC,GAC5CO,GAAUC,EAAiBL,EAASJ,EAASE,GAC7CQ,GAAYC,EAAuB,MACnCC,GAAsBD,EAAuB,MAC7CE,GAAcF,EAAuB,MACrCG,GAAcH,EAAuB,MACrCI,GAAYC,GACd,IAAMjD,EAAWkD,gBAAgB,GAAI,OAAQjB,EAASC,IACtD,CAACD,EAASC,IAGdiB,EAAcN,GAAqB,CAC/B,CAACvC,EAAc8C,iBAAiBC,aAAc,GAAG3B,EAAY4B,WAGjEH,EAAcL,GAAa,CACvB,CAACxC,EAAciD,SAASF,aAAc,GAAG3B,EAAY4B,WAGzDH,EAAcJ,GAAa,CACvB,CAACzC,EAAckD,SAASC,KACD,OAAnBlB,GAA0B,KAAO,GAAGA,SAO5C,MAkEMmB,GAAmB,CACrBC,EACAlE,EACAmE,KAEA,GAAInE,aAAI,EAAJA,EAAMoE,cACN,OAAOpE,EAAKoE,cAEhB,IAjB6B,EAC7BF,EACAG,MAEOH,EAAQI,OACTC,EAAkBL,EAAQI,MAAOD,GAYlCG,CAAyBN,EAASC,IAAStB,GAAkB,CAC9D,MACM4B,EAAgB,CAClBpE,UAAW8D,EACX1D,QAHkBiE,EAAWC,iBAAiBR,EAAM,IAIpDS,KAAMV,EAAQU,MAElB,OAAO/B,GAAiB4B,EAC5B,CAEgB,EA0DdI,GAAoB,CACtB7E,EACAC,IAGIS,EAACX,EAAe,CACZC,KAAMA,EACNC,cAAeA,EACfC,eAAgBA,KAKtB4E,GAAwBX,GAC1BY,EAAKC,EAAiBb,EAAKc,SAAS,QAAUC,GAsB5CC,GAAsB,CACxBjB,EACAC,IAGIzD,EAAA,MAAA,CAEIe,UAAWqD,GAAqBX,GAChCiB,QAAS,IA1LQ,EAACjB,EAAckB,KACxC,GAAIhD,EAAkB,CAClB,MAAMiD,EAAgBZ,EAAWC,iBAAiBR,EAAM,IACxD9B,EAAiB,CACbhC,UAAW8D,EACX1D,QAAS6E,EACTV,KAAMS,GAEd,GAkLuBE,CAAqBpB,EAAMD,EAAQU,MAAK,cAC1C,cAAcV,EAAQsB,MAAMrB,IAAM7C,SAE/CZ,EAAC+E,EAAmB,CAChB9C,aAAcA,EACdyB,cAAeH,GAAiBC,OAASwB,EAAWvB,GAAK7C,SAEzDZ,EAAA,MAAA,CAAKe,UAAWkE,OATfxB,GAeXyB,GAAiB,CAAC1B,EAA8BC,KAClD,MAAMG,EAjKmB,EACzBJ,EACAG,KAEA,IAAKH,EAAQI,MAAO,MAAO,GAC3B,MAAMuB,EAAkBtF,EAAWuF,cAAczB,GAC3C0B,EAAWC,EAAcH,EAAkB,IAQjD,OANcI,EACV/B,EAAQI,MACRD,EACA0B,EAGQ,EAmJEG,CAAqBhC,EAASC,GAE5C,OAAOG,EAAMT,OAAS,EA5CG,EACzBK,EACAC,EACAG,IAGI5D,EAAA,MAAA,CAAgBe,UAAWqD,GAAqBX,GAAK7C,SAChDgD,EAAM6B,KAAI,CAACnG,EAAMoG,IACd1F,EAAC+E,EAAmB,CAEhB9C,aAAcA,EACdyB,cAAeH,GAAiBC,EAASlE,EAAMmE,GAAK7C,SAEnDuD,GAAkB7E,EAAMmE,IAJpB,GAAGnE,EAAKwF,MAAMY,QAHrBjC,GAuCRkC,CAAqBnC,EAASC,EAAMG,GACpCa,GAAoBjB,EAASC,EAAK,EAkB5C,OACIzD,EAAA,MAAA,CAAKe,UAAW6E,EAAwBhF,SACnCsB,EACGlC,EAAA,MAAA,CAAKe,UAAW8E,WACZ7F,EAAC8F,EAAoB,CAAA,cAAa,sBAGtCjF,EAAAC,EAAA,CAAAF,SAAA,CAEIC,EAAA,MAAA,CACIkF,IAAKvD,GACLwD,SA5MQC,IACpBzD,GAAU0D,SAAW5D,GAAQ4D,UAC7B5D,GAAQ4D,QAAQC,WAAa3D,GAAU0D,QAAQC,WACnD,EA0MgBpF,UAAWsD,EACP+B,EACA5E,GAAY6E,aAGhBrG,EAAA,MAAA,CAAKe,UAAWuF,IAlJ5BtG,EAAA,MAAA,CAAK+F,IAAKrD,GAAqB3B,UAAWwF,EAAuB3F,SAC5DW,EAAYkE,KAAKjC,GACd3C,EAAA,MAAA,CAAsBE,UAAWyF,EAAoB5F,SAAA,CAChDY,GACGxB,SAAKe,UAAW0F,WACX7E,GAAiBF,GACd1B,EAAC0G,GACG3F,UAAW4F,EACXC,UAAU,QACVC,SAAS,QACTnC,QAAShD,eACE,mBACXoF,KAAM9G,EAAC+G,EAAe,CAAA,eAAA,QAKtClG,EAAA,MAAA,CAAKE,UAAWiG,EAA6BpG,SAAA,CACzCZ,EAACiH,EAAWC,QAAOnG,UAAWoG,EAAYvG,SACrC4C,EAAQU,OAEbrD,EAACoG,EAAWG,OAAM,CAACrG,UAAWsG,EAAkBzG,SAAA,CAC5CZ,mBAEQwD,EAAQI,MAAM0D,QACTC,GACmB,cAAhBA,EAAKpG,SACXgC,SAEF,IAAG,kBAIlB3B,GAAYK,GAAiBJ,GAC1BzB,EAAC0G,GACG3F,UAAW4F,EACXC,UAAU,QACVC,SAAS,QACTnC,QAASjD,eACE,eACXqF,KAAM9G,EAACwH,EAAgB,CAAA,eAAA,QAtCzBhE,EAAQsB,WAoJlBjE,EAAA,MAAA,CACIE,UAAW0G,EACX1B,IAAKzD,GACL0D,SA1OMC,IACtB,GAAIzD,GAAU0D,SAAW5D,GAAQ4D,QAAS,CAEtC,MAAMwB,EAAgB,GAChBC,EACFrF,GAAQ4D,QAAQ0B,YAChBtF,GAAQ4D,QAAQ2B,YAChBH,EACEI,EAAoBxF,GAAQ4D,QAAQC,WACtC2B,EAAoBH,GACpBrF,GAAQ4D,QAAQC,WAAawB,EAC7BnF,GAAU0D,QAAQC,WAAawB,GAE/BnF,GAAU0D,QAAQC,WAAa2B,CAEvC,GA2N0ClH,SAAA,CAG1BZ,EAAC+H,EAAa,CACVjG,QAASA,EACTC,QAASA,EACTiG,OAAO,OACP5F,eAAgBA,KA5ChCvB,EAAA,MAAA,CAAKkF,IAAKpD,GAAa5B,UAAWkH,EAAerH,SAAA,CACzB,OAAnBwB,IACGpC,EAAA,MAAA,CAAK+F,IAAKnD,GAAa7B,UAAWmH,IAErC3G,EAAYkE,KAAKjC,GACdxD,EAAA,MAAA,CAAsBe,UAAWoH,EAAiBvH,SAC7CiC,GAAU4C,KAAKhC,GAASyB,GAAe1B,EAASC,MAD3CD,EAAQsB,gBA8CxB"}

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

@@ -1,99 +1,39 @@
-interface HeaderContainerStyleProps {
-    $isMobile: boolean;
-}
-interface ServiceContainerStyleProps {
-    $columnCount: number;
-}
-interface SlotGridStyleProps {
-    $columnCount: number;
-}
-interface SlotCellStyleProps {
-    $dashed?: boolean;
-}
-interface SlotContentStyleProps {
-    $status?: string;
-    $duration?: number;
-    $offsetTop?: number;
-}
-interface TimelineStyleProps {
-    $top: number;
-}
-export declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<((props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
-    Default: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Small: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Large: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ScheduleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & HeaderContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & HeaderContainerStyleProps, never>>> & string;
-export declare const BlankCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ServiceContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & ServiceContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & ServiceContainerStyleProps, never>>> & string;
-export declare const ServiceColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ServiceHeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const BodyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const SlotGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & SlotGridStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$columnCount"> & SlotGridStyleProps, never>>> & string;
-export declare const SlotColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const SlotCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$dashed"> & SlotCellStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$dashed"> & SlotCellStyleProps, never>>> & string;
-export declare const SlotContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof SlotContentStyleProps> & SlotContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, keyof SlotContentStyleProps> & SlotContentStyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("../..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const SlotTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const SlotAvailability: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const Timeline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$top"> & TimelineStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$top"> & TimelineStyleProps, never>>> & string;
-export declare const EmptySlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export {};
+export declare const tokens: {
+    serviceContainer: {
+        columnCount: string;
+    };
+    slotGrid: {
+        columnCount: string;
+    };
+    slotContent: {
+        offsetTop: string;
+        height: string;
+    };
+    timeline: {
+        top: string;
+    };
+};
+export declare const arrowButton: import("@linaria/core").LinariaClassName;
+export declare const arrowContainer: import("@linaria/core").LinariaClassName;
+export declare const scheduleContainer: import("@linaria/core").LinariaClassName;
+export declare const loadingContainer: import("@linaria/core").LinariaClassName;
+export declare const headerContainer: import("@linaria/core").LinariaClassName;
+export declare const headerContainerMobile: import("@linaria/core").LinariaClassName;
+export declare const blankCell: import("@linaria/core").LinariaClassName;
+export declare const serviceContainer: import("@linaria/core").LinariaClassName;
+export declare const serviceColumn: import("@linaria/core").LinariaClassName;
+export declare const serviceHeaderContainer: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const bodyContainer: import("@linaria/core").LinariaClassName;
+export declare const slotGrid: import("@linaria/core").LinariaClassName;
+export declare const slotColumn: import("@linaria/core").LinariaClassName;
+export declare const slotCell: import("@linaria/core").LinariaClassName;
+export declare const slotCellDashed: import("@linaria/core").LinariaClassName;
+export declare const slotContent: import("@linaria/core").LinariaClassName;
+export declare const slotContentBlocked: import("@linaria/core").LinariaClassName;
+export declare const slotContentAvailable: import("@linaria/core").LinariaClassName;
+export declare const slotTime: import("@linaria/core").LinariaClassName;
+export declare const slotAvailability: import("@linaria/core").LinariaClassName;
+export declare const timeline: import("@linaria/core").LinariaClassName;
+export declare const emptySlot: import("@linaria/core").LinariaClassName;

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

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