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

package/badge/badge.style.js

@@ -1,57 +0,0 @@
-import e,{css as r}from"styled-components";import{V3_Font as t,V3_Colour as o,V3_Radius as i,V3_Border as n}from"../v3_theme/index.js";const d=e.div`
-    ${e=>e.$isOverlay&&r`
-            position: relative;
-            width: fit-content;
-            height: fit-content;
-        `}
-`,s=e.div`
-    ${e=>e.$isOverlay&&r`
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(50%, -25%)
-                ${e.$offset?`translate(${e.$offset[0]},${e.$offset[1]})`:""};
-        `}
-`,a=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.div`
-    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`
-                    ${a}
-                    border-radius: ${i.full};
-                `;case"number-with-border":return r`
-                    ${a}
-                    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`
-                    ${a}
-                    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{d as BadgeOverlay,s 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\";\n\nimport { V3_Border, V3_Colour, V3_Font, V3_Radius } from \"../v3_theme\";\nimport type { 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.div<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.div<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: ${V3_Font.Spec[\"body-size-xs\"]};\n    font-weight: ${V3_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.div<StyledBadgeProps>`\n    background-color: ${({ $color }) =>\n        $color === \"important\"\n            ? V3_Colour[\"icon-error\"]\n            : V3_Colour[\"bg-primary\"]};\n    color: ${V3_Colour[\"text-inverse\"]};\n    font-weight: ${V3_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: ${V3_Radius.full};\n                `;\n\n            case \"number-with-border\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${V3_Radius.full};\n                    box-shadow: 0 0 0 ${V3_Border[\"width-020\"]}\n                        ${V3_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  ${V3_Border[\"width-020\"]} ${V3_Colour[\n                        \"bg\"\n                    ]};\n                `;\n\n            case \"square-number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${V3_Radius.sm};\n                    padding: 0.25rem 0.4375rem;\n                    ${$color === \"default\" &&\n                    css`\n                        background-color: ${V3_Colour[\"bg-primary-subtler\"]};\n                        color: ${V3_Colour[\"text-primary\"]};\n                    `}\n                `;\n\n            default:\n                return \"\";\n        }\n    }};\n`;\n"],"names":["BadgeOverlay","styled","div","props","$isOverlay","css","BadgeWrapper","$offset","numberBadgeStyles","V3_Font","Spec","dotBadgeStyles","StyledBadge","$color","V3_Colour","$variant","V3_Radius","full","V3_Border","sm"],"mappings":"uIAuBO,MAAMA,EAAeC,EAAOC,GAAwB;MACpDC,GACCA,EAAMC,YACNC,CAAG;;;;;EAOEC,EAAeL,EAAOC,GAAsB;MAClDC,GACCA,EAAMC,YACNC,CAAG;;;;;kBAKOF,EAAMI,QACF,aAAaJ,EAAMI,QAAQ,MAAMJ,EAAMI,QAAQ,MAC/C;;EAIhBC,EAAoBH,CAAG;;;iBAGZI,EAAQC,KAAK;mBACXD,EAAQC,KAAK;;EAI1BC,EAAiBN,CAAG;;;;EAMbO,EAAcX,EAAOC,GAAqB;wBAC/B,EAAGW,YACR,cAAXA,EACMC,EAAU,cACVA,EAAU;aACXA,EAAU;mBACJL,EAAQC,KAAK;;;;;;MAM1B,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,CAAG;sBACJG;qCACeQ,EAAUC;kBAGnC,IAAK,qBACD,OAAOZ,CAAG;sBACJG;qCACeQ,EAAUC;wCACPC,EAAU;0BACxBJ,EAAc;kBAG5B,IAAK,MACD,OAAOT,CAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,CAAG;sBACJM;yCACmBO,EAAU,gBAAgBJ,EACvC;kBAIhB,IAAK,gBACD,OAAOT,CAAG;sBACJG;qCACeQ,EAAUG;;sBAEd,YAAXN,GACFR,CAAG;4CACqBS,EAAU;iCACrBA,EAAU;;kBAI/B,QACI,MAAO;"}

package/breadcrumb/breadcrumb.style.d.ts

