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

package/accordion/accordion.style.d.ts

@@ -1,5 +0,0 @@
-import { TitleStyleProps, TitleWrapperStyleProps } from "./types";
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TitleWrapperStyleProps> & TitleWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TitleWrapperStyleProps> & TitleWrapperStyleProps, never>>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "$showInMobile"> & TitleStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "$showInMobile"> & TitleStyleProps, never>>> & string;
-export declare const ExpandCollapseLink: 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, keyof import("react").Component<any, {}, any>>;

package/accordion/accordion.style.js

@@ -1,43 +0,0 @@
-import e,{css as t}from"styled-components";import{Button as i}from"../button/button.js";import{Border as o,Colour as n,MediaQuery as l,Font as r}from"../theme/index.js";const d=e.div`
-    width: 100%;
-    border-bottom: ${o["width-010"]} ${o.solid} ${n.border};
-`,a=e.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-    padding-bottom: 1rem;
-
-    ${l.MaxWidth.sm} {
-        justify-content: flex-end;
-    }
-
-    ${e=>{if(!e.$showTitleInMobile&&!e.$hasExpandAll)return t`
-                ${l.MaxWidth.sm} {
-                    display: none;
-                }
-            `}}
-`,m=e.h2`
-    display: flex;
-    align-self: flex-start;
-    flex: 1;
-
-    ${r["heading-md-bold"]}
-    color: ${n.text};
-
-    ${l.MaxWidth.sm} {
-        text-align: left;
-    }
-
-    ${e=>{if(!e.$showInMobile)return t`
-                ${l.MaxWidth.sm} {
-                    display: none;
-                    visibility: hidden;
-                }
-            `}}
-`,s=e(i.Small)`
-    padding: 1.75rem 1rem; // larger clickable area
-    margin: -1rem -1rem -1rem 0px;
-    white-space: nowrap;
-`;export{d as Content,s as ExpandCollapseLink,m as Title,a as TitleWrapper};
-//# sourceMappingURL=accordion.style.js.map

package/accordion/accordion.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.style.js","sources":["../../src/accordion/accordion.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, MediaQuery } from \"../theme\";\nimport { TitleStyleProps, TitleWrapperStyleProps } from \"./types\";\n\n// ============================================================================\n// STYLING\n// =============================================================================\nexport const Content = styled.div`\n    width: 100%;\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const TitleWrapper = styled.div<TitleWrapperStyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    padding-bottom: 1rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        justify-content: flex-end;\n    }\n\n    ${(props) => {\n        if (!props.$showTitleInMobile && !props.$hasExpandAll) {\n            return css`\n                ${MediaQuery.MaxWidth.sm} {\n                    display: none;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const Title = styled.h2<TitleStyleProps>`\n    display: flex;\n    align-self: flex-start;\n    flex: 1;\n\n    ${Font[\"heading-md-bold\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        text-align: left;\n    }\n\n    ${(props) => {\n        if (!props.$showInMobile) {\n            return css`\n                ${MediaQuery.MaxWidth.sm} {\n                    display: none;\n                    visibility: hidden;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ExpandCollapseLink = styled(Button.Small)`\n    padding: 1.75rem 1rem; // larger clickable area\n    margin: -1rem -1rem -1rem 0px;\n    white-space: nowrap;\n`;\n"],"names":["Content","styled","div","Border","solid","Colour","border","TitleWrapper","MediaQuery","MaxWidth","sm","props","$showTitleInMobile","$hasExpandAll","css","Title","h2","Font","$showInMobile","ExpandCollapseLink","Button","Small"],"mappings":"yKAQO,MAAMA,EAAUC,EAAOC,GAAG;;qBAEZC,EAAO,gBAAgBA,EAAOC,SAASC,EAAOC;EAGtDC,EAAeN,EAAOC,GAA2B;;;;;;;MAOxDM,EAAWC,SAASC;;;;MAInBC,IACC,IAAKA,EAAMC,qBAAuBD,EAAME,cACpC,OAAOC,CAAG;kBACJN,EAAWC,SAASC;;;aAI9B;EAIKK,EAAQd,EAAOe,EAAmB;;;;;MAKzCC,EAAK;aACEZ,EAAa;;MAEpBG,EAAWC,SAASC;;;;MAInBC,IACC,IAAKA,EAAMO,cACP,OAAOJ,CAAG;kBACJN,EAAWC,SAASC;;;;aAK9B;EAIKS,EAAqBlB,EAAOmB,EAAOC,MAAM;;;;"}

package/alert/alert.style.d.ts

@@ -1,39 +0,0 @@
-import { AlertSizeType, AlertType } from "./types";
-interface StyleProps {
-    $type: AlertType;
-    $sizeType: AlertSizeType;
-}
-export interface TextWrapperContainerStyleProps {
-    $showMore: boolean;
-    $hasActionLink: boolean;
-    $maxCollapsedHeight?: number;
-}
-export interface ShowMoreIconStyleProps {
-    $expanded: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const AlertIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const ActionLinkText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-    ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-    ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const ContentContainer: 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 TextWrapperContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TextWrapperContainerStyleProps> & TextWrapperContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TextWrapperContainerStyleProps> & TextWrapperContainerStyleProps, never>>> & string;
-export declare const TextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const ShowMoreButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const ChevronIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "$expanded"> & ShowMoreIconStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "$expanded"> & ShowMoreIconStyleProps, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};

package/alert/alert.style.js

@@ -1,82 +0,0 @@
-import{ChevronDownIcon as e}from"@lifesg/react-icons";import r,{css as i}from"styled-components";import{applyHtmlContentStyle as t}from"../shared/html-content/html-content.js";import{Spacing as o,Colour as s,Border as n,Font as a,Motion as l}from"../theme/index.js";import{Typography as c}from"../typography/typography.js";const d=r.div`
-    padding: ${o["spacing-8"]} ${o["spacing-16"]};
-    display: flex;
-
-    ${e=>{let r,t;switch(e.$type){case"error":r=s["bg-error"](e),t=s["border-error"](e);break;case"success":r=s["bg-success"](e),t=s["border-success"](e);break;case"warning":default:r=s["bg-warning"](e),t=s["border-warning"](e);break;case"info":r=s["bg-info"](e),t=s["border-info"](e);break;case"description":r=s["bg-strong"](e),t=s["border-strong"](e)}return i`
-            background: ${r};
-            border-left: ${n["width-020"]} ${n.solid}
-                ${t};
-        `}}
-`,m=r.div`
-    display: flex;
-    align-items: center;
-    height: 1lh;
-    margin-right: ${o["spacing-8"]};
-
-    ${e=>{let r;const t="small"===e.$sizeType?"1.25rem":"1.5rem";switch(e.$type){case"error":r=s["icon-error"](e);break;case"success":r=s["icon-success"](e);break;case"warning":default:r=s["icon-warning"](e);break;case"info":r=s["icon-info"](e);break;case"description":r=s["icon-subtle"](e)}return i`
-            svg {
-                color: ${r};
-                width: ${t};
-                height: ${t};
-            }
-        `}}
-`,g=r(c.LinkSM)`
-    ${e=>"small"===e.$sizeType?i`
-                ${a["body-sm-semibold"]}
-                margin-top: ${o["spacing-4"]};
-            `:i`
-                ${a["body-md-semibold"]}
-                margin-top: ${o["spacing-8"]};
-            `}
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-
-    svg {
-        height: 1rem;
-        width: 1rem;
-        margin-left: ${o["spacing-4"]};
-    }
-`,p=r.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow-wrap: anywhere;
-`,$=r.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    order: 1;
-    ${e=>{if(e.$showMore&&e.$hasActionLink)return i`
-                margin-bottom: ${o["spacing-8"]};
-            `}}
-    ${e=>{const r="linear-gradient(to bottom, black 50%, transparent 100%)";if(!e.$showMore&&e.$maxCollapsedHeight)return`\n                max-height: ${e.$maxCollapsedHeight}px;\n\t\t\t\toverflow: hidden;\n                -webkit-mask-image: ${r};\n                mask-image: ${r};\n\t\t\t`}}
-`,b=r.div`
-    color: ${s.text};
-
-    ${e=>"small"===e.$sizeType?t({textSize:"body-sm"}):t({textSize:"body-md"})}
-`,f=r.button`
-    ${e=>"small"===e.$sizeType?i`
-                ${a["body-sm-semibold"]}
-            `:i`
-                ${a["body-md-semibold"]}
-            `}
-
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    gap: ${o["spacing-4"]};
-    margin-top: ${o["spacing-8"]};
-    order: 2;
-
-    cursor: pointer;
-    user-select: none;
-    border: none;
-    background: transparent;
-
-    color: ${s["text-primary"]};
-`,h=r(e)`
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: transform ${l["duration-350"]} ${l["ease-standard"]};
-`;export{g as ActionLinkText,m as AlertIconWrapper,h as ChevronIcon,p as ContentContainer,f as ShowMoreButton,b as TextWrapper,$ as TextWrapperContainer,d as Wrapper};
-//# sourceMappingURL=alert.style.js.map

package/alert/alert.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.style.js","sources":["../../src/alert/alert.style.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { AlertSizeType, AlertType } from \"./types\";\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $type: AlertType;\n    $sizeType: AlertSizeType;\n}\nexport interface TextWrapperContainerStyleProps {\n    $showMore: boolean;\n    $hasActionLink: boolean;\n    $maxCollapsedHeight?: number;\n}\n\nexport interface ShowMoreIconStyleProps {\n    $expanded: boolean;\n}\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div<StyleProps>`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    display: flex;\n\n    ${(props) => {\n        let backgroundColor: string;\n        let borderColor: string;\n        switch (props.$type) {\n            case \"error\":\n                backgroundColor = Colour[\"bg-error\"](props);\n                borderColor = Colour[\"border-error\"](props);\n                break;\n            case \"success\":\n                backgroundColor = Colour[\"bg-success\"](props);\n                borderColor = Colour[\"border-success\"](props);\n                break;\n            case \"warning\":\n                backgroundColor = Colour[\"bg-warning\"](props);\n                borderColor = Colour[\"border-warning\"](props);\n                break;\n            case \"info\":\n                backgroundColor = Colour[\"bg-info\"](props);\n                borderColor = Colour[\"border-info\"](props);\n                break;\n            case \"description\":\n                backgroundColor = Colour[\"bg-strong\"](props);\n                borderColor = Colour[\"border-strong\"](props);\n                break;\n            default:\n                backgroundColor = Colour[\"bg-warning\"](props);\n                borderColor = Colour[\"border-warning\"](props);\n                break;\n        }\n\n        return css`\n            background: ${backgroundColor};\n            border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n                ${borderColor};\n        `;\n    }}\n`;\n\nexport const AlertIconWrapper = styled.div<StyleProps>`\n    display: flex;\n    align-items: center;\n    height: 1lh;\n    margin-right: ${Spacing[\"spacing-8\"]};\n\n    ${(props) => {\n        let iconColor: string;\n        const iconSize = props.$sizeType === \"small\" ? \"1.25rem\" : \"1.5rem\";\n        switch (props.$type) {\n            case \"error\":\n                iconColor = Colour[\"icon-error\"](props);\n                break;\n            case \"success\":\n                iconColor = Colour[\"icon-success\"](props);\n                break;\n            case \"warning\":\n                iconColor = Colour[\"icon-warning\"](props);\n                break;\n            case \"info\":\n                iconColor = Colour[\"icon-info\"](props);\n                break;\n            case \"description\":\n                iconColor = Colour[\"icon-subtle\"](props);\n                break;\n            default:\n                iconColor = Colour[\"icon-warning\"](props);\n                break;\n        }\n\n        return css`\n            svg {\n                color: ${iconColor};\n                width: ${iconSize};\n                height: ${iconSize};\n            }\n        `;\n    }}\n`;\n\nexport const ActionLinkText = styled(Typography.LinkSM)<StyleProps>`\n    ${(props) => {\n        if (props.$sizeType === \"small\")\n            return css`\n                ${Font[\"body-sm-semibold\"]}\n                margin-top: ${Spacing[\"spacing-4\"]};\n            `;\n        else {\n            return css`\n                ${Font[\"body-md-semibold\"]}\n                margin-top: ${Spacing[\"spacing-8\"]};\n            `;\n        }\n    }}\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n        margin-left: ${Spacing[\"spacing-4\"]};\n    }\n`;\n\nexport const ContentContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-wrap: anywhere;\n`;\n\nexport const TextWrapperContainer = styled.div<TextWrapperContainerStyleProps>`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    order: 1;\n    ${(props) => {\n        if (props.$showMore && props.$hasActionLink)\n            return css`\n                margin-bottom: ${Spacing[\"spacing-8\"]};\n            `;\n    }}\n    ${(props) => {\n        const gradient =\n            \"linear-gradient(to bottom, black 50%, transparent 100%)\";\n        if (!props.$showMore && props.$maxCollapsedHeight)\n            return `\n                max-height: ${props.$maxCollapsedHeight}px;\n\t\t\t\toverflow: hidden;\n                -webkit-mask-image: ${gradient};\n                mask-image: ${gradient};\n\t\t\t`;\n    }}\n`;\n\nexport const TextWrapper = styled.div<StyleProps>`\n    color: ${Colour.text};\n\n    ${(props) => {\n        if (props.$sizeType === \"small\") {\n            return applyHtmlContentStyle({ textSize: \"body-sm\" });\n        }\n        return applyHtmlContentStyle({ textSize: \"body-md\" });\n    }}\n`;\n\nexport const ShowMoreButton = styled.button<StyleProps>`\n    ${(props) => {\n        if (props.$sizeType === \"small\")\n            return css`\n                ${Font[\"body-sm-semibold\"]}\n            `;\n        else {\n            return css`\n                ${Font[\"body-md-semibold\"]}\n            `;\n        }\n    }}\n\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n    gap: ${Spacing[\"spacing-4\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n    order: 2;\n\n    cursor: pointer;\n    user-select: none;\n    border: none;\n    background: transparent;\n\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ChevronIcon = styled(ChevronDownIcon)<ShowMoreIconStyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n"],"names":["Wrapper","styled","div","Spacing","props","backgroundColor","borderColor","$type","Colour","css","Border","AlertIconWrapper","iconColor","iconSize","$sizeType","ActionLinkText","Typography","LinkSM","Font","ContentContainer","TextWrapperContainer","$showMore","$hasActionLink","gradient","$maxCollapsedHeight","TextWrapper","text","applyHtmlContentStyle","textSize","ShowMoreButton","button","ChevronIcon","ChevronDownIcon","$expanded","Motion"],"mappings":"mUA4BO,MAAMA,EAAUC,EAAOC,GAAe;eAC9BC,EAAQ,gBAAgBA,EAAQ;;;MAGxCC,IACC,IAAIC,EACAC,EACJ,OAAQF,EAAMG,OACV,IAAK,QACDF,EAAkBG,EAAO,YAAYJ,GACrCE,EAAcE,EAAO,gBAAgBJ,GACrC,MACJ,IAAK,UACDC,EAAkBG,EAAO,cAAcJ,GACvCE,EAAcE,EAAO,kBAAkBJ,GACvC,MACJ,IAAK,UAYL,QACIC,EAAkBG,EAAO,cAAcJ,GACvCE,EAAcE,EAAO,kBAAkBJ,GACvC,MAXJ,IAAK,OACDC,EAAkBG,EAAO,WAAWJ,GACpCE,EAAcE,EAAO,eAAeJ,GACpC,MACJ,IAAK,cACDC,EAAkBG,EAAO,aAAaJ,GACtCE,EAAcE,EAAO,iBAAiBJ,GAQ9C,OAAOK,CAAG;0BACQJ;2BACCK,EAAO,gBAAgBA,EAAc;kBAC9CJ;SACT;EAIIK,EAAmBV,EAAOC,GAAe;;;;oBAIlCC,EAAQ;;MAErBC,IACC,IAAIQ,EACJ,MAAMC,EAA+B,UAApBT,EAAMU,UAAwB,UAAY,SAC3D,OAAQV,EAAMG,OACV,IAAK,QACDK,EAAYJ,EAAO,cAAcJ,GACjC,MACJ,IAAK,UACDQ,EAAYJ,EAAO,gBAAgBJ,GACnC,MACJ,IAAK,UASL,QACIQ,EAAYJ,EAAO,gBAAgBJ,GACnC,MARJ,IAAK,OACDQ,EAAYJ,EAAO,aAAaJ,GAChC,MACJ,IAAK,cACDQ,EAAYJ,EAAO,eAAeJ,GAO1C,OAAOK,CAAG;;yBAEOG;yBACAC;0BACCA;;SAEjB;EAIIE,EAAiBd,EAAOe,EAAWC,OAAmB;MAC5Db,GACyB,UAApBA,EAAMU,UACCL,CAAG;kBACJS,EAAK;8BACOf,EAAQ;cAGnBM,CAAG;kBACJS,EAAK;8BACOf,EAAQ;;;;;;;;;uBAWfA,EAAQ;;EAIlBgB,EAAmBlB,EAAOC,GAAG;;;;;EAO7BkB,EAAuBnB,EAAOC,GAAmC;;;;;MAKvEE,IACC,GAAIA,EAAMiB,WAAajB,EAAMkB,eACzB,OAAOb,CAAG;iCACWN,EAAQ;aAC5B;MAENC,IACC,MAAMmB,EACF,0DACJ,IAAKnB,EAAMiB,WAAajB,EAAMoB,oBAC1B,MAAO,iCACWpB,EAAMoB,0FAEED,mCACRA,YAC1B;EAISE,EAAcxB,EAAOC,GAAe;aACpCM,EAAOkB;;MAEbtB,GACyB,UAApBA,EAAMU,UACCa,EAAsB,CAAEC,SAAU,YAEtCD,EAAsB,CAAEC,SAAU;EAIpCC,EAAiB5B,EAAO6B,MAAkB;MAChD1B,GACyB,UAApBA,EAAMU,UACCL,CAAG;kBACJS,EAAK;cAGJT,CAAG;kBACJS,EAAK;;;;;;WAQZf,EAAQ;kBACDA,EAAQ;;;;;;;;aAQbK,EAAO;EAGPuB,EAAc9B,EAAO+B,EAAwC;wBACjD5B,GAAWA,EAAM6B,UAAY,IAAM;4BAChCC,EAAO,mBAAmBA,EAAO;"}

package/avatar/avatar.style.d.ts

@@ -1,27 +0,0 @@
-import { AvatarSize } from "./types";
-export interface AvatarDisplayProps {
-    $sizeType?: AvatarSize;
-}
-export declare const AvatarDisplay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$sizeType"> & AvatarDisplayProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$sizeType"> & AvatarDisplayProps, never>>> & string;
-export declare const AvatarBaselineText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const AvatarBodySmallText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;

package/avatar/avatar.style.js

@@ -1,20 +0,0 @@
-import r,{css as e}from"styled-components";import{Colour as t}from"../theme/index.js";import{Typography as o}from"../typography/typography.js";const i=r.div`
-    border-radius: 50%;
-    background-color: ${t["bg-primary-subtler"]};
-    ${r=>"small"===r.$sizeType?e`
-                  width: 1.5rem;
-                  height: 1.5rem;
-              `:e`
-                  width: 2.5rem;
-                  height: 2.5rem;
-              `}
-
-    align-items: center;
-    justify-content: center;
-    display: flex;
-`,m=r(o.BodyBL)`
-    color: ${t["text-primary"]};
-`,p=r(o.BodySM)`
-    color: ${t["text-primary"]};
-`;export{m as AvatarBaselineText,p as AvatarBodySmallText,i as AvatarDisplay};
-//# sourceMappingURL=avatar.style.js.map

package/avatar/avatar.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.style.js","sources":["../../src/avatar/avatar.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { AvatarSize } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport interface AvatarDisplayProps {\n    $sizeType?: AvatarSize;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const AvatarDisplay = styled.div<AvatarDisplayProps>`\n    border-radius: 50%;\n    background-color: ${Colour[\"bg-primary-subtler\"]};\n    ${(props) => {\n        return props.$sizeType === \"small\"\n            ? css`\n                  width: 1.5rem;\n                  height: 1.5rem;\n              `\n            : css`\n                  width: 2.5rem;\n                  height: 2.5rem;\n              `;\n    }}\n\n    align-items: center;\n    justify-content: center;\n    display: flex;\n`;\n\nexport const AvatarBaselineText = styled(Typography.BodyBL)`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const AvatarBodySmallText = styled(Typography.BodySM)`\n    color: ${Colour[\"text-primary\"]};\n`;\n"],"names":["AvatarDisplay","styled","div","Colour","props","$sizeType","css","AvatarBaselineText","Typography","BodyBL","AvatarBodySmallText","BodySM"],"mappings":"+IAeO,MAAMA,EAAgBC,EAAOC,GAAuB;;wBAEnCC,EAAO;MACxBC,GAC4B,UAApBA,EAAMC,UACPC,CAAG;;;gBAIHA,CAAG;;;;;;;;EAWJC,EAAqBN,EAAOO,EAAWC,OAAO;aAC9CN,EAAO;EAGPO,EAAsBT,EAAOO,EAAWG,OAAO;aAC/CR,EAAO;"}

package/badge/badge.style.d.ts

@@ -1,15 +0,0 @@
-import { BadgeProps } from "./types";
-interface StyledBadgeProps {
-    $variant: BadgeProps["variant"];
-    $color: BadgeProps["color"];
-}
-interface BadgeContainerProps {
-    $isOverlay?: boolean;
-}
-interface BadgeWrapperProps extends BadgeContainerProps {
-    $offset?: [string, string];
-}
-export declare const BadgeOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$isOverlay"> & BadgeContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$isOverlay"> & BadgeContainerProps, never>>> & string;
-export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof BadgeWrapperProps> & BadgeWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof BadgeWrapperProps> & BadgeWrapperProps, never>>> & string;
-export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof StyledBadgeProps> & StyledBadgeProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof StyledBadgeProps> & StyledBadgeProps, never>>> & string;
-export {};

package/badge/badge.style.js

@@ -1,56 +0,0 @@
-import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius as i,Border as n}from"../theme/index.js";const s=e.span`
-    ${e=>e.$isOverlay&&r`
-            position: relative;
-            width: fit-content;
-            height: fit-content;
-        `}
-`,a=e.span`
-    ${e=>e.$isOverlay&&r`
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(50%, -25%)
-                ${e.$offset?`translate(${e.$offset[0]},${e.$offset[1]})`:""};
-        `}
-`,d=r`
-    min-width: 1.25rem;
-    padding: 0.25rem 0.375rem;
-    font-size: ${t.Spec["body-size-xs"]};
-    font-weight: ${t.Spec["weight-bold"]};
-    line-height: 1;
-`,$=r`
-    border-radius: 50%;
-    width: 0.5rem;
-    height: 0.5rem;
-`,c=e.span`
-    background-color: ${({$color:e})=>"important"===e?o["icon-error"]:o["bg-primary"]};
-    color: ${o["text-inverse"]};
-    font-weight: ${t.Spec["weight-bold"]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: fit-content;
-    ${({$variant:e,$color:t})=>{switch(e){case"number":return r`
-                    ${d}
-                    border-radius: ${i.full};
-                `;case"number-with-border":return r`
-                    ${d}
-                    border-radius: ${i.full};
-                    box-shadow: 0 0 0 ${n["width-020"]} ${o.bg};
-                `;case"dot":return r`
-                    ${$}
-                `;case"dot-with-border":return r`
-                    ${$}
-                    box-shadow: 0 0 0  ${n["width-020"]} ${o.bg};
-                `;case"square-number":return r`
-                    ${d}
-                    border-radius: ${i.sm};
-                    padding: 0.25rem 0.4375rem;
-                    ${"default"===t&&r`
-                        background-color: ${o["bg-primary-subtler"]};
-                        color: ${o["text-primary"]};
-                    `}
-                `;default:return""}}};
-`;export{s as BadgeOverlay,a as BadgeWrapper,c as StyledBadge};
-//# sourceMappingURL=badge.style.js.map

package/badge/badge.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.style.js","sources":["../../src/badge/badge.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius } from \"../theme\";\nimport { BadgeProps } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledBadgeProps {\n    $variant: BadgeProps[\"variant\"];\n    $color: BadgeProps[\"color\"];\n}\ninterface BadgeContainerProps {\n    $isOverlay?: boolean;\n}\ninterface BadgeWrapperProps extends BadgeContainerProps {\n    $offset?: [string, string];\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const BadgeOverlay = styled.span<BadgeContainerProps>`\n    ${(props) =>\n        props.$isOverlay &&\n        css`\n            position: relative;\n            width: fit-content;\n            height: fit-content;\n        `}\n`;\n\nexport const BadgeWrapper = styled.span<BadgeWrapperProps>`\n    ${(props) =>\n        props.$isOverlay &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            transform: translate(50%, -25%)\n                ${props.$offset\n                    ? `translate(${props.$offset[0]},${props.$offset[1]})`\n                    : \"\"};\n        `}\n`;\n\nconst numberBadgeStyles = css`\n    min-width: 1.25rem;\n    padding: 0.25rem 0.375rem;\n    font-size: ${Font.Spec[\"body-size-xs\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    line-height: 1;\n`;\n\nconst dotBadgeStyles = css`\n    border-radius: 50%;\n    width: 0.5rem;\n    height: 0.5rem;\n`;\n\nexport const StyledBadge = styled.span<StyledBadgeProps>`\n    background-color: ${({ $color }) =>\n        $color === \"important\" ? Colour[\"icon-error\"] : Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: fit-content;\n    ${({ $variant, $color }) => {\n        switch ($variant) {\n            case \"number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                `;\n\n            case \"number-with-border\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                    box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"dot\":\n                return css`\n                    ${dotBadgeStyles}\n                `;\n\n            case \"dot-with-border\":\n                return css`\n                    ${dotBadgeStyles}\n                    box-shadow: 0 0 0  ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"square-number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.sm};\n                    padding: 0.25rem 0.4375rem;\n                    ${$color === \"default\" &&\n                    css`\n                        background-color: ${Colour[\"bg-primary-subtler\"]};\n                        color: ${Colour[\"text-primary\"]};\n                    `}\n                `;\n\n            default:\n                return \"\";\n        }\n    }};\n`;\n"],"names":["BadgeOverlay","styled","span","props","$isOverlay","css","BadgeWrapper","$offset","numberBadgeStyles","Font","Spec","dotBadgeStyles","StyledBadge","$color","Colour","$variant","Radius","full","Border","sm"],"mappings":"wHAsBO,MAAMA,EAAeC,EAAOC,IAAyB;MACrDC,GACCA,EAAMC,YACNC,CAAG;;;;;EAOEC,EAAeL,EAAOC,IAAuB;MACnDC,GACCA,EAAMC,YACNC,CAAG;;;;;kBAKOF,EAAMI,QACF,aAAaJ,EAAMI,QAAQ,MAAMJ,EAAMI,QAAQ,MAC/C;;EAIhBC,EAAoBH,CAAG;;;iBAGZI,EAAKC,KAAK;mBACRD,EAAKC,KAAK;;EAIvBC,EAAiBN,CAAG;;;;EAMbO,EAAcX,EAAOC,IAAsB;wBAChC,EAAGW,YACR,cAAXA,EAAyBC,EAAO,cAAgBA,EAAO;aAClDA,EAAO;mBACDL,EAAKC,KAAK;;;;;;MAMvB,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,CAAG;sBACJG;qCACeQ,EAAOC;kBAGhC,IAAK,qBACD,OAAOZ,CAAG;sBACJG;qCACeQ,EAAOC;wCACJC,EAAO,gBAAgBJ,EAAW;kBAG9D,IAAK,MACD,OAAOT,CAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,CAAG;sBACJM;yCACmBO,EAAO,gBAAgBJ,EAAW;kBAG/D,IAAK,gBACD,OAAOT,CAAG;sBACJG;qCACeQ,EAAOG;;sBAEX,YAAXN,GACFR,CAAG;4CACqBS,EAAO;iCAClBA,EAAO;;kBAI5B,QACI,MAAO;"}

