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

package/shared/timepicker-dropdown/timepicker-dropdown.styles.js

@@ -1,114 +1,2 @@
-import i from"styled-components";import{Button as e}from"../../button/button.js";import{Toggle as t}from"../../toggle/toggle.js";import{Typography as r}from"../../typography/index.js";import{V3_MediaQuery as n,V3_Spacing as o,V3_Colour as d,V3_Border as a,V3_Radius as s}from"../../v3_theme/index.js";import{ClickableIcon as l}from"../clickable-icon/clickable-icon.js";import{InputBox as c,BasicInput as x}from"../input-wrapper/input-wrapper.js";const p=i.div`
-    overflow: hidden;
-
-    ${n.MaxWidth.xxs} {
-        max-width: 100%;
-    }
-`,m=i.div`
-    position: relative;
-    width: 100%;
-    padding: ${o["spacing-8"]} ${o["spacing-20"]}
-        ${o["spacing-24"]} ${o["spacing-20"]};
-    display: flex;
-    flex-direction: column;
-    background: ${d.bg};
-    border: ${a["width-010"]} ${a.solid}
-        ${d.border};
-    border-radius: ${s.sm};
-`,h=i.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    ${n.MaxWidth.xxs} {
-        flex-direction: column;
-        width: 100%;
-    }
-`,g=i.div`
-    display: flex;
-    justify-content: flex-end;
-    margin-top: ${o["spacing-16"]};
-    gap: ${o["spacing-8"]};
-
-    ${n.MaxWidth.xxs} {
-        flex-direction: column-reverse; // FIXME: this breaks tab focus
-        margin-top: ${o["spacing-32"]};
-    }
-`,f=i.div`
-    display: flex;
-    align-items: center;
-    margin-right: ${o["spacing-32"]};
-
-    ${n.MaxWidth.xxs} {
-        margin-right: 0;
-        width: 100%;
-    }
-`,$=i.div`
-    display: flex;
-    gap: ${o["spacing-8"]};
-
-    ${n.MaxWidth.lg} {
-        flex-direction: column;
-    }
-
-    ${n.MaxWidth.xxs} {
-        flex-direction: row;
-        width: 100%;
-    }
-`,w=i.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    ${n.MaxWidth.xxs} {
-        width: 6rem;
-    }
-`,u=i(l)`
-    width: 5rem;
-    padding: ${o["spacing-16"]} 0;
-    color: ${d.icon};
-
-    svg {
-        height: 1rem;
-        width: 1rem;
-    }
-
-    &:hover {
-        color: ${d["icon-hover"]};
-    }
-`,v=i(r.BodyBL)`
-    flex-shrink: 0;
-    width: 1.5rem;
-    text-align: center;
-`,y=i(c)`
-    height: calc(3rem - 2px);
-    width: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    ${n.MaxWidth.xxs} {
-        width: 100%;
-    }
-`,b=i(x)`
-    text-align: center;
-    width: 100%;
-
-    &:focus::placeholder {
-        color: transparent;
-    }
-`,M=i(t)`
-    min-width: 5rem;
-    flex: 1;
-`,W=i(e.Small)`
-    width: 7rem;
-
-    ${n.MaxWidth.sm} {
-        flex: 1;
-    }
-
-    ${n.MaxWidth.xxs} {
-        width: 100%;
-    }
-`;export{m as Container,W as ControlButton,g as ControlSection,v as DividerLabel,f as HourMinuteSection,w as InputContainer,h as InputSection,p as StyledDiv,u as SwitchButton,b as TimeInput,y as TimeInputBox,$ as TimePeriodSection,M as TimePeriodToggle};
+import"./timepicker-dropdown.styles_119l6k6.css";const o="ru5iz77",i="c1o8b9oi",r="i11svvg0",t="c1ljojaz",c="h1lh2mc9",e="t28scph",s="iew5x9r",d="sn5alad",p="d8auh4f",n="t1b5fiv0",a="tr1n08z",h="t1xgwy38",l="covfne3";export{i as container,l as controlButton,t as controlSection,p as dividerLabel,c as hourMinuteSection,s as inputContainer,r as inputSection,o as root,d as switchButton,a as timeInput,n as timeInputBox,e as timePeriodSection,h as timePeriodToggle};
 //# sourceMappingURL=timepicker-dropdown.styles.js.map

package/shared/timepicker-dropdown/timepicker-dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker-dropdown.styles.js","sources":["../../../src/shared/timepicker-dropdown/timepicker-dropdown.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { Toggle } from \"../../toggle\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput, InputBox } from \"../input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN WRAPPER\n// -----------------------------------------------------------------------------\nexport const StyledDiv = styled.div`\n    overflow: hidden;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        max-width: 100%;\n    }\n`;\n\nexport const Container = styled.div`\n    position: relative;\n    width: 100%;\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-20\"]}\n        ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n    display: flex;\n    flex-direction: column;\n    background: ${V3_Colour[\"bg\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n`;\n\nexport const InputSection = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        flex-direction: column;\n        width: 100%;\n    }\n`;\n\nexport const ControlSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    margin-top: ${V3_Spacing[\"spacing-16\"]};\n    gap: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        flex-direction: column-reverse; // FIXME: this breaks tab focus\n        margin-top: ${V3_Spacing[\"spacing-32\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// INPUT COMPONENTS\n// -----------------------------------------------------------------------------\nexport const HourMinuteSection = styled.div`\n    display: flex;\n    align-items: center;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        margin-right: 0;\n        width: 100%;\n    }\n`;\n\nexport const TimePeriodSection = styled.div`\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        flex-direction: row;\n        width: 100%;\n    }\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: 6rem;\n    }\n`;\n\nexport const SwitchButton = styled(ClickableIcon)`\n    width: 5rem;\n    padding: ${V3_Spacing[\"spacing-16\"]} 0;\n    color: ${V3_Colour[\"icon\"]};\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n    }\n\n    &:hover {\n        color: ${V3_Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const DividerLabel = styled(Typography.BodyBL)`\n    flex-shrink: 0;\n    width: 1.5rem;\n    text-align: center;\n`;\n\nexport const TimeInputBox = styled(InputBox)`\n    height: calc(3rem - 2px);\n    width: 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n\nexport const TimeInput = styled(BasicInput)`\n    text-align: center;\n    width: 100%;\n\n    &:focus::placeholder {\n        color: transparent;\n    }\n`;\n\nexport const TimePeriodToggle = styled(Toggle)`\n    min-width: 5rem;\n    flex: 1;\n`;\n\n// -----------------------------------------------------------------------------\n// CONTROL COMPONENTS\n// -----------------------------------------------------------------------------\nexport const ControlButton = styled(Button.Small)`\n    width: 7rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        flex: 1;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n"],"names":["StyledDiv","styled","div","V3_MediaQuery","MaxWidth","xxs","Container","V3_Spacing","V3_Colour","V3_Border","V3_Radius","InputSection","ControlSection","HourMinuteSection","TimePeriodSection","lg","InputContainer","SwitchButton","ClickableIcon","DividerLabel","Typography","BodyBL","TimeInputBox","InputBox","TimeInput","BasicInput","TimePeriodToggle","Toggle","ControlButton","Button","Small","sm"],"mappings":"8bAsBO,MAAMA,EAAYC,EAAOC,GAAG;;;MAG7BC,EAAcC,SAASC;;;EAKhBC,EAAYL,EAAOC,GAAG;;;eAGpBK,EAAW,gBAAgBA,EAAW;UAC3CA,EAAW,iBAAiBA,EAAW;;;kBAG/BC,EAAc;cAClBC,EAAU,gBAAgBA,EAAiB;UAC/CD,EAAkB;qBACPE,EAAc;EAGtBC,EAAeV,EAAOC,GAAG;;;;;MAKhCC,EAAcC,SAASC;;;;EAMhBO,EAAiBX,EAAOC,GAAG;;;kBAGtBK,EAAW;WAClBA,EAAW;;MAEhBJ,EAAcC,SAASC;;sBAEPE,EAAW;;EAOpBM,EAAoBZ,EAAOC,GAAG;;;oBAGvBK,EAAW;;MAEzBJ,EAAcC,SAASC;;;;EAMhBS,EAAoBb,EAAOC,GAAG;;WAEhCK,EAAW;;MAEhBJ,EAAcC,SAASW;;;;MAIvBZ,EAAcC,SAASC;;;;EAMhBW,EAAiBf,EAAOC,GAAG;;;;;MAKlCC,EAAcC,SAASC;;;EAKhBY,EAAehB,EAAOiB,EAAc;;eAElCX,EAAW;aACbC,EAAgB;;;;;;;;iBAQZA,EAAU;;EAIdW,EAAelB,EAAOmB,EAAWC,OAAO;;;;EAMxCC,EAAerB,EAAOsB,EAAS;;;;;;;MAOtCpB,EAAcC,SAASC;;;EAKhBmB,EAAYvB,EAAOwB,EAAW;;;;;;;EAS9BC,EAAmBzB,EAAO0B,EAAO;;;EAQjCC,EAAgB3B,EAAO4B,EAAOC,MAAM;;;MAG3C3B,EAAcC,SAAS2B;;;;MAIvB5B,EAAcC,SAASC;;;"}
+{"version":3,"file":"timepicker-dropdown.styles.js","sources":["../../../src/shared/timepicker-dropdown/timepicker-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN WRAPPER\n// -----------------------------------------------------------------------------\nexport const root = css`\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        max-width: 100%;\n    }\n`;\n\nexport const container = css`\n    position: relative;\n    width: 100%;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]}\n        ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    display: flex;\n    flex-direction: column;\n    background: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const inputSection = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        flex-direction: column;\n        width: 100%;\n    }\n`;\n\nexport const controlSection = css`\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: flex-start;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n\n    ${MediaQuery.MaxWidth.xxs} {\n        flex-direction: column;\n        margin-top: ${Spacing[\"spacing-32\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// INPUT COMPONENTS\n// -----------------------------------------------------------------------------\nexport const hourMinuteSection = css`\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.xxs} {\n        margin-right: 0;\n        width: 100%;\n    }\n`;\n\nexport const timePeriodSection = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-8\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        flex-direction: row;\n        width: 100%;\n    }\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 6rem;\n    }\n`;\n\nexport const switchButton = css`\n    width: 5rem;\n    padding: ${Spacing[\"spacing-16\"]} 0;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const dividerLabel = css`\n    flex-shrink: 0;\n    width: 1.5rem;\n    text-align: center;\n`;\n\nexport const timeInputBox = css`\n    height: calc(3rem - 2px);\n    width: 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n\nexport const timeInput = css`\n    text-align: center;\n    width: 100%;\n\n    &:focus::placeholder {\n        color: transparent;\n    }\n`;\n\nexport const timePeriodToggle = css`\n    min-width: 5rem;\n    flex: 1;\n`;\n\n// -----------------------------------------------------------------------------\n// CONTROL COMPONENTS\n// -----------------------------------------------------------------------------\nexport const controlButton = css`\n    width: 7rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n"],"names":["root","container","inputSection","controlSection","hourMinuteSection","timePeriodSection","inputContainer","switchButton","dividerLabel","timeInputBox","timeInput","timePeriodToggle","controlButton"],"mappings":"2FAWO,MAAMA,EAAI,UAQJC,EAAS,WAYTC,EAAY,WAWZC,EAAc,WAgBdC,EAAiB,WAWjBC,EAAiB,UAcjBC,EAAc,UAUdC,EAAY,UAeZC,EAAY,UAMZC,EAAY,WAYZC,EAAS,UASTC,EAAgB,WAQhBC,EAAa"}