@@ -1,27 +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>> & 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>> & 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 Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ItemStyleProps>> & 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>> & 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;
-}, 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;
-}, 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;
-}, 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{Typography as e}from"../typography/index.js";import{V3_Spacing as o,V3_MediaQuery as r,V3_Font as a,V3_Colour as l}from"../v3_theme/index.js";const s=i.div`
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    margin: ${o["spacing-32"]} 0;
-
-    ${r.MaxWidth.xl} {
-        margin: ${o["spacing-24"]} 0;
-    }
-
-    ${r.MaxWidth.lg} {
-        margin: ${o["spacing-16"]} 0;
-    }
-`,p=i.ul`
-    display: inline-flex;
-    width: 100%;
-    flex-wrap: wrap;
-    white-space: nowrap;
-    margin-left: -${o["spacing-8"]};
-    font-size: ${a.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 */
-    }
-
-    ${r.MaxWidth.lg} {
-        flex-wrap: nowrap;
-    }
-`,g=i.div`
-    width: ${o["spacing-64"]};
-    height: calc(1lh + ${o["spacing-4"]});
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-
-    ${t=>{let i;const e="rgba(255,255,255,0.001)",o=l.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||o}, \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||o},\n\t\t\t\t\t${e}\n\t\t\t\t);\n\t\t\t`,n`
-            ${r.MaxWidth.lg} {
-                ${i}
-            }
-        `}};
-`,d=i.li`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    line-height: inherit;
-    font-size: inherit;
-    ${t=>t.$styleProps||""};
-`,c=i(t)`
-    height: 1em;
-    width: 1em;
-    color: ${l["icon-subtle"]};
-`,h=i(e.BodyMD)`
-    display: inline-block;
-    color: ${l["text-subtlest"]};
-`,m=i(e.BodyMD)`
-    margin: ${o["spacing-8"]} !important;
-`,$=i(e.LinkMD)`
-    margin: ${o["spacing-8"]} !important;
-`;export{c as Caret,p as Content,m as CurrentLabel,g as Fade,d 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\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_Font, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\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: ${V3_Spacing[\"spacing-32\"]} 0;\n\n    ${V3_MediaQuery.MaxWidth.xl} {\n        margin: ${V3_Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin: ${V3_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: -${V3_Spacing[\"spacing-8\"]};\n    font-size: ${V3_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    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const Fade = styled.div<FadeProps>`\n    width: ${V3_Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${V3_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 = V3_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            ${V3_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: ${V3_Colour[\"icon-subtle\"]};\n`;\n\nexport const Slash = styled(Typography.BodyMD)`\n    display: inline-block;\n    color: ${V3_Colour[\"text-subtlest\"]};\n`;\n\nexport const CurrentLabel = styled(Typography.BodyMD)`\n    margin: ${V3_Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const PreviousLink = styled(Typography.LinkMD)`\n    margin: ${V3_Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["Wrapper","styled","div","V3_Spacing","V3_MediaQuery","MaxWidth","xl","lg","Content","ul","V3_Font","Spec","Fade","props","positionStyle","transparentColor","fadeColor","V3_Colour","bg","$position","$backgroundColor","css","Item","li","$styleProps","Caret","ChevronRightIcon","Slash","Typography","BodyMD","CurrentLabel","PreviousLink","LinkMD"],"mappings":"qQAsBO,MAAMA,EAAUC,EAAOC,GAAG;;;;cAInBC,EAAW;;MAEnBC,EAAcC,SAASC;kBACXH,EAAW;;;MAGvBC,EAAcC,SAASE;kBACXJ,EAAW;;EAIhBK,EAAUP,EAAOQ,EAAE;;;;;oBAKZN,EAAW;iBACdO,EAAQC,KAAK;;;;;;;;;MASxBP,EAAcC,SAASE;;;EAKhBK,EAAOX,EAAOC,GAAc;aAC5BC,EAAW;yBACCA,EAAW;;;;;;MAM7BU,IACC,IAAIC,EACJ,MAAMC,EAAmB,0BACnBC,EAAYC,EAAUC,GAAGL,GAsB/B,OAnBIC,EADoB,SAApBD,EAAMM,UACU,sGAIrBN,EAAMO,kBAAoBJ,kBAC1BD,wBAIqB,oGAIrBF,EAAMO,kBAAoBJ,iBAC1BD,wBAKQM,CAAG;cACJjB,EAAcC,SAASE;kBACnBO;;SAET;EAIIQ,EAAOrB,EAAOsB,EAAkB;;;;;;MAMtCV,GACQA,EAAMW,aAAe;EAIvBC,EAAQxB,EAAOyB,EAAiB;;;aAGhCT,EAAU;EAGVU,EAAQ1B,EAAO2B,EAAWC,OAAO;;aAEjCZ,EAAU;EAGVa,EAAe7B,EAAO2B,EAAWC,OAAO;cACvC1B,EAAW;EAGZ4B,EAAe9B,EAAO2B,EAAWI,OAAO;cACvC7B,EAAW;"}

package/button/button.style.d.ts

@@ -1,11 +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/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, MainStyleProps>> & string;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, {
-    $hasChildren: boolean;
-}>> & 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{V3_Spacing as t,V3_Border as n,V3_Motion as a,V3_Colour as i,V3_MediaQuery as d,V3_Font as l}from"../v3_theme/index.js";import{V3_ThemeButton as c}from"../v3_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

package/button/button.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.style.js","sources":["../../src/button/button.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport { V3_ThemeButton } from \"../v3_theme/components/theme-helper\";\n\nexport type MainButtonStyle =\n    | \"default\"\n    | \"disabled\"\n    | \"secondary\"\n    | \"light\"\n    | \"link\";\n\nexport type MainButtonSize = \"default\" | \"small\" | \"large\";\n\nexport interface MainStyleProps {\n    $buttonStyle: MainButtonStyle;\n    $buttonSizeStyle?: MainButtonSize | undefined;\n    $buttonIsDanger?: boolean;\n}\n\nexport const Main = styled.button<MainStyleProps>`\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]};\n    min-width: 4rem;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} transparent;\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    border-radius: ${V3_ThemeButton[\"button-radius\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    // -----------------------------------------------------------------------------\n    // BUTTON STYLE + TEXT COLOR\n    // -----------------------------------------------------------------------------\n    ${(props) => {\n        switch (props.$buttonStyle) {\n            case \"secondary\":\n                return css`\n                    background-color: ${V3_Colour.bg};\n                    border-color: ${props.$buttonIsDanger\n                        ? V3_Colour[\"border-error-strong\"]\n                        : V3_ThemeButton[\"button-secondary-colour-border\"]};\n\n                    color: ${props.$buttonIsDanger\n                        ? V3_Colour[\"text-error\"]\n                        : V3_ThemeButton[\"button-secondary-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${V3_Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"light\":\n                return css`\n                    background-color: ${V3_Colour.bg};\n                    border-color: ${V3_Colour.border};\n\n                    color: ${props.$buttonIsDanger\n                        ? V3_Colour[\"text-error\"]\n                        : V3_ThemeButton[\"button-light-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${V3_Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n\n            case \"link\":\n                return css`\n                    background-color: transparent;\n\n                    color: ${props.$buttonIsDanger\n                        ? V3_Colour[\"text-error\"]\n                        : V3_ThemeButton[\"button-link-colour-text\"]};\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${V3_Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"disabled\":\n                return css`\n                    background-color: ${V3_Colour[\"bg-disabled\"]};\n\n                    cursor: not-allowed;\n\n                    &:hover {\n                        box-shadow: none;\n                    }\n\n                    color: ${V3_Colour[\"text-disabled\"]};\n                `;\n            default:\n                return css`\n                    background-color: ${props.$buttonIsDanger\n                        ? V3_Colour[\"bg-error-strong\"]\n                        : V3_ThemeButton[\"button-default-colour-bg\"]};\n\n                    ${V3_MediaQuery.MaxWidth.sm} {\n                        width: 100%;\n                    }\n\n                    color: ${V3_ThemeButton[\"button-default-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${props.$buttonIsDanger\n                                ? V3_Colour[\"bg-error-strong-hover\"]\n                                : V3_ThemeButton[\n                                      \"button-default-colour-bg-hover\"\n                                  ]};\n                        }\n                    }\n                `;\n        }\n    }}\n\n    // -----------------------------------------------------------------------------\n\t// BUTTON SIZE + TEXT SIZE\n\t// -----------------------------------------------------------------------------\n\t${(props) => {\n        switch (props.$buttonSizeStyle) {\n            case \"small\":\n                return css`\n                    height: 2.5rem;\n                    ${V3_Font[\"body-md-semibold\"]}\n\n                    ${V3_MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            case \"large\":\n                return css`\n                    height: 4rem;\n                    ${V3_Font[\"heading-md-semibold\"]}\n\n                    ${V3_MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            default:\n                return css`\n                    height: 3rem;\n                    ${V3_Font[\"heading-xs-semibold\"]}\n\n                    ${V3_MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n        }\n    }}\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)<{\n    $hasChildren: boolean;\n}>`\n    margin-right: ${(props) => (props.$hasChildren ? \"0.5rem\" : \"0\")};\n`;\n"],"names":["Main","styled","button","V3_Spacing","V3_Border","V3_Motion","V3_ThemeButton","props","$buttonStyle","css","V3_Colour","bg","$buttonIsDanger","border","V3_MediaQuery","MaxWidth","sm","$buttonSizeStyle","V3_Font","xxs","Spinner","ComponentLoadingSpinner","$hasChildren"],"mappings":"6VA4BO,MAAMA,EAAOC,EAAOC,MAAsB;eAClCC,EAAW,gBAAgBA,EAAW;;cAEvCC,EAAU,gBAAgBA,EAAiB;sBACnCC,EAAU,mBAAmBA,EAAU;qBACxCC,EAAe;;;;;;;;;MAS7BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,CAAG;wCACcC,EAAUC;oCACdJ,EAAMK,gBAChBF,EAAU,uBACVJ,EAAe;;6BAEZC,EAAMK,gBACTF,EAAU,cACVJ,EAAe;;;;;gDAKOI,EAAU;;;kBAI9C,IAAK,QACD,OAAOD,CAAG;wCACcC,EAAUC;oCACdD,EAAUG;;6BAEjBN,EAAMK,gBACTF,EAAU,cACVJ,EAAe;;;;;gDAKOI,EAAU;;;kBAK9C,IAAK,OACD,OAAOD,CAAG;;;6BAGGF,EAAMK,gBACTF,EAAU,cACVJ,EAAe;;;;gDAIOI,EAAU;;;kBAI9C,IAAK,WACD,OAAOD,CAAG;wCACcC,EAAU;;;;;;;;6BAQrBA,EAAU;kBAE3B,QACI,OAAOD,CAAG;wCACcF,EAAMK,gBACpBF,EAAU,mBACVJ,EAAe;;sBAEnBQ,EAAcC,SAASC;;;;6BAIhBV,EAAe;;;;;gDAKIC,EAAMK,gBACpBF,EAAU,yBACVJ,EACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,CAAG;;sBAEJS,EAAQ;;sBAERJ,EAAcC,SAASI;;;kBAKjC,IAAK,QACD,OAAOV,CAAG;;sBAEJS,EAAQ;;sBAERJ,EAAcC,SAASI;;;kBAKjC,QACI,OAAOV,CAAG;;sBAEJS,EAAQ;;sBAERJ,EAAcC,SAASI;;;;EAQhCC,EAAUnB,EAAOoB,EAE5B;oBACmBd,GAAWA,EAAMe,aAAe,SAAW;"}

package/button-with-icon/button-with-icon.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import type { ButtonWithIconProps } from "./types";
-export declare const ButtonWithIcon: {
-    Default: (props: ButtonWithIconProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Small: (props: ButtonWithIconProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-};

package/button-with-icon/button-with-icon.js

@@ -1,2 +0,0 @@
-import{__rest as i}from"../_virtual/_tslib.js";import{jsxs as n,jsx as e}from"react/jsx-runtime";import t from"react";import{ComponentLoadingSpinner as o}from"../shared/component-loading-spinner/component-loading-spinner.js";import{MainButtonWithIcon as a}from"./button-with-icon.style.js";const l=(l,d)=>{const{children:s,disabled:r=!1,styleType:c="default",danger:b=!1,icon:u,iconPosition:f="left",loading:h=!1,focusableWhenDisabled:m=!1,onClick:p}=l,y=i(l,["children","disabled","styleType","danger","icon","iconPosition","loading","focusableWhenDisabled","onClick"]),g={$buttonIconPosition:f,$buttonStyle:r?"disabled":c,$buttonSizeStyle:"default",$buttonIsDanger:b};return n(a,Object.assign({ref:d,"data-testid":y["data-testid"]||"button-with-icon",disabled:r&&!m,"aria-disabled":r,"aria-busy":h,onClick:r?void 0:p},g,y,{children:[h?e(o,{}):u?t.cloneElement(u,{"aria-hidden":!0}):null,e("span",{children:s})]}))};l.displayName="ButtonWithIcon.Default";const d=(l,d)=>{const{children:s,disabled:r=!1,styleType:c="default",danger:b=!1,icon:u,iconPosition:f="left",loading:h=!1,focusableWhenDisabled:m=!1,onClick:p}=l,y=i(l,["children","disabled","styleType","danger","icon","iconPosition","loading","focusableWhenDisabled","onClick"]),g={$buttonIconPosition:f,$buttonStyle:r?"disabled":c,$buttonSizeStyle:"small",$buttonIsDanger:b};return n(a,Object.assign({ref:d,"data-testid":y["data-testid"]||"button-with-icon",disabled:r&&!m,"aria-disabled":r,"aria-busy":h,onClick:r?void 0:p},g,y,{children:[h?e(o,{}):u?t.cloneElement(u,{"aria-hidden":!0}):null,e("span",{children:s})]}))};d.displayName="ButtonWithIcon.Small";const s={Default:t.forwardRef(l),Small:t.forwardRef(d)};export{s as ButtonWithIcon};
-//# sourceMappingURL=button-with-icon.js.map

package/button-with-icon/button-with-icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-with-icon.js","sources":["../../src/button-with-icon/button-with-icon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport type { MainStylePropsWithIcon } from \"./button-with-icon.style\";\nimport { MainButtonWithIcon } from \"./button-with-icon.style\";\nimport type { ButtonWithIconProps, ButtonWithIconRef } from \"./types\";\n\n/**\n * NOTE: Due to the way we intend to customise both components, with forwardRef behaviour\n * we are unable to create a single component and have them share.\n *\n * Will refactor if there is a better way\n */\nconst DefaultComponent = (\n    props: ButtonWithIconProps,\n    ref: ButtonWithIconRef\n) => {\n    const {\n        children,\n        disabled = false,\n        styleType = \"default\",\n        danger = false,\n        icon,\n        iconPosition = \"left\",\n        loading = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStylePropsWithIcon = {\n        $buttonIconPosition: iconPosition,\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"default\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <MainButtonWithIcon\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button-with-icon\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading ? (\n                <ComponentLoadingSpinner />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            <span>{children}</span>\n        </MainButtonWithIcon>\n    );\n};\nDefaultComponent.displayName = \"ButtonWithIcon.Default\";\n\nconst SmallComponent = (props: ButtonWithIconProps, ref: ButtonWithIconRef) => {\n    const {\n        children,\n        disabled = false,\n        styleType = \"default\",\n        danger = false,\n        icon,\n        iconPosition = \"left\",\n        loading = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStylePropsWithIcon = {\n        $buttonIconPosition: iconPosition,\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"small\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <MainButtonWithIcon\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button-with-icon\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading ? (\n                <ComponentLoadingSpinner />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            <span>{children}</span>\n        </MainButtonWithIcon>\n    );\n};\nSmallComponent.displayName = \"ButtonWithIcon.Small\";\n\nexport const ButtonWithIcon = {\n    Default: React.forwardRef(DefaultComponent),\n    Small: React.forwardRef(SmallComponent),\n};\n"],"names":["DefaultComponent","props","ref","children","disabled","styleType","danger","icon","iconPosition","loading","focusableWhenDisabled","onClick","otherProps","__rest","mainStyle","$buttonIconPosition","$buttonStyle","$buttonSizeStyle","$buttonIsDanger","_jsxs","MainButtonWithIcon","Object","assign","undefined","_jsx","ComponentLoadingSpinner","React","cloneElement","displayName","SmallComponent","ButtonWithIcon","Default","forwardRef","Small"],"mappings":"kSAaA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,UAChBA,EAAY,UAASC,OACrBA,GAAS,EAAKC,KACdA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAAU,EAAKC,sBACfA,GAAwB,EAAKC,QAC7BA,GAEAV,EADGW,EAAUC,EACbZ,EAXE,CAAA,WAAA,WAAA,YAAA,SAAA,OAAA,eAAA,UAAA,wBAAA,YAaAa,EAAoC,CACtCC,oBAAqBP,EACrBQ,aAAcZ,EAAW,WAAaC,EACtCY,iBAAkB,UAClBC,gBAAiBZ,GAGrB,OACIa,EAACC,EAAkBC,OAAAC,OAAA,CACfpB,IAAKA,EAAG,cACKU,EAAW,gBAAkB,mBAC1CR,SAAUA,IAAaM,kBACRN,EAAQ,YACZK,EACXE,QAASP,OAAWmB,EAAYZ,GAC5BG,EACAF,EAAU,CAAAT,SAAA,CAEbM,EACGe,EAACC,EAAuB,CAAA,GACxBlB,EACAmB,EAAMC,aAAapB,EAAM,CAAE,eAAe,IAC1C,KACJiB,EAAA,OAAA,CAAArB,SAAOA,OACU,EAG7BH,EAAiB4B,YAAc,yBAE/B,MAAMC,EAAiB,CAAC5B,EAA4BC,KAChD,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,UAChBA,EAAY,UAASC,OACrBA,GAAS,EAAKC,KACdA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAAU,EAAKC,sBACfA,GAAwB,EAAKC,QAC7BA,GAEAV,EADGW,EAAUC,EACbZ,EAXE,CAAA,WAAA,WAAA,YAAA,SAAA,OAAA,eAAA,UAAA,wBAAA,YAaAa,EAAoC,CACtCC,oBAAqBP,EACrBQ,aAAcZ,EAAW,WAAaC,EACtCY,iBAAkB,QAClBC,gBAAiBZ,GAGrB,OACIa,EAACC,EAAkBC,OAAAC,OAAA,CACfpB,IAAKA,EAAG,cACKU,EAAW,gBAAkB,mBAC1CR,SAAUA,IAAaM,kBACRN,EAAQ,YACZK,EACXE,QAASP,OAAWmB,EAAYZ,GAC5BG,EACAF,EAAU,CAAAT,SAAA,CAEbM,EACGe,EAACC,EAAuB,CAAA,GACxBlB,EACAmB,EAAMC,aAAapB,EAAM,CAAE,eAAe,IAC1C,KACJiB,EAAA,OAAA,CAAArB,SAAOA,OACU,EAG7B0B,EAAeD,YAAc,uBAEtB,MAAME,EAAiB,CAC1BC,QAASL,EAAMM,WAAWhC,GAC1BiC,MAAOP,EAAMM,WAAWH"}

package/button-with-icon/button-with-icon.style.d.ts

@@ -1,8 +0,0 @@
-import type { MainStyleProps } from "../button/button.style";
-import type { ButtonIconPosition } from "./types";
-export interface MainStylePropsWithIcon extends MainStyleProps {
-    $buttonIconPosition?: ButtonIconPosition | undefined;
-}
-export declare const MainButtonWithIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof MainStyleProps> & MainStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, MainStylePropsWithIcon>> & string;

package/button-with-icon/button-with-icon.style.js

@@ -1,11 +0,0 @@
-import t from"styled-components";import{Main as o}from"../button/button.style.js";const e=t(o)`
-    flex-direction: ${t=>"right"===t.$buttonIconPosition?"row-reverse":"row"};
-    gap: 0.5rem;
-
-    svg {
-        flex-shrink: 0;
-        height: 1em;
-        width: 1em;
-    }
-`;export{e as MainButtonWithIcon};
-//# sourceMappingURL=button-with-icon.style.js.map

package/button-with-icon/button-with-icon.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-with-icon.style.js","sources":["../../src/button-with-icon/button-with-icon.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport type { MainStyleProps } from \"../button/button.style\";\nimport { Main } from \"../button/button.style\";\nimport type { ButtonIconPosition } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport interface MainStylePropsWithIcon extends MainStyleProps {\n    $buttonIconPosition?: ButtonIconPosition | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const MainButtonWithIcon = styled(Main)<MainStylePropsWithIcon>`\n    flex-direction: ${(props) =>\n        props.$buttonIconPosition === \"right\" ? \"row-reverse\" : \"row\"};\n    gap: 0.5rem;\n\n    svg {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n"],"names":["MainButtonWithIcon","styled","Main","props","$buttonIconPosition"],"mappings":"wFAgBaA,EAAqBC,EAAOC,EAA6B;sBAC/CC,GACe,UAA9BA,EAAMC,oBAAkC,cAAgB;;;;;;;;"}

