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

package/cjs/alert/alert.style.js

@@ -1,83 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons"),r=require("styled-components"),o=require("../shared/html-content/html-content.js"),t=require("../typography/index.js"),n=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(r);const a=s.default.div`
-    padding: ${n.V3_Spacing["spacing-8"]} ${n.V3_Spacing["spacing-16"]};
-    display: flex;
-
-    ${e=>{let o,t;switch(e.$type){case"error":o=n.V3_Colour["bg-error"](e),t=n.V3_Colour["border-error"](e);break;case"success":o=n.V3_Colour["bg-success"](e),t=n.V3_Colour["border-success"](e);break;case"warning":default:o=n.V3_Colour["bg-warning"](e),t=n.V3_Colour["border-warning"](e);break;case"info":o=n.V3_Colour["bg-info"](e),t=n.V3_Colour["border-info"](e);break;case"description":o=n.V3_Colour["bg-strong"](e),t=n.V3_Colour["border-strong"](e)}return r.css`
-            background: ${o};
-            border-left: ${n.V3_Border["width-020"]} ${n.V3_Border.solid}
-                ${t};
-        `}}
-`,l=s.default.div`
-    display: flex;
-    align-items: center;
-    height: 1lh;
-    margin-right: ${n.V3_Spacing["spacing-8"]};
-
-    ${e=>{let o;const t="small"===e.$sizeType?"1.25rem":"1.5rem";switch(e.$type){case"error":o=n.V3_Colour["icon-error"](e);break;case"success":o=n.V3_Colour["icon-success"](e);break;case"warning":default:o=n.V3_Colour["icon-warning"](e);break;case"info":o=n.V3_Colour["icon-info"](e);break;case"description":o=n.V3_Colour["icon-subtle"](e)}return r.css`
-            svg {
-                color: ${o};
-                width: ${t};
-                height: ${t};
-            }
-        `}}
-`,c=s.default(t.Typography.LinkSM)`
-    ${e=>"small"===e.$sizeType?r.css`
-                ${n.V3_Font["body-sm-semibold"]}
-                margin-top: ${n.V3_Spacing["spacing-4"]};
-            `:r.css`
-                ${n.V3_Font["body-md-semibold"]}
-                margin-top: ${n.V3_Spacing["spacing-8"]};
-            `}
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-
-    svg {
-        height: 1rem;
-        width: 1rem;
-        margin-left: ${n.V3_Spacing["spacing-4"]};
-    }
-`,d=s.default.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow-wrap: anywhere;
-`,p=s.default.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    order: 1;
-    ${e=>{if(e.$showMore&&e.$hasActionLink)return r.css`
-                margin-bottom: ${n.V3_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: ${n.V3_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`
-                ${n.V3_Font["body-sm-semibold"]}
-            `:r.css`
-                ${n.V3_Font["body-md-semibold"]}
-            `}
-
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    gap: ${n.V3_Spacing["spacing-4"]};
-    margin-top: ${n.V3_Spacing["spacing-8"]};
-    order: 2;
-
-    cursor: pointer;
-    user-select: none;
-    border: none;
-    background: transparent;
-
-    color: ${n.V3_Colour["text-primary"]};
-`,m=s.default(e.ChevronDownIcon)`
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: transform ${n.V3_Motion["duration-350"]}
-        ${n.V3_Motion["ease-standard"]};
-`;exports.ActionLinkText=c,exports.AlertIconWrapper=l,exports.ChevronIcon=m,exports.ContentContainer=d,exports.ShowMoreButton=u,exports.TextWrapper=g,exports.TextWrapperContainer=p,exports.Wrapper=a;
-//# 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\";\n\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { AlertSizeType, AlertType } 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    $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: ${V3_Spacing[\"spacing-8\"]} ${V3_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 = V3_Colour[\"bg-error\"](props);\n                borderColor = V3_Colour[\"border-error\"](props);\n                break;\n            case \"success\":\n                backgroundColor = V3_Colour[\"bg-success\"](props);\n                borderColor = V3_Colour[\"border-success\"](props);\n                break;\n            case \"warning\":\n                backgroundColor = V3_Colour[\"bg-warning\"](props);\n                borderColor = V3_Colour[\"border-warning\"](props);\n                break;\n            case \"info\":\n                backgroundColor = V3_Colour[\"bg-info\"](props);\n                borderColor = V3_Colour[\"border-info\"](props);\n                break;\n            case \"description\":\n                backgroundColor = V3_Colour[\"bg-strong\"](props);\n                borderColor = V3_Colour[\"border-strong\"](props);\n                break;\n            default:\n                backgroundColor = V3_Colour[\"bg-warning\"](props);\n                borderColor = V3_Colour[\"border-warning\"](props);\n                break;\n        }\n\n        return css`\n            background: ${backgroundColor};\n            border-left: ${V3_Border[\"width-020\"]} ${V3_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: ${V3_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 = V3_Colour[\"icon-error\"](props);\n                break;\n            case \"success\":\n                iconColor = V3_Colour[\"icon-success\"](props);\n                break;\n            case \"warning\":\n                iconColor = V3_Colour[\"icon-warning\"](props);\n                break;\n            case \"info\":\n                iconColor = V3_Colour[\"icon-info\"](props);\n                break;\n            case \"description\":\n                iconColor = V3_Colour[\"icon-subtle\"](props);\n                break;\n            default:\n                iconColor = V3_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                ${V3_Font[\"body-sm-semibold\"]}\n                margin-top: ${V3_Spacing[\"spacing-4\"]};\n            `;\n        else {\n            return css`\n                ${V3_Font[\"body-md-semibold\"]}\n                margin-top: ${V3_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: ${V3_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: ${V3_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: ${V3_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                ${V3_Font[\"body-sm-semibold\"]}\n            `;\n        else {\n            return css`\n                ${V3_Font[\"body-md-semibold\"]}\n            `;\n        }\n    }}\n\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    order: 2;\n\n    cursor: pointer;\n    user-select: none;\n    border: none;\n    background: transparent;\n\n    color: ${V3_Colour[\"text-primary\"]};\n`;\n\nexport const ChevronIcon = styled(ChevronDownIcon)<ShowMoreIconStyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${V3_Motion[\"duration-350\"]}\n        ${V3_Motion[\"ease-standard\"]};\n`;\n"],"names":["Wrapper","styled","div","V3_Spacing","props","backgroundColor","borderColor","$type","V3_Colour","css","V3_Border","AlertIconWrapper","iconColor","iconSize","$sizeType","ActionLinkText","Typography","LinkSM","V3_Font","ContentContainer","TextWrapperContainer","$showMore","$hasActionLink","gradient","$maxCollapsedHeight","TextWrapper","text","applyHtmlContentStyle","textSize","ShowMoreButton","button","ChevronIcon","ChevronDownIcon","$expanded","V3_Motion"],"mappings":"8RAmCO,MAAMA,EAAUC,EAAAA,QAAOC,GAAe;eAC9BC,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;;;MAG9CC,IACC,IAAIC,EACAC,EACJ,OAAQF,EAAMG,OACV,IAAK,QACDF,EAAkBG,EAAAA,UAAU,YAAYJ,GACxCE,EAAcE,EAAAA,UAAU,gBAAgBJ,GACxC,MACJ,IAAK,UACDC,EAAkBG,EAAAA,UAAU,cAAcJ,GAC1CE,EAAcE,EAAAA,UAAU,kBAAkBJ,GAC1C,MACJ,IAAK,UAYL,QACIC,EAAkBG,EAAAA,UAAU,cAAcJ,GAC1CE,EAAcE,EAAAA,UAAU,kBAAkBJ,GAC1C,MAXJ,IAAK,OACDC,EAAkBG,EAAAA,UAAU,WAAWJ,GACvCE,EAAcE,EAAAA,UAAU,eAAeJ,GACvC,MACJ,IAAK,cACDC,EAAkBG,EAAAA,UAAU,aAAaJ,GACzCE,EAAcE,EAAAA,UAAU,iBAAiBJ,GAQjD,OAAOK,KAAG;0BACQJ;2BACCK,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;kBACpDJ;SACT;EAIIK,EAAmBV,EAAAA,QAAOC,GAAe;;;;oBAIlCC,EAAAA,WAAW;;MAExBC,IACC,IAAIQ,EACJ,MAAMC,EAA+B,UAApBT,EAAMU,UAAwB,UAAY,SAC3D,OAAQV,EAAMG,OACV,IAAK,QACDK,EAAYJ,EAAAA,UAAU,cAAcJ,GACpC,MACJ,IAAK,UACDQ,EAAYJ,EAAAA,UAAU,gBAAgBJ,GACtC,MACJ,IAAK,UASL,QACIQ,EAAYJ,EAAAA,UAAU,gBAAgBJ,GACtC,MARJ,IAAK,OACDQ,EAAYJ,EAAAA,UAAU,aAAaJ,GACnC,MACJ,IAAK,cACDQ,EAAYJ,EAAAA,UAAU,eAAeJ,GAO7C,OAAOK,KAAG;;yBAEOG;yBACAC;0BACCA;;SAEjB;EAIIE,EAAiBd,EAAAA,QAAOe,aAAWC,OAAmB;MAC5Db,GACyB,UAApBA,EAAMU,UACCL,KAAG;kBACJS,EAAAA,QAAQ;8BACIf,EAAAA,WAAW;cAGtBM,KAAG;kBACJS,EAAAA,QAAQ;8BACIf,EAAAA,WAAW;;;;;;;;;uBAWlBA,EAAAA,WAAW;;EAIrBgB,EAAmBlB,EAAAA,QAAOC,GAAG;;;;;EAO7BkB,EAAuBnB,EAAAA,QAAOC,GAAmC;;;;;MAKvEE,IACC,GAAIA,EAAMiB,WAAajB,EAAMkB,eACzB,OAAOb,KAAG;iCACWN,EAAAA,WAAW;aAC/B;MAENC,IACC,MAAMmB,EACF,0DACJ,IAAKnB,EAAMiB,WAAajB,EAAMoB,oBAC1B,MAAO,iCACWpB,EAAMoB,0FAEED,mCACRA,YAC1B;EAISE,EAAcxB,EAAAA,QAAOC,GAAe;aACpCM,EAAAA,UAAUkB;;MAEhBtB,GACyB,UAApBA,EAAMU,UACCa,wBAAsB,CAAEC,SAAU,YAEtCD,wBAAsB,CAAEC,SAAU;EAIpCC,EAAiB5B,EAAAA,QAAO6B,MAAkB;MAChD1B,GACyB,UAApBA,EAAMU,UACCL,KAAG;kBACJS,EAAAA,QAAQ;cAGPT,KAAG;kBACJS,EAAAA,QAAQ;;;;;;WAQff,EAAAA,WAAW;kBACJA,EAAAA,WAAW;;;;;;;;aAQhBK,EAAAA,UAAU;EAGVuB,EAAc9B,EAAAA,QAAO+B,EAAAA,gBAAwC;wBACjD5B,GAAWA,EAAM6B,UAAY,IAAM;4BAChCC,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;"}

package/cjs/avatar/avatar.style.js

@@ -1,20 +0,0 @@
-"use strict";var e=require("styled-components"),r=require("../typography/index.js"),t=require("../v3_theme/index.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: ${t.V3_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(r.Typography.BodyBL)`
-    color: ${t.V3_Colour["text-primary"]};
-`,l=a.default(r.Typography.BodySM)`
-    color: ${t.V3_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\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Colour } from \"../v3_theme\";\nimport type { 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: ${V3_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: ${V3_Colour[\"text-primary\"]};\n`;\n\nexport const AvatarBodySmallText = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-primary\"]};\n`;\n"],"names":["AvatarDisplay","styled","div","V3_Colour","props","$sizeType","css","AvatarBaselineText","Typography","BodyBL","AvatarBodySmallText","BodySM"],"mappings":"yMAgBO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAuB;;wBAEnCC,EAAAA,UAAU;MAC3BC,GAC4B,UAApBA,EAAMC,UACPC,KAAG;;;gBAIHA,KAAG;;;;;;;;EAWJC,EAAqBN,EAAAA,QAAOO,aAAWC,OAAO;aAC9CN,EAAAA,UAAU;EAGVO,EAAsBT,EAAAA,QAAOO,aAAWG,OAAO;aAC/CR,EAAAA,UAAU;"}

package/cjs/badge/badge.style.js

@@ -1,57 +0,0 @@
-"use strict";var e=require("styled-components"),r=require("../v3_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.div`
-    ${r=>r.$isOverlay&&e.css`
-            position: relative;
-            width: fit-content;
-            height: fit-content;
-        `}
-`,i=o.default.div`
-    ${r=>r.$isOverlay&&e.css`
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(50%, -25%)
-                ${r.$offset?`translate(${r.$offset[0]},${r.$offset[1]})`:""};
-        `}
-`,d=e.css`
-    min-width: 1.25rem;
-    padding: 0.25rem 0.375rem;
-    font-size: ${r.V3_Font.Spec["body-size-xs"]};
-    font-weight: ${r.V3_Font.Spec["weight-bold"]};
-    line-height: 1;
-`,a=e.css`
-    border-radius: 50%;
-    width: 0.5rem;
-    height: 0.5rem;
-`,n=o.default.div`
-    background-color: ${({$color:e})=>"important"===e?r.V3_Colour["icon-error"]:r.V3_Colour["bg-primary"]};
-    color: ${r.V3_Colour["text-inverse"]};
-    font-weight: ${r.V3_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`
-                    ${d}
-                    border-radius: ${r.V3_Radius.full};
-                `;case"number-with-border":return e.css`
-                    ${d}
-                    border-radius: ${r.V3_Radius.full};
-                    box-shadow: 0 0 0 ${r.V3_Border["width-020"]}
-                        ${r.V3_Colour.bg};
-                `;case"dot":return e.css`
-                    ${a}
-                `;case"dot-with-border":return e.css`
-                    ${a}
-                    box-shadow: 0 0 0  ${r.V3_Border["width-020"]} ${r.V3_Colour.bg};
-                `;case"square-number":return e.css`
-                    ${d}
-                    border-radius: ${r.V3_Radius.sm};
-                    padding: 0.25rem 0.4375rem;
-                    ${"default"===o&&e.css`
-                        background-color: ${r.V3_Colour["bg-primary-subtler"]};
-                        color: ${r.V3_Colour["text-primary"]};
-                    `}
-                `;default:return""}}};
-`;exports.BadgeOverlay=s,exports.BadgeWrapper=i,exports.StyledBadge=n;
-//# 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\";\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":"qKAuBO,MAAMA,EAAeC,EAAAA,QAAOC,GAAwB;MACpDC,GACCA,EAAMC,YACNC,KAAG;;;;;EAOEC,EAAeL,EAAAA,QAAOC,GAAsB;MAClDC,GACCA,EAAMC,YACNC,KAAG;;;;;kBAKOF,EAAMI,QACF,aAAaJ,EAAMI,QAAQ,MAAMJ,EAAMI,QAAQ,MAC/C;;EAIhBC,EAAoBH,EAAAA,GAAG;;;iBAGZI,EAAAA,QAAQC,KAAK;mBACXD,EAAAA,QAAQC,KAAK;;EAI1BC,EAAiBN,EAAAA,GAAG;;;;EAMbO,EAAcX,EAAAA,QAAOC,GAAqB;wBAC/B,EAAGW,YACR,cAAXA,EACMC,EAAAA,UAAU,cACVA,EAAAA,UAAU;aACXA,EAAAA,UAAU;mBACJL,EAAAA,QAAQC,KAAK;;;;;;MAM1B,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,KAAG;sBACJG;qCACeQ,EAAAA,UAAUC;kBAGnC,IAAK,qBACD,OAAOZ,KAAG;sBACJG;qCACeQ,EAAAA,UAAUC;wCACPC,EAAAA,UAAU;0BACxBJ,EAAAA,UAAc;kBAG5B,IAAK,MACD,OAAOT,KAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,KAAG;sBACJM;yCACmBO,EAAAA,UAAU,gBAAgBJ,EAAAA,UACvC;kBAIhB,IAAK,gBACD,OAAOT,KAAG;sBACJG;qCACeQ,EAAAA,UAAUG;;sBAEd,YAAXN,GACFR,KAAG;4CACqBS,EAAAA,UAAU;iCACrBA,EAAAA,UAAU;;kBAI/B,QACI,MAAO;"}

package/cjs/breadcrumb/breadcrumb.style.js

@@ -1,64 +0,0 @@
-"use strict";var t=require("@lifesg/react-icons/chevron-right"),e=require("styled-components"),i=require("../typography/index.js"),n=require("../v3_theme/index.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=r(e);const o=a.default.div`
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    margin: ${n.V3_Spacing["spacing-32"]} 0;
-
-    ${n.V3_MediaQuery.MaxWidth.xl} {
-        margin: ${n.V3_Spacing["spacing-24"]} 0;
-    }
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        margin: ${n.V3_Spacing["spacing-16"]} 0;
-    }
-`,l=a.default.ul`
-    display: inline-flex;
-    width: 100%;
-    flex-wrap: wrap;
-    white-space: nowrap;
-    margin-left: -${n.V3_Spacing["spacing-8"]};
-    font-size: ${n.V3_Font.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 */
-    }
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        flex-wrap: nowrap;
-    }
-`,p=a.default.div`
-    width: ${n.V3_Spacing["spacing-64"]};
-    height: calc(1lh + ${n.V3_Spacing["spacing-4"]});
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-
-    ${t=>{let i;const r="rgba(255,255,255,0.001)",a=n.V3_Colour.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||a}, \n\t\t\t\t\t${r}\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||a},\n\t\t\t\t\t${r}\n\t\t\t\t);\n\t\t\t`,e.css`
-            ${n.V3_MediaQuery.MaxWidth.lg} {
-                ${i}
-            }
-        `}};
-`,s=a.default.li`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    line-height: inherit;
-    font-size: inherit;
-    ${t=>t.$styleProps||""};
-`,g=a.default(t.ChevronRightIcon)`
-    height: 1em;
-    width: 1em;
-    color: ${n.V3_Colour["icon-subtle"]};
-`,d=a.default(i.Typography.BodyMD)`
-    display: inline-block;
-    color: ${n.V3_Colour["text-subtlest"]};
-`,c=a.default(i.Typography.BodyMD)`
-    margin: ${n.V3_Spacing["spacing-8"]} !important;
-`,u=a.default(i.Typography.LinkMD)`
-    margin: ${n.V3_Spacing["spacing-8"]} !important;
-`;exports.Caret=g,exports.Content=l,exports.CurrentLabel=c,exports.Fade=p,exports.Item=s,exports.PreviousLink=u,exports.Slash=d,exports.Wrapper=o;
-//# sourceMappingURL=breadcrumb.style.js.map