package/shared/timepicker-dropdown/timepicker-dropdown.styles_119l6k6.css

@@ -0,0 +1,13 @@
+.ru5iz77{overflow:hidden;}:where(body.fds-breakpoint-xxs-max) .ru5iz77{max-width:100%;}
+.c1o8b9oi{position:relative;width:100%;padding:var(--fds-spacing-8) var(--fds-spacing-20) var(--fds-spacing-24) var(--fds-spacing-20);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}
+.i11svvg0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-xxs-max) .i11svvg0{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}
+.c1ljojaz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-top:var(--fds-spacing-16);gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-xxs-max) .c1ljojaz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--fds-spacing-32);}
+.h1lh2mc9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-32);}:where(body.fds-breakpoint-xxs-max) .h1lh2mc9{margin-right:0;width:100%;}
+.t28scph{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-lg-max) .t28scph{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-xxs-max) .t28scph{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;}
+.iew5x9r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-xxs-max) .iew5x9r{width:6rem;}
+.sn5alad{width:5rem;padding:var(--fds-spacing-16) 0;color:var(--fds-colour-icon);}.sn5alad svg{height:1rem;width:1rem;}.sn5alad:hover{color:var(--fds-colour-icon-hover);}
+.d8auh4f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;text-align:center;}
+.t1b5fiv0{height:calc(3rem - 2px);width:5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-xxs-max) .t1b5fiv0{width:100%;}
+.tr1n08z{text-align:center;width:100%;}.tr1n08z:focus::-webkit-input-placeholder{color:transparent;}.tr1n08z:focus::-moz-placeholder{color:transparent;}.tr1n08z:focus:-ms-input-placeholder{color:transparent;}.tr1n08z:focus::placeholder{color:transparent;}
+.t1xgwy38{min-width:5rem;-webkit-flex:1;-ms-flex:1;flex:1;}
+.covfne3{width:7rem;}:where(body.fds-breakpoint-sm-max) .covfne3{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-xxs-max) .covfne3{width:100%;}

package/sidenav/sidenav-drawer-item.d.ts

@@ -1,2 +1,2 @@
 import type { SidenavDrawerItemProps } from "./types";
