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

package/shared/dropdown-list-v2/nested-dropdown-list.styles.js

@@ -1,55 +0,0 @@
-import{MinusSquareFillIcon as i}from"@lifesg/react-icons/minus-square-fill";import e,{css as t}from"styled-components";import{V3_Spacing as r,V3_Radius as n,V3_Colour as l,V3_Motion as o}from"../../v3_theme/index.js";const h=e.li`
-    display: ${i=>i.$visible?"flex":"none"};
-`,s=e.div`
-    flex: 1;
-    display: flex;
-    align-items: flex-start;
-    gap: ${r["spacing-8"]};
-    padding: ${r["spacing-12"]} ${r["spacing-8"]};
-    cursor: ${i=>i.$toggleable?"default":"pointer"};
-    overflow: hidden; // required for label to truncate properly
-    border-radius: ${n.none};
-    outline: none;
-
-    ${i=>i.$active&&t`
-            background: ${l["bg-hover"]};
-        `}
-`,a=e.div`
-    height: 1px;
-    width: calc(
-        (1lh + ${r["spacing-8"]}) * ${i=>i.$level}
-    );
-`,d=e.div`
-    width: 1lh;
-    height: 1lh;
-    color: ${l["icon-primary"]};
-    cursor: pointer;
-
-    svg {
-        width: 1lh;
-        height: 1lh;
-        transition: transform ${o["duration-350"]}
-            ${o["ease-standard"]};
-
-        ${i=>{if(i.$expanded)return t`
-                    transform: rotate(90deg);
-                `}}
-    }
-`,g=e.div`
-    width: 1lh;
-    height: 1lh;
-    margin-right: ${r["spacing-8"]};
-`,c=e.div`
-    flex-shrink: 0;
-    height: 1lh;
-    width: ${i=>i.$hasNestedSiblings?"1lh":r["spacing-16"]};
-
-    display: flex;
-    justify-content: center;
-`,p=e(i)`
-    flex-shrink: 0;
-    height: 1lh;
-    width: lh;
-    r: ${l["icon-selected"]};
-`;export{p as CheckboxMixedIndicator,d as ExpandButton,a as Indent,s as ListItem,h as ListItemContainer,c as SelectionIndicator,g as UnexpandableIndicator};
-//# sourceMappingURL=nested-dropdown-list.styles.js.map

package/shared/dropdown-list-v2/nested-dropdown-list.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nested-dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list-v2/nested-dropdown-list.styles.tsx"],"sourcesContent":["import { MinusSquareFillIcon } from \"@lifesg/react-icons/minus-square-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion, V3_Radius, V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListItemStyleProps {\n    $active?: boolean;\n    $visible?: boolean;\n    $toggleable?: boolean;\n}\n\ninterface IndentStyleProps {\n    $level?: number;\n}\n\ninterface IndicatorStyleProps {\n    $hasNestedSiblings?: boolean;\n}\n\ninterface ExpandButtonStyleProps {\n    $expanded?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItemContainer = styled.li<ListItemStyleProps>`\n    display: ${(props) => (props.$visible ? \"flex\" : \"none\")};\n`;\n\nexport const ListItem = styled.div<ListItemStyleProps>`\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]};\n    cursor: ${(props) => (props.$toggleable ? \"default\" : \"pointer\")};\n    overflow: hidden; // required for label to truncate properly\n    border-radius: ${V3_Radius[\"none\"]};\n    outline: none;\n\n    ${(props) =>\n        props.$active &&\n        css`\n            background: ${V3_Colour[\"bg-hover\"]};\n        `}\n`;\n\nexport const Indent = styled.div<IndentStyleProps>`\n    height: 1px;\n    width: calc(\n        (1lh + ${V3_Spacing[\"spacing-8\"]}) * ${(props) => props.$level}\n    );\n`;\n\nexport const ExpandButton = styled.div<ExpandButtonStyleProps>`\n    width: 1lh;\n    height: 1lh;\n    color: ${V3_Colour[\"icon-primary\"]};\n    cursor: pointer;\n\n    svg {\n        width: 1lh;\n        height: 1lh;\n        transition: transform ${V3_Motion[\"duration-350\"]}\n            ${V3_Motion[\"ease-standard\"]};\n\n        ${(props) => {\n            if (props.$expanded) {\n                return css`\n                    transform: rotate(90deg);\n                `;\n            }\n        }}\n    }\n`;\n\nexport const UnexpandableIndicator = styled.div`\n    width: 1lh;\n    height: 1lh;\n    margin-right: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectionIndicator = styled.div<IndicatorStyleProps>`\n    flex-shrink: 0;\n    height: 1lh;\n    width: ${(props) =>\n        props.$hasNestedSiblings ? \"1lh\" : V3_Spacing[\"spacing-16\"]};\n\n    display: flex;\n    justify-content: center;\n`;\n\nexport const CheckboxMixedIndicator = styled(MinusSquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: lh;\n    r: ${V3_Colour[\"icon-selected\"]};\n`;\n"],"names":["ListItemContainer","styled","li","props","$visible","ListItem","div","V3_Spacing","$toggleable","V3_Radius","$active","css","V3_Colour","Indent","$level","ExpandButton","V3_Motion","$expanded","UnexpandableIndicator","SelectionIndicator","$hasNestedSiblings","CheckboxMixedIndicator","MinusSquareFillIcon"],"mappings":"yNAkCO,MAAMA,EAAoBC,EAAOC,EAAsB;eAC9CC,GAAWA,EAAMC,SAAW,OAAS;EAGxCC,EAAWJ,EAAOK,GAAuB;;;;WAI3CC,EAAW;eACPA,EAAW,iBAAiBA,EAAW;cACvCJ,GAAWA,EAAMK,YAAc,UAAY;;qBAErCC,EAAgB;;;MAG9BN,GACCA,EAAMO,SACNC,CAAG;0BACeC,EAAU;;EAIvBC,EAASZ,EAAOK,GAAqB;;;iBAGjCC,EAAW,mBAAoBJ,GAAUA,EAAMW;;EAInDC,EAAed,EAAOK,GAA2B;;;aAGjDM,EAAU;;;;;;gCAMSI,EAAU;cAC5BA,EAAU;;UAEbb,IACC,GAAIA,EAAMc,UACN,OAAON,CAAG;;iBAGd;;EAKCO,EAAwBjB,EAAOK,GAAG;;;oBAG3BC,EAAW;EAGlBY,EAAqBlB,EAAOK,GAAwB;;;aAGnDH,GACNA,EAAMiB,mBAAqB,MAAQb,EAAW;;;;EAMzCc,EAAyBpB,EAAOqB,EAAoB;;;;SAIxDV,EAAU;"}