package/cjs/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":"wPAsBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;;cAInBC,EAAAA,WAAW;;MAEnBC,EAAAA,cAAcC,SAASC;kBACXH,EAAAA,WAAW;;;MAGvBC,EAAAA,cAAcC,SAASE;kBACXJ,EAAAA,WAAW;;EAIhBK,EAAUP,EAAAA,QAAOQ,EAAE;;;;;oBAKZN,EAAAA,WAAW;iBACdO,EAAAA,QAAQC,KAAK;;;;;;;;;MASxBP,EAAAA,cAAcC,SAASE;;;EAKhBK,EAAOX,EAAAA,QAAOC,GAAc;aAC5BC,EAAAA,WAAW;yBACCA,EAAAA,WAAW;;;;;;MAM7BU,IACC,IAAIC,EACJ,MAAMC,EAAmB,0BACnBC,EAAYC,EAAAA,UAAUC,GAAGL,GAsB/B,OAnBIC,EADoB,SAApBD,EAAMM,UACU,sGAIrBN,EAAMO,kBAAoBJ,kBAC1BD,wBAIqB,oGAIrBF,EAAMO,kBAAoBJ,iBAC1BD,wBAKQM,KAAG;cACJjB,EAAAA,cAAcC,SAASE;kBACnBO;;SAET;EAIIQ,EAAOrB,EAAAA,QAAOsB,EAAkB;;;;;;MAMtCV,GACQA,EAAMW,aAAe;EAIvBC,EAAQxB,EAAAA,QAAOyB,EAAAA,iBAAiB;;;aAGhCT,EAAAA,UAAU;EAGVU,EAAQ1B,EAAAA,QAAO2B,aAAWC,OAAO;;aAEjCZ,EAAAA,UAAU;EAGVa,EAAe7B,EAAAA,QAAO2B,aAAWC,OAAO;cACvC1B,EAAAA,WAAW;EAGZ4B,EAAe9B,EAAAA,QAAO2B,aAAWI,OAAO;cACvC7B,EAAAA,WAAW;"}