-export declare const SidenavDrawerItem: ({ id, title, onClick, children, ...otherProps }: SidenavDrawerItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidenavDrawerItem: ({ id, title, onClick, children, className, ...otherProps }: SidenavDrawerItemProps) => import("react/jsx-runtime").JSX.Element;

package/sidenav/sidenav-drawer-item.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";import{useState as o,useContext as n}from"react";import{useResizeDetector as d}from"../external/react-resize-detector/build/index.esm.js";import{SidenavContext as s}from"./sidenav-context.js";import{Container as c,LinkButton as l,TextElement as m,ChevronIcon as a,DrawerSubitemContainer as h,DrawerContent as p}from"./sidenav-drawer-item.styles.js";const u=u=>{var{id:f,title:v,onClick:b,children:g}=u,j=e(u,["id","title","onClick","children"]);const[x,y]=o(!0),[I,C]=o(!1),{currentItem:$,setSelectedItem:k,setPreviouslySelectedItemId:w,setCurrentItem:M}=n(s),[O]=o(!0),S=`${O}-submenu`,_=r({from:{opacity:0},to:{opacity:1}}),z=d(),E=z.ref,L=r({height:g&&x?z.height:0}),P=g?{"aria-controls":S,"aria-expanded":x}:{};return t(c,Object.assign({onMouseEnter:()=>{C(!0)},onMouseLeave:()=>{C(!1)}},j,{style:_,children:[t(l,Object.assign({type:"button",onClick:()=>{g?y(!x):(k({itemId:null==$?void 0:$.itemId,content:void 0}),M(void 0),w(void 0),b&&b(f))},$highlight:I&&x,$noChildren:!g},P,{children:[i(m,{children:v}),g&&i(a,{"aria-hidden":!0,$expanded:x})]})),i(h,{style:L,children:i(p,{id:S,ref:E,children:g})})]}))};export{u as SidenavDrawerItem};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{ChevronUpIcon as i}from"@lifesg/react-icons/chevron-up";import{useSpring as s,animated as a}from"@react-spring/web";import o from"clsx";import{useState as c,useContext as m}from"react";import{useResizeDetector as n}from"../external/react-resize-detector/build/index.esm.js";import{BasicButton as l}from"../shared/input-wrapper/input-wrapper.js";import{SidenavContext as d}from"./sidenav-context.js";import{linkButton as p,linkButtonNoChildren as u,textElement as f,chevronIcon as h,chevronIconExpanded as v,drawerSubitemContainer as b}from"./sidenav-drawer-item.styles.js";const j=j=>{var{id:x,title:y,onClick:I,children:N,className:g}=j,w=e(j,["id","title","onClick","children","className"]);const[C,k]=c(!0),{currentItem:O,setSelectedItem:S,setPreviouslySelectedItemId:_,setCurrentItem:z}=m(d),[P]=c(!0),$=`${P}-submenu`,q=s({from:{opacity:0},to:{opacity:1}}),A=n(),B=A.ref,D=s({height:N&&C?A.height:0}),E=N?{"aria-controls":$,"aria-expanded":C}:{};return t(a.li,Object.assign({},w,{className:g,style:q,children:[t(l,Object.assign({type:"button",onClick:()=>{N?k(!C):(S({itemId:null==O?void 0:O.itemId,content:void 0}),z(void 0),_(void 0),I&&I(x))},className:o(p,!N&&u)},E,{children:[r("span",{className:f,children:y}),N&&r(i,{"aria-hidden":!0,className:o(h,C&&v)})]})),r(a.div,{"data-testid":"drawer-subitem-container",className:b,style:D,children:r("ul",{id:$,ref:B,children:N})})]}))};export{j as SidenavDrawerItem};
 //# sourceMappingURL=sidenav-drawer-item.js.map

package/sidenav/sidenav-drawer-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.js","sources":["../../src/sidenav/sidenav-drawer-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { SidenavContext } from \"./sidenav-context\";\nimport {\n    ChevronIcon,\n    Container,\n    DrawerContent,\n    DrawerSubitemContainer,\n    LinkButton,\n    TextElement,\n} from \"./sidenav-drawer-item.styles\";\nimport type { SidenavDrawerItemProps } from \"./types\";\n\nexport const SidenavDrawerItem = ({\n    id,\n    title,\n    onClick,\n    children,\n    ...otherProps\n}: SidenavDrawerItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [expanded, setExpanded] = useState<boolean>(true);\n    const [highlight, setHighlight] = useState<boolean>(false);\n    const {\n        currentItem,\n        setSelectedItem,\n        setPreviouslySelectedItemId,\n        setCurrentItem,\n    } = useContext(SidenavContext);\n\n    const [internalId] = useState<boolean>(true);\n    const subitemId = `${internalId}-submenu`;\n\n    const containerAnimationProps = useSpring({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n    });\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const contentAnimationProps = useSpring({\n        height: children && expanded ? resizeDetector.height : 0,\n    });\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleMouseEnter = () => {\n        setHighlight(true);\n    };\n\n    const handleMouseLeave = () => {\n        setHighlight(false);\n    };\n\n    const handleOnClick = () => {\n        if (children) {\n            setExpanded(!expanded);\n            return;\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n        if (onClick) {\n            onClick(id);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": subitemId,\n              \"aria-expanded\": expanded,\n          }\n        : {};\n\n    return (\n        <Container\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            {...otherProps}\n            style={containerAnimationProps}\n        >\n            <LinkButton\n                type=\"button\"\n                onClick={handleOnClick}\n                $highlight={highlight && expanded}\n                $noChildren={!children}\n                {...ariaControlProps}\n            >\n                <TextElement>{title}</TextElement>\n                {children && <ChevronIcon aria-hidden $expanded={expanded} />}\n            </LinkButton>\n            <DrawerSubitemContainer style={contentAnimationProps}>\n                <DrawerContent id={subitemId} ref={childRef}>\n                    {children}\n                </DrawerContent>\n            </DrawerSubitemContainer>\n        </Container>\n    );\n};\n"],"names":["SidenavDrawerItem","_a","id","title","onClick","children","otherProps","__rest","expanded","setExpanded","useState","highlight","setHighlight","currentItem","setSelectedItem","setPreviouslySelectedItemId","setCurrentItem","useContext","SidenavContext","internalId","subitemId","containerAnimationProps","useSpring","from","opacity","to","resizeDetector","useResizeDetector","childRef","ref","contentAnimationProps","height","ariaControlProps","_jsxs","Container","Object","assign","onMouseEnter","onMouseLeave","style","LinkButton","type","itemId","content","undefined","$highlight","$noChildren","_jsx","TextElement","ChevronIcon","$expanded","DrawerSubitemContainer","DrawerContent"],"mappings":"4eAgBO,MAAMA,EAAqBC,IAAA,IAAAC,GAC9BA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,SACPA,GAAQJ,EACLK,EAAUC,EAAAN,EALiB,CAAA,KAAA,QAAA,UAAA,aAU9B,MAAOO,EAAUC,GAAeC,GAAkB,IAC3CC,EAAWC,GAAgBF,GAAkB,IAC9CG,YACFA,EAAWC,gBACXA,EAAeC,4BACfA,EAA2BC,eAC3BA,GACAC,EAAWC,IAERC,GAAcT,GAAkB,GACjCU,EAAY,GAAGD,YAEfE,EAA0BC,EAAU,CACtCC,KAAM,CAAEC,QAAS,GACjBC,GAAI,CAAED,QAAS,KAEbE,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAwBR,EAAU,CACpCS,OAAQ1B,GAAYG,EAAWkB,EAAeK,OAAS,IA8BrDC,EAAsD3B,EACtD,CACI,gBAAiBe,EACjB,gBAAiBZ,GAErB,CAAA,EAEN,OACIyB,EAACC,EAASC,OAAAC,OAAA,CACNC,aAjCiB,KACrBzB,GAAa,EAAK,EAiCd0B,aA9BiB,KACrB1B,GAAa,EAAM,GA8BXN,EAAU,CACdiC,MAAOlB,EAAuBhB,SAAA,CAE9B4B,EAACO,iBACGC,KAAK,SACLrC,QAhCU,KACdC,EACAI,GAAaD,IAGjBM,EAAgB,CAAE4B,OAAQ7B,aAAW,EAAXA,EAAa6B,OAAQC,aAASC,IACxD5B,OAAe4B,GACf7B,OAA4B6B,GACxBxC,GACAA,EAAQF,GACZ,EAsB8B2C,WACVlC,GAAaH,EAAQsC,aACnBzC,GACV2B,EAAgB,CAAA3B,SAAA,CAEpB0C,EAACC,YAAa7C,IACbE,GAAY0C,EAACE,EAAW,CAAA,eAAA,EAAAC,UAAwB1C,QAErDuC,EAACI,GAAuBZ,MAAOT,EAAqBzB,SAChD0C,EAACK,EAAa,CAAClD,GAAIkB,EAAWS,IAAKD,WAC9BvB,SAGD"}
+{"version":3,"file":"sidenav-drawer-item.js","sources":["../../src/sidenav/sidenav-drawer-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-drawer-item.styles\";\nimport type { SidenavDrawerItemProps } from \"./types\";\n\nexport const SidenavDrawerItem = ({\n    id,\n    title,\n    onClick,\n    children,\n    className,\n    ...otherProps\n}: SidenavDrawerItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [expanded, setExpanded] = useState<boolean>(true);\n    const {\n        currentItem,\n        setSelectedItem,\n        setPreviouslySelectedItemId,\n        setCurrentItem,\n    } = useContext(SidenavContext);\n\n    const [internalId] = useState<boolean>(true);\n    const subitemId = `${internalId}-submenu`;\n\n    const containerAnimationProps = useSpring({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n    });\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const contentAnimationProps = useSpring({\n        height: children && expanded ? resizeDetector.height : 0,\n    });\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (children) {\n            setExpanded(!expanded);\n            return;\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n        if (onClick) {\n            onClick(id);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": subitemId,\n              \"aria-expanded\": expanded,\n          }\n        : {};\n\n    return (\n        <animated.li\n            {...otherProps}\n            className={className}\n            style={containerAnimationProps}\n        >\n            <BasicButton\n                type=\"button\"\n                onClick={handleOnClick}\n                className={clsx(\n                    styles.linkButton,\n                    !children && styles.linkButtonNoChildren\n                )}\n                {...ariaControlProps}\n            >\n                <span className={styles.textElement}>{title}</span>\n                {children && (\n                    <ChevronUpIcon\n                        aria-hidden\n                        className={clsx(\n                            styles.chevronIcon,\n                            expanded && styles.chevronIconExpanded\n                        )}\n                    />\n                )}\n            </BasicButton>\n            <animated.div\n                data-testid=\"drawer-subitem-container\"\n                className={styles.drawerSubitemContainer}\n                style={contentAnimationProps}\n            >\n                <ul id={subitemId} ref={childRef}>\n                    {children}\n                </ul>\n            </animated.div>\n        </animated.li>\n    );\n};\n"],"names":["SidenavDrawerItem","_a","id","title","onClick","children","className","otherProps","__rest","expanded","setExpanded","useState","currentItem","setSelectedItem","setPreviouslySelectedItemId","setCurrentItem","useContext","SidenavContext","internalId","subitemId","containerAnimationProps","useSpring","from","opacity","to","resizeDetector","useResizeDetector","childRef","ref","contentAnimationProps","height","ariaControlProps","_jsxs","animated","li","style","BasicButton","Object","assign","type","itemId","content","undefined","clsx","styles.linkButton","styles.linkButtonNoChildren","_jsx","styles.textElement","ChevronUpIcon","styles.chevronIcon","styles.chevronIconExpanded","div","styles.drawerSubitemContainer"],"mappings":"qqBAYO,MAAMA,EAAqBC,IAAA,IAAAC,GAC9BA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,SACPA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAP,EANiB,iDAW9B,MAAOQ,EAAUC,GAAeC,GAAkB,IAC5CC,YACFA,EAAWC,gBACXA,EAAeC,4BACfA,EAA2BC,eAC3BA,GACAC,EAAWC,IAERC,GAAcP,GAAkB,GACjCQ,EAAY,GAAGD,YAEfE,EAA0BC,EAAU,CACtCC,KAAM,CAAEC,QAAS,GACjBC,GAAI,CAAED,QAAS,KAEbE,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAwBR,EAAU,CACpCS,OAAQzB,GAAYI,EAAWgB,EAAeK,OAAS,IAsBrDC,EAAsD1B,EACtD,CACI,gBAAiBc,EACjB,gBAAiBV,GAErB,CAAA,EAEN,OACIuB,EAACC,EAASC,oBACF3B,EAAU,CACdD,UAAWA,EACX6B,MAAOf,EAAuBf,SAAA,CAE9B2B,EAACI,EAAWC,OAAAC,OAAA,CACRC,KAAK,SACLnC,QA/BU,KACdC,EACAK,GAAaD,IAGjBI,EAAgB,CAAE2B,OAAQ5B,aAAW,EAAXA,EAAa4B,OAAQC,aAASC,IACxD3B,OAAe2B,GACf5B,OAA4B4B,GACxBtC,GACAA,EAAQF,GACZ,EAsBQI,UAAWqC,EACPC,GACCvC,GAAYwC,IAEbd,EAAgB,CAAA1B,SAAA,CAEpByC,EAAA,OAAA,CAAMxC,UAAWyC,EAAkB1C,SAAGF,IACrCE,GACGyC,EAACE,EAAa,CAAA,eAAA,EAEV1C,UAAWqC,EACPM,EACAxC,GAAYyC,SAK5BJ,EAACb,EAASkB,mBACM,2BACZ7C,UAAW8C,EACXjB,MAAON,EAAqBxB,SAE5ByC,EAAA,KAAA,CAAI5C,GAAIiB,EAAWS,IAAKD,EAAQtB,SAC3BA,SAGC"}