package/shared/dropdown-list-v2/types.d.ts

@@ -1,134 +0,0 @@
-export type TruncateType = "middle" | "end";
-export type ItemsLoadStateType = "loading" | "fail" | "success";
-export type LabelDisplayType = "inline" | "next-line";
-export type DropdownVariantType = "small" | "default";
-export interface ListItemRenderArgs {
-    selected: boolean;
-}
-export interface ListItemDisplayProps {
-    title: string;
-    secondaryLabel?: string | undefined;
-}
-export interface DropdownCustomLabelProps {
-    searchPlaceholder?: string | undefined;
-    noResultsLabel?: string | undefined;
-    noResultsDescription?: React.ReactNode | undefined;
-    selectAllButtonLabel?: string | undefined;
-    clearAllButtonLabel?: string | undefined;
-    allSelectedLabel?: string | undefined;
-    multiSelectedLabel?: string | undefined;
-}
-export interface DropdownDisplayProps<T, V> {
-    /** Function to derive value from an item */
-    valueExtractor?: ((item: T) => V) | undefined;
-    /** Function to derive options display value from an item */
-    listExtractor?: ((item: T) => string | ListItemDisplayProps) | undefined;
-    /** Function to render custom component */
-    renderListItem?: ((item: T, args: ListItemRenderArgs) => JSX.Element) | undefined;
-    /**
-     * Function to render a custom call-to-action component at the bottom of the dropdown list.
-     * @param hideOptions - A function that can be called to hide the dropdown list.
-     * @param options - The currently displayed list items in the dropdown list.
-     * @returns A JSX.Element representing the custom call-to-action component.
-     */
-    renderCustomCallToAction?: ((hideOptions: () => void, options: T[]) => JSX.Element) | undefined;
-}
-export interface DropdownSearchProps<T> {
-    /** Specifying will render a search bar in the dropdown */
-    enableSearch?: boolean | undefined;
-    /** If specified, the default no results display will not be rendered */
-    hideNoResultsDisplay?: boolean | undefined;
-    /** @deprecated use `noResultsDescription` inside `customLabels` */
-    noResultsDescription?: React.ReactNode | undefined;
-    /** @deprecated use `searchPlaceholder` inside `customLabels` */
-    searchPlaceholder?: string | undefined;
-    /** Custom function to perform search when a user keys in a value in the search input */
-    searchFunction?: ((searchValue: string) => T[]) | undefined;
-    onSearch?: (() => void) | undefined;
-}
-export interface DropdownConfigProps {
-    multiSelect?: boolean | undefined;
-    maxSelectable?: number | undefined;
-    customLabels?: DropdownCustomLabelProps | undefined;
-    /**
-     * Used when items are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
-     */
-    itemsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
-    itemTruncationType?: TruncateType | undefined;
-    /** Specifies the maximum number of lines visible before the label is truncated for "end" type */
-    itemMaxLines?: number | undefined;
-    /** Specifies the variant type. Small type will have shorter height. Values: "default" | "small" */
-    variant?: DropdownVariantType | undefined;
-}
-export interface DropdownListProps<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T>, DropdownConfigProps {
-    listItems?: T[] | undefined;
-    selectedItems?: T[] | undefined;
-    disableItemFocus?: boolean | undefined;
-    listboxId?: string | undefined;
-    /** Specifying flex direction within item */
-    labelDisplayType?: LabelDisplayType | undefined;
-    /** Specifies the item for which the dropdown’s scroll position will be automatically adjusted */
-    topScrollItem?: T | undefined;
-    matchElementWidth?: boolean | undefined;
-    /** Custom width for the dropdown. When specified, takes precedence over matchElementWidth */
-    width?: string | undefined;
-    onSelectItem?: ((item: T, extractedValue: V) => void) | undefined;
-    onSelectAll?: (() => void) | undefined;
-    onDismiss?: ((setSelectorFocus?: boolean | undefined) => void) | undefined;
-    onRetry?: (() => void) | undefined;
-}
-export interface DropdownListApi {
-    refocus: (opts?: {
-        index?: number;
-        preferSelected?: boolean;
-    }) => void;
-}
-export interface NestedDropdownListLeafItem<T> {
-    key: string;
-    label: string;
-    value: T;
-    subItems?: never | undefined;
-}
-export interface NestedDropdownListParentItem<T> {
-    key: string;
-    label: string;
-    value: T;
-    subItems: NestedDropdownListItemProps<T>[];
-}
-export type NestedDropdownListItemProps<T> = NestedDropdownListLeafItem<T> | NestedDropdownListParentItem<T>;
-export interface NestedDropdownListLocalItem<T> {
-    item: NestedDropdownListItemProps<T>;
-    index: number;
-    indexInParent: number;
-    parentSetSize: number;
-    keyPath: string[];
-    parentIndex: number;
-    parentKeyPath: string[];
-    level: number;
-    visible: boolean;
-    expanded: boolean;
-    checked: "mixed" | true | false;
-    hasSubItems: boolean;
-    subItemIndexes: number[];
-    hasNestedSiblings: boolean;
-    matched: boolean;
-    hasMatchedSubItems: boolean;
-}
-export type ExpandMode = "default" | "expand" | "collapse";
-export interface NestedDropdownListProps<T> extends DropdownSearchProps<NestedDropdownListItemProps<T>>, DropdownConfigProps {
-    listItems: NestedDropdownListItemProps<T>[];
-    selectedKeyPaths: Set<string>;
-    listboxId?: string | undefined;
-    /** Specifies if items are expanded or collapsed when the dropdown is opened */
-    mode?: ExpandMode | undefined;
-    /** If specified, the category label is selectable */
-    selectableCategory?: boolean | undefined;
-    matchElementWidth?: boolean | undefined;
-    /** Custom width for the dropdown. When specified, takes precedence over matchElementWidth */
-    width?: string | undefined;
-    onSelectItem?: ((item: NestedDropdownListLocalItem<T>) => void) | undefined;
-    onSelectAll?: ((keyPaths: string[][], items: NestedDropdownListLocalItem<T>[]) => void) | undefined;
-    onRetry?: (() => void) | undefined;
-}