package/cjs/button/button.style.js

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

package/cjs/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":"uSA4BO,MAAMA,EAAOC,EAAAA,QAAOC,MAAsB;eAClCC,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;;cAEvCC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;sBACnCC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;qBACxCC,EAAAA,eAAe;;;;;;;;;MAS7BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,KAAG;wCACcC,EAAAA,UAAUC;oCACdJ,EAAMK,gBAChBF,EAAAA,UAAU,uBACVJ,EAAAA,eAAe;;6BAEZC,EAAMK,gBACTF,EAAAA,UAAU,cACVJ,EAAAA,eAAe;;;;;gDAKOI,EAAAA,UAAU;;;kBAI9C,IAAK,QACD,OAAOD,KAAG;wCACcC,EAAAA,UAAUC;oCACdD,EAAAA,UAAUG;;6BAEjBN,EAAMK,gBACTF,EAAAA,UAAU,cACVJ,EAAAA,eAAe;;;;;gDAKOI,EAAAA,UAAU;;;kBAK9C,IAAK,OACD,OAAOD,KAAG;;;6BAGGF,EAAMK,gBACTF,EAAAA,UAAU,cACVJ,EAAAA,eAAe;;;;gDAIOI,EAAAA,UAAU;;;kBAI9C,IAAK,WACD,OAAOD,KAAG;wCACcC,EAAAA,UAAU;;;;;;;;6BAQrBA,EAAAA,UAAU;kBAE3B,QACI,OAAOD,KAAG;wCACcF,EAAMK,gBACpBF,EAAAA,UAAU,mBACVJ,EAAAA,eAAe;;sBAEnBQ,EAAAA,cAAcC,SAASC;;;;6BAIhBV,EAAAA,eAAe;;;;;gDAKIC,EAAMK,gBACpBF,EAAAA,UAAU,yBACVJ,EAAAA,eACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,KAAG;;sBAEJS,EAAAA,QAAQ;;sBAERJ,EAAAA,cAAcC,SAASI;;;kBAKjC,IAAK,QACD,OAAOV,KAAG;;sBAEJS,EAAAA,QAAQ;;sBAERJ,EAAAA,cAAcC,SAASI;;;kBAKjC,QACI,OAAOV,KAAG;;sBAEJS,EAAAA,QAAQ;;sBAERJ,EAAAA,cAAcC,SAASI;;;;EAQhCC,EAAUnB,EAAAA,QAAOoB,EAAAA,wBAE5B;oBACmBd,GAAWA,EAAMe,aAAe,SAAW;"}

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

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

