@lifesg/react-design-system 3.4.0-canary.5 → 3.4.0-canary.6

package/badge/badge.style.d.ts

@@ -9,7 +9,7 @@ interface BadgeContainerProps {
 interface BadgeWrapperProps extends BadgeContainerProps {
     $offset?: [string, string];
 }
-export declare const BadgeOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOverlay"> & BadgeContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOverlay"> & BadgeContainerProps, never>>> & string;
-export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgeWrapperProps> & BadgeWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BadgeWrapperProps> & BadgeWrapperProps, never>>> & string;
-export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledBadgeProps> & StyledBadgeProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledBadgeProps> & StyledBadgeProps, never>>> & string;
+export declare const BadgeOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$isOverlay"> & BadgeContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$isOverlay"> & BadgeContainerProps, never>>> & string;
+export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof BadgeWrapperProps> & BadgeWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof BadgeWrapperProps> & BadgeWrapperProps, never>>> & string;
+export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof StyledBadgeProps> & StyledBadgeProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof StyledBadgeProps> & StyledBadgeProps, never>>> & string;
 export {};

package/badge/badge.style.js

@@ -1,10 +1,10 @@
-import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius as i,Border as n}from"../theme/index.js";const d=e.div`
+import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius as i,Border as n}from"../theme/index.js";const s=e.span`
     ${e=>e.$isOverlay&&r`
             position: relative;
             width: fit-content;
             height: fit-content;
         `}
-`,s=e.div`
+`,a=e.span`
     ${e=>e.$isOverlay&&r`
             position: absolute;
             top: 0;
@@ -12,7 +12,7 @@ import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius a
             transform: translate(50%, -25%)
                 ${e.$offset?`translate(${e.$offset[0]},${e.$offset[1]})`:""};
         `}
-`,a=r`
+`,d=r`
     min-width: 1.25rem;
     padding: 0.25rem 0.375rem;
     font-size: ${t.Spec["body-size-xs"]};
@@ -22,7 +22,7 @@ import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius a
     border-radius: 50%;
     width: 0.5rem;
     height: 0.5rem;
-`,c=e.div`
+`,c=e.span`
     background-color: ${({$color:e})=>"important"===e?o["icon-error"]:o["bg-primary"]};
     color: ${o["text-inverse"]};
     font-weight: ${t.Spec["weight-bold"]};
@@ -32,10 +32,10 @@ import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius a
 
     width: fit-content;
     ${({$variant:e,$color:t})=>{switch(e){case"number":return r`
-                    ${a}
+                    ${d}
                     border-radius: ${i.full};
                 `;case"number-with-border":return r`
-                    ${a}
+                    ${d}
                     border-radius: ${i.full};
                     box-shadow: 0 0 0 ${n["width-020"]} ${o.bg};
                 `;case"dot":return r`
@@ -44,7 +44,7 @@ import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius a
                     ${$}
                     box-shadow: 0 0 0  ${n["width-020"]} ${o.bg};
                 `;case"square-number":return r`
-                    ${a}
+                    ${d}
                     border-radius: ${i.sm};
                     padding: 0.25rem 0.4375rem;
                     ${"default"===t&&r`
@@ -52,5 +52,5 @@ import e,{css as r}from"styled-components";import{Font as t,Colour as o,Radius a
                         color: ${o["text-primary"]};
                     `}
                 `;default:return""}}};
-`;export{d as BadgeOverlay,s as BadgeWrapper,c as StyledBadge};
+`;export{s as BadgeOverlay,a as BadgeWrapper,c as StyledBadge};
 //# sourceMappingURL=badge.style.js.map

package/badge/badge.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.style.js","sources":["../../src/badge/badge.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius } from \"../theme\";\nimport { BadgeProps } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledBadgeProps {\n    $variant: BadgeProps[\"variant\"];\n    $color: BadgeProps[\"color\"];\n}\ninterface BadgeContainerProps {\n    $isOverlay?: boolean;\n}\ninterface BadgeWrapperProps extends BadgeContainerProps {\n    $offset?: [string, string];\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const BadgeOverlay = styled.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: ${Font.Spec[\"body-size-xs\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    line-height: 1;\n`;\n\nconst dotBadgeStyles = css`\n    border-radius: 50%;\n    width: 0.5rem;\n    height: 0.5rem;\n`;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ $color }) =>\n        $color === \"important\" ? Colour[\"icon-error\"] : Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: fit-content;\n    ${({ $variant, $color }) => {\n        switch ($variant) {\n            case \"number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                `;\n\n            case \"number-with-border\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                    box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"dot\":\n                return css`\n                    ${dotBadgeStyles}\n                `;\n\n            case \"dot-with-border\":\n                return css`\n                    ${dotBadgeStyles}\n                    box-shadow: 0 0 0  ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"square-number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.sm};\n                    padding: 0.25rem 0.4375rem;\n                    ${$color === \"default\" &&\n                    css`\n                        background-color: ${Colour[\"bg-primary-subtler\"]};\n                        color: ${Colour[\"text-primary\"]};\n                    `}\n                `;\n\n            default:\n                return \"\";\n        }\n    }};\n`;\n"],"names":["BadgeOverlay","styled","div","props","$isOverlay","css","BadgeWrapper","$offset","numberBadgeStyles","Font","Spec","dotBadgeStyles","StyledBadge","$color","Colour","$variant","Radius","full","Border","sm"],"mappings":"wHAsBO,MAAMA,EAAeC,EAAOC,GAAwB;MACpDC,GACCA,EAAMC,YACNC,CAAG;;;;;EAOEC,EAAeL,EAAOC,GAAsB;MAClDC,GACCA,EAAMC,YACNC,CAAG;;;;;kBAKOF,EAAMI,QACF,aAAaJ,EAAMI,QAAQ,MAAMJ,EAAMI,QAAQ,MAC/C;;EAIhBC,EAAoBH,CAAG;;;iBAGZI,EAAKC,KAAK;mBACRD,EAAKC,KAAK;;EAIvBC,EAAiBN,CAAG;;;;EAMbO,EAAcX,EAAOC,GAAqB;wBAC/B,EAAGW,YACR,cAAXA,EAAyBC,EAAO,cAAgBA,EAAO;aAClDA,EAAO;mBACDL,EAAKC,KAAK;;;;;;MAMvB,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,CAAG;sBACJG;qCACeQ,EAAOC;kBAGhC,IAAK,qBACD,OAAOZ,CAAG;sBACJG;qCACeQ,EAAOC;wCACJC,EAAO,gBAAgBJ,EAAW;kBAG9D,IAAK,MACD,OAAOT,CAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,CAAG;sBACJM;yCACmBO,EAAO,gBAAgBJ,EAAW;kBAG/D,IAAK,gBACD,OAAOT,CAAG;sBACJG;qCACeQ,EAAOG;;sBAEX,YAAXN,GACFR,CAAG;4CACqBS,EAAO;iCAClBA,EAAO;;kBAI5B,QACI,MAAO;"}
+{"version":3,"file":"badge.style.js","sources":["../../src/badge/badge.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius } from \"../theme\";\nimport { BadgeProps } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledBadgeProps {\n    $variant: BadgeProps[\"variant\"];\n    $color: BadgeProps[\"color\"];\n}\ninterface BadgeContainerProps {\n    $isOverlay?: boolean;\n}\ninterface BadgeWrapperProps extends BadgeContainerProps {\n    $offset?: [string, string];\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const BadgeOverlay = styled.span<BadgeContainerProps>`\n    ${(props) =>\n        props.$isOverlay &&\n        css`\n            position: relative;\n            width: fit-content;\n            height: fit-content;\n        `}\n`;\n\nexport const BadgeWrapper = styled.span<BadgeWrapperProps>`\n    ${(props) =>\n        props.$isOverlay &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            transform: translate(50%, -25%)\n                ${props.$offset\n                    ? `translate(${props.$offset[0]},${props.$offset[1]})`\n                    : \"\"};\n        `}\n`;\n\nconst numberBadgeStyles = css`\n    min-width: 1.25rem;\n    padding: 0.25rem 0.375rem;\n    font-size: ${Font.Spec[\"body-size-xs\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    line-height: 1;\n`;\n\nconst dotBadgeStyles = css`\n    border-radius: 50%;\n    width: 0.5rem;\n    height: 0.5rem;\n`;\n\nexport const StyledBadge = styled.span<StyledBadgeProps>`\n    background-color: ${({ $color }) =>\n        $color === \"important\" ? Colour[\"icon-error\"] : Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: fit-content;\n    ${({ $variant, $color }) => {\n        switch ($variant) {\n            case \"number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                `;\n\n            case \"number-with-border\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                    box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"dot\":\n                return css`\n                    ${dotBadgeStyles}\n                `;\n\n            case \"dot-with-border\":\n                return css`\n                    ${dotBadgeStyles}\n                    box-shadow: 0 0 0  ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"square-number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.sm};\n                    padding: 0.25rem 0.4375rem;\n                    ${$color === \"default\" &&\n                    css`\n                        background-color: ${Colour[\"bg-primary-subtler\"]};\n                        color: ${Colour[\"text-primary\"]};\n                    `}\n                `;\n\n            default:\n                return \"\";\n        }\n    }};\n`;\n"],"names":["BadgeOverlay","styled","span","props","$isOverlay","css","BadgeWrapper","$offset","numberBadgeStyles","Font","Spec","dotBadgeStyles","StyledBadge","$color","Colour","$variant","Radius","full","Border","sm"],"mappings":"wHAsBO,MAAMA,EAAeC,EAAOC,IAAyB;MACrDC,GACCA,EAAMC,YACNC,CAAG;;;;;EAOEC,EAAeL,EAAOC,IAAuB;MACnDC,GACCA,EAAMC,YACNC,CAAG;;;;;kBAKOF,EAAMI,QACF,aAAaJ,EAAMI,QAAQ,MAAMJ,EAAMI,QAAQ,MAC/C;;EAIhBC,EAAoBH,CAAG;;;iBAGZI,EAAKC,KAAK;mBACRD,EAAKC,KAAK;;EAIvBC,EAAiBN,CAAG;;;;EAMbO,EAAcX,EAAOC,IAAsB;wBAChC,EAAGW,YACR,cAAXA,EAAyBC,EAAO,cAAgBA,EAAO;aAClDA,EAAO;mBACDL,EAAKC,KAAK;;;;;;MAMvB,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,CAAG;sBACJG;qCACeQ,EAAOC;kBAGhC,IAAK,qBACD,OAAOZ,CAAG;sBACJG;qCACeQ,EAAOC;wCACJC,EAAO,gBAAgBJ,EAAW;kBAG9D,IAAK,MACD,OAAOT,CAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,CAAG;sBACJM;yCACmBO,EAAO,gBAAgBJ,EAAW;kBAG/D,IAAK,gBACD,OAAOT,CAAG;sBACJG;qCACeQ,EAAOG;;sBAEX,YAAXN,GACFR,CAAG;4CACqBS,EAAO;iCAClBA,EAAO;;kBAI5B,QACI,MAAO;"}

