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

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("../theme/index.js"),n=require("../typography/typography.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: ${i.Spacing["spacing-32"]} 0;
-
-    ${i.MediaQuery.MaxWidth.xl} {
-        margin: ${i.Spacing["spacing-24"]} 0;
-    }
-
-    ${i.MediaQuery.MaxWidth.lg} {
-        margin: ${i.Spacing["spacing-16"]} 0;
-    }
-`,l=a.default.ul`
-    display: inline-flex;
-    width: 100%;
-    flex-wrap: wrap;
-    white-space: nowrap;
-    margin-left: -${i.Spacing["spacing-8"]};
-    font-size: ${i.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 */
-    }
-
-    ${i.MediaQuery.MaxWidth.lg} {
-        flex-wrap: nowrap;
-    }
-`,p=a.default.div`
-    width: ${i.Spacing["spacing-64"]};
-    height: calc(1lh + ${i.Spacing["spacing-4"]});
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-
-    ${t=>{let n;const r="rgba(255,255,255,0.001)",a=i.Colour.bg(t);return n="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`
-            ${i.MediaQuery.MaxWidth.lg} {
-                ${n}
-            }
-        `}};
-`,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: ${i.Colour["icon-subtle"]};
-`,d=a.default(n.Typography.BodyMD)`
-    display: inline-block;
-    color: ${i.Colour["text-subtlest"]};
-`,c=a.default(n.Typography.BodyMD)`
-    margin: ${i.Spacing["spacing-8"]} !important;
-`,u=a.default(n.Typography.LinkMD)`
-    margin: ${i.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\";\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography/typography\";\n\n// =============================================================================\n// STYLE TYPES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface FadeProps {\n    $backgroundColor?: string[];\n    $position?: \"left\" | \"right\";\n}\n\ninterface ItemStyleProps {\n    $styleProps?: string;\n}\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n    width: 100%;\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n\nexport const Content = styled.ul`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: -${Spacing[\"spacing-8\"]};\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    overflow-x: scroll;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const Fade = styled.div<FadeProps>`\n    width: ${Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${Spacing[\"spacing-4\"]});\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n\n    ${(props) => {\n        let positionStyle: string;\n        const transparentColor = \"rgba(255,255,255,0.001)\";\n        const fadeColor = Colour.bg(props);\n\n        if (props.$position === \"left\") {\n            positionStyle = `\n\t\t\t\tleft: -8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\t${props.$backgroundColor || fadeColor}, \n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        } else {\n            positionStyle = `\n\t\t\t\tright: 8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t${props.$backgroundColor || fadeColor},\n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        }\n\n        return css`\n            ${MediaQuery.MaxWidth.lg} {\n                ${positionStyle}\n            }\n        `;\n    }};\n`;\n\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n    ${(props) => {\n        return props.$styleProps || ``;\n    }};\n`;\n\nexport const Caret = styled(ChevronRightIcon)`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const Slash = styled(Typography.BodyMD)`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const CurrentLabel = styled(Typography.BodyMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const PreviousLink = styled(Typography.LinkMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["Wrapper","styled","div","Spacing","MediaQuery","MaxWidth","xl","lg","Content","ul","Font","Spec","Fade","props","positionStyle","transparentColor","fadeColor","Colour","bg","$position","$backgroundColor","css","Item","li","$styleProps","Caret","ChevronRightIcon","Slash","Typography","BodyMD","CurrentLabel","PreviousLink","LinkMD"],"mappings":"0PAqBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;;cAInBC,EAAAA,QAAQ;;MAEhBC,EAAAA,WAAWC,SAASC;kBACRH,EAAAA,QAAQ;;;MAGpBC,EAAAA,WAAWC,SAASE;kBACRJ,EAAAA,QAAQ;;EAIbK,EAAUP,EAAAA,QAAOQ,EAAE;;;;;oBAKZN,EAAAA,QAAQ;iBACXO,EAAAA,KAAKC,KAAK;;;;;;;;;MASrBP,EAAAA,WAAWC,SAASE;;;EAKbK,EAAOX,EAAAA,QAAOC,GAAc;aAC5BC,EAAAA,QAAQ;yBACIA,EAAAA,QAAQ;;;;;;MAM1BU,IACC,IAAIC,EACJ,MAAMC,EAAmB,0BACnBC,EAAYC,EAAAA,OAAOC,GAAGL,GAsB5B,OAnBIC,EADoB,SAApBD,EAAMM,UACU,sGAIrBN,EAAMO,kBAAoBJ,kBAC1BD,wBAIqB,oGAIrBF,EAAMO,kBAAoBJ,iBAC1BD,wBAKQM,KAAG;cACJjB,EAAAA,WAAWC,SAASE;kBAChBO;;SAET;EAIIQ,EAAOrB,EAAAA,QAAOsB,EAAkB;;;;;;MAMtCV,GACQA,EAAMW,aAAe;EAIvBC,EAAQxB,EAAAA,QAAOyB,EAAAA,iBAAiB;;;aAGhCT,EAAAA,OAAO;EAGPU,EAAQ1B,EAAAA,QAAO2B,aAAWC,OAAO;;aAEjCZ,EAAAA,OAAO;EAGPa,EAAe7B,EAAAA,QAAO2B,aAAWC,OAAO;cACvC1B,EAAAA,QAAQ;EAGT4B,EAAe9B,EAAAA,QAAO2B,aAAWI,OAAO;cACvC7B,EAAAA,QAAQ;"}

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("../theme/index.js"),t=require("../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.Spacing["spacing-8"]} ${r.Spacing["spacing-16"]};
-    min-width: 4rem;
-    border: ${r.Border["width-010"]} ${r.Border.solid} transparent;
-    transition: all ${r.Motion["duration-250"]} ${r.Motion["ease-default"]};
-    border-radius: ${t.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.Colour.bg};
-                    border-color: ${e.$buttonIsDanger?r.Colour["border-error-strong"]:t.ThemeButton["button-secondary-colour-border"]};
-
-                    color: ${e.$buttonIsDanger?r.Colour["text-error"]:t.ThemeButton["button-secondary-colour-text"]};
-
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${r.Colour["bg-hover-neutral"]};
-                        }
-                    }
-                `;case"light":return o.css`
-                    background-color: ${r.Colour.bg};
-                    border-color: ${r.Colour.border};
-
-                    color: ${e.$buttonIsDanger?r.Colour["text-error"]:t.ThemeButton["button-light-colour-text"]};
-
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${r.Colour["bg-hover-neutral"]};
-                        }
-                    }
-                `;case"link":return o.css`
-                    background-color: transparent;
-
-                    color: ${e.$buttonIsDanger?r.Colour["text-error"]:t.ThemeButton["button-link-colour-text"]};
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${r.Colour["bg-hover-neutral"]};
-                        }
-                    }
-                `;case"disabled":return o.css`
-                    background-color: ${r.Colour["bg-disabled"]};
-
-                    cursor: not-allowed;
-
-                    &:hover {
-                        box-shadow: none;
-                    }
-
-                    color: ${r.Colour["text-disabled"]};
-                `;default:return o.css`
-                    background-color: ${e.$buttonIsDanger?r.Colour["bg-error-strong"]:t.ThemeButton["button-default-colour-bg"]};
-
-                    ${r.MediaQuery.MaxWidth.sm} {
-                        width: 100%;
-                    }
-
-                    color: ${t.ThemeButton["button-default-colour-text"]};
-
-                    &:hover,
-                    &:active {
-                        @media (pointer: fine) {
-                            background-color: ${e.$buttonIsDanger?r.Colour["bg-error-strong-hover"]:t.ThemeButton["button-default-colour-bg-hover"]};
-                        }
-                    }
-                `}}}
-
-    // -----------------------------------------------------------------------------
-	// BUTTON SIZE + TEXT SIZE
-	// -----------------------------------------------------------------------------
-	${e=>{switch(e.$buttonSizeStyle){case"small":return o.css`
-                    height: 2.5rem;
-                    ${r.Font["body-md-semibold"]}
-
-                    ${r.MediaQuery.MaxWidth.xxs} {
-                        height: auto;
-                    }
-                `;case"large":return o.css`
-                    height: 4rem;
-                    ${r.Font["heading-md-semibold"]}
-
-                    ${r.MediaQuery.MaxWidth.xxs} {
-                        height: auto;
-                    }
-                `;default:return o.css`
-                    height: 3rem;
-                    ${r.Font["heading-xs-semibold"]}
-
-                    ${r.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\";\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":"iSAoBO,MAAMA,EAAOC,EAAAA,QAAOC,MAAsB;eAClCC,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;cAEjCC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;sBAC7BC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;qBAClCC,EAAAA,YAAY;;;;;;;;;MAS1BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,KAAG;wCACcC,EAAAA,OAAOC;oCACXJ,EAAMK,gBAChBF,EAAAA,OAAO,uBACPJ,EAAAA,YAAY;;6BAETC,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;;gDAKUI,EAAAA,OAAO;;;kBAI3C,IAAK,QACD,OAAOD,KAAG;wCACcC,EAAAA,OAAOC;oCACXD,EAAAA,OAAOG;;6BAEdN,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;;gDAKUI,EAAAA,OAAO;;;kBAK3C,IAAK,OACD,OAAOD,KAAG;;;6BAGGF,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;gDAIUI,EAAAA,OAAO;;;kBAI3C,IAAK,WACD,OAAOD,KAAG;wCACcC,EAAAA,OAAO;;;;;;;;6BAQlBA,EAAAA,OAAO;kBAExB,QACI,OAAOD,KAAG;wCACcF,EAAMK,gBACpBF,EAAAA,OAAO,mBACPJ,EAAAA,YAAY;;sBAEhBQ,EAAAA,WAAWC,SAASC;;;;6BAIbV,EAAAA,YAAY;;;;;gDAKOC,EAAMK,gBACpBF,EAAAA,OAAO,yBACPJ,EAAAA,YACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;kBAK9B,IAAK,QACD,OAAOV,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;kBAK9B,QACI,OAAOV,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;;EAQ7BC,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\";\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":"gTAcA,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\";\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":"qKAcaA,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 r=require("styled-components"),d=require("../theme/index.js");function e(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}const o=e(r).default.div`
-    border-radius: ${d.Radius.md};
-    background: ${d.Colour.bg};
-    padding: ${d.Spacing["spacing-16"]} ${d.Spacing["spacing-32"]};
-    ${e=>{var o;return"dark"===(null===(o=e.theme)||void 0===o?void 0:o.colourMode)?r.css`
-                  border: ${d.Border["width-010"]} ${d.Border.solid}
-                      ${d.Colour.border};
-              `:r.css`
-                  box-shadow: ${d.Shadow["md-subtle"]};
-              `}}
-`;exports.StyledCard=o;
-//# 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\";\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":"uJAMO,MAAMA,OAAaC,QAAOC,GAAG;qBACfC,EAAAA,OAAW;kBACdC,EAAAA,OAAOC;eACVC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;MACzCC,UACC,MAAmC,UAAjB,UAAXA,EAAMC,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;4BACWC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;wBACzCR,EAAAA,OAAe;gBAEzBO,KAAG;gCACeE,EAAAA,OAAO;eACxB;"}

package/cjs/checkbox/checkbox.style.js

@@ -1,60 +0,0 @@
-"use strict";var e=require("@lifesg/react-icons"),o=require("styled-components"),i=require("../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;
-  }
-`,s=o.css`
-    animation: ${i.Motion["duration-150"]} ${i.Motion["ease-default"]} ${r};
-    width: 100%;
-    height: 100%;
-    transition: color ${i.Motion["duration-150"]} ${i.Motion["ease-default"]};
-`,n=l.default(e.SquareIcon)`
-    ${s}
-    color: ${i.Colour["icon-primary-subtlest"]};
-`,a=l.default(e.SquareFillIcon)`
-    ${s}
-    color: ${i.Colour["icon-disabled-subtle"]};
-`,d=l.default(e.SquareTickFillIcon)`
-    ${s}
-    color: ${e=>e.$disabled?i.Colour["icon-disabled-subtle"](e):i.Colour["icon-selected"](e)};
-`,u=l.default(e.MinusSquareFillIcon)`
-    ${s}
-    color: ${e=>e.$disabled?i.Colour["icon-disabled-subtle"](e):i.Colour["icon-selected"](e)};
-`,c=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.Colour["focus-ring"]};
-        outline-offset: 0px;
-        border-radius: 4px;
-    }
-`,$=l.default.input`
-    position: absolute;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    cursor: ${e=>e.$disabledVisual?"not-allowed":"pointer"};
-
-    &:hover
-        + ${n},
-        &:hover
-        + ${d},
-        &:hover
-        + ${u} {
-        @media (pointer: fine) {
-            color: ${e=>!e.$disabledVisual&&i.Colour["icon-hover"](e)};
-        }
-    }
-`;exports.Container=c,exports.Input=$,exports.StyledCheckedIcon=d,exports.StyledInteremediateIcon=u,exports.StyledUncheckedDisabledIcon=a,exports.StyledUncheckedIcon=n;
-//# 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\";\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":"mMA2BA,MAAMA,EAASC,EAAAA,SAAS;;;;;;;EASlBC,EAAiBC,EAAAA,GAAG;iBACTC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO,mBAAmBJ;;;wBAG7CI,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;EAG5CC,EAAsBC,EAAAA,QAAOC,EAAAA,WAAuB;MAC3DL;aACOM,EAAAA,OAAO;EAGPC,EAA8BH,EAAAA,QAAOI,EAAAA,eAA2B;MACvER;aACOM,EAAAA,OAAO;EAGPG,EAAoBL,EAAAA,QAAOM,EAAAA,mBAA+B;MACjEV;aACQW,GACNA,EAAMC,UACAN,EAAAA,OAAO,wBAAwBK,GAC/BL,SAAO,iBAAiBK;EAGzBE,EAA0BT,EAAAA,QAAOU,EAAAA,oBAAgC;MACxEd;aACQW,GACNA,EAAMC,UACAN,EAAAA,OAAO,wBAAwBK,GAC/BL,SAAO,iBAAiBK;EAGzBI,EAAYX,EAAAA,QAAOY,GAAe;;;;;;MAMxCL,GAAUV,KAAG;kBACqB,UAAvBU,EAAMM,aAA2B,SAAW;iBACtB,UAAvBN,EAAMM,aAA2B,SAAW;;;;;6BAKhCX,EAAAA,OAAO;;;;EAMvBY,EAAQd,EAAAA,QAAOe,KAAsB;;;;;cAKnCR,GAAWA,EAAMS,gBAAkB,cAAgB;;;YAGtDjB;;YAEAM;;YAEAI;;qBAEUF,IACLA,EAAMS,iBAAmBd,EAAAA,OAAO,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("../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.Font["body-baseline-regular"]}
-    display: flex;
-    align-items: center;
-    padding: ${e.Spacing["spacing-8"]} ${e.Spacing["spacing-16"]};
-    border-radius: ${e.Radius.sm};
-    color: ${e.Colour["text-primary"]};
-    border: ${e.Border["width-010"]} ${e.Border.solid};
-    border-color: ${e.Colour["border-primary"]};
-    background-color: ${e.Colour.bg};
-
-    ${e.MediaQuery.MaxWidth.sm} {
-        padding: ${e.Spacing["spacing-16"]};
-    }
-
-    ${r=>{if(r.$warn)return o.css`
-                color: ${e.Colour["text-error"]};
-                border-color: ${e.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.Shadow["xs-error-strong"]:e.Shadow["xs-focus-strong"]};
-
-            ${e.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.Font.Spec["weight-bold"]};
-    margin-left: ${e.Spacing["spacing-8"]};
-    margin-right: ${e.Spacing["spacing-24"]};
-
-    ${e.MediaQuery.MaxWidth.sm} {
-        margin-right: ${e.Spacing["spacing-48"]};
-    }
-`,c=t.default.div`
-    font-weight: ${e.Font.Spec["weight-semibold"]};
-    margin-left: auto;
-`,p=t.default(r.ClockIcon)`
-    color: ${r=>r.$warn?e.Colour["icon-error"]:e.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\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../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    ${Font[\"body-baseline-regular\"]}\n    display: flex;\n    align-items: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]};\n    color: ${Colour[\"text-primary\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]};\n    border-color: ${Colour[\"border-primary\"]};\n    background-color: ${Colour[\"bg\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$warn) {\n            return css`\n                color: ${Colour[\"text-error\"]};\n                border-color: ${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                ? Shadow[\"xs-error-strong\"]\n                : Shadow[\"xs-focus-strong\"]};\n\n            ${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: ${Font.Spec[\"weight-bold\"]};\n    margin-left: ${Spacing[\"spacing-8\"]};\n    margin-right: ${Spacing[\"spacing-24\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-48\"]};\n    }\n`;\n\nexport const Timer = styled.div`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    margin-left: auto;\n`;\n\nexport const TimerIcon = styled(ClockIcon)<CountdownStyleProps>`\n    color: ${(props) =>\n        props.$warn ? Colour[\"icon-error\"] : Colour[\"icon-primary\"]};\n`;\n"],"names":["Wrapper","styled","div","BaseCountdown","Font","Spacing","Radius","Colour","Border","MediaQuery","MaxWidth","sm","props","$warn","css","Countdown","$visible","FixedCountdown","$top","$left","$right","top","left","right","Shadow","TimeLeft","Spec","Timer","TimerIcon","ClockIcon"],"mappings":"mMA4BO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;EAIpBC,EAAgBF,EAAAA,QAAOC,GAAwB;MACtDE,EAAAA,KAAK;;;eAGIC,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;qBAC1BC,EAAAA,OAAW;aACnBC,EAAAA,OAAO;cACNC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;oBAC/BD,EAAAA,OAAO;wBACHA,EAAAA,OAAW;;MAE7BE,EAAAA,WAAWC,SAASC;mBACPN,EAAAA,QAAQ;;;MAGpBO,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;yBACGP,EAAAA,OAAO;gCACAA,EAAAA,OAAO;aAE/B;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,OAAO,mBACPA,EAAAA,OAAO;;cAEXf,EAAAA,WAAWC,SAASC;;;;;;;;SAQzB;EAIIc,EAAWxB,EAAAA,QAAOC,GAAG;mBACfE,EAAAA,KAAKsB,KAAK;mBACVrB,EAAAA,QAAQ;oBACPA,EAAAA,QAAQ;;MAEtBI,EAAAA,WAAWC,SAASC;wBACFN,EAAAA,QAAQ;;EAInBsB,EAAQ1B,EAAAA,QAAOC,GAAG;mBACZE,EAAAA,KAAKsB,KAAK;;EAIhBE,EAAY3B,EAAAA,QAAO4B,EAAAA,UAA+B;aACjDjB,GACNA,EAAMC,MAAQN,EAAAA,OAAO,cAAgBA,SAAO;"}

package/cjs/date-input/date-input.style.js

@@ -1,4 +0,0 @@
-"use strict";var e=require("styled-components"),r=require("../shared/input-wrapper/input-wrapper.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=t(e).default(r.InputWrapper)`
-    height: 3rem;
-`;exports.Container=n;
-//# sourceMappingURL=date-input.style.js.map

package/cjs/date-input/date-input.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-input.style.js","sources":["../../../src/date-input/date-input.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled(InputWrapper)`\n    height: 3rem;\n`;\n"],"names":["Container","styled","InputWrapper"],"mappings":"oLAOaA,OAAYC,QAAOC,EAAAA,aAAa;;"}

package/cjs/date-navigator/date-navigator.style.js

@@ -1,30 +0,0 @@
-"use strict";var e=require("styled-components"),t=require("../button/button.js"),n=require("../icon-button/icon-button.js"),r=require("../theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default(n.IconButton)`
-    margin: ${r.Spacing["spacing-8"]};
-`,u=i.default.div`
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-    background-color: ${r.Colour["bg-strong"]};
-    border-radius: ${r.Radius.sm};
-`,s=i.default(t.Button.Default)`
-    color: ${e=>e.$enableDateClick?r.Colour["text-primary"]:r.Colour.text};
-    white-space: nowrap;
-    display: inline-block;
-    text-wrap: auto;
-    text-align: center;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    height: unset;
-    cursor: default;
-
-    ${t=>{if(t.$enableDateClick)return e.css`
-                &:hover {
-                    cursor: pointer;
-                    text-decoration: underline;
-                    text-underline-position: under;
-                }
-            `}}
-`;exports.Container=u,exports.HeaderArrowButton=a,exports.StyledDateTextButton=s;
-//# sourceMappingURL=date-navigator.style.js.map

package/cjs/date-navigator/date-navigator.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-navigator.style.js","sources":["../../../src/date-navigator/date-navigator.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { IconButton } from \"../icon-button\";\nimport { Colour, Radius, Spacing } from \"../theme\";\n\ninterface StyledDateTextProps {\n    $enableDateClick?: boolean;\n}\n\nexport const HeaderArrowButton = styled(IconButton)`\n    margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const Container = styled.div`\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ${Colour[\"bg-strong\"]};\n    border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const StyledDateTextButton = styled(Button.Default)<StyledDateTextProps>`\n    color: ${(props) =>\n        props.$enableDateClick ? Colour[\"text-primary\"] : Colour[\"text\"]};\n    white-space: nowrap;\n    display: inline-block;\n    text-wrap: auto;\n    text-align: center;\n    margin: 0;\n    padding: 0;\n    background: transparent;\n    height: unset;\n    cursor: default;\n\n    ${(props) => {\n        if (props.$enableDateClick) {\n            return css`\n                &:hover {\n                    cursor: pointer;\n                    text-decoration: underline;\n                    text-underline-position: under;\n                }\n            `;\n        }\n    }}\n`;\n"],"names":["HeaderArrowButton","styled","IconButton","Spacing","Container","div","Colour","Radius","StyledDateTextButton","Button","Default","props","$enableDateClick","css"],"mappings":"oPASaA,EAAoBC,EAAAA,QAAOC,EAAAA,WAAW;cACrCC,EAAAA,QAAQ;EAGTC,EAAYH,EAAAA,QAAOI,GAAG;;;;;wBAKXC,EAAAA,OAAO;qBACVC,EAAAA,OAAW;EAGnBC,EAAuBP,EAAAA,QAAOQ,SAAOC,QAA6B;aACjEC,GACNA,EAAMC,iBAAmBN,EAAAA,OAAO,gBAAkBA,SAAa;;;;;;;;;;;MAWhEK,IACC,GAAIA,EAAMC,iBACN,OAAOC,KAAG;;;;;;aAOd;"}

package/cjs/date-range-input/date-range-input.style.js

@@ -1,17 +0,0 @@
-"use strict";var e=require("styled-components"),t=require("../shared/input-wrapper/input-wrapper.js"),r=require("../theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e);const p=i.default(t.InputWrapper)`
-    ${t=>{if(t.$wrap)return!0===t.$readOnly?e.css`
-                    padding: ${r.Spacing["spacing-12"]} 0;
-                `:e.css`
-                padding: ${r.Spacing["spacing-12"]} ${r.Spacing["spacing-16"]};
-            `}}
-`,a=i.default.div`
-    display: flex;
-    align-items: center;
-    height: calc(3rem - 2px); // exclude top and bottom borders
-    width: 100%;
-
-    ${t=>t.$wrap&&e.css`
-            height: fit-content;
-        `}
-`;exports.Container=p,exports.InputContainer=a,exports.MOBILE_WRAP_WIDTH=320;
-//# sourceMappingURL=date-range-input.style.js.map

package/cjs/date-range-input/date-range-input.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-range-input.style.js","sources":["../../../src/date-range-input/date-range-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $wrap: boolean;\n    $readOnly?: boolean;\n}\n\nexport const MOBILE_WRAP_WIDTH = 320;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled(InputWrapper)<StyleProps>`\n    ${(props) => {\n        if (props.$wrap) {\n            if (props.$readOnly === true) {\n                return css`\n                    padding: ${Spacing[\"spacing-12\"]} 0;\n                `;\n            }\n            return css`\n                padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n            `;\n        }\n    }}\n`;\n\nexport const InputContainer = styled.div<StyleProps>`\n    display: flex;\n    align-items: center;\n    height: calc(3rem - 2px); // exclude top and bottom borders\n    width: 100%;\n\n    ${(props) =>\n        props.$wrap &&\n        css`\n            height: fit-content;\n        `}\n`;\n"],"names":["Container","styled","InputWrapper","props","$wrap","$readOnly","css","Spacing","InputContainer","div"],"mappings":"wNAYO,MAKMA,EAAYC,EAAAA,QAAOC,EAAAA,aAAyB;MAClDC,IACC,GAAIA,EAAMC,MACN,OAAwB,IAApBD,EAAME,UACCC,KAAG;+BACKC,EAAAA,QAAQ;kBAGpBD,KAAG;2BACKC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;aAEpD;EAIKC,EAAiBP,EAAAA,QAAOQ,GAAe;;;;;;MAM7CN,GACCA,EAAMC,OACNE,KAAG;;;yEA5BsB"}

package/cjs/divider/divider.style.js

@@ -1,15 +0,0 @@
-"use strict";var e=require("styled-components"),r=require("../theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const t=o(e).default.hr`
-    width: 100%;
-    margin: 0;
-    border: none;
-    ${o=>{switch(o.$lineStyle){case"dashed":return o=>{let t;t="function"==typeof o.$color?o.$color(o):o.$color||r.Colour.border(o);const n=encodeURIComponent(t),s=o.$thickness||1,c=s+1;return e.css`
-        background-color: transparent;
-        height: ${s}px;
-        background-repeat: repeat-x;
-        background-image: url('data:image/svg+xml,<svg width="8" height="${s}" viewBox="0 0 8 1" xmlns="http://www.w3.org/2000/svg"><line x1="2" y1="1" x2="6" y2="1" stroke="${n}" stroke-width="${c}" stroke-dasharray="4 4" /></svg>');
-    `};case"solid":return e.css`
-                    height: ${o.$thickness}px;
-                    background-color: ${o.$color||r.Colour.border};
-                `}}}
-`;exports.Line=t;
-//# sourceMappingURL=divider.style.js.map

package/cjs/divider/divider.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"divider.style.js","sources":["../../../src/divider/divider.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { StyledComponentProps } from \"../theme/helpers\";\nimport { ThemeStyleProps } from \"../theme/types\";\nimport { DividerLineStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface StyleProps {\n    $thickness: number;\n    $color?: string | ((props: ThemeStyleProps) => string);\n    $lineStyle?: DividerLineStyleType;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst dashedLineStyle = () => (props: StyleProps & StyledComponentProps) => {\n    let color: string;\n\n    if (typeof props.$color === \"function\") {\n        color = props.$color(props);\n    } else {\n        color = props.$color || Colour.border(props);\n    }\n\n    const encodedColor = encodeURIComponent(color);\n    const thickness = props.$thickness || 1;\n    const strokeWidth = thickness + 1; // best fit\n\n    return css`\n        background-color: transparent;\n        height: ${thickness}px;\n        background-repeat: repeat-x;\n        background-image: url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>');\n    `;\n};\n\nexport const Line = styled.hr<StyleProps>`\n    width: 100%;\n    margin: 0;\n    border: none;\n    ${(props) => {\n        switch (props.$lineStyle) {\n            case \"dashed\":\n                return dashedLineStyle();\n            case \"solid\":\n                return css`\n                    height: ${props.$thickness}px;\n                    background-color: ${props.$color || Colour.border};\n                `;\n        }\n    }}\n`;\n"],"names":["Line","styled","hr","props","$lineStyle","color","$color","Colour","border","encodedColor","encodeURIComponent","thickness","$thickness","strokeWidth","css"],"mappings":"uJAkBA,MAqBaA,OAAOC,QAAOC,EAAc;;;;MAIlCC,IACC,OAAQA,EAAMC,YACV,IAAK,SACD,OA5BeD,IAC3B,IAAIE,EAGAA,EADwB,mBAAjBF,EAAMG,OACLH,EAAMG,OAAOH,GAEbA,EAAMG,QAAUC,EAAAA,OAAOC,OAAOL,GAG1C,MAAMM,EAAeC,mBAAmBL,GAClCM,EAAYR,EAAMS,YAAc,EAChCC,EAAcF,EAAY,EAEhC,OAAOG,KAAG;;kBAEIH;;2EAEyDA,qGAA6GF,oBAA+BI;KAClN,EAWO,IAAK,QACD,OAAOC,KAAG;8BACIX,EAAMS;wCACIT,EAAMG,QAAUC,EAAAA,OAAOC;;"}

package/cjs/error-display/error-display.style.js

@@ -1,50 +0,0 @@
-"use strict";var t=require("styled-components"),e=require("../shared/html-content/html-content.js"),i=require("../button/button.js"),n=require("../theme/index.js"),a=require("../typography/typography.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=r(t);const p=o.default.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-`,d=o.default.img`
-    position: relative;
-    width: 400px;
-    height: auto;
-
-    ${n.MediaQuery.MaxWidth.sm} {
-        width: 320px;
-    }
-
-    ${n.MediaQuery.MaxWidth.xs} {
-        width: 288px;
-    }
-
-    ${n.MediaQuery.MaxWidth.xxs} {
-        width: 240px;
-    }
-`,s=o.default.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    max-width: 656px;
-    white-space: pre-wrap;
-`,l=o.default(a.Typography.HeadingMD).attrs((()=>({forwardedAs:"h2"})))`
-    margin: ${n.Spacing["spacing-32"]} 0 ${n.Spacing["spacing-16"]};
-    text-align: center;
-`,u=o.default.div`
-    color: ${n.Colour.text};
-    text-align: center;
-
-    ${e.applyHtmlContentStyle({textSize:"body-baseline"})}
-
-    p + p {
-        margin-top: ${n.Spacing["spacing-16"]};
-    }
-`,c=o.default(i.Button.Default)`
-    margin: ${n.Spacing["spacing-32"]} auto 0;
-    width: 21rem;
-
-    ${n.MediaQuery.MaxWidth.sm} {
-        width: 100%;
-    }
-`;exports.ActionButton=c,exports.Container=p,exports.DescriptionContainer=u,exports.Img=d,exports.TextContainer=s,exports.Title=l;
-//# sourceMappingURL=error-display.style.js.map

package/cjs/error-display/error-display.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-display.style.js","sources":["../../../src/error-display/error-display.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Button } from \"../button\";\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\nexport const Container = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n`;\n\nexport const Img = styled.img`\n    position: relative;\n    width: 400px;\n    height: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 320px;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: 288px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 240px;\n    }\n`;\n\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    max-width: 656px;\n    white-space: pre-wrap;\n`;\n\nexport const Title = styled(Typography.HeadingMD).attrs(() => ({\n    forwardedAs: \"h2\",\n}))`\n    margin: ${Spacing[\"spacing-32\"]} 0 ${Spacing[\"spacing-16\"]};\n    text-align: center;\n`;\n\nexport const DescriptionContainer = styled.div`\n    color: ${Colour.text};\n    text-align: center;\n\n    ${applyHtmlContentStyle({ textSize: \"body-baseline\" })}\n\n    p + p {\n        margin-top: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ActionButton = styled(Button.Default)`\n    margin: ${Spacing[\"spacing-32\"]} auto 0;\n    width: 21rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n    }\n`;\n"],"names":["Container","styled","div","Img","img","MediaQuery","MaxWidth","sm","xs","xxs","TextContainer","Title","Typography","HeadingMD","attrs","forwardedAs","Spacing","DescriptionContainer","Colour","text","applyHtmlContentStyle","textSize","ActionButton","Button","Default"],"mappings":"gSAMO,MAAMA,EAAYC,EAAAA,QAAOC,GAAG;;;;;;EAQtBC,EAAMF,EAAAA,QAAOG,GAAG;;;;;MAKvBC,EAAAA,WAAWC,SAASC;;;;MAIpBF,EAAAA,WAAWC,SAASE;;;;MAIpBH,EAAAA,WAAWC,SAASG;;;EAKbC,EAAgBT,EAAAA,QAAOC,GAAG;;;;;;;EAS1BS,EAAQV,EAAAA,QAAOW,EAAAA,WAAWC,WAAWC,OAAM,KAAA,CACpDC,YAAa,QACd;cACWC,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;;EAIpCC,EAAuBhB,EAAAA,QAAOC,GAAG;aACjCgB,EAAAA,OAAOC;;;MAGdC,wBAAsB,CAAEC,SAAU;;;sBAGlBL,EAAAA,QAAQ;;EAIjBM,EAAerB,EAAAA,QAAOsB,SAAOC,QAAQ;cACpCR,EAAAA,QAAQ;;;MAGhBX,EAAAA,WAAWC,SAASC;;;"}