package/cjs/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":"gTAaA,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,EAAAA,OACbZ,EAXE,CAAA,WAAA,WAAA,YAAA,SAAA,OAAA,eAAA,UAAA,wBAAA,YAaAa,EAAoC,CACtCC,oBAAqBP,EACrBQ,aAAcZ,EAAW,WAAaC,EACtCY,iBAAkB,UAClBC,gBAAiBZ,GAGrB,OACIa,OAACC,EAAAA,mBAAkBC,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,EAAAA,IAACC,0BAAuB,CAAA,GACxBlB,EACAmB,EAAAA,QAAMC,aAAapB,EAAM,CAAE,eAAe,IAC1C,KACJiB,EAAAA,IAAA,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,EAAAA,OACbZ,EAXE,CAAA,WAAA,WAAA,YAAA,SAAA,OAAA,eAAA,UAAA,wBAAA,YAaAa,EAAoC,CACtCC,oBAAqBP,EACrBQ,aAAcZ,EAAW,WAAaC,EACtCY,iBAAkB,QAClBC,gBAAiBZ,GAGrB,OACIa,OAACC,EAAAA,mBAAkBC,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,EAAAA,IAACC,0BAAuB,CAAA,GACxBlB,EACAmB,EAAAA,QAAMC,aAAapB,EAAM,CAAE,eAAe,IAC1C,KACJiB,EAAAA,IAAA,OAAA,CAAArB,SAAOA,OACU,EAG7B0B,EAAeD,YAAc,uBAEtB,MAAME,EAAiB,CAC1BC,QAASL,EAAAA,QAAMM,WAAWhC,GAC1BiC,MAAOP,EAAAA,QAAMM,WAAWH"}

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