package/breadcrumb/breadcrumb.style.d.ts

@@ -1,53 +0,0 @@
-interface FadeProps {
-    $backgroundColor?: string[];
-    $position?: "left" | "right";
-}
-interface ItemStyleProps {
-    $styleProps?: string;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
-export declare const Fade: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FadeProps> & FadeProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FadeProps> & FadeProps, never>>> & string;
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$styleProps"> & ItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$styleProps"> & ItemStyleProps, never>>> & string;
-export declare const Caret: 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> & Partial<Pick<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 Slash: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const CurrentLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const PreviousLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-    ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyLinkProps & {
-    ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export {};

package/breadcrumb/breadcrumb.style.js

@@ -1,64 +0,0 @@
-import{ChevronRightIcon as t}from"@lifesg/react-icons/chevron-right";import i,{css as n}from"styled-components";import{Spacing as e,MediaQuery as o,Font as r,Colour as a}from"../theme/index.js";import{Typography as l}from"../typography/typography.js";const s=i.div`
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    margin: ${e["spacing-32"]} 0;
-
-    ${o.MaxWidth.xl} {
-        margin: ${e["spacing-24"]} 0;
-    }
-
-    ${o.MaxWidth.lg} {
-        margin: ${e["spacing-16"]} 0;
-    }
-`,p=i.ul`
-    display: inline-flex;
-    width: 100%;
-    flex-wrap: wrap;
-    white-space: nowrap;
-    margin-left: -${e["spacing-8"]};
-    font-size: ${r.Spec["body-size-md"]};
-    overflow-x: scroll;
-    overflow-y: hidden;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-
-    ${o.MaxWidth.lg} {
-        flex-wrap: nowrap;
-    }
-`,g=i.div`
-    width: ${e["spacing-64"]};
-    height: calc(1lh + ${e["spacing-4"]});
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-
-    ${t=>{let i;const e="rgba(255,255,255,0.001)",r=a.bg(t);return i="left"===t.$position?`\n\t\t\t\tleft: -8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\t${t.$backgroundColor||r}, \n\t\t\t\t\t${e}\n\t\t\t\t);\n\t\t\t`:`\n\t\t\t\tright: 8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t${t.$backgroundColor||r},\n\t\t\t\t\t${e}\n\t\t\t\t);\n\t\t\t`,n`
-            ${o.MaxWidth.lg} {
-                ${i}
-            }
-        `}};
-`,c=i.li`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    line-height: inherit;
-    font-size: inherit;
-    ${t=>t.$styleProps||""};
-`,d=i(t)`
-    height: 1em;
-    width: 1em;
-    color: ${a["icon-subtle"]};
-`,h=i(l.BodyMD)`
-    display: inline-block;
-    color: ${a["text-subtlest"]};
-`,m=i(l.BodyMD)`
-    margin: ${e["spacing-8"]} !important;
-`,$=i(l.LinkMD)`
-    margin: ${e["spacing-8"]} !important;
-`;export{d as Caret,p as Content,m as CurrentLabel,g as Fade,c as Item,$ as PreviousLink,h as Slash,s as Wrapper};
-//# sourceMappingURL=breadcrumb.style.js.map