package/shared/fade-wrapper/fade-wrapper.style.d.ts

@@ -1,13 +0,0 @@
-interface FadeProps {
-    $backgroundColor?: string[];
-    $position?: "left" | "right";
-    $showIndicator?: boolean;
-}
-interface IndicatorButtonProps {
-    $position?: "left" | "right";
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Fade: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FadeProps>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FadeIndicatorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, IndicatorButtonProps>> & string & Omit<(props: import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};

package/shared/fade-wrapper/fade-wrapper.style.js

@@ -1,53 +0,0 @@
-import i,{css as n}from"styled-components";import{V3_Colour as t,V3_MediaQuery as o,V3_Spacing as e}from"../../v3_theme/index.js";import{ClickableIcon as r}from"../clickable-icon/clickable-icon.js";const l=i.div`
-    position: relative;
-    width: 100%;
-`,a=i.div`
-    width: 64px;
-    height: 100%;
-    top: 0;
-    position: absolute;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-
-    ${i=>{let e;const r="rgba(255,255,255,0.001)",l=t.bg(i);return e="left"===i.$position?`\n                left: 0;\n                background-image: linear-gradient(\n                    to right,\n                    ${i.$backgroundColor||(i.$showIndicator?`${l}, ${l}`:`${l}`)},\n                    ${r}\n                );\n            `:`\n                right: 0;\n                background-image: linear-gradient(\n                    to left,\n                    ${i.$backgroundColor||(i.$showIndicator?`${l}, ${l}`:`${l}`)},\n                    ${r}\n                );\n            `,n`
-            ${o.MaxWidth.lg} {
-                ${e}
-            }
-        `}};
-`,s=i.div`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    white-space: nowrap;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-`,d=i(r)`
-    display: none;
-
-    ${o.MaxWidth.lg} {
-        display: flex;
-        height: 100%;
-        width: 100%;
-        padding: unset;
-        align-items: center;
-
-        ${i=>"left"===i.$position?n`
-                    justify-content: left;
-                    padding-left: ${e["spacing-8"]};
-                `:n`
-                    justify-content: right;
-                    padding-right: ${e["spacing-8"]};
-                `}
-
-        svg {
-            color: ${t.icon};
-        }
-    }
-`;export{s as Content,a as Fade,d as FadeIndicatorButton,l as Wrapper};
-//# sourceMappingURL=fade-wrapper.style.js.map

package/shared/fade-wrapper/fade-wrapper.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fade-wrapper.style.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../../v3_theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\n\n// =============================================================================\n// STYLE TYPES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface FadeProps {\n    $backgroundColor?: string[];\n    $position?: \"left\" | \"right\";\n    $showIndicator?: boolean;\n}\n\ninterface IndicatorButtonProps {\n    $position?: \"left\" | \"right\";\n}\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n    width: 100%;\n`;\n\nexport const Fade = styled.div<FadeProps>`\n    width: 64px;\n    height: 100%;\n    top: 0;\n    position: absolute;\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n\n    ${(props) => {\n        let positionStyle: string;\n        const transparentColor = \"rgba(255,255,255,0.001)\";\n        const fadeColor = V3_Colour.bg(props);\n\n        if (props.$position === \"left\") {\n            positionStyle = `\n                left: 0;\n                background-image: linear-gradient(\n                    to right,\n                    ${\n                        props.$backgroundColor ||\n                        (props.$showIndicator\n                            ? `${fadeColor}, ${fadeColor}`\n                            : `${fadeColor}`)\n                    },\n                    ${transparentColor}\n                );\n            `;\n        } else {\n            positionStyle = `\n                right: 0;\n                background-image: linear-gradient(\n                    to left,\n                    ${\n                        props.$backgroundColor ||\n                        (props.$showIndicator\n                            ? `${fadeColor}, ${fadeColor}`\n                            : `${fadeColor}`)\n                    },\n                    ${transparentColor}\n                );\n            `;\n        }\n\n        return css`\n            ${V3_MediaQuery.MaxWidth.lg} {\n                ${positionStyle}\n            }\n        `;\n    }};\n`;\n\nexport const Content = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const FadeIndicatorButton = styled(ClickableIcon)<IndicatorButtonProps>`\n    display: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        height: 100%;\n        width: 100%;\n        padding: unset;\n        align-items: center;\n\n        ${(props) => {\n            if (props.$position === \"left\") {\n                return css`\n                    justify-content: left;\n                    padding-left: ${V3_Spacing[\"spacing-8\"]};\n                `;\n            } else {\n                return css`\n                    justify-content: right;\n                    padding-right: ${V3_Spacing[\"spacing-8\"]};\n                `;\n            }\n        }}\n\n        svg {\n            color: ${V3_Colour[\"icon\"]};\n        }\n    }\n`;\n"],"names":["Wrapper","styled","div","Fade","props","positionStyle","transparentColor","fadeColor","V3_Colour","bg","$position","$backgroundColor","$showIndicator","css","V3_MediaQuery","MaxWidth","lg","Content","FadeIndicatorButton","ClickableIcon","V3_Spacing"],"mappings":"sMAsBO,MAAMA,EAAUC,EAAOC,GAAG;;;EAKpBC,EAAOF,EAAOC,GAAc;;;;;;;;;MASlCE,IACC,IAAIC,EACJ,MAAMC,EAAmB,0BACnBC,EAAYC,EAAUC,GAAGL,GAgC/B,OA7BIC,EADoB,SAApBD,EAAMM,UACU,sIAKJN,EAAMO,mBACLP,EAAMQ,eACD,GAAGL,MAAcA,IACjB,GAAGA,8BAEXD,sCAIM,sIAKJF,EAAMO,mBACLP,EAAMQ,eACD,GAAGL,MAAcA,IACjB,GAAGA,8BAEXD,sCAKPO,CAAG;cACJC,EAAcC,SAASC;kBACnBX;;SAET;EAIIY,EAAUhB,EAAOC,GAAG;;;;;;;;;;;;EAcpBgB,EAAsBjB,EAAOkB,EAAoC;;;MAGxEL,EAAcC,SAASC;;;;;;;UAOlBZ,GACyB,SAApBA,EAAMM,UACCG,CAAG;;oCAEUO,EAAW;kBAGxBP,CAAG;;qCAEWO,EAAW;;;;qBAM3BZ,EAAgB;;;"}

package/shared/html-content/html-content.d.ts

@@ -1,5 +0,0 @@
-import type { V3_TypographySizeType } from "../../v3_theme/font/types";
-export interface HtmlContentStyleOptions {
-    textSize?: V3_TypographySizeType | undefined;
-}
-export declare const applyHtmlContentStyle: (options?: HtmlContentStyleOptions) => import("styled-components").RuleSet<object>;

package/shared/html-content/html-content.js

@@ -1,57 +0,0 @@
-import{css as e}from"styled-components";import{V3_Font as i,V3_Colour as t}from"../../v3_theme/index.js";const o=o=>{const{textSize:l}=o||{};return e`
-        // Text styling
-        ${l&&i[`${l}-regular`]}
-
-        strong {
-            font-weight: ${i.Spec["weight-semibold"]};
-            ${l&&i[`${l}-semibold`]};
-        }
-
-        p {
-            margin: 0;
-        }
-
-        // Link styling
-        a {
-            font-weight: ${i.Spec["weight-semibold"]};
-            ${l&&i[`${l}-semibold`]}
-            color: ${t.hyperlink};
-            text-decoration: underline;
-
-            svg {
-                color: ${t["icon-primary"]};
-                height: 1lh;
-                width: 1em;
-                margin-left: 0.4rem;
-                vertical-align: middle;
-            }
-
-            &:hover,
-            &:active,
-            &:visited,
-            &:focus {
-                color: ${t["hyperlink-hover"]};
-
-                svg {
-                    color: ${t["icon-hover"]};
-                }
-            }
-        }
-
-        // List styling
-        ul,
-        ol {
-            margin: 0;
-            padding: 0;
-            margin-left: 2.5rem;
-        }
-
-        ol {
-            list-style: decimal;
-        }
-
-        ul {
-            list-style: disc;
-        }
-    `};export{o as applyHtmlContentStyle};
-//# sourceMappingURL=html-content.js.map

package/shared/html-content/html-content.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"html-content.js","sources":["../../../src/shared/html-content/html-content.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font } from \"../../v3_theme\";\nimport type { V3_TypographySizeType } from \"../../v3_theme/font/types\";\n\nexport interface HtmlContentStyleOptions {\n    textSize?: V3_TypographySizeType | undefined;\n}\n\nexport const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => {\n    const { textSize } = options || {};\n\n    return css`\n        // Text styling\n        ${textSize && V3_Font[`${textSize}-regular`]}\n\n        strong {\n            font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n            ${textSize && V3_Font[`${textSize}-semibold`]};\n        }\n\n        p {\n            margin: 0;\n        }\n\n        // Link styling\n        a {\n            font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n            ${textSize && V3_Font[`${textSize}-semibold`]}\n            color: ${V3_Colour.hyperlink};\n            text-decoration: underline;\n\n            svg {\n                color: ${V3_Colour[\"icon-primary\"]};\n                height: 1lh;\n                width: 1em;\n                margin-left: 0.4rem;\n                vertical-align: middle;\n            }\n\n            &:hover,\n            &:active,\n            &:visited,\n            &:focus {\n                color: ${V3_Colour[\"hyperlink-hover\"]};\n\n                svg {\n                    color: ${V3_Colour[\"icon-hover\"]};\n                }\n            }\n        }\n\n        // List styling\n        ul,\n        ol {\n            margin: 0;\n            padding: 0;\n            margin-left: 2.5rem;\n        }\n\n        ol {\n            list-style: decimal;\n        }\n\n        ul {\n            list-style: disc;\n        }\n    `;\n};\n"],"names":["applyHtmlContentStyle","options","textSize","css","V3_Font","Spec","V3_Colour","hyperlink"],"mappings":"yGASO,MAAMA,EAAyBC,IAClC,MAAMC,SAAEA,GAAaD,GAAW,CAAA,EAEhC,OAAOE,CAAG;;UAEJD,GAAYE,EAAQ,GAAGF;;;2BAGNE,EAAQC,KAAK;cAC1BH,GAAYE,EAAQ,GAAGF;;;;;;;;;2BASVE,EAAQC,KAAK;cAC1BH,GAAYE,EAAQ,GAAGF;qBAChBI,EAAUC;;;;yBAIND,EAAU;;;;;;;;;;;yBAWVA,EAAU;;;6BAGNA,EAAU;;;;;;;;;;;;;;;;;;;;KAoBlC"}