package/badge/types.d.ts

@@ -1,6 +1,6 @@
 export type BadgeVariant = "number" | "number-with-border" | "dot" | "dot-with-border" | "square-number";
 export type BadgeColor = "default" | "important";
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     badgeOffset?: [string, string] | undefined;
     children?: JSX.Element | undefined;
     count?: number | undefined;

package/cjs/badge/badge.style.js

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

package/cjs/badge/badge.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.style.js","sources":["../../../src/badge/badge.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius } from \"../theme\";\nimport { BadgeProps } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledBadgeProps {\n    $variant: BadgeProps[\"variant\"];\n    $color: BadgeProps[\"color\"];\n}\ninterface BadgeContainerProps {\n    $isOverlay?: boolean;\n}\ninterface BadgeWrapperProps extends BadgeContainerProps {\n    $offset?: [string, string];\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const BadgeOverlay = styled.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: ${Font.Spec[\"body-size-xs\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    line-height: 1;\n`;\n\nconst dotBadgeStyles = css`\n    border-radius: 50%;\n    width: 0.5rem;\n    height: 0.5rem;\n`;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ $color }) =>\n        $color === \"important\" ? Colour[\"icon-error\"] : Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: fit-content;\n    ${({ $variant, $color }) => {\n        switch ($variant) {\n            case \"number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                `;\n\n            case \"number-with-border\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                    box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"dot\":\n                return css`\n                    ${dotBadgeStyles}\n                `;\n\n            case \"dot-with-border\":\n                return css`\n                    ${dotBadgeStyles}\n                    box-shadow: 0 0 0  ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"square-number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.sm};\n                    padding: 0.25rem 0.4375rem;\n                    ${$color === \"default\" &&\n                    css`\n                        background-color: ${Colour[\"bg-primary-subtler\"]};\n                        color: ${Colour[\"text-primary\"]};\n                    `}\n                `;\n\n            default:\n                return \"\";\n        }\n    }};\n`;\n"],"names":["BadgeOverlay","styled","div","props","$isOverlay","css","BadgeWrapper","$offset","numberBadgeStyles","Font","Spec","dotBadgeStyles","StyledBadge","$color","Colour","$variant","Radius","full","Border","sm"],"mappings":"kKAsBO,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,KAAKC,KAAK;mBACRD,EAAAA,KAAKC,KAAK;;EAIvBC,EAAiBN,EAAAA,GAAG;;;;EAMbO,EAAcX,EAAAA,QAAOC,GAAqB;wBAC/B,EAAGW,YACR,cAAXA,EAAyBC,EAAAA,OAAO,cAAgBA,SAAO;aAClDA,EAAAA,OAAO;mBACDL,EAAAA,KAAKC,KAAK;;;;;;MAMvB,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,KAAG;sBACJG;qCACeQ,EAAAA,OAAOC;kBAGhC,IAAK,qBACD,OAAOZ,KAAG;sBACJG;qCACeQ,EAAAA,OAAOC;wCACJC,EAAAA,OAAO,gBAAgBJ,EAAAA,OAAW;kBAG9D,IAAK,MACD,OAAOT,KAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,KAAG;sBACJM;yCACmBO,EAAAA,OAAO,gBAAgBJ,EAAAA,OAAW;kBAG/D,IAAK,gBACD,OAAOT,KAAG;sBACJG;qCACeQ,EAAAA,OAAOG;;sBAEX,YAAXN,GACFR,KAAG;4CACqBS,EAAAA,OAAO;iCAClBA,EAAAA,OAAO;;kBAI5B,QACI,MAAO;"}
+{"version":3,"file":"badge.style.js","sources":["../../../src/badge/badge.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Radius } from \"../theme\";\nimport { BadgeProps } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledBadgeProps {\n    $variant: BadgeProps[\"variant\"];\n    $color: BadgeProps[\"color\"];\n}\ninterface BadgeContainerProps {\n    $isOverlay?: boolean;\n}\ninterface BadgeWrapperProps extends BadgeContainerProps {\n    $offset?: [string, string];\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const BadgeOverlay = styled.span<BadgeContainerProps>`\n    ${(props) =>\n        props.$isOverlay &&\n        css`\n            position: relative;\n            width: fit-content;\n            height: fit-content;\n        `}\n`;\n\nexport const BadgeWrapper = styled.span<BadgeWrapperProps>`\n    ${(props) =>\n        props.$isOverlay &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            transform: translate(50%, -25%)\n                ${props.$offset\n                    ? `translate(${props.$offset[0]},${props.$offset[1]})`\n                    : \"\"};\n        `}\n`;\n\nconst numberBadgeStyles = css`\n    min-width: 1.25rem;\n    padding: 0.25rem 0.375rem;\n    font-size: ${Font.Spec[\"body-size-xs\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    line-height: 1;\n`;\n\nconst dotBadgeStyles = css`\n    border-radius: 50%;\n    width: 0.5rem;\n    height: 0.5rem;\n`;\n\nexport const StyledBadge = styled.span<StyledBadgeProps>`\n    background-color: ${({ $color }) =>\n        $color === \"important\" ? Colour[\"icon-error\"] : Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: fit-content;\n    ${({ $variant, $color }) => {\n        switch ($variant) {\n            case \"number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                `;\n\n            case \"number-with-border\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.full};\n                    box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"dot\":\n                return css`\n                    ${dotBadgeStyles}\n                `;\n\n            case \"dot-with-border\":\n                return css`\n                    ${dotBadgeStyles}\n                    box-shadow: 0 0 0  ${Border[\"width-020\"]} ${Colour[\"bg\"]};\n                `;\n\n            case \"square-number\":\n                return css`\n                    ${numberBadgeStyles}\n                    border-radius: ${Radius.sm};\n                    padding: 0.25rem 0.4375rem;\n                    ${$color === \"default\" &&\n                    css`\n                        background-color: ${Colour[\"bg-primary-subtler\"]};\n                        color: ${Colour[\"text-primary\"]};\n                    `}\n                `;\n\n            default:\n                return \"\";\n        }\n    }};\n`;\n"],"names":["BadgeOverlay","styled","span","props","$isOverlay","css","BadgeWrapper","$offset","numberBadgeStyles","Font","Spec","dotBadgeStyles","StyledBadge","$color","Colour","$variant","Radius","full","Border","sm"],"mappings":"kKAsBO,MAAMA,EAAeC,EAAAA,QAAOC,IAAyB;MACrDC,GACCA,EAAMC,YACNC,KAAG;;;;;EAOEC,EAAeL,EAAAA,QAAOC,IAAuB;MACnDC,GACCA,EAAMC,YACNC,KAAG;;;;;kBAKOF,EAAMI,QACF,aAAaJ,EAAMI,QAAQ,MAAMJ,EAAMI,QAAQ,MAC/C;;EAIhBC,EAAoBH,EAAAA,GAAG;;;iBAGZI,EAAAA,KAAKC,KAAK;mBACRD,EAAAA,KAAKC,KAAK;;EAIvBC,EAAiBN,EAAAA,GAAG;;;;EAMbO,EAAcX,EAAAA,QAAOC,IAAsB;wBAChC,EAAGW,YACR,cAAXA,EAAyBC,EAAAA,OAAO,cAAgBA,SAAO;aAClDA,EAAAA,OAAO;mBACDL,EAAAA,KAAKC,KAAK;;;;;;MAMvB,EAAGK,WAAUF,aACX,OAAQE,GACJ,IAAK,SACD,OAAOV,KAAG;sBACJG;qCACeQ,EAAAA,OAAOC;kBAGhC,IAAK,qBACD,OAAOZ,KAAG;sBACJG;qCACeQ,EAAAA,OAAOC;wCACJC,EAAAA,OAAO,gBAAgBJ,EAAAA,OAAW;kBAG9D,IAAK,MACD,OAAOT,KAAG;sBACJM;kBAGV,IAAK,kBACD,OAAON,KAAG;sBACJM;yCACmBO,EAAAA,OAAO,gBAAgBJ,EAAAA,OAAW;kBAG/D,IAAK,gBACD,OAAOT,KAAG;sBACJG;qCACeQ,EAAAA,OAAOG;;sBAEX,YAAXN,GACFR,KAAG;4CACqBS,EAAAA,OAAO;iCAClBA,EAAAA,OAAO;;kBAI5B,QACI,MAAO;"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("../external/dayjs/dayjs.min.js"),t=require("react"),n=require("../shared/dropdown-wrapper/element-with-dropdown.js"),i=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var l=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js"),require("../util/date-helper.js");var s=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./date-input.style.js");exports.DateInput=o=>{var{minDate:u,maxDate:c,disabled:p,disabledDates:v,error:D,hideInputKeyboard:h,value:f,onChange:b,onFocus:m,onBlur:j,onYearMonthDisplayChange:I,withButton:w=!0,readOnly:g,id:q,allowDisabledSelection:x,zIndex:y,dropdownRootNode:C}=o,S=e.__rest(o,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[Y,R]=t.useState(s.DateInputHelper.sanitizeInput(f)),[B,O]=t.useState(s.DateInputHelper.sanitizeInput(f)),[z,H]=t.useState(void 0),[M,F]=t.useState(!1),[$,_]=t.useState(!1),E=t.useRef(null),K=t.useRef(null),N=t.useRef(null);t.useEffect((()=>{const e=s.DateInputHelper.sanitizeInput(f);R(e),O(e)}),[f]);const V=e=>{!x&&s.DateInputHelper.isDateDisabled(e,{disabledDates:v,minDate:u,maxDate:c})||(O(e),w||(G(e),R(e),e&&F(!1)))},W=e=>{var a;O(e),w||(G(e),R(e),e&&(null===(a=K.current)||void 0===a||a.focusYearRef(),F(!1)),H(void 0))},k=()=>{g||p||(F(!0),$||(_(!0),m&&m()))},T=e=>{var a,r,t;const n=e.relatedTarget,i=N.current&&N.current.contains(n),l=E.current&&E.current.contains(n),s=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));($&&!M&&!l&&!s||M&&!l&&!i&&!s)&&(null===(t=K.current)||void 0===t||t.resetInput(),O(Y),_(!1),F(!1),J())},Z=e=>{H(e)},A=e=>{var a,t;switch(e){case"reset":O(Y);break;case"confirmed":R(B),G(B)}r.default(B,"YYYY-MM-DD",!0).isValid()?null===(a=K.current)||void 0===a||a.focusYearRef():null===(t=E.current)||void 0===t||t.focus(),F(!1)},G=e=>{b&&b(e)},J=()=>{j&&j()};return a.jsx(n.ElementWithDropdown,{enabled:!g&&!p,isOpen:M,renderElement:()=>a.jsx(d.Container,Object.assign({role:"group",tabIndex:0,ref:E,onBlur:T,onFocus:k,$disabled:p,$readOnly:g,$focused:$,$error:D,id:q,"data-testid":S["data-testid"],"aria-disabled":p},S,{children:a.jsx(l.StandaloneDateInput,{ref:K,disabled:p,onChange:V,readOnly:g,focused:M,names:["start-day","start-month","start-year"],value:B,hoverValue:z,hideInputKeyboard:h})})),renderDropdown:({elementWidth:e})=>a.jsx(i.CalendarDropdown,{variant:"single",ref:N,initialCalendarDate:B,withButton:w,value:B,disabledDates:v,minDate:u,maxDate:c,allowDisabledSelection:x,onHover:Z,onSelect:W,onDismiss:A,onYearMonthDisplayChange:I,width:e,isFocusable:!g&&!p}),onClose:()=>{var e;null===(e=K.current)||void 0===e||e.resetInput(),O(Y),F(!1),_(!1),J(),H(void 0)},onDismiss:()=>{var e,a;null===(e=K.current)||void 0===e||e.resetInput(),null===(a=E.current)||void 0===a||a.focus(),O(Y),F(!1)},customZIndex:y,offset:16,rootNode:C})};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("../external/dayjs/dayjs.min.js"),t=require("react"),n=require("../shared/dropdown-wrapper/element-with-dropdown.js"),i=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var l=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js"),require("../util/date-helper.js");var s=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./date-input.style.js");exports.DateInput=o=>{var{minDate:u,maxDate:c,disabled:p,disabledDates:v,error:D,hideInputKeyboard:h,value:f,onChange:b,onFocus:m,onBlur:j,onYearMonthDisplayChange:I,withButton:w=!0,readOnly:g,id:q,allowDisabledSelection:x,zIndex:y,dropdownRootNode:C}=o,S=e.__rest(o,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[Y,R]=t.useState(s.DateInputHelper.sanitizeInput(f)),[B,O]=t.useState(s.DateInputHelper.sanitizeInput(f)),[z,H]=t.useState(void 0),[M,F]=t.useState(!1),[$,_]=t.useState(!1),E=t.useRef(null),K=t.useRef(null),N=t.useRef(null);t.useEffect((()=>{const e=s.DateInputHelper.sanitizeInput(f);R(e),O(e)}),[f]);const V=e=>{!x&&s.DateInputHelper.isDateDisabled(e,{disabledDates:v,minDate:u,maxDate:c})||(O(e),w||(G(e),R(e),e&&F(!1)))},W=e=>{var a;O(e),w||(G(e),R(e),e&&(null===(a=K.current)||void 0===a||a.focusYearRef(),F(!1)),H(void 0))},k=()=>{g||p||(F(!0),$||(_(!0),m&&m()))},T=e=>{var a,r,t;const n=e.relatedTarget,i=N.current&&N.current.contains(n),l=E.current&&E.current.contains(n),s=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));($&&!M&&!l&&!s||M&&!l&&!i&&!s)&&(null===(t=K.current)||void 0===t||t.resetInput(),O(Y),_(!1),F(!1),J())},Z=e=>{M&&H(e)},A=e=>{var a,t;switch(e){case"reset":O(Y);break;case"confirmed":R(B),G(B)}r.default(B,"YYYY-MM-DD",!0).isValid()?null===(a=K.current)||void 0===a||a.focusYearRef():null===(t=E.current)||void 0===t||t.focus(),F(!1)},G=e=>{b&&b(e)},J=()=>{j&&j()};return a.jsx(n.ElementWithDropdown,{enabled:!g&&!p,isOpen:M,renderElement:()=>a.jsx(d.Container,Object.assign({role:"group",tabIndex:0,ref:E,onBlur:T,onFocus:k,$disabled:p,$readOnly:g,$focused:$,$error:D,id:q,"data-testid":S["data-testid"],"aria-disabled":p},S,{children:a.jsx(l.StandaloneDateInput,{ref:K,disabled:p,onChange:V,readOnly:g,focused:M,names:["start-day","start-month","start-year"],value:B,hoverValue:z,hideInputKeyboard:h})})),renderDropdown:({elementWidth:e})=>a.jsx(i.CalendarDropdown,{variant:"single",ref:N,initialCalendarDate:B,withButton:w,value:B,disabledDates:v,minDate:u,maxDate:c,allowDisabledSelection:x,onHover:Z,onSelect:W,onDismiss:A,onYearMonthDisplayChange:I,width:e,isFocusable:!g&&!p}),onClose:()=>{var e;null===(e=K.current)||void 0===e||e.resetInput(),O(Y),F(!1),_(!1),J(),H(void 0)},onDismiss:()=>{var e,a;null===(e=K.current)||void 0===e||e.resetInput(),null===(a=E.current)||void 0===a||a.focus(),O(Y),F(!1)},customZIndex:y,offset:16,rootNode:C})};
 //# sourceMappingURL=date-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","sources":["../../../src/date-input/date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n    DropdownRenderProps,\n    ElementWithDropdown,\n} from \"../shared/dropdown-wrapper\";\nimport {\n    CalendarAction,\n    CalendarDropdown,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport {\n    StandaloneDateInput,\n    StandaloneDateInputRef,\n} from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport { Container } from \"./date-input.style\";\nimport { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <Container\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $focused={focused}\n                $error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </Container>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","Container","Object","assign","role","tabIndex","ref","$disabled","$focused","$error","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}