package/breadcrumb/breadcrumb.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"breadcrumb.style.js","sources":["../../src/breadcrumb/breadcrumb.style.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography/typography\";\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}\n\ninterface ItemStyleProps {\n    $styleProps?: string;\n}\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n    width: 100%;\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n\nexport const Content = styled.ul`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: -${Spacing[\"spacing-8\"]};\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    overflow-x: scroll;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const Fade = styled.div<FadeProps>`\n    width: ${Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${Spacing[\"spacing-4\"]});\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n\n    ${(props) => {\n        let positionStyle: string;\n        const transparentColor = \"rgba(255,255,255,0.001)\";\n        const fadeColor = Colour.bg(props);\n\n        if (props.$position === \"left\") {\n            positionStyle = `\n\t\t\t\tleft: -8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\t${props.$backgroundColor || fadeColor}, \n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        } else {\n            positionStyle = `\n\t\t\t\tright: 8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t${props.$backgroundColor || fadeColor},\n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        }\n\n        return css`\n            ${MediaQuery.MaxWidth.lg} {\n                ${positionStyle}\n            }\n        `;\n    }};\n`;\n\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n    ${(props) => {\n        return props.$styleProps || ``;\n    }};\n`;\n\nexport const Caret = styled(ChevronRightIcon)`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const Slash = styled(Typography.BodyMD)`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const CurrentLabel = styled(Typography.BodyMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const PreviousLink = styled(Typography.LinkMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["Wrapper","styled","div","Spacing","MediaQuery","MaxWidth","xl","lg","Content","ul","Font","Spec","Fade","props","positionStyle","transparentColor","fadeColor","Colour","bg","$position","$backgroundColor","css","Item","li","$styleProps","Caret","ChevronRightIcon","Slash","Typography","BodyMD","CurrentLabel","PreviousLink","LinkMD"],"mappings":"2PAqBO,MAAMA,EAAUC,EAAOC,GAAG;;;;cAInBC,EAAQ;;MAEhBC,EAAWC,SAASC;kBACRH,EAAQ;;;MAGpBC,EAAWC,SAASE;kBACRJ,EAAQ;;EAIbK,EAAUP,EAAOQ,EAAE;;;;;oBAKZN,EAAQ;iBACXO,EAAKC,KAAK;;;;;;;;;MASrBP,EAAWC,SAASE;;;EAKbK,EAAOX,EAAOC,GAAc;aAC5BC,EAAQ;yBACIA,EAAQ;;;;;;MAM1BU,IACC,IAAIC,EACJ,MAAMC,EAAmB,0BACnBC,EAAYC,EAAOC,GAAGL,GAsB5B,OAnBIC,EADoB,SAApBD,EAAMM,UACU,sGAIrBN,EAAMO,kBAAoBJ,kBAC1BD,wBAIqB,oGAIrBF,EAAMO,kBAAoBJ,iBAC1BD,wBAKQM,CAAG;cACJjB,EAAWC,SAASE;kBAChBO;;SAET;EAIIQ,EAAOrB,EAAOsB,EAAkB;;;;;;MAMtCV,GACQA,EAAMW,aAAe;EAIvBC,EAAQxB,EAAOyB,EAAiB;;;aAGhCT,EAAO;EAGPU,EAAQ1B,EAAO2B,EAAWC,OAAO;;aAEjCZ,EAAO;EAGPa,EAAe7B,EAAO2B,EAAWC,OAAO;cACvC1B,EAAQ;EAGT4B,EAAe9B,EAAO2B,EAAWI,OAAO;cACvC7B,EAAQ;"}

package/button/button.style.d.ts

@@ -1,13 +0,0 @@
-export type MainButtonStyle = "default" | "disabled" | "secondary" | "light" | "link";
-export type MainButtonSize = "default" | "small" | "large";
-export interface MainStyleProps {
-    $buttonStyle: MainButtonStyle;
-    $buttonSizeStyle?: MainButtonSize | undefined;
-    $buttonIsDanger?: boolean;
-}
-export declare const Main: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof MainStyleProps> & MainStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof MainStyleProps> & MainStyleProps, never>>> & string;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, "$hasChildren"> & {
-    $hasChildren: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, "$hasChildren"> & {
-    $hasChildren: boolean;
-}, never>>> & string & Omit<({ color, className, size, }: import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;

package/button/button.style.js

@@ -1,104 +0,0 @@
-import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}from"../shared/component-loading-spinner/component-loading-spinner.js";import{Spacing as t,Border as n,Motion as a,Colour as i,MediaQuery as d,Font as l}from"../theme/index.js";import{ThemeButton as c}from"../theme/components/theme-helper.js";const u=r.button`
-    padding: ${t["spacing-8"]} ${t["spacing-16"]};
-    min-width: 4rem;
-    border: ${n["width-010"]} ${n.solid} transparent;
-    transition: all ${a["duration-250"]} ${a["ease-default"]};
-    border-radius: ${c["button-radius"]};
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    // -----------------------------------------------------------------------------
-    // BUTTON STYLE + TEXT COLOR
-    // -----------------------------------------------------------------------------
-    ${r=>{switch(r.$buttonStyle){case"secondary":return o`
-                    background-color: ${i.bg};
-                    border-color: ${r.$buttonIsDanger?i["border-error-strong"]:c["button-secondary-colour-border"]};
-
-                    color: ${r.$buttonIsDanger?i["text-error"]:c["button-secondary-colour-text"]};
-
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${i["bg-hover-neutral"]};
-                        }
-                    }
-                `;case"light":return o`
-                    background-color: ${i.bg};
-                    border-color: ${i.border};
-
-                    color: ${r.$buttonIsDanger?i["text-error"]:c["button-light-colour-text"]};
-
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${i["bg-hover-neutral"]};
-                        }
-                    }
-                `;case"link":return o`
-                    background-color: transparent;
-
-                    color: ${r.$buttonIsDanger?i["text-error"]:c["button-link-colour-text"]};
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${i["bg-hover-neutral"]};
-                        }
-                    }
-                `;case"disabled":return o`
-                    background-color: ${i["bg-disabled"]};
-
-                    cursor: not-allowed;
-
-                    &:hover {
-                        box-shadow: none;
-                    }
-
-                    color: ${i["text-disabled"]};
-                `;default:return o`
-                    background-color: ${r.$buttonIsDanger?i["bg-error-strong"]:c["button-default-colour-bg"]};
-
-                    ${d.MaxWidth.sm} {
-                        width: 100%;
-                    }
-
-                    color: ${c["button-default-colour-text"]};
-
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${r.$buttonIsDanger?i["bg-error-strong-hover"]:c["button-default-colour-bg-hover"]};
-                        }
-                    }
-                `}}}
-
-    // -----------------------------------------------------------------------------
-	// BUTTON SIZE + TEXT SIZE
-	// -----------------------------------------------------------------------------
-	${r=>{switch(r.$buttonSizeStyle){case"small":return o`
-                    height: 2.5rem;
-                    ${l["body-md-semibold"]}
-
-                    ${d.MaxWidth.xxs} {
-                        height: auto;
-                    }
-                `;case"large":return o`
-                    height: 4rem;
-                    ${l["heading-md-semibold"]}
-
-                    ${d.MaxWidth.xxs} {
-                        height: auto;
-                    }
-                `;default:return o`
-                    height: 3rem;
-                    ${l["heading-xs-semibold"]}
-
-                    ${d.MaxWidth.xxs} {
-                        height: auto;
-                    }
-                `}}}
-`,s=r(e)`
-    margin-right: ${r=>r.$hasChildren?"0.5rem":"0"};
-`;export{u as Main,s as Spinner};
-//# sourceMappingURL=button.style.js.map