package/button-with-icon/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./button-with-icon";
-export * from "./types";

package/button-with-icon/index.js

@@ -1,2 +0,0 @@
-export{ButtonWithIcon}from"./button-with-icon.js";
-//# sourceMappingURL=index.js.map

package/button-with-icon/types.d.ts

@@ -1,9 +0,0 @@
-import type { ButtonProps, ButtonRef } from "../button/types";
-export interface ButtonWithIconProps extends ButtonProps {
-    /** The icon to be rendered in the button */
-    icon: JSX.Element;
-    /** Specifies where the icon will be positioned */
-    iconPosition?: "left" | "right";
-}
-export type ButtonWithIconRef = ButtonRef;
-export type ButtonIconPosition = "left" | "right";

package/card/card.style.d.ts

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

package/card/card.style.js

@@ -1,12 +0,0 @@
-import e,{css as r}from"styled-components";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as o}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{V3_Radius as t,V3_Spacing as i,V3_Border as m,V3_Colour as d,V3_Shadow as s}from"../v3_theme/index.js";const n=e.div`
-    border-radius: ${t.md};
-    background: ${o.bg};
-    padding: ${i["spacing-16"]} ${i["spacing-32"]};
-    ${e=>{var o;return"dark"===(null===(o=e.theme)||void 0===o?void 0:o.colourMode)?r`
-                  border: ${m["width-010"]} ${m.solid}
-                      ${d.border};
-              `:r`
-                  box-shadow: ${s["md-subtle"]};
-              `}}
-`;export{n as StyledCard};
-//# sourceMappingURL=card.style.js.map