package/sidenav/sidenav-drawer-item.styles.d.ts

@@ -1,21 +1,6 @@
-interface LinkButtonStyleProp {
-    $highlight?: boolean | undefined;
-    $noChildren?: boolean | undefined;
-}
-interface IconStyleProp {
-    $expanded?: boolean | undefined;
-}
-export declare const Container: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string>;
-export declare const LinkButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, LinkButtonStyleProp>> & string;
-export declare const DrawerSubitemContainer: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string>;
-export declare const ChevronIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, IconStyleProp>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const TextElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const DrawerContent: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string>;
-export {};
+export declare const linkButton: import("@linaria/core").LinariaClassName;
+export declare const linkButtonNoChildren: import("@linaria/core").LinariaClassName;
+export declare const drawerSubitemContainer: import("@linaria/core").LinariaClassName;
+export declare const chevronIcon: import("@linaria/core").LinariaClassName;
+export declare const chevronIconExpanded: import("@linaria/core").LinariaClassName;
+export declare const textElement: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav-drawer-item.styles.js

@@ -1,39 +1,2 @@
-import{ChevronUpIcon as r}from"@lifesg/react-icons/chevron-up";import{animated as e}from"@react-spring/web";import o,{css as t}from"styled-components";import{BasicButton as n}from"../shared/input-wrapper/input-wrapper.js";import{lineClampCss as i}from"../shared/styles/index.js";import{V3_Radius as s,V3_Font as m,V3_Colour as d,V3_Motion as a}from"../v3_theme/index.js";const p=e(o.li``),l=o(n)`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border-radius: ${s.md};
-
-    ${m["body-md-semibold"]}
-    color: ${d.text};
-
-    ${r=>r.$noChildren?t`
-                  &:hover,
-                  &:focus {
-                      background: ${d["bg-hover"]};
-                      color: ${d["text-hover"]};
-                  }
-              `:t`
-                  &:hover,
-                  &:focus {
-                      background: ${d["bg-hover-strong"]};
-                  }
-              `}
-`,c=e(o.div`
-    margin: 0.125rem 0 0.125rem 0.5rem;
-    overflow: hidden;
-`),f=o(r)`
-    flex-shrink: 0;
-    color: ${d.icon};
-    transform: rotate(${r=>r.$expanded?0:180}deg);
-    transition: transform ${a["duration-150"]}
-        ${a["ease-default"]};
-`,$=o.span`
-    ${i(2)}
-    text-align: left;
-`,g=e(o.ul``);export{f as ChevronIcon,p as Container,g as DrawerContent,c as DrawerSubitemContainer,l as LinkButton,$ as TextElement};
+import"./sidenav-drawer-item.styles_yp8cga.css";const e="l1011b8q",t="lmu4z67",c="dlg5ewg",s="c1ey6q8x",d="cpftd7o",a="ttch7cq";export{s as chevronIcon,d as chevronIconExpanded,c as drawerSubitemContainer,e as linkButton,t as linkButtonNoChildren,a as textElement};
 //# sourceMappingURL=sidenav-drawer-item.styles.js.map

