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

package/shared/standalone-date-input/standalone-date-input.style.js

@@ -1,49 +0,0 @@
-import e,{css as i}from"styled-components";import{V3_Colour as r,V3_Spacing as t,V3_Font as o}from"../../v3_theme/index.js";import{BasicInput as n}from"../input-wrapper/input-wrapper.js";const l=e.div`
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    flex: 1;
-`,a=e.div`
-    display: flex;
-    align-items: center;
-
-    ${e=>{if(e.$hover)return i`
-                ${s}, ${$} {
-                    color: ${r["text-subtler"]};
-                }
-            `}}
-`,s=e(n)`
-    background: transparent;
-    text-align: center;
-`,d=e(s)`
-    width: 2rem;
-    margin-right: ${t["spacing-4"]};
-`,p=e(s)`
-    width: 2.5rem;
-`,c=e(s)`
-    width: 3rem;
-    margin-left: ${t["spacing-4"]};
-`,$=e.span`
-    ${o["body-baseline-regular"]}
-    ${e=>{if(e.$inactive)return i`
-                color: ${r.text};
-            `}}
-`,g=e.div`
-    ${o["body-baseline-regular"]}
-    background-color: ${r.bg};
-    color: ${r["text-subtler"]};
-    position: absolute;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    ${e=>e.$disabled?i`
-                background-color: ${r["bg-disabled"]};
-                cursor: not-allowed;
-            `:e.$hide?i`
-                display: none;
-            `:void 0}
-`;export{d as DayInput,$ as Divider,a as InputContainer,l as InputSection,p as MonthInput,g as Placeholder,c as YearInput};
-//# sourceMappingURL=standalone-date-input.style.js.map

package/shared/standalone-date-input/standalone-date-input.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"standalone-date-input.style.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_Spacing } from \"../../v3_theme\";\nimport { BasicInput } from \"../input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface PlaceholderStyleProps {\n    $hide?: boolean;\n    $disabled?: boolean;\n}\n\ninterface DividerStyleProps {\n    $inactive?: boolean;\n}\n\ninterface InputContainerStyleProps {\n    $hover?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const InputSection = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const InputContainer = styled.div<InputContainerStyleProps>`\n    display: flex;\n    align-items: center;\n\n    ${(props) => {\n        if (props.$hover) {\n            return css`\n                ${BaseInput}, ${Divider} {\n                    color: ${V3_Colour[\"text-subtler\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nconst BaseInput = styled(BasicInput)`\n    background: transparent;\n    text-align: center;\n`;\n\nexport const DayInput = styled(BaseInput)`\n    width: 2rem;\n    margin-right: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const MonthInput = styled(BaseInput)`\n    width: 2.5rem;\n`;\n\nexport const YearInput = styled(BaseInput)`\n    width: 3rem;\n    margin-left: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const Divider = styled.span<DividerStyleProps>`\n    ${V3_Font[\"body-baseline-regular\"]}\n    ${(props) => {\n        if (props.$inactive) {\n            return css`\n                color: ${V3_Colour[\"text\"]};\n            `;\n        }\n    }}\n`;\n\nexport const Placeholder = styled.div<PlaceholderStyleProps>`\n    ${V3_Font[\"body-baseline-regular\"]}\n    background-color: ${V3_Colour[\"bg\"]};\n    color: ${V3_Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                background-color: ${V3_Colour[\"bg-disabled\"]};\n                cursor: not-allowed;\n            `;\n        } else if (props.$hide) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n"],"names":["InputSection","styled","div","InputContainer","props","$hover","css","BaseInput","Divider","V3_Colour","BasicInput","DayInput","V3_Spacing","MonthInput","YearInput","span","V3_Font","$inactive","Placeholder","$disabled","$hide"],"mappings":"2LA0BO,MAAMA,EAAeC,EAAOC,GAAG;;;;;;EAQzBC,EAAiBF,EAAOC,GAA6B;;;;MAI3DE,IACC,GAAIA,EAAMC,OACN,OAAOC,CAAG;kBACJC,MAAcC;6BACHC,EAAU;;aAG/B;EAIFF,EAAYN,EAAOS,EAAW;;;EAKvBC,EAAWV,EAAOM,EAAU;;oBAErBK,EAAW;EAGlBC,EAAaZ,EAAOM,EAAU;;EAI9BO,EAAYb,EAAOM,EAAU;;mBAEvBK,EAAW;EAGjBJ,EAAUP,EAAOc,IAAuB;MAC/CC,EAAQ;MACPZ,IACC,GAAIA,EAAMa,UACN,OAAOX,CAAG;yBACGG,EAAgB;aAEjC;EAIKS,EAAcjB,EAAOC,GAA0B;MACtDc,EAAQ;wBACUP,EAAc;aACzBA,EAAU;;;;;;;MAOhBL,GACKA,EAAMe,UACCb,CAAG;oCACcG,EAAU;;cAG3BL,EAAMgB,MACNd,CAAG;;mBADP;"}