package/shared/image-placeholder/image-placeholder.style.d.ts

@@ -1 +0,0 @@
-export declare const Placeholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/shared/image-placeholder/image-placeholder.style.js

@@ -1,15 +0,0 @@
-import t from"styled-components";import{V3_Colour as e}from"../../v3_theme/index.js";const o=t.div`
-    background-color: ${e["bg-stronger"]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-
-    svg {
-        min-width: 48px;
-        width: 18%;
-        height: auto;
-        color: ${e["icon-subtle"]};
-    }
-`;export{o as Placeholder};
-//# sourceMappingURL=image-placeholder.style.js.map

package/shared/image-placeholder/image-placeholder.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-placeholder.style.js","sources":["../../../src/shared/image-placeholder/image-placeholder.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../../v3_theme\";\n\nexport const Placeholder = styled.div`\n    background-color: ${V3_Colour[\"bg-stronger\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1rem;\n\n    svg {\n        min-width: 48px;\n        width: 18%;\n        height: auto;\n        color: ${V3_Colour[\"icon-subtle\"]};\n    }\n`;\n"],"names":["Placeholder","styled","div","V3_Colour"],"mappings":"qFAIO,MAAMA,EAAcC,EAAOC,GAAG;wBACbC,EAAU;;;;;;;;;;iBAUjBA,EAAU;;"}