package/sidenav/sidenav-drawer-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../src/sidenav/sidenav-drawer-item.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font, V3_Motion, V3_Radius } from \"../v3_theme\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface LinkButtonStyleProp {\n    $highlight?: boolean | undefined;\n    $noChildren?: boolean | undefined;\n}\n\ninterface IconStyleProp {\n    $expanded?: boolean | undefined;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = animated(styled.li``);\n\nexport const LinkButton = styled(BasicButton)<LinkButtonStyleProp>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour.text};\n\n    ${(props) =>\n        props.$noChildren\n            ? css`\n                  &:hover,\n                  &:focus {\n                      background: ${V3_Colour[\"bg-hover\"]};\n                      color: ${V3_Colour[\"text-hover\"]};\n                  }\n              `\n            : css`\n                  &:hover,\n                  &:focus {\n                      background: ${V3_Colour[\"bg-hover-strong\"]};\n                  }\n              `}\n`;\n\nexport const DrawerSubitemContainer = animated(styled.div`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`);\n\nexport const ChevronIcon = styled(ChevronUpIcon)<IconStyleProp>`\n    flex-shrink: 0;\n    color: ${V3_Colour.icon};\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform ${V3_Motion[\"duration-150\"]}\n        ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const TextElement = styled.span`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n\nexport const DrawerContent = animated(styled.ul``);\n"],"names":["Container","animated","styled","li","LinkButton","BasicButton","V3_Radius","V3_Font","V3_Colour","text","props","$noChildren","css","DrawerSubitemContainer","div","ChevronIcon","ChevronUpIcon","icon","$expanded","V3_Motion","TextElement","span","lineClampCss","DrawerContent","ul"],"mappings":"mXAuBO,MAAMA,EAAYC,EAASC,EAAOC,EAAE,IAE9BC,EAAaF,EAAOG,EAAiC;;;;;;;;qBAQ7CC,EAAc;;MAE7BC,EAAQ;aACDC,EAAUC;;MAEhBC,GACCA,EAAMC,YACAC,CAAG;;;oCAGmBJ,EAAU;+BACfA,EAAU;;gBAG3BI,CAAG;;;oCAGmBJ,EAAU;;;EAKjCK,EAAyBZ,EAASC,EAAOY,GAAG;;;GAK5CC,EAAcb,EAAOc,EAA6B;;aAElDR,EAAUS;wBACEP,GAAWA,EAAMQ,UAAY,EAAI;4BAC9BC,EAAU;UAC5BA,EAAU;EAGPC,EAAclB,EAAOmB,IAAI;MAChCC,EAAa;;EAINC,EAAgBtB,EAASC,EAAOsB,EAAE"}
+{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const linkButtonNoChildren = css`\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const drawerSubitemContainer = css`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n    flex-shrink: 0;\n    color: ${Colour[\"icon\"]};\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n"],"names":["linkButton","linkButtonNoChildren","drawerSubitemContainer","chevronIcon","chevronIconExpanded","textElement"],"mappings":"uEAQO,MAAMA,EAAU,WAmBVC,EAAoB,UAQpBC,EAAsB,UAKtBC,EAAW,WAOXC,EAAmB,UAInBC,EAAW"}

package/sidenav/sidenav-drawer-item.styles_yp8cga.css

@@ -0,0 +1,6 @@
+.l1011b8q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:1rem;width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.l1011b8q:hover,.l1011b8q:focus{background:var(--fds-colour-bg-hover-strong);}
+.lmu4z67:hover,.lmu4z67:focus{background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}
+.dlg5ewg{margin:0.125rem 0 0.125rem 0.5rem;overflow:hidden;}
+.c1ey6q8x{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.cpftd7o{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.ttch7cq{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}

package/sidenav/sidenav-drawer-subitem.d.ts

@@ -1,2 +1,2 @@
 import type { SidenavDrawerSubitemProps } from "./types";
-export declare const SidenavDrawerSubitem: ({ id, title, onClick, ...otherProps }: SidenavDrawerSubitemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidenavDrawerSubitem: ({ id, title, onClick, className, ...otherProps }: SidenavDrawerSubitemProps) => import("react/jsx-runtime").JSX.Element;

package/sidenav/sidenav-drawer-subitem.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useContext as i}from"react";import{SidenavContext as r}from"./sidenav-context.js";import{Container as o,LinkButton as n}from"./sidenav-drawer-subitem.styles.js";const m=m=>{var{id:s,title:d,onClick:c}=m,l=t(m,["id","title","onClick"]);const{currentItem:u,setSelectedItem:v,setCurrentItem:a,setPreviouslySelectedItemId:p}=i(r);return e(o,Object.assign({},l,{children:e(n,{type:"button",onClick:()=>{c&&c(s),v({itemId:null==u?void 0:u.itemId,content:void 0}),a(void 0),p(void 0)},children:d})}))};export{m as SidenavDrawerSubitem};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{useContext as i}from"react";import{BasicButton as s}from"../shared/input-wrapper/input-wrapper.js";import{SidenavContext as o}from"./sidenav-context.js";import{linkButton as m}from"./sidenav-drawer-subitem.styles.js";const l=l=>{var{id:n,title:c,onClick:a,className:d}=l,p=t(l,["id","title","onClick","className"]);const{currentItem:u,setSelectedItem:v,setCurrentItem:f,setPreviouslySelectedItemId:I}=i(o);return e("li",Object.assign({},p,{className:r(d),children:e(s,{type:"button",onClick:()=>{a&&a(n),v({itemId:null==u?void 0:u.itemId,content:void 0}),f(void 0),I(void 0)},className:m,children:c})}))};export{l as SidenavDrawerSubitem};
 //# sourceMappingURL=sidenav-drawer-subitem.js.map

package/sidenav/sidenav-drawer-subitem.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.js","sources":["../../src/sidenav/sidenav-drawer-subitem.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { SidenavContext } from \"./sidenav-context\";\nimport { Container, LinkButton } from \"./sidenav-drawer-subitem.styles\";\nimport type { SidenavDrawerSubitemProps } from \"./types\";\n\nexport const SidenavDrawerSubitem = ({\n    id,\n    title,\n    onClick,\n    ...otherProps\n}: SidenavDrawerSubitemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        currentItem,\n        setSelectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n    } = useContext(SidenavContext);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (onClick) {\n            onClick(id);\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Container {...otherProps}>\n            <LinkButton type=\"button\" onClick={handleOnClick}>\n                {title}\n            </LinkButton>\n        </Container>\n    );\n};\n"],"names":["SidenavDrawerSubitem","_a","id","title","onClick","otherProps","__rest","currentItem","setSelectedItem","setCurrentItem","setPreviouslySelectedItemId","useContext","SidenavContext","_jsx","Container","Object","assign","children","LinkButton","type","itemId","content","undefined"],"mappings":"+PAMO,MAAMA,EAAwBC,QAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,KACGC,EAAUC,EAAAL,EAJoB,CAAA,KAAA,QAAA,YASjC,MAAMM,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAWC,GAiBf,OACIC,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SACrBJ,EAACK,EAAU,CAACC,KAAK,SAASf,QAdZ,KACdA,GACAA,EAAQF,GAEZM,EAAgB,CAAEY,OAAQb,aAAW,EAAXA,EAAaa,OAAQC,aAASC,IACxDb,OAAea,GACfZ,OAA4BY,EAAU,WAS7BnB,MAEG"}
+{"version":3,"file":"sidenav-drawer-subitem.js","sources":["../../src/sidenav/sidenav-drawer-subitem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-drawer-subitem.styles\";\nimport type { SidenavDrawerSubitemProps } from \"./types\";\n\nexport const SidenavDrawerSubitem = ({\n    id,\n    title,\n    onClick,\n    className,\n    ...otherProps\n}: SidenavDrawerSubitemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        currentItem,\n        setSelectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n    } = useContext(SidenavContext);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (onClick) {\n            onClick(id);\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <li {...otherProps} className={clsx(className)}>\n            <BasicButton\n                type=\"button\"\n                onClick={handleOnClick}\n                className={styles.linkButton}\n            >\n                {title}\n            </BasicButton>\n        </li>\n    );\n};\n"],"names":["SidenavDrawerSubitem","_a","id","title","onClick","className","otherProps","__rest","currentItem","setSelectedItem","setCurrentItem","setPreviouslySelectedItemId","useContext","SidenavContext","_jsx","Object","assign","clsx","children","BasicButton","type","itemId","content","undefined","styles.linkButton"],"mappings":"2UAQO,MAAMA,EAAwBC,IAAA,IAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,UACPA,GAASJ,EACNK,EAAUC,EAAAN,EALoB,CAAA,KAAA,QAAA,UAAA,cAUjC,MAAMO,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAWC,GAiBf,OACIC,EAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQV,EAAU,CAAED,UAAWY,EAAKZ,GAAUa,SAC1CJ,EAACK,GACGC,KAAK,SACLhB,QAhBU,KACdA,GACAA,EAAQF,GAEZO,EAAgB,CAAEY,OAAQb,aAAW,EAAXA,EAAaa,OAAQC,aAASC,IACxDb,OAAea,GACfZ,OAA4BY,EAAU,EAW9BlB,UAAWmB,EAAiBN,SAE3Bf,MAEJ"}

package/sidenav/sidenav-drawer-subitem.styles.d.ts

@@ -1,4 +1 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const LinkButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string;
+export declare const linkButton: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav-drawer-subitem.styles.js

@@ -1,17 +1,2 @@
-import r from"styled-components";import{BasicButton as o}from"../shared/input-wrapper/input-wrapper.js";import{lineClampCss as e}from"../shared/styles/index.js";import{V3_Radius as t,V3_Font as d,V3_Colour as m}from"../v3_theme/index.js";const i=r.li``,p=r(o)`
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border-radius: ${t.md};
-
-    ${d["body-md-regular"]}
-    color: ${m.text};
-    ${e(2)}
-    text-align: left;
-
-    &:hover,
-    &:focus {
-        background-color: ${m["bg-hover"]};
-        color: ${m["text-hover"]};
-    }
-`;export{i as Container,p as LinkButton};
+import"./sidenav-drawer-subitem.styles_1ylzfn5.css";const s="l1ge7as9";export{s as linkButton};
 //# sourceMappingURL=sidenav-drawer-subitem.styles.js.map

package/sidenav/sidenav-drawer-subitem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font, V3_Radius } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.li``;\n\nexport const LinkButton = styled(BasicButton)`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","li","LinkButton","BasicButton","V3_Radius","V3_Font","V3_Colour","lineClampCss"],"mappings":"oPASaA,EAAYC,EAAOC,EAAE,GAErBC,EAAaF,EAAOG,EAAY;;;qBAGxBC,EAAc;;MAE7BC,EAAQ;aACDC,EAAgB;MACvBC,EAAa;;;;;4BAKSD,EAAU;iBACrBA,EAAU;;"}
+{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["linkButton"],"mappings":"2EAQO,MAAMA,EAAU"}

package/sidenav/sidenav-drawer-subitem.styles_1ylzfn5.css

@@ -0,0 +1 @@
+.l1ge7as9{width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}.l1ge7as9:hover,.l1ge7as9:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}

package/sidenav/sidenav-group.d.ts

@@ -1,2 +1,2 @@
 import type { SidenavGroupProps } from "./types";
-export declare const SidenavGroup: ({ separator, children, ...otherProps }: SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidenavGroup: ({ separator, children, className, ...otherProps }: SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;

package/sidenav/sidenav-group.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Container as i,Divider as s}from"./sidenav-group.styles.js";const a=a=>{var{separator:o,children:d}=a,n=r(a,["separator","children"]);return t(i,Object.assign({},n,{children:[d,o&&e(s,{"data-testid":"divider"})]}))};export{a as SidenavGroup};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as s,jsx as a}from"react/jsx-runtime";import e from"clsx";import{divider as t,container as i}from"./sidenav-group.styles.js";const l=l=>{var{separator:m,children:o,className:c}=l,d=r(l,["separator","children","className"]);return s("ul",Object.assign({},d,{className:e(i,c),children:[o,m&&a("li",{"data-testid":"divider",className:t})]}))};export{l as SidenavGroup};
 //# sourceMappingURL=sidenav-group.js.map

package/sidenav/sidenav-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.js","sources":["../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import { Container, Divider } from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Container {...otherProps}>\n            {children}\n            {separator && <Divider data-testid=\"divider\" />}\n        </Container>\n    );\n};\n"],"names":["SidenavGroup","_a","separator","children","otherProps","__rest","_jsxs","Container","Object","assign","_jsx","Divider"],"mappings":"oKAGO,MAAMA,EAAgBC,QAAAC,UACzBA,EAASC,SACTA,GAAQF,EACLG,EAAUC,EAAAJ,EAHY,0BAQzB,OACIK,EAACC,EAASC,OAAAC,OAAA,GAAKL,aACVD,EACAD,GAAaQ,EAACC,EAAO,CAAA,cAAa,eAC3B"}
+{"version":3,"file":"sidenav-group.js","sources":["../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    className,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <ul {...otherProps} className={clsx(styles.container, className)}>\n            {children}\n            {separator && (\n                <li data-testid=\"divider\" className={styles.divider} />\n            )}\n        </ul>\n    );\n};\n"],"names":["SidenavGroup","_a","separator","children","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.container","_jsx","styles.divider"],"mappings":"wLAKO,MAAMA,EAAgBC,QAAAC,UACzBA,EAASC,SACTA,EAAQC,UACRA,KACGC,EAAUC,EAAAL,EAJY,CAAA,YAAA,WAAA,cASzB,OACIM,EAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUD,SAAA,CAC3DA,EACAD,GACGU,EAAA,KAAA,CAAA,cAAgB,UAAUR,UAAWS,OAExC"}

package/sidenav/sidenav-group.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const divider: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav-group.styles.js

@@ -1,13 +1,2 @@
-import e from"styled-components";import{V3_Colour as o}from"../v3_theme/index.js";const t=e.ul`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    list-style: none;
-`,i=e.li`
-    margin-top: 1rem;
-    width: 6.5rem;
-    height: 1px;
-    background-color: ${o.border};
-`;export{t as Container,i as Divider};
+import"./sidenav-group.styles_1x604sw.css";const s="c4k7n35",c="d14gvick";export{s as container,c as divider};
 //# sourceMappingURL=sidenav-group.styles.js.map

package/sidenav/sidenav-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.styles.js","sources":["../../src/sidenav/sidenav-group.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.ul`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const Divider = styled.li`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${V3_Colour.border};\n`;\n"],"names":["Container","styled","ul","Divider","li","V3_Colour","border"],"mappings":"kFAOO,MAAMA,EAAYC,EAAOC,EAAE;;;;;;EAQrBC,EAAUF,EAAOG,EAAE;;;;wBAIRC,EAAUC;"}
+{"version":3,"file":"sidenav-group.styles.js","sources":["../../src/sidenav/sidenav-group.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const divider = css`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${Colour[\"border\"]};\n`;\n"],"names":["container","divider"],"mappings":"kEAOO,MAAMA,EAAS,UAQTC,EAAO"}