package/card/card.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.style.js","sources":["../../src/card/card.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Colour } from \"../theme\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const StyledCard = styled.div`\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${Colour.bg};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"md-subtle\"]};\n              `;\n    }}\n`;\n"],"names":["StyledCard","styled","div","V3_Radius","Colour","bg","V3_Spacing","props","theme","_a","colourMode","css","V3_Border","V3_Colour","V3_Shadow"],"mappings":"kgBAcO,MAAMA,EAAaC,EAAOC,GAAG;qBACfC,EAAc;kBACjBC,EAAOC;eACVC,EAAW,iBAAiBA,EAAW;MAC/CC,UACC,MAAmC,UAAjB,UAAXA,EAAMC,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,CAAG;4BACWC,EAAU,gBAAgBA,EAAiB;wBAC/CC,EAAkB;gBAE5BF,CAAG;gCACeG,EAAU;eAC3B;"}

package/checkbox/checkbox.style.d.ts

@@ -1,33 +0,0 @@
-import type { CheckboxProps, CheckboxSize } from "./types";
-interface StyleProps {
-    $unchecked?: boolean;
-    $disabled?: boolean;
-    $displaySize?: CheckboxSize;
-}
-export declare const StyledUncheckedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StyledUncheckedDisabledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StyledCheckedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StyledInteremediateIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, CheckboxProps>> & string;
-export {};