@@ -1,11 +0,0 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.style.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=n(t).default(e.Main)`
-    flex-direction: ${t=>"right"===t.$buttonIconPosition?"row-reverse":"row"};
-    gap: 0.5rem;
-
-    svg {
-        flex-shrink: 0;
-        height: 1em;
-        width: 1em;
-    }
-`;exports.MainButtonWithIcon=o;
-//# sourceMappingURL=button-with-icon.style.js.map

package/cjs/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":"qKAgBaA,OAAqBC,QAAOC,EAAAA,KAA6B;sBAC/CC,GACe,UAA9BA,EAAMC,oBAAkC,cAAgB;;;;;;;;"}

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

@@ -1,2 +0,0 @@
-"use strict";var t=require("./button-with-icon.js");exports.ButtonWithIcon=t.ButtonWithIcon;
-//# sourceMappingURL=index.js.map

package/cjs/card/card.style.js

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

package/cjs/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":"0hBAcO,MAAMA,OAAaC,QAAOC,GAAG;qBACfC,EAAAA,UAAc;kBACjBC,EAAAA,OAAOC;eACVC,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;MAC/CC,UACC,MAAmC,UAAjB,UAAXA,EAAMC,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;4BACWC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;wBAC/CC,EAAAA,UAAkB;gBAE5BF,KAAG;gCACeG,EAAAA,UAAU;eAC3B;"}