package/shared/toggle-icon/toggle-icon.js

@@ -1,2 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{CircleIcon as r}from"@lifesg/react-icons/circle";import{CircleDotIcon as i}from"@lifesg/react-icons/circle-dot";import{CrossIcon as c}from"@lifesg/react-icons/cross";import{SquareIcon as s}from"@lifesg/react-icons/square";import{SquareTickFillIcon as o}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as t}from"@lifesg/react-icons/tick";import{Wrapper as a}from"./toggle-icon.styles.js";const l=({type:l,active:m=!1,disabled:f,className:n})=>{let d;switch(l){case"checkbox":d=e(m?o:s,{});break;case"radio":d=e(m?i:r,{});break;case"tick":d=e(t,{});break;case"cross":d=e(c,{});break;default:d=null}return e(a,{className:n,$active:m,$disabled:f,"aria-hidden":!0,children:d})};export{l as ToggleIcon};
-//# sourceMappingURL=toggle-icon.js.map

package/shared/toggle-icon/toggle-icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle-icon.js","sources":["../../../src/shared/toggle-icon/toggle-icon.tsx"],"sourcesContent":["import { CircleIcon } from \"@lifesg/react-icons/circle\";\nimport { CircleDotIcon } from \"@lifesg/react-icons/circle-dot\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\n\nimport { Wrapper } from \"./toggle-icon.styles\";\n\nexport type ToggleIconType = \"checkbox\" | \"radio\" | \"tick\" | \"cross\";\n\nexport interface ToggleIconProps {\n    type: ToggleIconType;\n    active?: boolean | undefined;\n    disabled?: boolean | undefined;\n    className?: string | undefined;\n}\n\nexport const ToggleIcon = ({\n    type,\n    active = false,\n    disabled,\n    className,\n}: ToggleIconProps) => {\n    let component: JSX.Element | null;\n\n    switch (type) {\n        case \"checkbox\":\n            component = active ? <SquareTickFillIcon /> : <SquareIcon />;\n            break;\n        case \"radio\":\n            component = active ? <CircleDotIcon /> : <CircleIcon />;\n            break;\n        case \"tick\":\n            component = <TickIcon />;\n            break;\n        case \"cross\":\n            component = <CrossIcon />;\n            break;\n        default:\n            component = null;\n            break;\n    }\n\n    return (\n        <Wrapper\n            className={className}\n            $active={active}\n            $disabled={disabled}\n            aria-hidden\n        >\n            {component}\n        </Wrapper>\n    );\n};\n"],"names":["ToggleIcon","type","active","disabled","className","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","Wrapper","$active","children"],"mappings":"6bAkBO,MAAMA,EAAa,EACtBC,OACAC,UAAS,EACTC,WACAC,gBAEA,IAAIC,EAEJ,OAAQJ,GACJ,IAAK,WACDI,EAAqBC,EAATJ,EAAUK,EAAyBC,EAAP,CAAA,GACxC,MACJ,IAAK,QACDH,EAAqBC,EAATJ,EAAUO,EAAoBC,EAAP,CAAA,GACnC,MACJ,IAAK,OACDL,EAAYC,EAACK,EAAQ,IACrB,MACJ,IAAK,QACDN,EAAYC,EAACM,EAAS,IACtB,MACJ,QACIP,EAAY,KAIpB,OACIC,EAACO,EAAO,CACJT,UAAWA,EAASU,QACXZ,YACEC,EAAQ,eAAA,EAAAY,SAGlBV,GACK"}

package/shared/toggle-icon/toggle-icon.styles.d.ts

