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

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\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Border, Colour, Font, MediaQuery, Motion, Spacing } from \"../theme\";\nimport { ThemeButton } from \"../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: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    min-width: 4rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${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: ${Colour.bg};\n                    border-color: ${props.$buttonIsDanger\n                        ? Colour[\"border-error-strong\"]\n                        : ThemeButton[\"button-secondary-colour-border\"]};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-secondary-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"light\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${Colour.border};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-light-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n\n            case \"link\":\n                return css`\n                    background-color: transparent;\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-link-colour-text\"]};\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"disabled\":\n                return css`\n                    background-color: ${Colour[\"bg-disabled\"]};\n\n                    cursor: not-allowed;\n\n                    &:hover {\n                        box-shadow: none;\n                    }\n\n                    color: ${Colour[\"text-disabled\"]};\n                `;\n            default:\n                return css`\n                    background-color: ${props.$buttonIsDanger\n                        ? Colour[\"bg-error-strong\"]\n                        : ThemeButton[\"button-default-colour-bg\"]};\n\n                    ${MediaQuery.MaxWidth.sm} {\n                        width: 100%;\n                    }\n\n                    color: ${ThemeButton[\"button-default-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${props.$buttonIsDanger\n                                ? Colour[\"bg-error-strong-hover\"]\n                                : 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                    ${Font[\"body-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            case \"large\":\n                return css`\n                    height: 4rem;\n                    ${Font[\"heading-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            default:\n                return css`\n                    height: 3rem;\n                    ${Font[\"heading-xs-semibold\"]}\n\n                    ${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","Spacing","Border","Motion","ThemeButton","props","$buttonStyle","css","Colour","bg","$buttonIsDanger","border","MediaQuery","MaxWidth","sm","$buttonSizeStyle","Font","xxs","Spinner","ComponentLoadingSpinner","$hasChildren"],"mappings":"kUAoBO,MAAMA,EAAOC,EAAOC,MAAsB;eAClCC,EAAQ,gBAAgBA,EAAQ;;cAEjCC,EAAO,gBAAgBA,EAAc;sBAC7BC,EAAO,mBAAmBA,EAAO;qBAClCC,EAAY;;;;;;;;;MAS1BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,CAAG;wCACcC,EAAOC;oCACXJ,EAAMK,gBAChBF,EAAO,uBACPJ,EAAY;;6BAETC,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;;gDAKUI,EAAO;;;kBAI3C,IAAK,QACD,OAAOD,CAAG;wCACcC,EAAOC;oCACXD,EAAOG;;6BAEdN,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;;gDAKUI,EAAO;;;kBAK3C,IAAK,OACD,OAAOD,CAAG;;;6BAGGF,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;gDAIUI,EAAO;;;kBAI3C,IAAK,WACD,OAAOD,CAAG;wCACcC,EAAO;;;;;;;;6BAQlBA,EAAO;kBAExB,QACI,OAAOD,CAAG;wCACcF,EAAMK,gBACpBF,EAAO,mBACPJ,EAAY;;sBAEhBQ,EAAWC,SAASC;;;;6BAIbV,EAAY;;;;;gDAKOC,EAAMK,gBACpBF,EAAO,yBACPJ,EACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;kBAK9B,IAAK,QACD,OAAOV,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;kBAK9B,QACI,OAAOV,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;;EAQ7BC,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 { 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\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport {\n    MainButtonWithIcon,\n    MainStylePropsWithIcon,\n} from \"./button-with-icon.style\";\nimport { 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":"kSAcA,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,16 +0,0 @@
-import { MainStyleProps } from "../button/button.style";
-import { 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").FastOmit<import("styled-components").FastOmit<Omit<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>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof MainStylePropsWithIcon> & MainStylePropsWithIcon, never> & Partial<Pick<import("styled-components").FastOmit<Omit<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>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof MainStylePropsWithIcon> & MainStylePropsWithIcon, never>>> & 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\";\nimport { Main, MainStyleProps } from \"../button/button.style\";\nimport { 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":"wFAcaA,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 { 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/card/card.style.js

@@ -1,12 +0,0 @@
-import o,{css as d}from"styled-components";import{Radius as r,Colour as e,Spacing as i,Border as t,Shadow as n}from"../theme/index.js";const s=o.div`
-    border-radius: ${r.md};
-    background: ${e.bg};
-    padding: ${i["spacing-16"]} ${i["spacing-32"]};
-    ${o=>{var r;return"dark"===(null===(r=o.theme)||void 0===r?void 0:r.colourMode)?d`
-                  border: ${t["width-010"]} ${t.solid}
-                      ${e.border};
-              `:d`
-                  box-shadow: ${n["md-subtle"]};
-              `}}
-`;export{s 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\";\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const StyledCard = styled.div`\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour.bg};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                      ${Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${Shadow[\"md-subtle\"]};\n              `;\n    }}\n`;\n"],"names":["StyledCard","styled","div","Radius","Colour","bg","Spacing","props","theme","_a","colourMode","css","Border","Shadow"],"mappings":"uIAMO,MAAMA,EAAaC,EAAOC,GAAG;qBACfC,EAAW;kBACdC,EAAOC;eACVC,EAAQ,iBAAiBA,EAAQ;MACzCC,UACC,MAAmC,UAAjB,UAAXA,EAAMC,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,CAAG;4BACWC,EAAO,gBAAgBA,EAAc;wBACzCR,EAAe;gBAEzBO,CAAG;gCACeE,EAAO;eACxB;"}