package/cjs/checkbox/checkbox.style.js

@@ -1,61 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons"),o=require("styled-components"),i=require("../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=t(o);const r=o.keyframes`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`,n=o.css`
-    animation: ${i.V3_Motion["duration-150"]} ${i.V3_Motion["ease-default"]}
-        ${r};
-    width: 100%;
-    height: 100%;
-    transition: color ${i.V3_Motion["duration-150"]} ${i.V3_Motion["ease-default"]};
-`,s=l.default(e.SquareIcon)`
-    ${n}
-    color: ${i.V3_Colour["icon-primary-subtlest"]};
-`,d=l.default(e.SquareFillIcon)`
-    ${n}
-    color: ${i.V3_Colour["icon-disabled-subtle"]};
-`,a=l.default(e.SquareTickFillIcon)`
-    ${n}
-    color: ${e=>e.$disabled?i.V3_Colour["icon-disabled-subtle"](e):i.V3_Colour["icon-selected"](e)};
-`,c=l.default(e.MinusSquareFillIcon)`
-    ${n}
-    color: ${e=>e.$disabled?i.V3_Colour["icon-disabled-subtle"](e):i.V3_Colour["icon-selected"](e)};
-`,u=l.default.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    ${e=>o.css`
-        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 ${i.V3_Colour["focus-ring"]};
-        outline-offset: 0px;
-        border-radius: 4px;
-    }
-`,p=l.default.input`
-    position: absolute;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-
-    &:hover
-        + ${s},
-        &:hover
-        + ${a},
-        &:hover
-        + ${c} {
-        @media (pointer: fine) {
-            color: ${e=>!e.disabled&&i.V3_Colour["icon-hover"](e)};
-        }
-    }
-`;exports.Container=u,exports.Input=p,exports.StyledCheckedIcon=a,exports.StyledInteremediateIcon=c,exports.StyledUncheckedDisabledIcon=d,exports.StyledUncheckedIcon=s;
-//# sourceMappingURL=checkbox.style.js.map

package/cjs/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":"sMAwBA,MAAMA,EAASC,EAAAA,SAAS;;;;;;;EASlBC,EAAiBC,EAAAA,GAAG;iBACTC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;UAC9CJ;;;wBAGcI,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAGlDC,EAAsBC,EAAAA,QAAOC,EAAAA,WAAuB;MAC3DL;aACOM,EAAAA,UAAU;EAGVC,EAA8BH,EAAAA,QAAOI,EAAAA,eAA2B;MACvER;aACOM,EAAAA,UAAU;EAGVG,EAAoBL,EAAAA,QAAOM,EAAAA,mBAA+B;MACjEV;aACQW,GACNA,EAAMC,UACAN,EAAAA,UAAU,wBAAwBK,GAClCL,YAAU,iBAAiBK;EAG5BE,EAA0BT,EAAAA,QAAOU,EAAAA,oBAAgC;MACxEd;aACQW,GACNA,EAAMC,UACAN,EAAAA,UAAU,wBAAwBK,GAClCL,YAAU,iBAAiBK;EAG5BI,EAAYX,EAAAA,QAAOY,GAAe;;;;;;MAMxCL,GAAUV,KAAG;kBACqB,UAAvBU,EAAMM,aAA2B,SAAW;iBACtB,UAAvBN,EAAMM,aAA2B,SAAW;;;;;6BAKhCX,EAAAA,UAAU;;;;EAM1BY,EAAQd,EAAAA,QAAOe,KAAoB;;;;;cAKjCR,GAAWA,EAAMS,SAAW,cAAgB;;;YAG/CjB;;YAEAM;;YAEAI;;qBAEUF,IACLA,EAAMS,UAAYd,EAAAA,UAAU,cAAcK;;;"}

package/cjs/countdown-timer/countdown-timer.style.js

@@ -1,58 +0,0 @@
-"use strict";var r=require("@lifesg/react-icons"),o=require("styled-components"),e=require("../v3_theme/index.js");function i(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var t=i(o);const n=t.default.div`
-    width: 100%;
-`,a=t.default.div`
-    ${e.V3_Font["body-baseline-regular"]}
-    display: flex;
-    align-items: center;
-    padding: ${e.V3_Spacing["spacing-8"]} ${e.V3_Spacing["spacing-16"]};
-    border-radius: ${e.V3_Radius.sm};
-    color: ${e.V3_Colour["text-primary"]};
-    border: ${e.V3_Border["width-010"]} ${e.V3_Border.solid};
-    border-color: ${e.V3_Colour["border-primary"]};
-    background-color: ${e.V3_Colour.bg};
-
-    ${e.V3_MediaQuery.MaxWidth.sm} {
-        padding: ${e.V3_Spacing["spacing-16"]};
-    }
-
-    ${r=>{if(r.$warn)return o.css`
-                color: ${e.V3_Colour["text-error"]};
-                border-color: ${e.V3_Colour["border-error"]};
-            `}}
-`,d=t.default(a)`
-    position: relative;
-    opacity: ${r=>r.$visible?1:0};
-`,s=t.default(a)`
-    position: fixed;
-    z-index: 10;
-
-    ${r=>{const{$top:i,$left:t,$right:n,$warn:a}=r;return o.css`
-            /* style object will be converted to px */
-            ${{top:i,left:t,right:n}}
-
-            box-shadow: ${a?e.V3_Shadow["xs-error-strong"]:e.V3_Shadow["xs-focus-strong"]};
-
-            ${e.V3_MediaQuery.MaxWidth.sm} {
-                left: 0;
-                right: 0;
-                border-radius: 0;
-                border-left: none;
-                border-right: none;
-                box-shadow: none;
-            }
-        `}}
-`,l=t.default.div`
-    font-weight: ${e.V3_Font.Spec["weight-bold"]};
-    margin-left: ${e.V3_Spacing["spacing-8"]};
-    margin-right: ${e.V3_Spacing["spacing-24"]};
-
-    ${e.V3_MediaQuery.MaxWidth.sm} {
-        margin-right: ${e.V3_Spacing["spacing-48"]};
-    }
-`,c=t.default.div`
-    font-weight: ${e.V3_Font.Spec["weight-semibold"]};
-    margin-left: auto;
-`,p=t.default(r.ClockIcon)`
-    color: ${r=>r.$warn?e.V3_Colour["icon-error"]:e.V3_Colour["icon-primary"]};
-`;exports.BaseCountdown=a,exports.Countdown=d,exports.FixedCountdown=s,exports.TimeLeft=l,exports.Timer=c,exports.TimerIcon=p,exports.Wrapper=n;
-//# sourceMappingURL=countdown-timer.style.js.map

package/cjs/countdown-timer/countdown-timer.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"countdown-timer.style.js","sources":["../../../src/countdown-timer/countdown-timer.style.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE TYPES\n// =============================================================================\n\ninterface CountdownStyleProps {\n    $warn: boolean;\n    $visible?: boolean | undefined;\n    $top?: number | undefined;\n    $left?: number | undefined;\n    $right?: number | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div`\n    width: 100%;\n`;\n\nexport const BaseCountdown = styled.div<CountdownStyleProps>`\n    ${V3_Font[\"body-baseline-regular\"]}\n    display: flex;\n    align-items: center;\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    color: ${V3_Colour[\"text-primary\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]};\n    border-color: ${V3_Colour[\"border-primary\"]};\n    background-color: ${V3_Colour[\"bg\"]};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$warn) {\n            return css`\n                color: ${V3_Colour[\"text-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n`;\n\nexport const Countdown = styled(BaseCountdown)`\n    position: relative;\n    opacity: ${(props) => (props.$visible ? 1 : 0)};\n`;\n\nexport const FixedCountdown = styled(BaseCountdown)`\n    position: fixed;\n    z-index: 10;\n\n    ${(props) => {\n        const { $top, $left, $right, $warn } = props;\n        return css`\n            /* style object will be converted to px */\n            ${{ top: $top, left: $left, right: $right }}\n\n            box-shadow: ${$warn\n                ? V3_Shadow[\"xs-error-strong\"]\n                : V3_Shadow[\"xs-focus-strong\"]};\n\n            ${V3_MediaQuery.MaxWidth.sm} {\n                left: 0;\n                right: 0;\n                border-radius: 0;\n                border-left: none;\n                border-right: none;\n                box-shadow: none;\n            }\n        `;\n    }}\n`;\n\nexport const TimeLeft = styled.div`\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    margin-right: ${V3_Spacing[\"spacing-24\"]};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: ${V3_Spacing[\"spacing-48\"]};\n    }\n`;\n\nexport const Timer = styled.div`\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-left: auto;\n`;\n\nexport const TimerIcon = styled(ClockIcon)<CountdownStyleProps>`\n    color: ${(props) =>\n        props.$warn ? V3_Colour[\"icon-error\"] : V3_Colour[\"icon-primary\"]};\n`;\n"],"names":["Wrapper","styled","div","BaseCountdown","V3_Font","V3_Spacing","V3_Radius","V3_Colour","V3_Border","V3_MediaQuery","MaxWidth","sm","props","$warn","css","Countdown","$visible","FixedCountdown","$top","$left","$right","top","left","right","V3_Shadow","TimeLeft","Spec","Timer","TimerIcon","ClockIcon"],"mappings":"sMA6BO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;EAIpBC,EAAgBF,EAAAA,QAAOC,GAAwB;MACtDE,EAAAA,QAAQ;;;eAGCC,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;qBAChCC,EAAAA,UAAc;aACtBC,EAAAA,UAAU;cACTC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;oBACrCD,EAAAA,UAAU;wBACNA,EAAAA,UAAc;;MAEhCE,EAAAA,cAAcC,SAASC;mBACVN,EAAAA,WAAW;;;MAGvBO,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;yBACGP,EAAAA,UAAU;gCACHA,EAAAA,UAAU;aAElC;EAIKQ,EAAYd,EAAAA,QAAOE,EAAc;;eAE9BS,GAAWA,EAAMI,SAAW,EAAI;EAGnCC,EAAiBhB,EAAAA,QAAOE,EAAc;;;;MAI5CS,IACC,MAAMM,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMP,MAAEA,GAAUD,EACvC,OAAOE,KAAG;;cAEJ,CAAEO,IAAKH,EAAMI,KAAMH,EAAOI,MAAOH;;0BAErBP,EACRW,EAAAA,UAAU,mBACVA,EAAAA,UAAU;;cAEdf,EAAAA,cAAcC,SAASC;;;;;;;;SAQ5B;EAIIc,EAAWxB,EAAAA,QAAOC,GAAG;mBACfE,EAAAA,QAAQsB,KAAK;mBACbrB,EAAAA,WAAW;oBACVA,EAAAA,WAAW;;MAEzBI,EAAAA,cAAcC,SAASC;wBACLN,EAAAA,WAAW;;EAItBsB,EAAQ1B,EAAAA,QAAOC,GAAG;mBACZE,EAAAA,QAAQsB,KAAK;;EAInBE,EAAY3B,EAAAA,QAAO4B,EAAAA,UAA+B;aACjDjB,GACNA,EAAMC,MAAQN,EAAAA,UAAU,cAAgBA,YAAU;"}