@@ -1,6 +0,0 @@
-interface StyleProps {
-    $active?: boolean;
-    $disabled?: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export {};

package/shared/toggle-icon/toggle-icon.styles.js

@@ -1,22 +0,0 @@
-import e,{css as i}from"styled-components";import{V3_Colour as o}from"../../v3_theme/index.js";const t=e.div`
-    height: 1.625rem;
-    width: 1.625rem;
-    margin-right: 0.5rem;
-    flex-shrink: 0;
-
-    svg {
-        height: 100%;
-        width: 100%;
-    }
-
-    ${e=>e.$disabled?e.$active?i`
-                    color: ${o["icon-selected-disabled"]};
-                `:i`
-                    color: ${o["icon-disabled-subtle"]};
-                `:e.$active?i`
-                color: ${o["icon-selected"]};
-            `:i`
-            color: ${o["icon-subtle"]};
-        `};
-`;export{t as Wrapper};
-//# sourceMappingURL=toggle-icon.styles.js.map

package/shared/toggle-icon/toggle-icon.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle-icon.styles.js","sources":["../../../src/shared/toggle-icon/toggle-icon.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour } from \"../../v3_theme\";\n\ninterface StyleProps {\n    $active?: boolean;\n    $disabled?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div<StyleProps>`\n    height: 1.625rem;\n    width: 1.625rem;\n    margin-right: 0.5rem;\n    flex-shrink: 0;\n\n    svg {\n        height: 100%;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$active) {\n                return css`\n                    color: ${V3_Colour[\"icon-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${V3_Colour[\"icon-disabled-subtle\"]};\n                `;\n            }\n        }\n\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${V3_Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Wrapper","styled","div","props","$disabled","$active","css","V3_Colour"],"mappings":"+FAYO,MAAMA,EAAUC,EAAOC,GAAe;;;;;;;;;;;MAWtCC,GACKA,EAAMC,UACFD,EAAME,QACCC,CAAG;6BACGC,EAAU;kBAGhBD,CAAG;6BACGC,EAAU;kBAK3BJ,EAAME,QACCC,CAAG;yBACGC,EAAU;cAIpBD,CAAG;qBACGC,EAAU;;"}

package/singpass-button/singpass-button.style.d.ts

@@ -1,12 +0,0 @@
-import type { SingpassButtonStyleType } from "./types";
-export type MainButtonSize = "default" | "small" | "large";
-export interface MainStyleProps {
-    $buttonStyle: SingpassButtonStyleType;
-    $buttonSizeStyle?: MainButtonSize | undefined;
-}
-export declare const Main: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, MainStyleProps>> & string;
-interface SvgContainerProps {
-    $buttonSizeStyle?: MainButtonSize | undefined;
-}
-export declare const SvgContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, SvgContainerProps>> & string;
-export {};

package/singpass-button/singpass-button.style.js

@@ -1,46 +0,0 @@
-import e,{css as t}from"styled-components";import{V3_Spacing as r,V3_Motion as o,V3_Colour as i}from"../v3_theme/index.js";import{V3_ThemeButton as n}from"../v3_theme/components/theme-helper.js";const a=e.button`
-    padding: ${r["spacing-8"]} ${r["spacing-16"]};
-    transition: all ${o["duration-250"]} ${o["ease-default"]};
-    border-radius: ${n["button-radius"]};
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    ${e=>"red-filled"===e.$buttonStyle?t`
-                background-color: #f4333d;
-                border: none;
-
-                &:hover,
-                &:active {
-                    @media (pointer: fine) {
-                        background-color: #b0262d;
-                    }
-                }
-            `:t`
-            background-color: ${i.Primitive.white};
-            border: 1px #c8c9cc solid;
-
-            &:hover,
-            &:active {
-                @media (pointer: fine) {
-                    background-color: #f5f5f7;
-                }
-            }
-        `}
-
-    ${e=>{switch(e.$buttonSizeStyle){case"small":return t`
-                    height: 2.5rem;
-                `;case"large":return t`
-                    min-height: 4rem;
-                `;default:return t`
-                    min-height: 3rem;
-                `}}}
-`,c=e.span`
-    img {
-        height: 100%;
-    }
-
-    height: ${e=>"large"===e.$buttonSizeStyle?2.5:1.5}rem;
-`;export{a as Main,c as SvgContainer};
-//# sourceMappingURL=singpass-button.style.js.map