package/shared/internal-calendar/calendar-dropdown.style.d.ts

@@ -1,5 +0,0 @@
-interface StyleProps {
-    $width: number;
-}
-export declare const CalendarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export {};

package/shared/internal-calendar/calendar-dropdown.style.js

@@ -1,18 +0,0 @@
-import i from"styled-components";import{V3_Spacing as t,V3_Border as e,V3_Colour as r,V3_Radius as d,V3_MediaQuery as o}from"../../v3_theme/index.js";const m=i.div`
-    --vertical-inset: ${t["spacing-24"]};
-    --horizontal-inset: ${t["spacing-20"]};
-    --header-bottom-spacing: ${t["spacing-4"]};
-
-    border: ${e["width-010"]} ${e.solid} ${r.border};
-    border-radius: ${d.sm};
-    overflow: hidden;
-
-    width: ${i=>i.$width}px;
-    max-width: 41rem;
-    min-width: 21rem;
-
-    ${o.MaxWidth.sm} {
-        min-width: 17.5rem;
-    }
-`;export{m as CalendarWrapper};
-//# sourceMappingURL=calendar-dropdown.style.js.map

package/shared/internal-calendar/calendar-dropdown.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar-dropdown.style.js","sources":["../../../src/shared/internal-calendar/calendar-dropdown.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $width: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const CalendarWrapper = styled.div<StyleProps>`\n    --vertical-inset: ${V3_Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${V3_Spacing[\"spacing-20\"]};\n    --header-bottom-spacing: ${V3_Spacing[\"spacing-4\"]};\n\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    border-radius: ${V3_Radius[\"sm\"]};\n    overflow: hidden;\n\n    width: ${(props) => props.$width}px;\n    max-width: 41rem;\n    min-width: 21rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        min-width: 17.5rem;\n    }\n`;\n"],"names":["CalendarWrapper","styled","div","V3_Spacing","V3_Border","solid","V3_Colour","border","V3_Radius","props","$width","V3_MediaQuery","MaxWidth","sm"],"mappings":"sJAoBO,MAAMA,EAAkBC,EAAOC,GAAe;wBAC7BC,EAAW;0BACTA,EAAW;+BACNA,EAAW;;cAE5BC,EAAU,gBAAgBA,EAAUC,SAASC,EAAUC;qBAChDC,EAAc;;;aAGrBC,GAAUA,EAAMC;;;;MAIxBC,EAAcC,SAASC;;;"}