package/checkbox/checkbox.style.d.ts

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

package/checkbox/checkbox.style.js

@@ -1,60 +0,0 @@
-import{SquareIcon as i,SquareFillIcon as e,SquareTickFillIcon as o,MinusSquareFillIcon as t}from"@lifesg/react-icons";import s,{keyframes as l,css as r}from"styled-components";import{Motion as n,Colour as d}from"../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(i)`
-    ${c}
-    color: ${d["icon-primary-subtlest"]};
-`,u=s(e)`
-    ${c}
-    color: ${d["icon-disabled-subtle"]};
-`,p=s(o)`
-    ${c}
-    color: ${i=>i.$disabled?d["icon-disabled-subtle"](i):d["icon-selected"](i)};
-`,m=s(t)`
-    ${c}
-    color: ${i=>i.$disabled?d["icon-disabled-subtle"](i):d["icon-selected"](i)};
-`,h=s.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    ${i=>r`
-        height: ${"small"===i.$displaySize?"1.5rem":"2rem"};
-        width: ${"small"===i.$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: ${i=>i.$disabledVisual?"not-allowed":"pointer"};
-
-    &:hover
-        + ${$},
-        &:hover
-        + ${p},
-        &:hover
-        + ${m} {
-        @media (pointer: fine) {
-            color: ${i=>!i.$disabledVisual&&d["icon-hover"](i)};
-        }
-    }
-`;export{h as Container,f as Input,p as StyledCheckedIcon,m as StyledInteremediateIcon,u 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\";\nimport { Colour, Motion } from \"../theme\";\nimport { 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\ninterface InputStyleProps {\n    $disabledVisual?: boolean;\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: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]} ${fadeIn};\n    width: 100%;\n    height: 100%;\n    transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const StyledUncheckedIcon = styled(SquareIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const StyledUncheckedDisabledIcon = styled(SquareFillIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const StyledCheckedIcon = styled(SquareTickFillIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${(props) =>\n        props.$disabled\n            ? Colour[\"icon-disabled-subtle\"](props)\n            : Colour[\"icon-selected\"](props)};\n`;\n\nexport const StyledInteremediateIcon = styled(MinusSquareFillIcon)<StyleProps>`\n    ${BaseIconStyles}\n    color: ${(props) =>\n        props.$disabled\n            ? Colour[\"icon-disabled-subtle\"](props)\n            : 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 ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: 4px;\n    }\n`;\n\nexport const Input = styled.input<InputStyleProps>`\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    cursor: ${(props) => (props.$disabledVisual ? \"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.$disabledVisual && Colour[\"icon-hover\"](props)};\n        }\n    }\n`;\n"],"names":["fadeIn","keyframes","BaseIconStyles","css","Motion","StyledUncheckedIcon","styled","SquareIcon","Colour","StyledUncheckedDisabledIcon","SquareFillIcon","StyledCheckedIcon","SquareTickFillIcon","props","$disabled","StyledInteremediateIcon","MinusSquareFillIcon","Container","div","$displaySize","Input","input","$disabledVisual"],"mappings":"uOA2BA,MAAMA,EAASC,CAAS;;;;;;;EASlBC,EAAiBC,CAAG;iBACTC,EAAO,mBAAmBA,EAAO,mBAAmBJ;;;wBAG7CI,EAAO,mBAAmBA,EAAO;EAG5CC,EAAsBC,EAAOC,EAAuB;MAC3DL;aACOM,EAAO;EAGPC,EAA8BH,EAAOI,EAA2B;MACvER;aACOM,EAAO;EAGPG,EAAoBL,EAAOM,EAA+B;MACjEV;aACQW,GACNA,EAAMC,UACAN,EAAO,wBAAwBK,GAC/BL,EAAO,iBAAiBK;EAGzBE,EAA0BT,EAAOU,EAAgC;MACxEd;aACQW,GACNA,EAAMC,UACAN,EAAO,wBAAwBK,GAC/BL,EAAO,iBAAiBK;EAGzBI,EAAYX,EAAOY,GAAe;;;;;;MAMxCL,GAAUV,CAAG;kBACqB,UAAvBU,EAAMM,aAA2B,SAAW;iBACtB,UAAvBN,EAAMM,aAA2B,SAAW;;;;;6BAKhCX,EAAO;;;;EAMvBY,EAAQd,EAAOe,KAAsB;;;;;cAKnCR,GAAWA,EAAMS,gBAAkB,cAAgB;;;YAGtDjB;;YAEAM;;YAEAI;;qBAEUF,IACLA,EAAMS,iBAAmBd,EAAO,cAAcK;;;"}

package/cjs/_virtual/react-responsive.js

@@ -1,2 +0,0 @@
-"use strict";exports.__module={exports:{}};
-//# sourceMappingURL=react-responsive.js.map

package/cjs/_virtual/react-responsive.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-responsive.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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("../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.Colour.bg};
-    border-top: ${n.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-    ${e=>e.$expanded&&t.css`
-            padding-bottom: ${n.Spacing["spacing-16"]};
-        `}
-`,d=i.default.button`
-    background: transparent;
-    border: none;
-    border-radius: ${n.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.Spacing["spacing-48"]};
-    padding: ${n.Spacing["spacing-16"]} 0;
-
-    ${e=>e.$expanded&&t.css`
-            padding-bottom: ${n.Spacing["spacing-8"]};
-        `}
-
-    ${e=>e.$collapsible&&t.css`
-            cursor: pointer;
-        `}
-
-    &:focus-visible {
-        outline: 2px solid ${n.Colour["focus-ring"]};
-        outline-offset: 0;
-    }
-`,s=i.default.span`
-    flex: 1;
-    transition: all ${n.Motion["duration-250"]} ${n.Motion["ease-standard"]};
-    color: ${n.Colour.text};
-
-    ${e=>"small"===e.$type?n.Font["heading-xs-bold"]:n.Font["heading-sm-bold"]}
-`,l=i.default.span`
-    transform: rotate(${e=>e.$expanded?0:180}deg);
-    transition: transform ${n.Motion["duration-250"]} ${n.Motion["ease-default"]};
-`,p=i.default(e.ChevronUpIcon)`
-    height: 1.25rem;
-    width: 1.25rem;
-    color: ${n.Colour["icon-primary"]};
-`,c=o.animated(i.default.div`
-    overflow: hidden;
-`),u=i.default.div`
-    display: inline-block;
-    padding-right: ${n.Spacing["spacing-64"]};
-
-    ${n.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\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\nimport { 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: ${Colour.bg};\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    ${(props) =>\n        props.$expanded &&\n        css`\n            padding-bottom: ${Spacing[\"spacing-16\"]};\n        `}\n`;\n\nexport const ExpandCollapseButton = styled.button<ExpandCollapseButtonProps>`\n    background: transparent;\n    border: none;\n    border-radius: ${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: ${Spacing[\"spacing-48\"]};\n    padding: ${Spacing[\"spacing-16\"]} 0;\n\n    ${(props) =>\n        props.$expanded &&\n        css`\n            padding-bottom: ${Spacing[\"spacing-8\"]};\n        `}\n\n    ${(props) =>\n        props.$collapsible &&\n        css`\n            cursor: pointer;\n        `}\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n\nexport const Title = styled.span<TitleProps>`\n    flex: 1;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n    color: ${Colour[\"text\"]};\n\n    ${(props) =>\n        props.$type === \"small\"\n            ? Font[\"heading-xs-bold\"]\n            : Font[\"heading-sm-bold\"]}\n`;\n\nexport const IconContainer = styled.span<ContainerStyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${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: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding-right: 0;\n    }\n`;\n"],"names":["Container","styled","div","Colour","bg","Border","solid","border","props","$expanded","css","Spacing","ExpandCollapseButton","button","Radius","$collapsible","Title","span","Motion","$type","Font","IconContainer","ChevronIcon","ChevronUpIcon","Expandable","animated","ContentContainer","MediaQuery","MaxWidth","lg"],"mappings":"6OAmCO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;wBAChCC,EAAAA,OAAOC;kBACbC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASH,EAAAA,OAAOI;MACzDC,GACCA,EAAMC,WACNC,KAAG;8BACmBC,EAAAA,QAAQ;;EAIzBC,EAAuBX,EAAAA,QAAOY,MAAiC;;;qBAGvDC,EAAAA,OAAW;;;;;;;;;;WAUrBH,EAAAA,QAAQ;eACJA,EAAAA,QAAQ;;MAEhBH,GACCA,EAAMC,WACNC,KAAG;8BACmBC,EAAAA,QAAQ;;;MAG/BH,GACCA,EAAMO,cACNL,KAAG;;;;;6BAKkBP,EAAAA,OAAO;;;EAKvBa,EAAQf,EAAAA,QAAOgB,IAAgB;;sBAEtBC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;aAC1Cf,EAAAA,OAAa;;MAEnBK,GACiB,UAAhBA,EAAMW,MACAC,EAAAA,KAAK,mBACLA,EAAAA,KAAK;EAGNC,EAAgBpB,EAAAA,QAAOgB,IAAyB;wBACpCT,GAAWA,EAAMC,UAAY,EAAI;4BAC9BS,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;EAGhDI,EAAcrB,EAAAA,QAAOsB,EAAAA,cAAc;;;aAGnCpB,EAAAA,OAAO;EAGPqB,EAAaC,EAAAA,SAASxB,EAAAA,QAAOC,GAAG;;GAIhCwB,EAAmBzB,EAAAA,QAAOC,GAAG;;qBAErBS,EAAAA,QAAQ;;MAEvBgB,EAAAA,WAAWC,SAASC;;;"}

package/cjs/accordion/accordion.style.js

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

package/cjs/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":"mMAQO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;qBAEZC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASC,EAAAA,OAAOC;EAGtDC,EAAeN,EAAAA,QAAOC,GAA2B;;;;;;;MAOxDM,EAAAA,WAAWC,SAASC;;;;MAInBC,IACC,IAAKA,EAAMC,qBAAuBD,EAAME,cACpC,OAAOC,KAAG;kBACJN,EAAAA,WAAWC,SAASC;;;aAI9B;EAIKK,EAAQd,EAAAA,QAAOe,EAAmB;;;;;MAKzCC,EAAAA,KAAK;aACEZ,EAAAA,OAAa;;MAEpBG,EAAAA,WAAWC,SAASC;;;;MAInBC,IACC,IAAKA,EAAMO,cACP,OAAOJ,KAAG;kBACJN,EAAAA,WAAWC,SAASC;;;;aAK9B;EAIKS,EAAqBlB,EAAAA,QAAOmB,SAAOC,MAAM;;;;"}

package/cjs/alert/alert.style.js

@@ -1,82 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons"),r=require("styled-components"),o=require("../shared/html-content/html-content.js"),t=require("../theme/index.js"),n=require("../typography/typography.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);const i=s.default.div`
-    padding: ${t.Spacing["spacing-8"]} ${t.Spacing["spacing-16"]};
-    display: flex;
-
-    ${e=>{let o,n;switch(e.$type){case"error":o=t.Colour["bg-error"](e),n=t.Colour["border-error"](e);break;case"success":o=t.Colour["bg-success"](e),n=t.Colour["border-success"](e);break;case"warning":default:o=t.Colour["bg-warning"](e),n=t.Colour["border-warning"](e);break;case"info":o=t.Colour["bg-info"](e),n=t.Colour["border-info"](e);break;case"description":o=t.Colour["bg-strong"](e),n=t.Colour["border-strong"](e)}return r.css`
-            background: ${o};
-            border-left: ${t.Border["width-020"]} ${t.Border.solid}
-                ${n};
-        `}}
-`,l=s.default.div`
-    display: flex;
-    align-items: center;
-    height: 1lh;
-    margin-right: ${t.Spacing["spacing-8"]};
-
-    ${e=>{let o;const n="small"===e.$sizeType?"1.25rem":"1.5rem";switch(e.$type){case"error":o=t.Colour["icon-error"](e);break;case"success":o=t.Colour["icon-success"](e);break;case"warning":default:o=t.Colour["icon-warning"](e);break;case"info":o=t.Colour["icon-info"](e);break;case"description":o=t.Colour["icon-subtle"](e)}return r.css`
-            svg {
-                color: ${o};
-                width: ${n};
-                height: ${n};
-            }
-        `}}
-`,c=s.default(n.Typography.LinkSM)`
-    ${e=>"small"===e.$sizeType?r.css`
-                ${t.Font["body-sm-semibold"]}
-                margin-top: ${t.Spacing["spacing-4"]};
-            `:r.css`
-                ${t.Font["body-md-semibold"]}
-                margin-top: ${t.Spacing["spacing-8"]};
-            `}
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-
-    svg {
-        height: 1rem;
-        width: 1rem;
-        margin-left: ${t.Spacing["spacing-4"]};
-    }
-`,p=s.default.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow-wrap: anywhere;
-`,d=s.default.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    order: 1;
-    ${e=>{if(e.$showMore&&e.$hasActionLink)return r.css`
-                margin-bottom: ${t.Spacing["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`}}
-`,g=s.default.div`
-    color: ${t.Colour.text};
-
-    ${e=>"small"===e.$sizeType?o.applyHtmlContentStyle({textSize:"body-sm"}):o.applyHtmlContentStyle({textSize:"body-md"})}
-`,u=s.default.button`
-    ${e=>"small"===e.$sizeType?r.css`
-                ${t.Font["body-sm-semibold"]}
-            `:r.css`
-                ${t.Font["body-md-semibold"]}
-            `}
-
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    gap: ${t.Spacing["spacing-4"]};
-    margin-top: ${t.Spacing["spacing-8"]};
-    order: 2;
-
-    cursor: pointer;
-    user-select: none;
-    border: none;
-    background: transparent;
-
-    color: ${t.Colour["text-primary"]};
-`,m=s.default(e.ChevronDownIcon)`
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: transform ${t.Motion["duration-350"]} ${t.Motion["ease-standard"]};
-`;exports.ActionLinkText=c,exports.AlertIconWrapper=l,exports.ChevronIcon=m,exports.ContentContainer=p,exports.ShowMoreButton=u,exports.TextWrapper=g,exports.TextWrapperContainer=d,exports.Wrapper=i;
-//# sourceMappingURL=alert.style.js.map

package/cjs/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":"gSA4BO,MAAMA,EAAUC,EAAAA,QAAOC,GAAe;eAC9BC,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;;MAGxCC,IACC,IAAIC,EACAC,EACJ,OAAQF,EAAMG,OACV,IAAK,QACDF,EAAkBG,EAAAA,OAAO,YAAYJ,GACrCE,EAAcE,EAAAA,OAAO,gBAAgBJ,GACrC,MACJ,IAAK,UACDC,EAAkBG,EAAAA,OAAO,cAAcJ,GACvCE,EAAcE,EAAAA,OAAO,kBAAkBJ,GACvC,MACJ,IAAK,UAYL,QACIC,EAAkBG,EAAAA,OAAO,cAAcJ,GACvCE,EAAcE,EAAAA,OAAO,kBAAkBJ,GACvC,MAXJ,IAAK,OACDC,EAAkBG,EAAAA,OAAO,WAAWJ,GACpCE,EAAcE,EAAAA,OAAO,eAAeJ,GACpC,MACJ,IAAK,cACDC,EAAkBG,EAAAA,OAAO,aAAaJ,GACtCE,EAAcE,EAAAA,OAAO,iBAAiBJ,GAQ9C,OAAOK,KAAG;0BACQJ;2BACCK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;kBAC9CJ;SACT;EAIIK,EAAmBV,EAAAA,QAAOC,GAAe;;;;oBAIlCC,EAAAA,QAAQ;;MAErBC,IACC,IAAIQ,EACJ,MAAMC,EAA+B,UAApBT,EAAMU,UAAwB,UAAY,SAC3D,OAAQV,EAAMG,OACV,IAAK,QACDK,EAAYJ,EAAAA,OAAO,cAAcJ,GACjC,MACJ,IAAK,UACDQ,EAAYJ,EAAAA,OAAO,gBAAgBJ,GACnC,MACJ,IAAK,UASL,QACIQ,EAAYJ,EAAAA,OAAO,gBAAgBJ,GACnC,MARJ,IAAK,OACDQ,EAAYJ,EAAAA,OAAO,aAAaJ,GAChC,MACJ,IAAK,cACDQ,EAAYJ,EAAAA,OAAO,eAAeJ,GAO1C,OAAOK,KAAG;;yBAEOG;yBACAC;0BACCA;;SAEjB;EAIIE,EAAiBd,EAAAA,QAAOe,aAAWC,OAAmB;MAC5Db,GACyB,UAApBA,EAAMU,UACCL,KAAG;kBACJS,EAAAA,KAAK;8BACOf,EAAAA,QAAQ;cAGnBM,KAAG;kBACJS,EAAAA,KAAK;8BACOf,EAAAA,QAAQ;;;;;;;;;uBAWfA,EAAAA,QAAQ;;EAIlBgB,EAAmBlB,EAAAA,QAAOC,GAAG;;;;;EAO7BkB,EAAuBnB,EAAAA,QAAOC,GAAmC;;;;;MAKvEE,IACC,GAAIA,EAAMiB,WAAajB,EAAMkB,eACzB,OAAOb,KAAG;iCACWN,EAAAA,QAAQ;aAC5B;MAENC,IACC,MAAMmB,EACF,0DACJ,IAAKnB,EAAMiB,WAAajB,EAAMoB,oBAC1B,MAAO,iCACWpB,EAAMoB,0FAEED,mCACRA,YAC1B;EAISE,EAAcxB,EAAAA,QAAOC,GAAe;aACpCM,EAAAA,OAAOkB;;MAEbtB,GACyB,UAApBA,EAAMU,UACCa,wBAAsB,CAAEC,SAAU,YAEtCD,wBAAsB,CAAEC,SAAU;EAIpCC,EAAiB5B,EAAAA,QAAO6B,MAAkB;MAChD1B,GACyB,UAApBA,EAAMU,UACCL,KAAG;kBACJS,EAAAA,KAAK;cAGJT,KAAG;kBACJS,EAAAA,KAAK;;;;;;WAQZf,EAAAA,QAAQ;kBACDA,EAAAA,QAAQ;;;;;;;;aAQbK,EAAAA,OAAO;EAGPuB,EAAc9B,EAAAA,QAAO+B,EAAAA,gBAAwC;wBACjD5B,GAAWA,EAAM6B,UAAY,IAAM;4BAChCC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;"}

package/cjs/avatar/avatar.style.js

@@ -1,20 +0,0 @@
-"use strict";var e=require("styled-components"),r=require("../theme/index.js"),t=require("../typography/typography.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e);const i=a.default.div`
-    border-radius: 50%;
-    background-color: ${r.Colour["bg-primary-subtler"]};
-    ${r=>"small"===r.$sizeType?e.css`
-                  width: 1.5rem;
-                  height: 1.5rem;
-              `:e.css`
-                  width: 2.5rem;
-                  height: 2.5rem;
-              `}
-
-    align-items: center;
-    justify-content: center;
-    display: flex;
-`,s=a.default(t.Typography.BodyBL)`
-    color: ${r.Colour["text-primary"]};
-`,l=a.default(t.Typography.BodySM)`
-    color: ${r.Colour["text-primary"]};
-`;exports.AvatarBaselineText=s,exports.AvatarBodySmallText=l,exports.AvatarDisplay=i;
-//# sourceMappingURL=avatar.style.js.map

package/cjs/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":"2MAeO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAuB;;wBAEnCC,EAAAA,OAAO;MACxBC,GAC4B,UAApBA,EAAMC,UACPC,KAAG;;;gBAIHA,KAAG;;;;;;;;EAWJC,EAAqBN,EAAAA,QAAOO,aAAWC,OAAO;aAC9CN,EAAAA,OAAO;EAGPO,EAAsBT,EAAAA,QAAOO,aAAWG,OAAO;aAC/CR,EAAAA,OAAO;"}

package/cjs/badge/badge.style.js

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

package/cjs/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":"kKAsBO,MAAMA,EAAeC,EAAAA,QAAOC,IAAyB;MACrDC,GACCA,EAAMC,YACNC,KAAG;;;;;EAOEC,EAAeL,EAAAA,QAAOC,IAAuB;MACnDC,GACCA,EAAMC,YACNC,KAAG;;;;;kBAKOF,EAAMI,QACF,aAAaJ,EAAMI,QAAQ,MAAMJ,EAAMI,QAAQ,MAC/C;;EAIhBC,EAAoBH,EAAAA,GAAG;;;iBAGZI,EAAAA,KAAKC,KAAK;mBACRD,EAAAA,KAAKC,KAAK;;EAIvBC,EAAiBN,EAAAA,GAAG;;;;EAMbO,EAAcX,EAAAA,QAAOC,IAAsB;wBAChC,EAAGW,YACR,cAAXA,EAAyBC,EAAAA,OAAO,cAAgBA,SAAO;aAClDA,EAAAA,OAAO;mBACDL,EAAAA,KAAKC,KAAK;;;;;;MAMvB,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,KAAG;sBACJG;qCACeQ,EAAAA,OAAOC;kBAGhC,IAAK,qBACD,OAAOZ,KAAG;sBACJG;qCACeQ,EAAAA,OAAOC;wCACJC,EAAAA,OAAO,gBAAgBJ,EAAAA,OAAW;kBAG9D,IAAK,MACD,OAAOT,KAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,KAAG;sBACJM;yCACmBO,EAAAA,OAAO,gBAAgBJ,EAAAA,OAAW;kBAG/D,IAAK,gBACD,OAAOT,KAAG;sBACJG;qCACeQ,EAAAA,OAAOG;;sBAEX,YAAXN,GACFR,KAAG;4CACqBS,EAAAA,OAAO;iCAClBA,EAAAA,OAAO;;kBAI5B,QACI,MAAO;"}