package/singpass-button/singpass-button.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"singpass-button.style.js","sources":["../../src/singpass-button/singpass-button.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion, V3_Spacing } from \"../v3_theme\";\nimport { V3_ThemeButton } from \"../v3_theme/components/theme-helper\";\nimport type { SingpassButtonStyleType } from \"./types\";\n\nexport type MainButtonSize = \"default\" | \"small\" | \"large\";\n\nexport interface MainStyleProps {\n    $buttonStyle: SingpassButtonStyleType;\n    $buttonSizeStyle?: MainButtonSize | undefined;\n}\n\nexport const Main = styled.button<MainStyleProps>`\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]};\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    ${(props) => {\n        if (props.$buttonStyle === \"red-filled\") {\n            return css`\n                background-color: #f4333d;\n                border: none;\n\n                &:hover,\n                &:active {\n                    @media (pointer: fine) {\n                        background-color: #b0262d;\n                    }\n                }\n            `;\n        }\n\n        return css`\n            background-color: ${V3_Colour.Primitive.white};\n            border: 1px #c8c9cc solid;\n\n            &:hover,\n            &:active {\n                @media (pointer: fine) {\n                    background-color: #f5f5f7;\n                }\n            }\n        `;\n    }}\n\n    ${(props) => {\n        switch (props.$buttonSizeStyle) {\n            case \"small\":\n                return css`\n                    height: 2.5rem;\n                `;\n\n            case \"large\":\n                return css`\n                    min-height: 4rem;\n                `;\n\n            default:\n                return css`\n                    min-height: 3rem;\n                `;\n        }\n    }}\n`;\n\ninterface SvgContainerProps {\n    $buttonSizeStyle?: MainButtonSize | undefined;\n}\nexport const SvgContainer = styled.span<SvgContainerProps>`\n    img {\n        height: 100%;\n    }\n\n    height: ${(props) => {\n        switch (props.$buttonSizeStyle) {\n            case \"large\":\n                return 2.5;\n            case \"small\":\n                return 1.5;\n            default:\n                return 1.5;\n        }\n    }}rem;\n`;\n"],"names":["Main","styled","button","V3_Spacing","V3_Motion","V3_ThemeButton","props","$buttonStyle","css","V3_Colour","Primitive","white","$buttonSizeStyle","SvgContainer","span"],"mappings":"mMAaO,MAAMA,EAAOC,EAAOC,MAAsB;eAClCC,EAAW,gBAAgBA,EAAW;sBAC/BC,EAAU,mBAAmBA,EAAU;qBACxCC,EAAe;;;;;;MAM7BC,GAC4B,eAAvBA,EAAMC,aACCC,CAAG;;;;;;;;;;cAaPA,CAAG;gCACcC,EAAUC,UAAUC;;;;;;;;;;;MAY7CL,IACC,OAAQA,EAAMM,kBACV,IAAK,QACD,OAAOJ,CAAG;;kBAId,IAAK,QACD,OAAOA,CAAG;;kBAId,QACI,OAAOA,CAAG;;;EAUbK,EAAeZ,EAAOa,IAAuB;;;;;cAK3CR,GAEE,UADDA,EAAMM,iBAEC,IAIA;"}

package/tab/tab-link-chain.style.d.ts

@@ -1,21 +0,0 @@
-interface LabelStyleProps {
-    $active?: boolean;
-}
-interface ChainStyleProps {
-    $fullWidthIndicatorLine?: boolean;
-}
-interface ChainItemStyleProps {
-    $active?: boolean;
-    $width?: string;
-}
-interface ChainLinkStyleProps {
-    $reversed: boolean;
-}
-export declare const Chain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ChainStyleProps>> & string;
-export declare const ChainItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ChainItemStyleProps>> & string;
-export declare const ChainLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ChainLinkStyleProps>> & string;
-export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LabelStyleProps>> & string;
-export declare const BoldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, LabelStyleProps>> & string;
-export declare const CustomFadeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/fade-wrapper").FadeWrapperProps & import("react").RefAttributes<import("../shared/fade-wrapper").FadeWrapperRef>, never>> & string & Omit<(props: import("../shared/fade-wrapper").FadeWrapperProps & import("react").RefAttributes<import("../shared/fade-wrapper").FadeWrapperRef>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};

package/tab/tab-link-chain.style.js