package/shared/internal-calendar/calendar-manager.style.d.ts

@@ -1,38 +0,0 @@
-interface DropdownButtonStyleProps {
-    $expanded: boolean;
-    $visible?: boolean;
-}
-interface OverlayStyleProps {
-    $visible?: boolean;
-}
-export declare const ArrowLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const IconChevronDown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ToggleZone: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DefaultView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const OptionsOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, OverlayStyleProps>> & string;
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderInputDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, DropdownButtonStyleProps>> & string;
-export declare const DropdownText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const HeaderArrows: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ActionButtonSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};

package/shared/internal-calendar/calendar-manager.style.js

@@ -1,91 +0,0 @@
-import{ChevronDownIcon as i}from"@lifesg/react-icons/chevron-down";import{ChevronLeftIcon as t}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as e}from"@lifesg/react-icons/chevron-right";import o,{css as r}from"styled-components";import{Button as n}from"../../button/button.js";import{V3_Colour as a,V3_Font as d}from"../../v3_theme/index.js";import{ClickableIcon as l}from"../clickable-icon/clickable-icon.js";const s=r`
-    color: ${a.icon};
-    height: 1rem;
-    width: 1rem;
-`,p=o(t)`
-    ${s}
-`,m=o(e)`
-    ${s}
-`,g=o(i)`
-    ${s}
-    transition: transform 250ms ease-in-out;
-    margin-left: 0.5rem;
-`,c=o.div`
-    position: relative;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    padding-top: var(--vertical-inset);
-    padding-bottom: var(--vertical-inset);
-`,v=o.div`
-    display: flex;
-    flex: 1;
-    position: relative;
-`,f=o.div`
-    isolation: isolate;
-    width: 100%;
-
-    padding-left: var(--horizontal-inset);
-    padding-right: var(--horizontal-inset);
-`,h=o.div`
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background: ${a.bg};
-
-    padding-left: var(--horizontal-inset);
-    padding-right: var(--horizontal-inset);
-
-    ${i=>{if(!i.$visible)return r`
-                display: none;
-            `}}
-`,b=o.div`
-    display: flex;
-    justify-content: space-between;
-
-    padding-left: var(--header-horizontal-inset, var(--horizontal-inset));
-    padding-right: var(--header-horizontal-inset, var(--horizontal-inset));
-    padding-bottom: var(--header-bottom-spacing);
-`,u=o.div`
-    display: flex;
-`,x=o.button`
-    border: none;
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
-    background: transparent;
-    cursor: pointer;
-
-    ${i=>!1===i.$visible?r`
-                display: none;
-            `:i.$expanded?r`
-                ${g} {
-                    transform: rotate(180deg);
-                }
-            `:void 0};
-`,$=o.span`
-    ${d["body-md-regular"]}
-    color: ${a.text};
-`,y=o.div`
-    display: flex;
-`,z=o(l)`
-    margin: auto 0;
-    padding: 0.75rem;
-
-    &:disabled {
-        cursor: not-allowed;
-    }
-`,w=o.div`
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 1.5rem;
-
-    padding-left: var(--horizontal-inset);
-    padding-right: var(--horizontal-inset);
-`,j=o(n.Small)`
-    flex: 1;
-`;export{j as ActionButton,w as ActionButtonSection,p as ArrowLeft,m as ArrowRight,c as Container,f as DefaultView,x as DropdownButton,$ as DropdownText,b as Header,z as HeaderArrowButton,y as HeaderArrows,u as HeaderInputDropdown,g as IconChevronDown,h as OptionsOverlay,v as ToggleZone};
-//# sourceMappingURL=calendar-manager.style.js.map