package/checkbox/checkbox.style.js

@@ -1,61 +0,0 @@
-import{SquareIcon as e,SquareFillIcon as i,SquareTickFillIcon as o,MinusSquareFillIcon as t}from"@lifesg/react-icons";import s,{keyframes as l,css as r}from"styled-components";import{V3_Motion as n,V3_Colour as d}from"../v3_theme/index.js";const a=l`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`,c=r`
-    animation: ${n["duration-150"]} ${n["ease-default"]}
-        ${a};
-    width: 100%;
-    height: 100%;
-    transition: color ${n["duration-150"]} ${n["ease-default"]};
-`,$=s(e)`
-    ${c}
-    color: ${d["icon-primary-subtlest"]};
-`,p=s(i)`
-    ${c}
-    color: ${d["icon-disabled-subtle"]};
-`,u=s(o)`
-    ${c}
-    color: ${e=>e.$disabled?d["icon-disabled-subtle"](e):d["icon-selected"](e)};
-`,m=s(t)`
-    ${c}
-    color: ${e=>e.$disabled?d["icon-disabled-subtle"](e):d["icon-selected"](e)};
-`,h=s.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    ${e=>r`
-        height: ${"small"===e.$displaySize?"1.5rem":"2rem"};
-        width: ${"small"===e.$displaySize?"1.5rem":"2rem"};
-    `}
-
-    // Show custom focus ring when input is focused
-    input:focus-visible + svg {
-        outline: 2px solid ${d["focus-ring"]};
-        outline-offset: 0px;
-        border-radius: 4px;
-    }
-`,f=s.input`
-    position: absolute;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-
-    &:hover
-        + ${$},
-        &:hover
-        + ${u},
-        &:hover
-        + ${m} {
-        @media (pointer: fine) {
-            color: ${e=>!e.disabled&&d["icon-hover"](e)};
-        }
-    }
-`;export{h as Container,f as Input,u as StyledCheckedIcon,m as StyledInteremediateIcon,p as StyledUncheckedDisabledIcon,$ as StyledUncheckedIcon};
-//# sourceMappingURL=checkbox.style.js.map

package/checkbox/checkbox.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.style.js","sources":["../../src/checkbox/checkbox.style.tsx"],"sourcesContent":["import {\n    MinusSquareFillIcon,\n    SquareFillIcon,\n    SquareIcon,\n    SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion } from \"../v3_theme\";\nimport type { CheckboxProps, CheckboxSize } from \"./types\";\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    $unchecked?: boolean;\n    $disabled?: boolean;\n    $displaySize?: CheckboxSize;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst fadeIn = keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst BaseIconStyles = css`\n    animation: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]}\n        ${fadeIn};\n    width: 100%;\n    height: 100%;\n    transition: color ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const StyledUncheckedIcon = styled(SquareIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${V3_Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const StyledUncheckedDisabledIcon = styled(SquareFillIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${V3_Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const StyledCheckedIcon = styled(SquareTickFillIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-disabled-subtle\"](props)\n            : V3_Colour[\"icon-selected\"](props)};\n`;\n\nexport const StyledInteremediateIcon = styled(MinusSquareFillIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-disabled-subtle\"](props)\n            : V3_Colour[\"icon-selected\"](props)};\n`;\n\nexport const Container = styled.div<StyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n\n    ${(props) => css`\n        height: ${props.$displaySize === \"small\" ? \"1.5rem\" : \"2rem\"};\n        width: ${props.$displaySize === \"small\" ? \"1.5rem\" : \"2rem\"};\n    `}\n\n    // Show custom focus ring when input is focused\n    input:focus-visible + svg {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: 4px;\n    }\n`;\n\nexport const Input = styled.input<CheckboxProps>`\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n\n    &:hover\n        + ${StyledUncheckedIcon},\n        &:hover\n        + ${StyledCheckedIcon},\n        &:hover\n        + ${StyledInteremediateIcon} {\n        @media (pointer: fine) {\n            color: ${(props) =>\n                !props.disabled && V3_Colour[\"icon-hover\"](props)};\n        }\n    }\n`;\n"],"names":["fadeIn","keyframes","BaseIconStyles","css","V3_Motion","StyledUncheckedIcon","styled","SquareIcon","V3_Colour","StyledUncheckedDisabledIcon","SquareFillIcon","StyledCheckedIcon","SquareTickFillIcon","props","$disabled","StyledInteremediateIcon","MinusSquareFillIcon","Container","div","$displaySize","Input","input","disabled"],"mappings":"gPAwBA,MAAMA,EAASC,CAAS;;;;;;;EASlBC,EAAiBC,CAAG;iBACTC,EAAU,mBAAmBA,EAAU;UAC9CJ;;;wBAGcI,EAAU,mBAAmBA,EAAU;EAGlDC,EAAsBC,EAAOC,EAAuB;MAC3DL;aACOM,EAAU;EAGVC,EAA8BH,EAAOI,EAA2B;MACvER;aACOM,EAAU;EAGVG,EAAoBL,EAAOM,EAA+B;MACjEV;aACQW,GACNA,EAAMC,UACAN,EAAU,wBAAwBK,GAClCL,EAAU,iBAAiBK;EAG5BE,EAA0BT,EAAOU,EAAgC;MACxEd;aACQW,GACNA,EAAMC,UACAN,EAAU,wBAAwBK,GAClCL,EAAU,iBAAiBK;EAG5BI,EAAYX,EAAOY,GAAe;;;;;;MAMxCL,GAAUV,CAAG;kBACqB,UAAvBU,EAAMM,aAA2B,SAAW;iBACtB,UAAvBN,EAAMM,aAA2B,SAAW;;;;;6BAKhCX,EAAU;;;;EAM1BY,EAAQd,EAAOe,KAAoB;;;;;cAKjCR,GAAWA,EAAMS,SAAW,cAAgB;;;YAG/CjB;;YAEAM;;YAEAI;;qBAEUF,IACLA,EAAMS,UAAYd,EAAU,cAAcK;;;"}

package/cjs/accordion/accordion-item.style.js

@@ -1,58 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-up"),o=require("@react-spring/web"),t=require("styled-components"),n=require("../v3_theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(t);const a=i.default.div`
-    background-color: ${n.V3_Colour.bg};
-    border-top: ${n.V3_Border["width-010"]} ${n.V3_Border.solid} ${n.V3_Colour.border};
-    ${e=>e.$expanded&&t.css`
-            padding-bottom: ${n.V3_Spacing["spacing-16"]};
-        `}
-`,d=i.default.button`
-    background: transparent;
-    border: none;
-    border-radius: ${n.V3_Radius.sm};
-    outline: none;
-    text-align: left;
-    user-select: text;
-
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: ${n.V3_Spacing["spacing-48"]};
-    padding: ${n.V3_Spacing["spacing-16"]} 0;
-
-    ${e=>e.$expanded&&t.css`
-            padding-bottom: ${n.V3_Spacing["spacing-8"]};
-        `}
-
-    ${e=>e.$collapsible&&t.css`
-            cursor: pointer;
-        `}
-
-    &:focus-visible {
-        outline: 2px solid ${n.V3_Colour["focus-ring"]};
-        outline-offset: 0;
-    }
-`,s=i.default.span`
-    flex: 1;
-    transition: all ${n.V3_Motion["duration-250"]} ${n.V3_Motion["ease-standard"]};
-    color: ${n.V3_Colour.text};
-
-    ${e=>"small"===e.$type?n.V3_Font["heading-xs-bold"]:n.V3_Font["heading-sm-bold"]}
-`,l=i.default.span`
-    transform: rotate(${e=>e.$expanded?0:180}deg);
-    transition: transform ${n.V3_Motion["duration-250"]}${n.V3_Motion["ease-default"]};
-`,p=i.default(e.ChevronUpIcon)`
-    height: 1.25rem;
-    width: 1.25rem;
-    color: ${n.V3_Colour["icon-primary"]};
-`,c=o.animated(i.default.div`
-    overflow: hidden;
-`),u=i.default.div`
-    display: inline-block;
-    padding-right: ${n.V3_Spacing["spacing-64"]};
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        padding-right: 0;
-    }
-`;exports.ChevronIcon=p,exports.Container=a,exports.ContentContainer=u,exports.ExpandCollapseButton=d,exports.Expandable=c,exports.IconContainer=l,exports.Title=s;
-//# sourceMappingURL=accordion-item.style.js.map

package/cjs/accordion/accordion-item.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-item.style.js","sources":["../../../src/accordion/accordion-item.style.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { AccordionItemType } 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 ContainerStyleProps {\n    $expanded?: boolean | undefined;\n}\n\ninterface ExpandCollapseButtonProps {\n    $expanded: boolean;\n    $collapsible: boolean;\n}\n\ninterface TitleProps {\n    $type: AccordionItemType;\n    $isCollapsed?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div<ContainerStyleProps>`\n    background-color: ${V3_Colour.bg};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    ${(props) =>\n        props.$expanded &&\n        css`\n            padding-bottom: ${V3_Spacing[\"spacing-16\"]};\n        `}\n`;\n\nexport const ExpandCollapseButton = styled.button<ExpandCollapseButtonProps>`\n    background: transparent;\n    border: none;\n    border-radius: ${V3_Radius[\"sm\"]};\n    outline: none;\n    text-align: left;\n    user-select: text;\n\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: ${V3_Spacing[\"spacing-48\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} 0;\n\n    ${(props) =>\n        props.$expanded &&\n        css`\n            padding-bottom: ${V3_Spacing[\"spacing-8\"]};\n        `}\n\n    ${(props) =>\n        props.$collapsible &&\n        css`\n            cursor: pointer;\n        `}\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n\nexport const Title = styled.span<TitleProps>`\n    flex: 1;\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-standard\"]};\n    color: ${V3_Colour[\"text\"]};\n\n    ${(props) =>\n        props.$type === \"small\"\n            ? V3_Font[\"heading-xs-bold\"]\n            : V3_Font[\"heading-sm-bold\"]}\n`;\n\nexport const IconContainer = styled.span<ContainerStyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform ${V3_Motion[\"duration-250\"]}${V3_Motion[\"ease-default\"]};\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const ContentContainer = styled.div`\n    display: inline-block;\n    padding-right: ${V3_Spacing[\"spacing-64\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        padding-right: 0;\n    }\n`;\n"],"names":["Container","styled","div","V3_Colour","bg","V3_Border","solid","border","props","$expanded","css","V3_Spacing","ExpandCollapseButton","button","V3_Radius","$collapsible","Title","span","V3_Motion","$type","V3_Font","IconContainer","ChevronIcon","ChevronUpIcon","Expandable","animated","ContentContainer","V3_MediaQuery","MaxWidth","lg"],"mappings":"gPAoCO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;wBAChCC,EAAAA,UAAUC;kBAChBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC,SAASH,EAAAA,UAAUI;MAClEC,GACCA,EAAMC,WACNC,KAAG;8BACmBC,EAAAA,WAAW;;EAI5BC,EAAuBX,EAAAA,QAAOY,MAAiC;;;qBAGvDC,EAAAA,UAAc;;;;;;;;;;WAUxBH,EAAAA,WAAW;eACPA,EAAAA,WAAW;;MAEnBH,GACCA,EAAMC,WACNC,KAAG;8BACmBC,EAAAA,WAAW;;;MAGlCH,GACCA,EAAMO,cACNL,KAAG;;;;;6BAKkBP,EAAAA,UAAU;;;EAK1Ba,EAAQf,EAAAA,QAAOgB,IAAgB;;sBAEtBC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;aAChDf,EAAAA,UAAgB;;MAEtBK,GACiB,UAAhBA,EAAMW,MACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;EAGTC,EAAgBpB,EAAAA,QAAOgB,IAAyB;wBACpCT,GAAWA,EAAMC,UAAY,EAAI;4BAC9BS,EAAAA,UAAU,kBAAkBA,EAAAA,UAAU;EAGrDI,EAAcrB,EAAAA,QAAOsB,EAAAA,cAAc;;;aAGnCpB,EAAAA,UAAU;EAGVqB,EAAaC,EAAAA,SAASxB,EAAAA,QAAOC,GAAG;;GAIhCwB,EAAmBzB,EAAAA,QAAOC,GAAG;;qBAErBS,EAAAA,WAAW;;MAE1BgB,EAAAA,cAAcC,SAASC;;;"}