@@ -1,87 +0,0 @@
-import t,{css as e}from"styled-components";import{FadeWrapper as i}from"../shared/fade-wrapper/fade-wrapper.js";import{V3_Border as r,V3_Colour as o,V3_MediaQuery as n,V3_Spacing as d,V3_Radius as a}from"../v3_theme/index.js";const s=t.ul`
-    display: inline-flex;
-    width: 100%;
-    list-style-type: none;
-
-    ${t=>{if(t.$fullWidthIndicatorLine)return e`
-                &::after {
-                    content: "";
-                    height: inherit;
-                    flex-grow: 1;
-                    /* follows the border in ChainItem */
-                    border-bottom: ${r["width-040"]} ${r.solid}
-                        ${o.border};
-                }
-            `}}
-`,l=t.li`
-    display: flex;
-    justify-content: center;
-    flex-shrink: 0;
-    border-bottom: ${r["width-040"]} ${r.solid}
-        ${o.border};
-
-    ${t=>{if(t.$width)return e`
-                width: ${t.$width};
-            `}}
-
-    ${t=>{if(t.$active)return e`
-                border-color: ${o["border-primary"]};
-            `}}
-
-    ${n.MaxWidth.sm} {
-        flex: 1;
-        justify-content: center;
-    }
-`,$=e`
-    padding: ${d["spacing-16"]} ${d["spacing-16"]}
-        ${d["spacing-20"]};
-`,c=e`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-`,f=t.div`
-    /* position: relative; */
-    ${c}
-    flex-direction: ${t=>t.$reversed?"row-reverse":"row"};
-    gap: 0.5rem;
-    ${$}
-    cursor: pointer;
-    width: 100%;
-    justify-content: center;
-
-    &:has(button:focus-visible) {
-        outline: 2px solid ${o["focus-ring"]};
-        outline-offset: -2px;
-        border-radius: ${a.sm};
-    }
-`,p=t.div`
-    position: relative;
-`,u=e`
-    ${c}
-    border: none;
-    background: none;
-`,b=t.div`
-    ${u}
-    position: absolute;
-    color: ${o["text-subtler"]};
-    opacity: 1;
-
-    ${t=>{if(t.$active)return e`
-                opacity: 0;
-            `}}
-`,h=t.button`
-    ${u}
-    color: ${o["text-primary"]};
-    opacity: 0;
-    outline: none;
-
-    ${t=>{if(t.$active)return e`
-                opacity: 1;
-            `}}
-`,m=t(i)`
-    [data-id="left-fade-indicator-button"],
-    [data-id="right-fade-indicator-button"] {
-        margin-bottom: ${d["spacing-4"]};
-    }
-`;export{h as BoldLabel,s as Chain,l as ChainItem,f as ChainLink,m as CustomFadeWrapper,b as Label,p as LabelContainer};
-//# sourceMappingURL=tab-link-chain.style.js.map