package/sidenav/sidenav-group.styles_1x604sw.css

@@ -0,0 +1,2 @@
+.c4k7n35{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;list-style:none;}
+.d14gvick{margin-top:1rem;width:6.5rem;height:1px;background-color:var(--fds-colour-border);}

package/sidenav/sidenav-item.d.ts

@@ -1,2 +1,2 @@
 import type { SidenavItemProps } from "./types";
-export declare const SidenavItem: ({ children, icon, title, onClick, selected, ...otherProps }: SidenavItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidenavItem: ({ children, icon, title, onClick, selected, className, ...otherProps }: SidenavItemProps) => import("react/jsx-runtime").JSX.Element;

package/sidenav/sidenav-item.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useFloating as i,size as n,useClick as o,useHover as l,safePolygon as s,useFocus as c,useDismiss as d,useInteractions as a,useTransitionStyles as m,FloatingPortal as h,FloatingFocusManager as f}from"@floating-ui/react";import{useContext as p,useState as u,useEffect as g}from"react";import{useResizeDetector as I}from"../external/react-resize-detector/build/index.esm.js";import{useInheritedThemeScope as v}from"../theme/theme-provider/hooks.js";import{SidenavContext as y}from"./sidenav-context.js";import{Container as j,DefaultButton as x,IconContainer as b,TitleText as w,DesktopDrawer as R}from"./sidenav-item.styles.js";const C=C=>{var{children:O,icon:P,title:S,onClick:k,selected:$}=C,M=e(C,["children","icon","title","onClick","selected"]);const{internalId:z,menuRef:F,currentItem:L,previouslySelectedItemId:_,selectedItem:A,setCurrentItem:B,setPreviouslySelectedItemId:D,setSelectedItem:q}=p(y),E=M.id||S.toLowerCase().replaceAll(" ","-"),G=`${z}-drawer`,H=!!A&&A.itemId===E,J=!!L&&L.itemId===E,[K,N]=u(!1),[Q,T]=u(null),[U,V]=u(null),{floatingStyles:W,refs:X,context:Y}=i({open:K,onOpenChange:(e,t,r)=>{e?(F.current&&X.setPositionReference(F.current),O&&N(!0),"click"===r?de():"focus"!==r&&"hover"!==r||ae()):(N(!1),me())},placement:"right",middleware:[n({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,r=`${Math.max(0,t)}px`;e.floating.style.height=r}})],elements:{reference:Q,floating:U}}),Z=o(Y,{toggle:!1,stickIfOpen:!1}),ee=l(Y,{handleClose:s()}),te=c(Y,{visibleOnly:!1}),re=d(Y,{enabled:!!O}),{getReferenceProps:ie,getFloatingProps:ne}=a([Z,te,ee,re]),{isMounted:oe,styles:le}=m(Y),{themeProps:se,themeStyle:ce}=v(oe);g((()=>{$&&q({itemId:E,content:void 0})}),[E,$,q]),I({onResize:()=>{X.setPositionReference(F.current)},targetRef:F,refreshMode:"throttle",refreshRate:300});const de=()=>{D((()=>{if(O&&A)return _||A.itemId})()),B({itemId:E,content:O}),q({itemId:E,content:O}),k&&!O&&k(E)},ae=()=>{B({itemId:E,content:O})},me=()=>{B((e=>{if((null==e?void 0:e.itemId)!==E)return e}))},he=O?{"aria-controls":G,"aria-haspopup":!0,"aria-expanded":J&&!!L.content||H&&!!A.content}:{};return t(j,{children:[t(x,Object.assign({type:"button",ref:T,"aria-current":H?"page":void 0},he,M,{$highlight:H||J},ie(),{onMouseLeave:()=>{K&&B(void 0)},children:[r(b,{"aria-hidden":!0,children:P}),r(w,{inline:!0,children:S})]})),oe&&r(h,{children:r(f,{context:Y,modal:!1,initialFocus:-1,children:r("div",Object.assign({id:G,"data-testid":"sidenav-drawer",ref:V},se,{style:Object.assign(Object.assign({},ce),W)},ne(),{children:r(R,{style:le,$showDrawer:K,$showShadow:J||H&&!L,children:O})}))})})]})};export{C as SidenavItem};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useFloating as i,size as n,useClick as o,useHover as s,safePolygon as l,useFocus as a,useDismiss as c,useInteractions as d,useTransitionStyles as m,FloatingPortal as p,FloatingFocusManager as f}from"@floating-ui/react";import h from"clsx";import{useContext as u,useState as g,useEffect as I}from"react";import{useResizeDetector as v}from"../external/react-resize-detector/build/index.esm.js";import{BasicButton as y}from"../shared/input-wrapper/input-wrapper.js";import{useInheritedThemeScope as j}from"../theme/theme-provider/hooks.js";import{Typography as x}from"../typography/index.js";import{SidenavContext as b}from"./sidenav-context.js";import{container as R,defaultButton as C,defaultButtonHighlight as N,iconContainer as O,titleText as w,desktopDrawer as P,desktopDrawerShowShadow as S}from"./sidenav-item.styles.js";const k=k=>{var{children:M,icon:z,title:B,onClick:F,selected:L,className:$}=k,_=e(k,["children","icon","title","onClick","selected","className"]);const{internalId:A,menuRef:X,currentItem:q,previouslySelectedItemId:D,selectedItem:E,setCurrentItem:G,setPreviouslySelectedItemId:H,setSelectedItem:J}=u(b),K=_.id||B.toLowerCase().replaceAll(" ","-"),Q=`${A}-drawer`,T=!!E&&E.itemId===K,U=!!q&&q.itemId===K,[V,W]=g(!1),[Y,Z]=g(null),[ee,te]=g(null),{floatingStyles:re,refs:ie,context:ne}=i({open:V,onOpenChange:(e,t,r)=>{e?(X.current&&ie.setPositionReference(X.current),M&&W(!0),"click"===r?ue():"focus"!==r&&"hover"!==r||ge()):(W(!1),Ie())},placement:"right",middleware:[n({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,r=`${Math.max(0,t)}px`;e.floating.style.height=r}})],elements:{reference:Y,floating:ee}}),oe=o(ne,{toggle:!1,stickIfOpen:!1}),se=s(ne,{handleClose:l()}),le=a(ne,{visibleOnly:!1}),ae=c(ne,{enabled:!!M}),{getReferenceProps:ce,getFloatingProps:de}=d([oe,le,se,ae]),{isMounted:me,styles:pe}=m(ne),{themeProps:fe,themeStyle:he}=j(me);I((()=>{L&&J({itemId:K,content:void 0})}),[K,L,J]),v({onResize:()=>{ie.setPositionReference(X.current)},targetRef:X,refreshMode:"throttle",refreshRate:300});const ue=()=>{H((()=>{if(M&&E)return D||E.itemId})()),G({itemId:K,content:M}),J({itemId:K,content:M}),F&&!M&&F(K)},ge=()=>{G({itemId:K,content:M})},Ie=()=>{G((e=>{if((null==e?void 0:e.itemId)!==K)return e}))},ve=M?{"aria-controls":Q,"aria-haspopup":!0,"aria-expanded":U&&!!q.content||T&&!!E.content}:{};return t("li",{className:R,children:[t(y,Object.assign({type:"button",ref:Z,"aria-current":T?"page":void 0},ve,_,{className:h(C,(T||U)&&N,$)},ce(),{onMouseLeave:()=>{V&&G(void 0)},children:[r("span",{"aria-hidden":!0,className:O,children:z}),r(x.BodyXS,{inline:!0,className:w,children:B})]})),me&&r(p,{children:r(f,{context:ne,modal:!1,initialFocus:-1,children:r("div",Object.assign({id:Q,"data-testid":"sidenav-drawer",ref:te},fe,{style:Object.assign(Object.assign({},he),re)},de(),{children:r("ul",{style:pe,className:h(P,(U||T&&!q)&&S),children:M})}))})})]})};export{k as SidenavItem};
 //# sourceMappingURL=sidenav-item.js.map