package/shared/internal-calendar/calendar-manager.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar-manager.style.js","sources":["../../../src/shared/internal-calendar/calendar-manager.style.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { V3_Colour, V3_Font } from \"../../v3_theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface DropdownButtonStyleProps {\n    $expanded: boolean;\n    $visible?: boolean;\n}\n\ninterface OverlayStyleProps {\n    $visible?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n// -----------------------------------------------------------------------------\n// ICONS\n// -----------------------------------------------------------------------------\nconst iconStyle = css`\n    color: ${V3_Colour.icon};\n    height: 1rem;\n    width: 1rem;\n`;\n\nexport const ArrowLeft = styled(ChevronLeftIcon)`\n    ${iconStyle}\n`;\n\nexport const ArrowRight = styled(ChevronRightIcon)`\n    ${iconStyle}\n`;\n\nexport const IconChevronDown = styled(ChevronDownIcon)`\n    ${iconStyle}\n    transition: transform 250ms ease-in-out;\n    margin-left: 0.5rem;\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\nexport const Container = styled.div`\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n\n    padding-top: var(--vertical-inset);\n    padding-bottom: var(--vertical-inset);\n`;\n\nexport const ToggleZone = styled.div`\n    display: flex;\n    flex: 1;\n    position: relative;\n`;\n\nexport const DefaultView = styled.div`\n    isolation: isolate;\n    width: 100%;\n\n    padding-left: var(--horizontal-inset);\n    padding-right: var(--horizontal-inset);\n`;\n\nexport const OptionsOverlay = styled.div<OverlayStyleProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    background: ${V3_Colour.bg};\n\n    padding-left: var(--horizontal-inset);\n    padding-right: var(--horizontal-inset);\n\n    ${(props) => {\n        if (!props.$visible) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n\n// -----------------------------------------------------------------------------\n// HEADER\n// -----------------------------------------------------------------------------\nexport const Header = styled.div`\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: var(--header-horizontal-inset, var(--horizontal-inset));\n    padding-right: var(--header-horizontal-inset, var(--horizontal-inset));\n    padding-bottom: var(--header-bottom-spacing);\n`;\n\nexport const HeaderInputDropdown = styled.div`\n    display: flex;\n`;\n\nexport const DropdownButton = styled.button<DropdownButtonStyleProps>`\n    border: none;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem;\n    background: transparent;\n    cursor: pointer;\n\n    ${(props) => {\n        if (props.$visible === false) {\n            return css`\n                display: none;\n            `;\n        }\n\n        if (props.$expanded) {\n            return css`\n                ${IconChevronDown} {\n                    transform: rotate(180deg);\n                }\n            `;\n        }\n    }};\n`;\n\nexport const DropdownText = styled.span`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const HeaderArrows = styled.div`\n    display: flex;\n`;\n\nexport const HeaderArrowButton = styled(ClickableIcon)`\n    margin: auto 0;\n    padding: 0.75rem;\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// ACTION BUTTONS\n// -----------------------------------------------------------------------------\nexport const ActionButtonSection = styled.div`\n    display: flex;\n    gap: 0.5rem;\n    margin-top: 1.5rem;\n\n    padding-left: var(--horizontal-inset);\n    padding-right: var(--horizontal-inset);\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    flex: 1;\n`;\n"],"names":["iconStyle","css","V3_Colour","icon","ArrowLeft","styled","ChevronLeftIcon","ArrowRight","ChevronRightIcon","IconChevronDown","ChevronDownIcon","Container","div","ToggleZone","DefaultView","OptionsOverlay","bg","props","$visible","Header","HeaderInputDropdown","DropdownButton","button","$expanded","DropdownText","span","V3_Font","HeaderArrows","HeaderArrowButton","ClickableIcon","ActionButtonSection","ActionButton","Button","Small"],"mappings":"2aA2BA,MAAMA,EAAYC,CAAG;aACRC,EAAUC;;;EAKVC,EAAYC,EAAOC,EAAgB;MAC1CN;EAGOO,EAAaF,EAAOG,EAAiB;MAC5CR;EAGOS,EAAkBJ,EAAOK,EAAgB;MAChDV;;;EAQOW,EAAYN,EAAOO,GAAG;;;;;;;;EAUtBC,EAAaR,EAAOO,GAAG;;;;EAMvBE,EAAcT,EAAOO,GAAG;;;;;;EAQxBG,EAAiBV,EAAOO,GAAsB;;;;;;kBAMzCV,EAAUc;;;;;MAKrBC,IACC,IAAKA,EAAMC,SACP,OAAOjB,CAAG;;aAGd;EAOKkB,EAASd,EAAOO,GAAG;;;;;;;EASnBQ,EAAsBf,EAAOO,GAAG;;EAIhCS,EAAiBhB,EAAOiB,MAAgC;;;;;;;;MAQ9DL,IACwB,IAAnBA,EAAMC,SACCjB,CAAG;;cAKVgB,EAAMM,UACCtB,CAAG;kBACJQ;;;mBAFV;EAUKe,EAAenB,EAAOoB,IAAI;MACjCC,EAAQ;aACDxB,EAAgB;EAGhByB,EAAetB,EAAOO,GAAG;;EAIzBgB,EAAoBvB,EAAOwB,EAAc;;;;;;;EAYzCC,EAAsBzB,EAAOO,GAAG;;;;;;;EAShCmB,EAAe1B,EAAO2B,EAAOC,MAAM;;"}

package/shared/internal-calendar/day-cell/day-cell.style.d.ts

@@ -1,33 +0,0 @@
-import type { CellType, LabelType } from "./types";
-interface StyleProps {
-    $type: CellType | undefined;
-}
-interface LabelStyleProps {
-    $type: LabelType | undefined;
-    $disabled: boolean | undefined;
-    $interactive: boolean | null | undefined;
-}
-interface LabelWrapperProps {
-    $interactive: boolean | null | undefined;
-}
-interface IndicatorStyleProps {
-    $disabled: boolean | undefined;
-}
-export declare const Cell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LeftHalf: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$type"> & StyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const RightHalf: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$type"> & StyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const Circle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const LeftCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$type"> & StyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const RightCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$type"> & StyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const LabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LabelWrapperProps>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LabelStyleProps>> & string;
-export declare const Indicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndicatorStyleProps>> & string;
-export {};