+{"version":3,"file":"date-input.js","sources":["../../../src/date-input/date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n    DropdownRenderProps,\n    ElementWithDropdown,\n} from \"../shared/dropdown-wrapper\";\nimport {\n    CalendarAction,\n    CalendarDropdown,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport {\n    StandaloneDateInput,\n    StandaloneDateInputRef,\n} from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport { Container } from \"./date-input.style\";\nimport { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        if (!calendarOpen) return;\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <Container\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $focused={focused}\n                $error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </Container>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","Container","Object","assign","role","tabIndex","ref","$disabled","$focused","$error","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

package/cjs/filter/filter-badge.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("../badge/badge.js");exports.FilterBadge=({count:a})=>void 0!==a&&a>0?e.jsx(r.Badge,{count:a,variant:"square-number","aria-label":`${a} selected`}):null;
+//# sourceMappingURL=filter-badge.js.map

package/cjs/filter/filter-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-badge.js","sources":["../../../src/filter/filter-badge.tsx"],"sourcesContent":["import { Badge } from \"../badge\";\n\ninterface FilterBadgeProps {\n    count?: number;\n}\n\nexport const FilterBadge = ({ count }: FilterBadgeProps) =>\n    count !== undefined && count > 0 ? (\n        <Badge\n            count={count}\n            variant=\"square-number\"\n            aria-label={`${count} selected`}\n        />\n    ) : null;\n"],"names":["count","undefined","_jsx","Badge","variant"],"mappings":"mGAM2B,EAAGA,gBAChBC,IAAVD,GAAuBA,EAAQ,EAC3BE,EAAAA,IAACC,EAAAA,MAAK,CACFH,MAAOA,EACPI,QAAQ,6BACI,GAAGJ,eAEnB"}