package/tab/tab-link-chain.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab-link-chain.style.js","sources":["../../src/tab/tab-link-chain.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { FadeWrapper } from \"../shared/fade-wrapper\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $active?: boolean;\n}\n\ninterface ChainStyleProps {\n    $fullWidthIndicatorLine?: boolean;\n}\n\ninterface ChainItemStyleProps {\n    $active?: boolean;\n    $width?: string;\n}\n\ninterface ChainLinkStyleProps {\n    $reversed: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Chain = styled.ul<ChainStyleProps>`\n    display: inline-flex;\n    width: 100%;\n    list-style-type: none;\n\n    ${(props) => {\n        if (props.$fullWidthIndicatorLine) {\n            return css`\n                &::after {\n                    content: \"\";\n                    height: inherit;\n                    flex-grow: 1;\n                    /* follows the border in ChainItem */\n                    border-bottom: ${V3_Border[\"width-040\"]} ${V3_Border.solid}\n                        ${V3_Colour.border};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ChainItem = styled.li<ChainItemStyleProps>`\n    display: flex;\n    justify-content: center;\n    flex-shrink: 0;\n    border-bottom: ${V3_Border[\"width-040\"]} ${V3_Border.solid}\n        ${V3_Colour.border};\n\n    ${(props) => {\n        if (props.$width) {\n            return css`\n                width: ${props.$width};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                border-color: ${V3_Colour[\"border-primary\"]};\n            `;\n        }\n    }}\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        flex: 1;\n        justify-content: center;\n    }\n`;\n\n/* keep this separate to contain the ts-styled error */\nconst padding = css`\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-16\"]}\n        ${V3_Spacing[\"spacing-20\"]};\n`;\n\nconst flexRow = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const ChainLink = styled.div<ChainLinkStyleProps>`\n    /* position: relative; */\n    ${flexRow}\n    flex-direction: ${(props) => (props.$reversed ? \"row-reverse\" : \"row\")};\n    gap: 0.5rem;\n    ${padding}\n    cursor: pointer;\n    width: 100%;\n    justify-content: center;\n\n    &:has(button:focus-visible) {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n        border-radius: ${V3_Radius.sm};\n    }\n`;\n\nexport const LabelContainer = styled.div`\n    position: relative;\n`;\n\nconst buttonBase = css`\n    ${flexRow}\n    border: none;\n    background: none;\n`;\n\nexport const Label = styled.div<LabelStyleProps>`\n    ${buttonBase}\n    position: absolute;\n    color: ${V3_Colour[\"text-subtler\"]};\n    opacity: 1;\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                opacity: 0;\n            `;\n        }\n    }}\n`;\n\nexport const BoldLabel = styled.button<LabelStyleProps>`\n    ${buttonBase}\n    color: ${V3_Colour[\"text-primary\"]};\n    opacity: 0;\n    outline: none;\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                opacity: 1;\n            `;\n        }\n    }}\n`;\n\nexport const CustomFadeWrapper = styled(FadeWrapper)`\n    [data-id=\"left-fade-indicator-button\"],\n    [data-id=\"right-fade-indicator-button\"] {\n        margin-bottom: ${V3_Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["Chain","styled","ul","props","$fullWidthIndicatorLine","css","V3_Border","solid","V3_Colour","border","ChainItem","li","$width","$active","V3_MediaQuery","MaxWidth","sm","padding","V3_Spacing","flexRow","ChainLink","div","$reversed","V3_Radius","LabelContainer","buttonBase","Label","BoldLabel","button","CustomFadeWrapper","FadeWrapper"],"mappings":"kOAkCO,MAAMA,EAAQC,EAAOC,EAAmB;;;;;MAKxCC,IACC,GAAIA,EAAMC,wBACN,OAAOC,CAAG;;;;;;qCAMeC,EAAU,gBAAgBA,EAAUC;0BAC/CC,EAAUC;;aAG5B;EAIKC,EAAYT,EAAOU,EAAuB;;;;qBAIlCL,EAAU,gBAAgBA,EAAUC;UAC/CC,EAAUC;;MAEbN,IACC,GAAIA,EAAMS,OACN,OAAOP,CAAG;yBACGF,EAAMS;aAEvB;;MAGDT,IACC,GAAIA,EAAMU,QACN,OAAOR,CAAG;gCACUG,EAAU;aAElC;;MAGFM,EAAcC,SAASC;;;;EAOvBC,EAAUZ,CAAG;eACJa,EAAW,iBAAiBA,EAAW;UAC5CA,EAAW;EAGfC,EAAUd,CAAG;;;;EAMNe,EAAYnB,EAAOoB,GAAwB;;MAElDF;sBACiBhB,GAAWA,EAAMmB,UAAY,cAAgB;;MAE9DL;;;;;;6BAMuBT,EAAU;;yBAEde,EAAUP;;EAItBQ,EAAiBvB,EAAOoB,GAAG;;EAIlCI,EAAapB,CAAG;MAChBc;;;EAKOO,EAAQzB,EAAOoB,GAAoB;MAC1CI;;aAEOjB,EAAU;;;MAGhBL,IACC,GAAIA,EAAMU,QACN,OAAOR,CAAG;;aAGd;EAIKsB,EAAY1B,EAAO2B,MAAuB;MACjDH;aACOjB,EAAU;;;;MAIhBL,IACC,GAAIA,EAAMU,QACN,OAAOR,CAAG;;aAGd;EAIKwB,EAAoB5B,EAAO6B,EAAY;;;yBAG3BZ,EAAW;;"}

package/tab/tab.style.d.ts

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

package/tab/tab.style.js

@@ -1,6 +0,0 @@
-import o from"styled-components";const t=o.div`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-`;export{t as Wrapper};
-//# sourceMappingURL=tab.style.js.map