package/sidenav/sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.js","sources":["../../src/sidenav/sidenav-item.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport {\n    FloatingFocusManager,\n    FloatingPortal,\n    safePolygon,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport {\n    Container,\n    DefaultButton,\n    DesktopDrawer,\n    IconContainer,\n    TitleText,\n} from \"./sidenav-item.styles\";\nimport type { SidenavItemProps } from \"./types\";\n\nexport const SidenavItem = ({\n    children,\n    icon,\n    title,\n    onClick,\n    selected,\n    ...otherProps\n}: SidenavItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        internalId,\n        menuRef,\n        currentItem,\n        previouslySelectedItemId,\n        selectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n        setSelectedItem,\n    } = useContext(SidenavContext);\n\n    const id = otherProps.id || title.toLowerCase().replaceAll(\" \", \"-\");\n    const drawerId = `${internalId}-drawer`;\n    const isSelected = !!selectedItem && selectedItem.itemId === id;\n    const isCurrent = !!currentItem && currentItem.itemId === id;\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);\n    const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n\n    // =========================================================================\n    // FLOATING UI\n    // =========================================================================\n    const { floatingStyles, refs, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open: boolean, _event, reason: OpenChangeReason) => {\n            if (open) {\n                if (menuRef.current) {\n                    refs.setPositionReference(menuRef.current);\n                }\n\n                if (children) {\n                    setIsOpen(true);\n                }\n\n                if (reason === \"click\") {\n                    handleSelect();\n                } else if (reason === \"focus\" || reason === \"hover\") {\n                    handleHover();\n                }\n            } else {\n                setIsOpen(false);\n                handleDismiss();\n            }\n        },\n        placement: \"right\",\n        middleware: [\n            size({\n                apply({ elements }) {\n                    const height =\n                        elements.reference.getBoundingClientRect().height;\n                    const value = `${Math.max(0, height)}px`;\n\n                    elements.floating.style.height = value;\n                },\n            }),\n        ],\n        elements: {\n            reference: anchorRef,\n            floating: drawerRef,\n        },\n    });\n\n    const click = useClick(context, {\n        toggle: false,\n        stickIfOpen: false,\n    });\n    const hover = useHover(context, {\n        handleClose: safePolygon(),\n    });\n    const focus = useFocus(context, { visibleOnly: false });\n    const dismiss = useDismiss(context, { enabled: !!children });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        focus,\n        hover,\n        dismiss,\n    ]);\n\n    const { isMounted, styles } = useTransitionStyles(context);\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (selected) {\n            setSelectedItem({ itemId: id, content: undefined });\n        }\n    }, [id, selected, setSelectedItem]);\n\n    useResizeDetector({\n        onResize: () => {\n            // Sync the drawer height with menu height\n            refs.setPositionReference(menuRef.current);\n        },\n        targetRef: menuRef,\n        refreshMode: \"throttle\",\n        refreshRate: 300,\n    });\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getPreviousSelectedItemId = (): string | undefined => {\n        if (!children || !selectedItem) return undefined;\n        if (previouslySelectedItemId) {\n            return previouslySelectedItemId;\n        }\n        return selectedItem.itemId;\n    };\n\n    const handleSelect = () => {\n        setPreviouslySelectedItemId(getPreviousSelectedItemId());\n        setCurrentItem({ itemId: id, content: children });\n        setSelectedItem({\n            itemId: id,\n            content: children,\n        });\n        if (onClick && !children) {\n            onClick(id);\n        }\n    };\n\n    const handleHover = () => {\n        setCurrentItem({ itemId: id, content: children });\n    };\n\n    const handleMouseLeave = () => {\n        if (isOpen) {\n            setCurrentItem(undefined);\n        }\n    };\n\n    const handleDismiss = () => {\n        setCurrentItem((current) => {\n            if (current?.itemId === id) {\n                return undefined;\n            }\n            return current;\n        });\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": drawerId,\n              \"aria-haspopup\": true,\n              \"aria-expanded\":\n                  (isCurrent && !!currentItem.content) ||\n                  (isSelected && !!selectedItem.content),\n          }\n        : {};\n\n    return (\n        <Container>\n            <DefaultButton\n                type=\"button\"\n                ref={setAnchorRef}\n                aria-current={isSelected ? \"page\" : undefined}\n                {...ariaControlProps}\n                {...otherProps}\n                $highlight={isSelected || isCurrent}\n                {...getReferenceProps()}\n                onMouseLeave={handleMouseLeave}\n            >\n                <IconContainer aria-hidden>{icon}</IconContainer>\n                <TitleText inline>{title}</TitleText>\n            </DefaultButton>\n            {isMounted && (\n                <FloatingPortal>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                    >\n                        <div\n                            id={drawerId}\n                            data-testid=\"sidenav-drawer\"\n                            ref={setDrawerRef}\n                            {...themeProps}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            <DesktopDrawer\n                                style={styles}\n                                $showDrawer={isOpen}\n                                $showShadow={\n                                    isCurrent || (isSelected && !currentItem)\n                                }\n                            >\n                                {children}\n                            </DesktopDrawer>\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </Container>\n    );\n};\n"],"names":["SidenavItem","_a","children","icon","title","onClick","selected","otherProps","__rest","internalId","menuRef","currentItem","previouslySelectedItemId","selectedItem","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem","useContext","SidenavContext","id","toLowerCase","replaceAll","drawerId","isSelected","itemId","isCurrent","isOpen","setIsOpen","useState","anchorRef","setAnchorRef","drawerRef","setDrawerRef","floatingStyles","refs","context","useFloating","open","onOpenChange","_event","reason","current","setPositionReference","handleSelect","handleHover","handleDismiss","placement","middleware","size","apply","elements","height","reference","getBoundingClientRect","value","Math","max","floating","style","click","useClick","toggle","stickIfOpen","hover","useHover","handleClose","safePolygon","focus","useFocus","visibleOnly","dismiss","useDismiss","enabled","getReferenceProps","getFloatingProps","useInteractions","isMounted","styles","useTransitionStyles","themeProps","themeStyle","useInheritedThemeScope","useEffect","content","undefined","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","getPreviousSelectedItemId","ariaControlProps","_jsxs","Container","DefaultButton","Object","assign","type","ref","$highlight","onMouseLeave","_jsx","IconContainer","TitleText","inline","FloatingPortal","FloatingFocusManager","modal","initialFocus","DesktopDrawer","$showDrawer","$showShadow"],"mappings":"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"}
+{"version":3,"file":"sidenav-item.js","sources":["../../src/sidenav/sidenav-item.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport {\n    FloatingFocusManager,\n    FloatingPortal,\n    safePolygon,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { Typography } from \"../typography\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-item.styles\";\nimport type { SidenavItemProps } from \"./types\";\n\nexport const SidenavItem = ({\n    children,\n    icon,\n    title,\n    onClick,\n    selected,\n    className,\n    ...otherProps\n}: SidenavItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        internalId,\n        menuRef,\n        currentItem,\n        previouslySelectedItemId,\n        selectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n        setSelectedItem,\n    } = useContext(SidenavContext);\n\n    const id = otherProps.id || title.toLowerCase().replaceAll(\" \", \"-\");\n    const drawerId = `${internalId}-drawer`;\n    const isSelected = !!selectedItem && selectedItem.itemId === id;\n    const isCurrent = !!currentItem && currentItem.itemId === id;\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);\n    const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n\n    // =========================================================================\n    // FLOATING UI\n    // =========================================================================\n    const { floatingStyles, refs, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open: boolean, _event, reason: OpenChangeReason) => {\n            if (open) {\n                if (menuRef.current) {\n                    refs.setPositionReference(menuRef.current);\n                }\n\n                if (children) {\n                    setIsOpen(true);\n                }\n\n                if (reason === \"click\") {\n                    handleSelect();\n                } else if (reason === \"focus\" || reason === \"hover\") {\n                    handleHover();\n                }\n            } else {\n                setIsOpen(false);\n                handleDismiss();\n            }\n        },\n        placement: \"right\",\n        middleware: [\n            size({\n                apply({ elements }) {\n                    const height =\n                        elements.reference.getBoundingClientRect().height;\n                    const value = `${Math.max(0, height)}px`;\n\n                    elements.floating.style.height = value;\n                },\n            }),\n        ],\n        elements: {\n            reference: anchorRef,\n            floating: drawerRef,\n        },\n    });\n\n    const click = useClick(context, {\n        toggle: false,\n        stickIfOpen: false,\n    });\n    const hover = useHover(context, {\n        handleClose: safePolygon(),\n    });\n    const focus = useFocus(context, { visibleOnly: false });\n    const dismiss = useDismiss(context, { enabled: !!children });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        focus,\n        hover,\n        dismiss,\n    ]);\n\n    const { isMounted, styles: transitionStyles } =\n        useTransitionStyles(context);\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (selected) {\n            setSelectedItem({ itemId: id, content: undefined });\n        }\n    }, [id, selected, setSelectedItem]);\n\n    useResizeDetector({\n        onResize: () => {\n            // Sync the drawer height with menu height\n            refs.setPositionReference(menuRef.current);\n        },\n        targetRef: menuRef,\n        refreshMode: \"throttle\",\n        refreshRate: 300,\n    });\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getPreviousSelectedItemId = (): string | undefined => {\n        if (!children || !selectedItem) return undefined;\n        if (previouslySelectedItemId) {\n            return previouslySelectedItemId;\n        }\n        return selectedItem.itemId;\n    };\n\n    const handleSelect = () => {\n        setPreviouslySelectedItemId(getPreviousSelectedItemId());\n        setCurrentItem({ itemId: id, content: children });\n        setSelectedItem({\n            itemId: id,\n            content: children,\n        });\n        if (onClick && !children) {\n            onClick(id);\n        }\n    };\n\n    const handleHover = () => {\n        setCurrentItem({ itemId: id, content: children });\n    };\n\n    const handleMouseLeave = () => {\n        if (isOpen) {\n            setCurrentItem(undefined);\n        }\n    };\n\n    const handleDismiss = () => {\n        setCurrentItem((current) => {\n            if (current?.itemId === id) {\n                return undefined;\n            }\n            return current;\n        });\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": drawerId,\n              \"aria-haspopup\": true,\n              \"aria-expanded\":\n                  (isCurrent && !!currentItem.content) ||\n                  (isSelected && !!selectedItem.content),\n          }\n        : {};\n\n    return (\n        <li className={styles.container}>\n            <BasicButton\n                type=\"button\"\n                ref={setAnchorRef}\n                aria-current={isSelected ? \"page\" : undefined}\n                {...ariaControlProps}\n                {...otherProps}\n                className={clsx(\n                    styles.defaultButton,\n                    (isSelected || isCurrent) && styles.defaultButtonHighlight,\n                    className\n                )}\n                {...getReferenceProps()}\n                onMouseLeave={handleMouseLeave}\n            >\n                <span aria-hidden className={styles.iconContainer}>\n                    {icon}\n                </span>\n                <Typography.BodyXS inline className={styles.titleText}>\n                    {title}\n                </Typography.BodyXS>\n            </BasicButton>\n            {isMounted && (\n                <FloatingPortal>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                    >\n                        <div\n                            id={drawerId}\n                            data-testid=\"sidenav-drawer\"\n                            ref={setDrawerRef}\n                            {...themeProps}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            <ul\n                                style={transitionStyles}\n                                className={clsx(\n                                    styles.desktopDrawer,\n                                    (isCurrent ||\n                                        (isSelected && !currentItem)) &&\n                                        styles.desktopDrawerShowShadow\n                                )}\n                            >\n                                {children}\n                            </ul>\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </li>\n    );\n};\n"],"names":["SidenavItem","_a","children","icon","title","onClick","selected","className","otherProps","__rest","internalId","menuRef","currentItem","previouslySelectedItemId","selectedItem","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem","useContext","SidenavContext","id","toLowerCase","replaceAll","drawerId","isSelected","itemId","isCurrent","isOpen","setIsOpen","useState","anchorRef","setAnchorRef","drawerRef","setDrawerRef","floatingStyles","refs","context","useFloating","open","onOpenChange","_event","reason","current","setPositionReference","handleSelect","handleHover","handleDismiss","placement","middleware","size","apply","elements","height","reference","getBoundingClientRect","value","Math","max","floating","style","click","useClick","toggle","stickIfOpen","hover","useHover","handleClose","safePolygon","focus","useFocus","visibleOnly","dismiss","useDismiss","enabled","getReferenceProps","getFloatingProps","useInteractions","isMounted","styles","transitionStyles","useTransitionStyles","themeProps","themeStyle","useInheritedThemeScope","useEffect","content","undefined","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","getPreviousSelectedItemId","ariaControlProps","_jsxs","styles.container","BasicButton","Object","assign","type","ref","clsx","styles.defaultButton","styles.defaultButtonHighlight","onMouseLeave","_jsx","styles.iconContainer","Typography","BodyXS","inline","styles.titleText","FloatingPortal","FloatingFocusManager","modal","initialFocus","styles.desktopDrawer","styles.desktopDrawerShowShadow"],"mappings":"i6BA0BO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,KACRA,EAAIC,MACJA,EAAKC,QACLA,EAAOC,SACPA,EAAQC,UACRA,GAASN,EACNO,EAAUC,EAAAR,EAPW,8DAYxB,MAAMS,WACFA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,yBACXA,EAAwBC,aACxBA,EAAYC,eACZA,EAAcC,4BACdA,EAA2BC,gBAC3BA,GACAC,EAAWC,GAETC,EAAKZ,EAAWY,IAAMhB,EAAMiB,cAAcC,WAAW,IAAK,KAC1DC,EAAW,GAAGb,WACdc,IAAeV,GAAgBA,EAAaW,SAAWL,EACvDM,IAAcd,GAAeA,EAAYa,SAAWL,GACnDO,EAAQC,GAAaC,GAAS,IAE9BC,EAAWC,GAAgBF,EAAmC,OAC9DG,GAAWC,IAAgBJ,EAAgC,OAK5DK,eAAEA,GAAcC,KAAEA,GAAIC,QAAEA,IAAYC,EAAY,CAClDC,KAAMX,EACNY,aAAc,CAACD,EAAeE,EAAQC,KAC9BH,GACI3B,EAAQ+B,SACRP,GAAKQ,qBAAqBhC,EAAQ+B,SAGlCxC,GACA0B,GAAU,GAGC,UAAXa,EACAG,KACkB,UAAXH,GAAiC,UAAXA,GAC7BI,OAGJjB,GAAU,GACVkB,KACJ,EAEJC,UAAW,QACXC,WAAY,CACRC,EAAK,CACD,KAAAC,EAAMC,SAAEA,IACJ,MAAMC,EACFD,EAASE,UAAUC,wBAAwBF,OACzCG,EAAQ,GAAGC,KAAKC,IAAI,EAAGL,OAE7BD,EAASO,SAASC,MAAMP,OAASG,CACrC,KAGRJ,SAAU,CACNE,UAAWvB,EACX4B,SAAU1B,MAIZ4B,GAAQC,EAASzB,GAAS,CAC5B0B,QAAQ,EACRC,aAAa,IAEXC,GAAQC,EAAS7B,GAAS,CAC5B8B,YAAaC,MAEXC,GAAQC,EAASjC,GAAS,CAAEkC,aAAa,IACzCC,GAAUC,EAAWpC,GAAS,CAAEqC,UAAWvE,KAE3CwE,kBAAEA,GAAiBC,iBAAEA,IAAqBC,EAAgB,CAC5DhB,GACAQ,GACAJ,GACAO,MAGEM,UAAEA,GAAWC,OAAQC,IACvBC,EAAoB5C,KAClB6C,WAAEA,GAAUC,WAAEA,IAAeC,EAAuBN,IAK1DO,GAAU,KACF9E,GACAW,EAAgB,CAAEQ,OAAQL,EAAIiE,aAASC,GAC3C,GACD,CAAClE,EAAId,EAAUW,IAElBsE,EAAkB,CACdC,SAAU,KAENrD,GAAKQ,qBAAqBhC,EAAQ+B,QAAQ,EAE9C+C,UAAW9E,EACX+E,YAAa,WACbC,YAAa,MAMjB,MAQM/C,GAAe,KACjB5B,EAT8B,MAC9B,GAAKd,GAAaY,EAClB,OAAID,GAGGC,EAAaW,MAAM,EAIEmE,IAC5B7E,EAAe,CAAEU,OAAQL,EAAIiE,QAASnF,IACtCe,EAAgB,CACZQ,OAAQL,EACRiE,QAASnF,IAETG,IAAYH,GACZG,EAAQe,EACZ,EAGEyB,GAAc,KAChB9B,EAAe,CAAEU,OAAQL,EAAIiE,QAASnF,GAAW,EAS/C4C,GAAgB,KAClB/B,GAAgB2B,IACZ,IAAIA,aAAO,EAAPA,EAASjB,UAAWL,EAGxB,OAAOsB,CAAO,GAChB,EAMAmD,GAAsD3F,EACtD,CACI,gBAAiBqB,EACjB,iBAAiB,EACjB,gBACKG,KAAed,EAAYyE,SAC3B7D,KAAgBV,EAAauE,SAEtC,CAAA,EAEN,OACIS,EAAA,KAAA,CAAIvF,UAAWwF,EAAgB7F,SAAA,CAC3B4F,EAACE,EAAWC,OAAAC,OAAA,CACRC,KAAK,SACLC,IAAKrE,EAAY,eACHP,EAAa,YAAS8D,GAChCO,GACArF,GACJD,UAAW8F,EACPC,GACC9E,GAAcE,IAAc6E,EAC7BhG,IAEAmE,KAAmB,CACvB8B,aA1Ca,KACjB7E,GACAZ,OAAeuE,EACnB,YAyCQmB,EAAA,OAAA,CAAA,eAAA,EAAkBlG,UAAWmG,EAAoBxG,SAC5CC,IAELsG,EAACE,EAAWC,OAAM,CAACC,QAAM,EAACtG,UAAWuG,EAAgB5G,SAChDE,QAGRyE,IACG4B,EAACM,EAAc,CAAA7G,SACXuG,EAACO,EAAoB,CACjB5E,QAASA,GACT6E,OAAO,EACPC,cAAc,EAAEhH,SAEhBuG,EAAA,MAAAR,OAAAC,OAAA,CACI9E,GAAIG,EAAQ,cACA,iBACZ6E,IAAKnE,IACDgD,GAAU,CACdtB,MAAKsC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACEhB,IACAhD,KAEHyC,KAAkB,CAAAzE,SAEtBuG,EAAA,KAAA,CACI9C,MAAOoB,GACPxE,UAAW8F,EACPc,GACCzF,GACIF,IAAeZ,IAChBwG,GACPlH,SAEAA,aAMpB"}