package/cjs/filter/filter-modal.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("@floating-ui/react"),i=require("@lifesg/react-icons"),r=require("react"),o=require("../overlay/overlay.js"),n=require("../shared/accessibility/index.js"),s=require("./filter-context.js"),a=require("./filter-modal.styles.js"),d=require("./filter.styles.js");const u=u=>{var{customLabels:c,onClear:b,onDone:h,onDismiss:g,onModalOpen:j,toggleFilterButtonStyle:x="light",clearButtonDisabled:F=!1,insets:v,children:f,toggleFilterButtonLabel:y,headerTitle:B,doneButtonLabel:m}=u,p=e.__rest(u,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel"]);const{context:C,refs:q}=l.useFloating(),L=r.useRef(null),[D,T]=r.useState(!1),M={toggle:(null==c?void 0:c.toggleFilterButtonLabel)||y||"Filters",title:(null==c?void 0:c.headerTitle)||B||"Filters",done:(null==c?void 0:c.doneButtonLabel)||m||"Done",clear:(null==c?void 0:c.clearButtonLabel)||"Clear"};return r.useEffect((()=>{var e;D&&(null===(e=L.current)||void 0===e||e.focus())}),[D]),t.jsxs(s.FilterContext.Provider,{value:{mode:"mobile",rootNode:L},children:[t.jsx("div",Object.assign({},p,{children:t.jsx(a.FilterButton,{"data-testid":"filter-show-button",styleType:x,onClick:()=>{T(!0),null==j||j()},type:"button",icon:t.jsx(i.FilterIcon,{}),children:M.toggle})})),t.jsx(o.Overlay,{show:D,disableTransition:!0,children:t.jsx(a.FloatingWrapper,{inert:n.inertValue(!D),children:t.jsx(l.FloatingFocusManager,{context:C,disabled:!D,children:t.jsx(a.MobileOverlayContainer,{"data-id":"filter-mobile","data-testid":"filter-mobile",ref:q.setFloating,children:t.jsxs(a.MobileContainer,{ref:L,tabIndex:0,children:[t.jsxs(a.FilterHeader,{$insetTop:null==v?void 0:v.top,children:[t.jsx(d.FilterHeaderButton,{onClick:()=>{T(!1),null==g||g()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${M.title}`,children:t.jsx(i.CrossIcon,{})}),t.jsx(a.FilterTitle,{children:M.title}),t.jsx(a.FilterClearButton,{styleType:"link",type:"button",onClick:()=>null==b?void 0:b(),disabled:F,"aria-label":`clear ${M.title}`,children:M.clear})]}),t.jsx(d.FilterBody,{children:f}),t.jsx(d.FilterFooter,{$insetBottom:null==v?void 0:v.bottom,children:t.jsx(d.FilterDoneButton,{onClick:()=>{T(!1),null==h||h()},children:M.done})})]})})})})})]})};u.displayName="Filter.Modal",exports.FilterModal=u;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("@floating-ui/react"),i=require("@lifesg/react-icons"),r=require("react"),o=require("../overlay/overlay.js"),n=require("../shared/accessibility/index.js"),s=require("./filter-badge.js"),a=require("./filter-context.js"),d=require("./filter-modal.styles.js"),u=require("./filter.styles.js");const c=c=>{var{customLabels:b,onClear:j,onDone:g,onDismiss:x,onModalOpen:h,toggleFilterButtonStyle:F="light",clearButtonDisabled:v=!1,insets:B,count:f,children:y,toggleFilterButtonLabel:p,headerTitle:m,doneButtonLabel:C}=c,q=e.__rest(c,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel"]);const{context:T,refs:L}=l.useFloating(),D=r.useRef(null),[M,O]=r.useState(!1),k={toggle:(null==b?void 0:b.toggleFilterButtonLabel)||p||"Filters",title:(null==b?void 0:b.headerTitle)||m||"Filters",done:(null==b?void 0:b.doneButtonLabel)||C||"Done",clear:(null==b?void 0:b.clearButtonLabel)||"Clear"};return r.useEffect((()=>{var e;M&&(null===(e=D.current)||void 0===e||e.focus())}),[M]),t.jsxs(a.FilterContext.Provider,{value:{mode:"mobile",rootNode:D},children:[t.jsx("div",Object.assign({},q,{children:t.jsx(d.FilterButton,{"data-testid":"filter-show-button",styleType:F,onClick:()=>{O(!0),null==h||h()},type:"button",icon:t.jsx(i.FilterIcon,{}),children:t.jsxs(d.FilterToggleContent,{children:[t.jsx("span",{children:k.toggle}),t.jsx(s.FilterBadge,{count:f})]})})})),t.jsx(o.Overlay,{show:M,disableTransition:!0,children:t.jsx(d.FloatingWrapper,{inert:n.inertValue(!M),children:t.jsx(l.FloatingFocusManager,{context:T,disabled:!M,children:t.jsx(d.MobileOverlayContainer,{"data-id":"filter-mobile","data-testid":"filter-mobile",ref:L.setFloating,children:t.jsxs(d.MobileContainer,{ref:D,tabIndex:0,children:[t.jsxs(d.FilterHeader,{$insetTop:null==B?void 0:B.top,children:[t.jsx(u.FilterHeaderButton,{onClick:()=>{O(!1),null==x||x()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${k.title}`,children:t.jsx(i.CrossIcon,{})}),t.jsxs(d.FilterTitleGroup,{children:[t.jsx(d.FilterTitle,{children:k.title}),t.jsx(s.FilterBadge,{count:f})]}),t.jsx(d.FilterClearButton,{styleType:"link",type:"button",onClick:()=>null==j?void 0:j(),disabled:v,"aria-label":`clear ${k.title}`,children:k.clear})]}),t.jsx(u.FilterBody,{children:y}),t.jsx(u.FilterFooter,{$insetBottom:null==B?void 0:B.bottom,children:t.jsx(u.FilterDoneButton,{onClick:()=>{O(!1),null==g||g()},children:k.done})})]})})})})})]})};c.displayName="Filter.Modal",exports.FilterModal=c;
 //# sourceMappingURL=filter-modal.js.map

package/cjs/filter/filter-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.js","sources":["../../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Overlay } from \"src/overlay\";\nimport { inertValue } from \"src/shared/accessibility\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    FilterButton,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FloatingWrapper,\n    MobileContainer,\n    MobileOverlayContainer,\n} from \"./filter-modal.styles\";\nimport { FilterModalProps } from \"./types\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\n\nexport const FilterModal = ({\n    customLabels,\n    onClear,\n    onDone,\n    onDismiss,\n    onModalOpen,\n    toggleFilterButtonStyle = \"light\",\n    clearButtonDisabled = false,\n    insets,\n    children,\n    toggleFilterButtonLabel: _toggleFilterButtonLabel,\n    headerTitle: _headerTitle,\n    doneButtonLabel: _doneButtonLabel,\n    ...otherProps\n}: FilterModalProps) => {\n    const { context, refs } = useFloating();\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const [visible, setVisible] = useState(false);\n\n    const handleShow = () => setVisible(true);\n    const handleDismiss = () => {\n        setVisible(false);\n        onDismiss?.();\n    };\n    const handleDone = () => {\n        setVisible(false);\n        onDone?.();\n    };\n\n    const handleShowFilter = () => {\n        handleShow();\n        onModalOpen?.();\n    };\n\n    const labels = {\n        toggle:\n            customLabels?.toggleFilterButtonLabel ||\n            _toggleFilterButtonLabel ||\n            \"Filters\",\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        done: customLabels?.doneButtonLabel || _doneButtonLabel || \"Done\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    useEffect(() => {\n        if (visible) {\n            nodeRef.current?.focus();\n        }\n    }, [visible]);\n\n    return (\n        <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n            <div {...otherProps}>\n                <FilterButton\n                    data-testid=\"filter-show-button\"\n                    styleType={toggleFilterButtonStyle}\n                    onClick={handleShowFilter}\n                    type=\"button\"\n                    icon={<FilterIcon />}\n                >\n                    {labels.toggle}\n                </FilterButton>\n            </div>\n            <Overlay show={visible} disableTransition>\n                <FloatingWrapper inert={inertValue(!visible)}>\n                    <FloatingFocusManager context={context} disabled={!visible}>\n                        <MobileOverlayContainer\n                            data-id=\"filter-mobile\"\n                            data-testid=\"filter-mobile\"\n                            ref={refs.setFloating}\n                        >\n                            <MobileContainer ref={nodeRef} tabIndex={0}>\n                                <FilterHeader $insetTop={insets?.top}>\n                                    <FilterHeaderButton\n                                        onClick={handleDismiss}\n                                        focusOutline=\"browser\"\n                                        focusHighlight={false}\n                                        aria-label={`close ${labels.title}`}\n                                    >\n                                        <CrossIcon />\n                                    </FilterHeaderButton>\n                                    <FilterTitle>{labels.title}</FilterTitle>\n                                    <FilterClearButton\n                                        styleType=\"link\"\n                                        type=\"button\"\n                                        onClick={() => onClear?.()}\n                                        disabled={clearButtonDisabled}\n                                        aria-label={`clear ${labels.title}`}\n                                    >\n                                        {labels.clear}\n                                    </FilterClearButton>\n                                </FilterHeader>\n                                <FilterBody>{children}</FilterBody>\n                                <FilterFooter $insetBottom={insets?.bottom}>\n                                    <FilterDoneButton onClick={handleDone}>\n                                        {labels.done}\n                                    </FilterDoneButton>\n                                </FilterFooter>\n                            </MobileContainer>\n                        </MobileOverlayContainer>\n                    </FloatingFocusManager>\n                </FloatingWrapper>\n            </Overlay>\n        </FilterContext.Provider>\n    );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","visible","setVisible","useState","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","FilterButton","styleType","onClick","type","icon","FilterIcon","Overlay","show","disableTransition","FloatingWrapper","inert","inertValue","FloatingFocusManager","disabled","MobileOverlayContainer","ref","setFloating","MobileContainer","tabIndex","FilterHeader","$insetTop","top","FilterHeaderButton","focusOutline","focusHighlight","CrossIcon","FilterTitle","FilterClearButton","FilterBody","FilterFooter","$insetBottom","bottom","FilterDoneButton","displayName"],"mappings":"+VAuBO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,SACNA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,GAAgBf,EAC9BgB,EAAUC,SAAAjB,EAbW,6LAexB,MAAMkB,QAAEA,EAAOC,KAAEA,GAASC,gBACpBC,EAAUC,EAAAA,OAAuB,OAEhCC,EAASC,GAAcC,EAAAA,UAAS,GAiBjCC,EAAS,CACXC,QACI1B,aAAY,EAAZA,EAAcS,0BACdC,GACA,UACJiB,OAAO3B,aAAY,EAAZA,EAAcW,cAAeC,GAAgB,UACpDgB,MAAM5B,aAAY,EAAZA,EAAca,kBAAmBC,GAAoB,OAC3De,OAAO7B,eAAAA,EAAc8B,mBAAoB,SAS7C,OANAC,EAAAA,WAAU,WACFT,IACe,QAAfvB,EAAAqB,EAAQY,eAAO,IAAAjC,GAAAA,EAAEkC,QACrB,GACD,CAACX,IAGAY,EAAAA,KAACC,gBAAcC,UAASC,MAAO,CAAEC,KAAM,SAAUC,SAAUnB,GAASZ,SAAA,CAChEgC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,GAAS3B,EAAU,CAAAP,SACfgC,EAAAA,IAACG,eAAY,CAAA,cACG,qBACZC,UAAWvC,EACXwC,QA3BS,KAVAtB,GAAW,GAYhCnB,SAAAA,GAAe,EA0BH0C,KAAK,SACLC,KAAMP,EAAAA,IAACQ,EAAAA,WAAU,CAAA,GAAGxC,SAEnBiB,EAAOC,YAGhBc,MAACS,EAAAA,QAAO,CAACC,KAAM5B,EAAS6B,mBAAiB,EAAA3C,SACrCgC,EAAAA,IAACY,kBAAe,CAACC,MAAOC,cAAYhC,YAChCkB,EAAAA,IAACe,EAAAA,qBAAoB,CAACtC,QAASA,EAASuC,UAAWlC,EAAOd,SACtDgC,EAAAA,IAACiB,oCACW,gBAAe,cACX,gBACZC,IAAKxC,EAAKyC,YAAWnD,SAErB0B,EAAAA,KAAC0B,EAAAA,gBAAe,CAACF,IAAKtC,EAASyC,SAAU,EAACrD,SAAA,CACtC0B,EAAAA,KAAC4B,eAAY,CAAAC,UAAYxD,aAAM,EAANA,EAAQyD,IAAGxD,SAAA,CAChCgC,EAAAA,IAACyB,EAAAA,mBAAkB,CACfpB,QAtDd,KAClBtB,GAAW,GACXpB,SAAAA,GAAa,EAqDmB+D,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS1C,EAAOE,QAAOnB,SAEnCgC,EAAAA,IAAC4B,YAAS,CAAA,KAEd5B,EAAAA,IAAC6B,EAAAA,YAAW,CAAA7D,SAAEiB,EAAOE,QACrBa,EAAAA,IAAC8B,oBAAiB,CACd1B,UAAU,OACVE,KAAK,SACLD,QAAS,IAAM5C,eAAAA,IACfuD,SAAUlD,eACE,SAASmB,EAAOE,QAAOnB,SAElCiB,EAAOI,WAGhBW,MAAC+B,EAAAA,WAAU,CAAA/D,SAAEA,IACbgC,EAAAA,IAACgC,EAAAA,aAAY,CAAAC,aAAelE,aAAM,EAANA,EAAQmE,gBAChClC,EAAAA,IAACmC,EAAAA,iBAAgB,CAAC9B,QAtE/B,KACftB,GAAW,GACXrB,SAAAA,GAAU,WAqEuBuB,EAAOG,sBAQf,EAIjC9B,EAAY8E,YAAc"}
+{"version":3,"file":"filter-modal.js","sources":["../../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Overlay } from \"src/overlay\";\nimport { inertValue } from \"src/shared/accessibility\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    FilterButton,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FilterTitleGroup,\n    FilterToggleContent,\n    FloatingWrapper,\n    MobileContainer,\n    MobileOverlayContainer,\n} from \"./filter-modal.styles\";\nimport { FilterModalProps } from \"./types\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\n\nexport const FilterModal = ({\n    customLabels,\n    onClear,\n    onDone,\n    onDismiss,\n    onModalOpen,\n    toggleFilterButtonStyle = \"light\",\n    clearButtonDisabled = false,\n    insets,\n    count,\n    children,\n    toggleFilterButtonLabel: _toggleFilterButtonLabel,\n    headerTitle: _headerTitle,\n    doneButtonLabel: _doneButtonLabel,\n    ...otherProps\n}: FilterModalProps) => {\n    const { context, refs } = useFloating();\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const [visible, setVisible] = useState(false);\n\n    const handleShow = () => setVisible(true);\n    const handleDismiss = () => {\n        setVisible(false);\n        onDismiss?.();\n    };\n    const handleDone = () => {\n        setVisible(false);\n        onDone?.();\n    };\n\n    const handleShowFilter = () => {\n        handleShow();\n        onModalOpen?.();\n    };\n\n    const labels = {\n        toggle:\n            customLabels?.toggleFilterButtonLabel ||\n            _toggleFilterButtonLabel ||\n            \"Filters\",\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        done: customLabels?.doneButtonLabel || _doneButtonLabel || \"Done\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    useEffect(() => {\n        if (visible) {\n            nodeRef.current?.focus();\n        }\n    }, [visible]);\n\n    return (\n        <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n            <div {...otherProps}>\n                <FilterButton\n                    data-testid=\"filter-show-button\"\n                    styleType={toggleFilterButtonStyle}\n                    onClick={handleShowFilter}\n                    type=\"button\"\n                    icon={<FilterIcon />}\n                >\n                    <FilterToggleContent>\n                        <span>{labels.toggle}</span>\n                        <FilterBadge count={count} />\n                    </FilterToggleContent>\n                </FilterButton>\n            </div>\n            <Overlay show={visible} disableTransition>\n                <FloatingWrapper inert={inertValue(!visible)}>\n                    <FloatingFocusManager context={context} disabled={!visible}>\n                        <MobileOverlayContainer\n                            data-id=\"filter-mobile\"\n                            data-testid=\"filter-mobile\"\n                            ref={refs.setFloating}\n                        >\n                            <MobileContainer ref={nodeRef} tabIndex={0}>\n                                <FilterHeader $insetTop={insets?.top}>\n                                    <FilterHeaderButton\n                                        onClick={handleDismiss}\n                                        focusOutline=\"browser\"\n                                        focusHighlight={false}\n                                        aria-label={`close ${labels.title}`}\n                                    >\n                                        <CrossIcon />\n                                    </FilterHeaderButton>\n                                    <FilterTitleGroup>\n                                        <FilterTitle>\n                                            {labels.title}\n                                        </FilterTitle>\n                                        <FilterBadge count={count} />\n                                    </FilterTitleGroup>\n                                    <FilterClearButton\n                                        styleType=\"link\"\n                                        type=\"button\"\n                                        onClick={() => onClear?.()}\n                                        disabled={clearButtonDisabled}\n                                        aria-label={`clear ${labels.title}`}\n                                    >\n                                        {labels.clear}\n                                    </FilterClearButton>\n                                </FilterHeader>\n                                <FilterBody>{children}</FilterBody>\n                                <FilterFooter $insetBottom={insets?.bottom}>\n                                    <FilterDoneButton onClick={handleDone}>\n                                        {labels.done}\n                                    </FilterDoneButton>\n                                </FilterFooter>\n                            </MobileContainer>\n                        </MobileOverlayContainer>\n                    </FloatingFocusManager>\n                </FloatingWrapper>\n            </Overlay>\n        </FilterContext.Provider>\n    );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","visible","setVisible","useState","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","FilterButton","styleType","onClick","type","icon","FilterIcon","FilterToggleContent","FilterBadge","Overlay","show","disableTransition","FloatingWrapper","inert","inertValue","FloatingFocusManager","disabled","MobileOverlayContainer","ref","setFloating","MobileContainer","tabIndex","FilterHeader","$insetTop","top","FilterHeaderButton","focusOutline","focusHighlight","CrossIcon","FilterTitleGroup","FilterTitle","FilterClearButton","FilterBody","FilterFooter","$insetBottom","bottom","FilterDoneButton","displayName"],"mappings":"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"}

package/cjs/filter/filter-modal.styles.js

@@ -1,30 +1,38 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.js"),o=require("../button-with-icon/button-with-icon.js"),i=require("../theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(t);const a=r.default.div`
-    background-color: ${i.Colour["bg-strong"]};
+"use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../button-with-icon/button-with-icon.js"),n=require("../theme/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=o(t);const a=r.default.div`
+    background-color: ${n.Colour["bg-strong"]};
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
 `,l=r.default.div`
-    background-color: ${i.Colour.bg};
+    background-color: ${n.Colour.bg};
     height: 100%;
     width: 100%;
-`,u=r.default.div`
+`,p=r.default.div`
     height: 100%;
 `,d=r.default.div`
     display: flex;
     align-items: center;
-    background-color: ${i.Colour.bg};
+    background-color: ${n.Colour.bg};
     ${t=>t.$insetTop&&`padding-top: ${t.$insetTop}px;`}
-`,s=r.default.h2`
-    ${i.Font["heading-xs-semibold"]}
+`,s=r.default.div`
     flex: 1;
-    text-align: center;
-    margin: ${i.Spacing["spacing-24"]} 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${n.Spacing["spacing-8"]};
+    margin: ${n.Spacing["spacing-24"]} 0;
+`,u=r.default.h2`
+    ${n.Font["heading-xs-semibold"]}
+`,g=r.default.span`
+    display: inline-flex;
+    align-items: center;
+    gap: ${n.Spacing["spacing-8"]};
 `,c=r.default(e.Button.Small)`
     background-color: transparent;
     height: 100%;
-    padding: ${i.Spacing["spacing-24"]} ${i.Spacing["spacing-20"]};
-`,p=r.default(o.ButtonWithIcon.Default)`
+    padding: ${n.Spacing["spacing-24"]} ${n.Spacing["spacing-20"]};
+`,f=r.default(i.ButtonWithIcon.Default)`
     width: 100%;
-`;exports.FilterButton=p,exports.FilterClearButton=c,exports.FilterHeader=d,exports.FilterTitle=s,exports.FloatingWrapper=u,exports.MobileContainer=a,exports.MobileOverlayContainer=l;
+`;exports.FilterButton=f,exports.FilterClearButton=c,exports.FilterHeader=d,exports.FilterTitle=u,exports.FilterTitleGroup=s,exports.FilterToggleContent=g,exports.FloatingWrapper=p,exports.MobileContainer=a,exports.MobileOverlayContainer=l;
 //# sourceMappingURL=filter-modal.styles.js.map

package/cjs/filter/filter-modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    text-align: center;\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitle","h2","Font","Spacing","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"wPAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,OAAO;;;;;EAOlBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,OAAW;;;EAKtBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,OAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,KAAK;;;cAGGC,EAAAA,QAAQ;EAGTC,EAAoBZ,EAAAA,QAAOa,SAAOC,MAAM;;;eAGtCH,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;EAOnCI,EAAef,EAAAA,QAAOgB,iBAAeC,QAAQ;;"}
+{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"wPAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,OAAO;;;;;EAOlBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,OAAW;;;EAKtBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,OAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAAA,QAAOC,GAAG;;;;;WAK/BQ,EAAAA,QAAQ;cACLA,EAAAA,QAAQ;EAGTC,EAAcV,EAAAA,QAAOW,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAsBb,EAAAA,QAAOc,IAAI;;;WAGnCL,EAAAA,QAAQ;EAGNM,EAAoBf,EAAAA,QAAOgB,SAAOC,MAAM;;;eAGtCR,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;EAOnCS,EAAelB,EAAAA,QAAOmB,iBAAeC,QAAQ;;"}

package/cjs/filter/filter-sidebar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),l=require("./filter-context.js"),i=require("./filter-sidebar.styles.js"),s=require("./filter.styles.js");const a=a=>{var{customLabels:d,onClear:n,clearButtonDisabled:o=!1,children:c,headerTitle:u}=a,b=e.__rest(a,["customLabels","onClear","clearButtonDisabled","children","headerTitle"]);const j=t.useRef(null),h={title:(null==d?void 0:d.headerTitle)||u||"Filters",clear:(null==d?void 0:d.clearButtonLabel)||"Clear"};return r.jsx(l.FilterContext.Provider,{value:{mode:"default",rootNode:j},children:r.jsxs(i.DesktopContainer,Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:j},b,{children:[r.jsxs(i.FilterHeader,{children:[r.jsx(i.FilterTitle,{children:h.title}),r.jsx(i.FilterClearButton,{styleType:"link",type:"button",onClick:()=>null==n?void 0:n(),disabled:o,"aria-label":`clear ${h.title}`,children:h.clear})]}),r.jsx(s.FilterBody,{children:c})]}))})};a.displayName="Filter.Sidebar",exports.FilterSidebar=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),l=require("./filter-badge.js"),i=require("./filter-context.js"),s=require("./filter-sidebar.styles.js"),a=require("./filter.styles.js");const d=d=>{var{customLabels:n,onClear:o,clearButtonDisabled:u=!1,count:c,children:j,headerTitle:b}=d,h=e.__rest(d,["customLabels","onClear","clearButtonDisabled","count","children","headerTitle"]);const x=t.useRef(null),F={title:(null==n?void 0:n.headerTitle)||b||"Filters",clear:(null==n?void 0:n.clearButtonLabel)||"Clear"};return r.jsx(i.FilterContext.Provider,{value:{mode:"default",rootNode:x},children:r.jsxs(s.DesktopContainer,Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:x},h,{children:[r.jsxs(s.FilterHeader,{children:[r.jsxs(s.FilterTitleGroup,{children:[r.jsx(s.FilterTitle,{children:F.title}),r.jsx(l.FilterBadge,{count:c})]}),r.jsx(s.FilterClearButton,{styleType:"link",type:"button",onClick:()=>null==o?void 0:o(),disabled:u,"aria-label":`clear ${F.title}`,children:F.clear})]}),r.jsx(a.FilterBody,{children:j})]}))})};d.displayName="Filter.Sidebar",exports.FilterSidebar=d;
 //# sourceMappingURL=filter-sidebar.js.map

package/cjs/filter/filter-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.js","sources":["../../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n} from \"./filter-sidebar.styles\";\nimport { FilterSidebarProps } from \"./types\";\nimport { FilterBody } from \"./filter.styles\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    children,\n    headerTitle: _headerTitle,\n    ...otherProps\n}: FilterSidebarProps) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const labels = {\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    return (\n        <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n            <DesktopContainer\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                {...otherProps}\n            >\n                <FilterHeader>\n                    <FilterTitle>{labels.title}</FilterTitle>\n                    <FilterClearButton\n                        styleType=\"link\"\n                        type=\"button\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </FilterClearButton>\n                </FilterHeader>\n                <FilterBody>{children}</FilterBody>\n            </DesktopContainer>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitle","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"+MAWO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,SAC3BA,EACAC,YAAaC,GAAYN,EACtBO,EAAUC,EAAAA,OAAAR,EANa,2EAQ1B,MAAMS,EAAUC,EAAAA,OAAuB,MAEjCC,EAAS,CACXC,OAAOX,aAAY,EAAZA,EAAcI,cAAeC,GAAgB,UACpDO,OAAOZ,eAAAA,EAAca,mBAAoB,SAG7C,OACIC,EAAAA,IAACC,EAAAA,cAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASL,SACjEiB,OAACC,EAAAA,iBAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,EAAU,CAAAH,SAAA,CAEdiB,EAAAA,KAACK,EAAAA,aAAY,CAAAtB,SAAA,CACTW,MAACY,EAAAA,YAAW,CAAAvB,SAAEO,EAAOC,QACrBG,EAAAA,IAACa,EAAAA,kBAAiB,CACdC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAM7B,eAAAA,IACf8B,SAAU7B,EAAmB,aACjB,SAASQ,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAAAA,IAACkB,EAAAA,WAAU,CAAA7B,SAAEA,SAEI,EAIjCL,EAAcmC,YAAc"}
+{"version":3,"file":"filter-sidebar.js","sources":["../../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FilterTitleGroup,\n} from \"./filter-sidebar.styles\";\nimport { FilterSidebarProps } from \"./types\";\nimport { FilterBody } from \"./filter.styles\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    count,\n    children,\n    headerTitle: _headerTitle,\n    ...otherProps\n}: FilterSidebarProps) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const labels = {\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    return (\n        <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n            <DesktopContainer\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                {...otherProps}\n            >\n                <FilterHeader>\n                    <FilterTitleGroup>\n                        <FilterTitle>{labels.title}</FilterTitle>\n                        <FilterBadge count={count} />\n                    </FilterTitleGroup>\n                    <FilterClearButton\n                        styleType=\"link\"\n                        type=\"button\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </FilterClearButton>\n                </FilterHeader>\n                <FilterBody>{children}</FilterBody>\n            </DesktopContainer>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","count","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitleGroup","FilterTitle","FilterBadge","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"8OAaO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,MAC3BA,EAAKC,SACLA,EACAC,YAAaC,GAAYP,EACtBQ,EAAUC,EAAAA,OAAAT,EAPa,mFAS1B,MAAMU,EAAUC,EAAAA,OAAuB,MAEjCC,EAAS,CACXC,OAAOZ,aAAY,EAAZA,EAAcK,cAAeC,GAAgB,UACpDO,OAAOb,eAAAA,EAAcc,mBAAoB,SAG7C,OACIC,EAAAA,IAACC,EAAAA,cAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,YACxDY,EAAAA,KAACC,EAAAA,iBAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,aAEJc,EAAAA,KAACK,EAAAA,aAAY,CAAAtB,SAAA,CACTiB,EAAAA,KAACM,EAAAA,iBAAgB,CAAAvB,SAAA,CACbW,EAAAA,IAACa,EAAAA,YAAW,CAAAxB,SAAEO,EAAOC,QACrBG,EAAAA,IAACc,EAAAA,YAAW,CAAC1B,MAAOA,OAExBY,MAACe,EAAAA,mBACGC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAMhC,aAAO,EAAPA,IACfiC,SAAUhC,EAAmB,aACjB,SAASS,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAAAA,IAACoB,EAAAA,WAAU,CAAA/B,SAAEA,SAEI,EAIjCN,EAAcsC,YAAc"}

package/cjs/filter/filter-sidebar.styles.js

@@ -1,23 +1,28 @@
-"use strict";var e=require("styled-components"),r=require("../button/button.js"),t=require("../theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const n=i.default.div`
-    background-color: ${t.Colour.bg};
-    border: ${t.Border["width-010"]} ${t.Border.solid} ${t.Colour.border};
-    border-radius: ${t.Radius.md};
+"use strict";var e=require("styled-components"),t=require("../button/button.js"),r=require("../theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);const n=o.default.div`
+    background-color: ${r.Colour.bg};
+    border: ${r.Border["width-010"]} ${r.Border.solid} ${r.Colour.border};
+    border-radius: ${r.Radius.md};
     overflow: hidden;
     width: 100%;
-`,a=i.default.div`
+`,a=o.default.div`
     display: flex;
     align-items: center;
 
-    background-color: ${t.Colour.bg};
-`,d=i.default.h2`
-    ${t.Font["heading-xs-semibold"]}
+    background-color: ${r.Colour.bg};
+`,d=o.default.div`
     flex: 1;
-    margin: ${t.Spacing["spacing-24"]} 0 ${t.Spacing["spacing-24"]}
-        ${t.Spacing["spacing-20"]};
-`,l=i.default(r.Button.Small)`
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: ${r.Spacing["spacing-8"]};
+    margin: ${r.Spacing["spacing-24"]} 0 ${r.Spacing["spacing-24"]}
+        ${r.Spacing["spacing-20"]};
+`,l=o.default.h2`
+    ${r.Font["heading-xs-semibold"]}
+`,s=o.default(t.Button.Small)`
     background-color: transparent;
-    padding-right: ${t.Spacing["spacing-20"]};
-    padding-left: ${t.Spacing["spacing-20"]};
+    padding-right: ${r.Spacing["spacing-20"]};
+    padding-left: ${r.Spacing["spacing-20"]};
     height: 100%;
-`;exports.DesktopContainer=n,exports.FilterClearButton=l,exports.FilterHeader=a,exports.FilterTitle=d;
+`;exports.DesktopContainer=n,exports.FilterClearButton=s,exports.FilterHeader=a,exports.FilterTitle=l,exports.FilterTitleGroup=d;
 //# sourceMappingURL=filter-sidebar.styles.js.map

package/cjs/filter/filter-sidebar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitle","h2","Font","Spacing","FilterClearButton","Button","Small"],"mappings":"mMAQO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;wBAClBC,EAAAA,OAAW;cACrBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;;EASnBC,EAAeL,EAAAA,QAAOC,GAAG;;;;wBAIdC,EAAAA,OAAW;EAGtBI,EAAcN,EAAAA,QAAOO,EAAE;MAC9BC,EAAAA,KAAK;;cAEGC,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;UACvCA,EAAAA,QAAQ;EAGLC,EAAoBV,EAAAA,QAAOW,SAAOC,MAAM;;qBAEhCH,EAAAA,QAAQ;oBACTA,EAAAA,QAAQ;;"}
+{"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"mMAQO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;wBAClBC,EAAAA,OAAW;cACrBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;;EASnBC,EAAeL,EAAAA,QAAOC,GAAG;;;;wBAIdC,EAAAA,OAAW;EAGtBI,EAAmBN,EAAAA,QAAOC,GAAG;;;;;WAK/BM,EAAAA,QAAQ;cACLA,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;UACvCA,EAAAA,QAAQ;EAGLC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAoBX,EAAAA,QAAOY,SAAOC,MAAM;;qBAEhCN,EAAAA,QAAQ;oBACTA,EAAAA,QAAQ;;"}

package/cjs/form/form-wrapper.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("./form-label.js"),i=require("./form-label.style.js"),t=require("./form-wrapper.style.js");exports.FormWrapper=({label:a,errorMessage:o,id:d,disabled:n,children:u,layoutType:b,mobileCols:c,tabletCols:C,desktopCols:m,xxsCols:x,xsCols:g,smCols:j,mdCols:p,lgCols:h,xlCols:v,xxlCols:f,"data-testid":q,"data-error-testid":y})=>{const $=!b&&(c||C||m)?"v2-grid":!b&&(x||g||j||p||h||v||f)?"grid":b||"flex",F="string"==typeof o?o.trim():o,E=l.useId(),w=`${null!=d?d:E}-label`,I=`${null!=d?d:E}-label-subtitle`,M=`${null!=d?d:E}-error-message`;const k=(e=>{switch(e){case"v2-grid":return t.V2_ColDivContainer;case"grid":return t.ColDivContainer;case"flex":return t.Container}})($);return e.jsxs(k,Object.assign({"data-testid":q},(e=>{switch(e){case"v2-grid":return{mobileCols:c,tabletCols:C,desktopCols:m};case"grid":return{xxsCols:x,xsCols:g,smCols:j,mdCols:p,lgCols:h,xlCols:v,xxlCols:f};case"flex":return}})($),{children:[a&&("string"==typeof a?e.jsx(s.FormLabel,{htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:w,disabled:n,children:a}):e.jsx(s.FormLabel,Object.assign({htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:w,disabled:n},a))),(()=>{const e={"aria-invalid":!!o,"aria-describedby":[F?M:void 0,"object"==typeof a&&(null==a?void 0:a.subtitle)?I:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":a?w:void 0};return r.Children.map(u,(l=>r.cloneElement(l,e)))})(),F&&e.jsxs(i.ErrorMessageContainer,{children:[e.jsx(i.ErrorIcon,{"aria-hidden":!0}),e.jsx(i.ErrorMessage,{id:M,tabIndex:0,"data-testid":null!=y?y:d?`${d}-error-message`:"error-message",children:F})]})]}))};
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("./form-label.js"),i=require("./form-label.style.js"),t=require("./form-wrapper.style.js");exports.FormWrapper=({label:a,errorMessage:o,id:d,disabled:n,children:u,layoutType:b,mobileCols:c,tabletCols:m,desktopCols:C,xxsCols:x,xsCols:g,smCols:j,mdCols:p,lgCols:h,xlCols:v,xxlCols:f,"data-testid":q,"data-error-testid":y})=>{const $=!b&&(c||m||C)?"v2-grid":!b&&(x||g||j||p||h||v||f)?"grid":b||"flex",E="string"==typeof o?o.trim():o,F=l.useId(),w=`${null!=d?d:F}-label`,I=`${null!=d?d:F}-label-subtitle`,M=`${null!=d?d:F}-error-message`;const k=(e=>{switch(e){case"v2-grid":return t.V2_ColDivContainer;case"grid":return t.ColDivContainer;case"flex":return t.Container}})($);return e.jsxs(k,Object.assign({"data-testid":q},(e=>{switch(e){case"v2-grid":return{mobileCols:c,tabletCols:m,desktopCols:C};case"grid":return{xxsCols:x,xsCols:g,smCols:j,mdCols:p,lgCols:h,xlCols:v,xxlCols:f};case"flex":return}})($),{children:[a&&("string"==typeof a?e.jsx(s.FormLabel,{htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:w,disabled:n,children:a}):e.jsx(s.FormLabel,Object.assign({htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:w,disabled:n},a))),(()=>{const e={"aria-invalid":!!o,"aria-describedby":[E?M:void 0,"object"==typeof a&&(null==a?void 0:a.subtitle)?I:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":a?w:void 0};return r.Children.map(u,(l=>r.isValidElement(l)&&l.type===r.Fragment?r.cloneElement(l):r.cloneElement(l,e)))})(),E&&e.jsxs(i.ErrorMessageContainer,{children:[e.jsx(i.ErrorIcon,{"aria-hidden":!0}),e.jsx(i.ErrorMessage,{id:M,tabIndex:0,"data-testid":null!=y?y:d?`${d}-error-message`:"error-message",children:E})]})]}))};
 //# sourceMappingURL=form-wrapper.js.map