package/tab/tab.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab.style.js","sources":["../../src/tab/tab.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const Wrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n`;\n"],"names":["Wrapper","styled","div"],"mappings":"iCAEO,MAAMA,EAAUC,EAAOC,GAAG;;;;"}

package/typography/helper.js

@@ -1,19 +0,0 @@
-import{css as o}from"styled-components";import{lineClampCss as t}from"../shared/styles/index.js";import{V3_Colour as r,V3_Font as e}from"../v3_theme/index.js";const i=(t,r,i=!1)=>o`
-        ${e[`${t}-${r}`]}
-        ${i?"margin-bottom: 1.05em;":"margin-bottom: 0;"}
-    `,m=r=>{if(r)return o`
-            ${t(r)}
-        `},s=(t=!1,r=!1,e=void 0)=>r?o`
-            display: block;
-            ${m(e)}
-        `:t?o`
-            display: inline;
-        `:o`
-            display: block;
-            ${m(e)}
-        `,l=(t,e,m,l,n)=>o`
-    ${i(t,e||"regular",l)}
-    ${s(m,l,n)}
-    color: ${r.text};
-`;export{l as createTypographyStyles,s as getDisplayStyle,i as getTextStyle};
-//# sourceMappingURL=helper.js.map

package/typography/helper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"helper.js","sources":["../../src/typography/helper.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font } from \"../v3_theme\";\nimport type { V3_FontSet, V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport type { TypographyWeight } from \"./types\";\n\nexport const getTextStyle = (\n    type: V3_TypographySizeType,\n    weight: TypographyWeight,\n    paragraph = false\n) => {\n    const token: keyof V3_FontSet = `${type}-${weight}`;\n\n    return css`\n        ${V3_Font[token]}\n        ${paragraph ? \"margin-bottom: 1.05em;\" : \"margin-bottom: 0;\"}\n    `;\n};\n\nconst getMaxLinesStyle = (maxLines: number | undefined) => {\n    if (maxLines) {\n        return css`\n            ${lineClampCss(maxLines)}\n        `;\n    }\n};\n\nexport const getDisplayStyle = (\n    inline = false,\n    paragraph = false,\n    maxLines: number | undefined = undefined\n) => {\n    if (paragraph) {\n        return css`\n            display: block;\n            ${getMaxLinesStyle(maxLines)}\n        `;\n    } else if (inline) {\n        return css`\n            display: inline;\n        `;\n    } else {\n        return css`\n            display: block;\n            ${getMaxLinesStyle(maxLines)}\n        `;\n    }\n};\n\nexport const createTypographyStyles = (\n    textStyle: V3_TypographySizeType,\n    weight: TypographyWeight | undefined,\n    inline: boolean | undefined,\n    paragraph: boolean | undefined,\n    maxLines: number | undefined\n) => css`\n    ${getTextStyle(textStyle, weight || \"regular\", paragraph)}\n    ${getDisplayStyle(inline, paragraph, maxLines)}\n    color: ${V3_Colour.text};\n`;\n"],"names":["getTextStyle","type","weight","paragraph","css","V3_Font","getMaxLinesStyle","maxLines","lineClampCss","getDisplayStyle","inline","undefined","createTypographyStyles","textStyle","V3_Colour","text"],"mappings":"+JAOO,MAAMA,EAAe,CACxBC,EACAC,EACAC,GAAY,IAILC,CAAG;UACJC,EAH0B,GAAGJ,KAAQC;UAIrCC,EAAY,yBAA2B;MAI3CG,EAAoBC,IACtB,GAAIA,EACA,OAAOH,CAAG;cACJI,EAAaD;SAEvB,EAGSE,EAAkB,CAC3BC,GAAS,EACTP,GAAY,EACZI,OAA+BI,IAE3BR,EACOC,CAAG;;cAEJE,EAAiBC;UAEhBG,EACAN,CAAG;;UAIHA,CAAG;;cAEJE,EAAiBC;UAKlBK,EAAyB,CAClCC,EACAX,EACAQ,EACAP,EACAI,IACCH,CAAG;MACFJ,EAAaa,EAAWX,GAAU,UAAWC;MAC7CM,EAAgBC,EAAQP,EAAWI;aAC5BO,EAAUC;"}