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

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

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

package/cjs/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\";\nimport { Button } from \"../../button\";\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../../theme\";\nimport { Toggle } from \"../../toggle\";\nimport { Typography } from \"../../typography\";\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    ${MediaQuery.MaxWidth.xxs} {\n        max-width: 100%;\n    }\n`;\n\nexport const Container = styled.div`\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 = styled.div`\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 = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n\n    ${MediaQuery.MaxWidth.xxs} {\n        flex-direction: column-reverse; // FIXME: this breaks tab focus\n        margin-top: ${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: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.xxs} {\n        margin-right: 0;\n        width: 100%;\n    }\n`;\n\nexport const TimePeriodSection = styled.div`\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 = styled.div`\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 = styled(ClickableIcon)`\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 = 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    ${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    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n"],"names":["StyledDiv","styled","div","MediaQuery","MaxWidth","xxs","Container","Spacing","Colour","Border","Radius","InputSection","ControlSection","HourMinuteSection","TimePeriodSection","lg","InputContainer","SwitchButton","ClickableIcon","DividerLabel","Typography","BodyBL","TimeInputBox","InputBox","TimeInput","BasicInput","TimePeriodToggle","Toggle","ControlButton","Button","Small","sm"],"mappings":"yXAeO,MAAMA,EAAYC,EAAAA,QAAOC,GAAG;;;MAG7BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAYL,EAAAA,QAAOC,GAAG;;;eAGpBK,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;UACrCA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;kBAGzBC,EAAAA,OAAW;cACfC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;EAGnBC,EAAeV,EAAAA,QAAOC,GAAG;;;;;MAKhCC,EAAAA,WAAWC,SAASC;;;;EAMbO,EAAiBX,EAAAA,QAAOC,GAAG;;;kBAGtBK,EAAAA,QAAQ;WACfA,EAAAA,QAAQ;;MAEbJ,EAAAA,WAAWC,SAASC;;sBAEJE,EAAAA,QAAQ;;EAOjBM,EAAoBZ,EAAAA,QAAOC,GAAG;;;oBAGvBK,EAAAA,QAAQ;;MAEtBJ,EAAAA,WAAWC,SAASC;;;;EAMbS,EAAoBb,EAAAA,QAAOC,GAAG;;WAEhCK,EAAAA,QAAQ;;MAEbJ,EAAAA,WAAWC,SAASW;;;;MAIpBZ,EAAAA,WAAWC,SAASC;;;;EAMbW,EAAiBf,EAAAA,QAAOC,GAAG;;;;;MAKlCC,EAAAA,WAAWC,SAASC;;;EAKbY,EAAehB,EAAAA,QAAOiB,EAAAA,cAAc;;eAElCX,EAAAA,QAAQ;aACVC,EAAAA,OAAa;;;;;;;;iBAQTA,EAAAA,OAAO;;EAIXW,EAAelB,EAAAA,QAAOmB,aAAWC,OAAO;;;;EAMxCC,EAAerB,EAAAA,QAAOsB,EAAAA,SAAS;;;;;;;MAOtCpB,EAAAA,WAAWC,SAASC;;;EAKbmB,EAAYvB,EAAAA,QAAOwB,EAAAA,WAAW;;;;;;;EAS9BC,EAAmBzB,EAAAA,QAAO0B,EAAAA,OAAO;;;EAQjCC,EAAgB3B,EAAAA,QAAO4B,SAAOC,MAAM;;;MAG3C3B,EAAAA,WAAWC,SAAS2B;;;;MAIpB5B,EAAAA,WAAWC,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":[],"mappings":"6HAmBsB,iCA4HI,iCArGC,gCAkEF,oCAlDK,kCAyBH,+BApDF,wBApBR,+BAkFQ,4BAiCH,+BAZG,qCA7CK,mCAkED"}

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

@@ -0,0 +1,13 @@
+@layer fds{.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/cjs/sidenav/sidenav-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-context.js","sources":["../../../src/sidenav/sidenav-context.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, createContext } from \"react\";\n\nexport interface SidenavContextItem {\n    itemId: string | undefined;\n    content: React.ReactNode | undefined;\n}\n\ninterface SidenavContextProps {\n    internalId: string;\n    menuRef: React.RefObject<HTMLDivElement>;\n    currentItem: SidenavContextItem | undefined;\n    previouslySelectedItemId: string | undefined;\n    selectedItem: SidenavContextItem | undefined;\n    setCurrentItem: Dispatch<SetStateAction<SidenavContextItem | undefined>>;\n    setPreviouslySelectedItemId: Dispatch<SetStateAction<string | undefined>>;\n    setSelectedItem: Dispatch<SetStateAction<SidenavContextItem | undefined>>;\n}\n\nexport const SidenavContext = createContext<SidenavContextProps>({\n    internalId: \"sidenav\",\n    menuRef: { current: null },\n    selectedItem: undefined,\n    currentItem: undefined,\n    previouslySelectedItemId: undefined,\n    setCurrentItem: () => {\n        // do nothing\n    },\n    setPreviouslySelectedItemId: () => {\n        // do nothing\n    },\n    setSelectedItem: () => {\n        // do nothing\n    },\n});\n"],"names":["SidenavContext","createContext","internalId","menuRef","current","selectedItem","undefined","currentItem","previouslySelectedItemId","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem"],"mappings":"aAkBO,MAAMA,mBAAiBC,cAAmC,CAC7DC,WAAY,UACZC,QAAS,CAAEC,QAAS,MACpBC,kBAAcC,EACdC,iBAAaD,EACbE,8BAA0BF,EAC1BG,eAAgB,OAGhBC,4BAA6B,OAG7BC,gBAAiB"}
+{"version":3,"file":"sidenav-context.js","sources":["../../../src/sidenav/sidenav-context.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport { createContext } from \"react\";\n\nexport interface SidenavContextItem {\n    itemId: string | undefined;\n    content: React.ReactNode | undefined;\n}\n\ninterface SidenavContextProps {\n    internalId: string;\n    menuRef: React.RefObject<HTMLDivElement>;\n    currentItem: SidenavContextItem | undefined;\n    previouslySelectedItemId: string | undefined;\n    selectedItem: SidenavContextItem | undefined;\n    setCurrentItem: Dispatch<SetStateAction<SidenavContextItem | undefined>>;\n    setPreviouslySelectedItemId: Dispatch<SetStateAction<string | undefined>>;\n    setSelectedItem: Dispatch<SetStateAction<SidenavContextItem | undefined>>;\n}\n\nexport const SidenavContext = createContext<SidenavContextProps>({\n    internalId: \"sidenav\",\n    menuRef: { current: null },\n    selectedItem: undefined,\n    currentItem: undefined,\n    previouslySelectedItemId: undefined,\n    setCurrentItem: () => {\n        // do nothing\n    },\n    setPreviouslySelectedItemId: () => {\n        // do nothing\n    },\n    setSelectedItem: () => {\n        // do nothing\n    },\n});\n"],"names":["SidenavContext","createContext","internalId","menuRef","current","selectedItem","undefined","currentItem","previouslySelectedItemId","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem"],"mappings":"aAmBO,MAAMA,mBAAiBC,cAAmC,CAC7DC,WAAY,UACZC,QAAS,CAAEC,QAAS,MACpBC,kBAAcC,EACdC,iBAAaD,EACbE,8BAA0BF,EAC1BG,eAAgB,OAGhBC,4BAA6B,OAG7BC,gBAAiB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.js","sources":["../../../src/sidenav/sidenav-drawer-item.tsx"],"sourcesContent":["import { HTMLAttributes, useContext, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useSpring } from \"@react-spring/web\";\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 { 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":["_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":"gTAckCA,IAAA,IAAAC,GAC9BA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,SACPA,GAAQJ,EACLK,EAAUC,EAAAA,OAAAN,EALiB,CAAA,KAAA,QAAA,UAAA,aAU9B,MAAOO,EAAUC,GAAeC,EAAAA,UAAkB,IAC3CC,EAAWC,GAAgBF,EAAAA,UAAkB,IAC9CG,YACFA,EAAWC,gBACXA,EAAeC,4BACfA,EAA2BC,eAC3BA,GACAC,EAAAA,WAAWC,mBAERC,GAAcT,EAAAA,UAAkB,GACjCU,EAAY,GAAGD,YAEfE,EAA0BC,EAAAA,UAAU,CACtCC,KAAM,CAAEC,QAAS,GACjBC,GAAI,CAAED,QAAS,KAEbE,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAwBR,EAAAA,UAAU,CACpCS,OAAQ1B,GAAYG,EAAWkB,EAAeK,OAAS,IA8BrDC,EAAsD3B,EACtD,CACI,gBAAiBe,EACjB,gBAAiBZ,GAErB,CAAA,EAEN,OACIyB,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,CACNC,aAjCiB,KACrBzB,GAAa,EAAK,EAiCd0B,aA9BiB,KACrB1B,GAAa,EAAM,GA8BXN,EAAU,CACdiC,MAAOlB,EAAuBhB,SAAA,CAE9B4B,EAAAA,KAACO,EAAAA,0BACGC,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,EAAAA,IAACC,EAAAA,sBAAa7C,IACbE,GAAY0C,EAAAA,IAACE,EAAAA,YAAW,CAAA,eAAA,EAAAC,UAAwB1C,QAErDuC,EAAAA,IAACI,EAAAA,wBAAuBZ,MAAOT,EAAqBzB,SAChD0C,EAAAA,IAACK,EAAAA,cAAa,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":["_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":"ufAYkCA,IAAA,IAAAC,GAC9BA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,SACPA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANiB,iDAW9B,MAAOQ,EAAUC,GAAeC,EAAAA,UAAkB,IAC5CC,YACFA,EAAWC,gBACXA,EAAeC,4BACfA,EAA2BC,eAC3BA,GACAC,EAAAA,WAAWC,mBAERC,GAAcP,EAAAA,UAAkB,GACjCQ,EAAY,GAAGD,YAEfE,EAA0BC,EAAAA,UAAU,CACtCC,KAAM,CAAEC,QAAS,GACjBC,GAAI,CAAED,QAAS,KAEbE,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAwBR,EAAAA,UAAU,CACpCS,OAAQzB,GAAYI,EAAWgB,EAAeK,OAAS,IAsBrDC,EAAsD1B,EACtD,CACI,gBAAiBc,EACjB,gBAAiBV,GAErB,CAAA,EAEN,OACIuB,EAAAA,KAACC,EAAAA,SAASC,oBACF3B,EAAU,CACdD,UAAWA,EACX6B,MAAOf,EAAuBf,SAAA,CAE9B2B,EAAAA,KAACI,EAAAA,YAAWC,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,EAAAA,QACPC,EAAAA,YACCvC,GAAYwC,EAAAA,uBAEbd,EAAgB,CAAA1B,SAAA,CAEpByC,EAAAA,IAAA,OAAA,CAAMxC,UAAWyC,EAAAA,YAAkB1C,SAAGF,IACrCE,GACGyC,EAAAA,IAACE,EAAAA,cAAa,CAAA,eAAA,EAEV1C,UAAWqC,UACPM,EAAAA,YACAxC,GAAYyC,EAAAA,2BAK5BJ,EAAAA,IAACb,EAAAA,SAASkB,mBACM,2BACZ7C,UAAW8C,yBACXjB,MAAON,EAAqBxB,SAE5ByC,EAAAA,IAAA,KAAA,CAAI5C,GAAIiB,EAAWS,IAAKD,EAAQtB,SAC3BA,SAGC"}

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

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

package/cjs/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\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../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: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour.text};\n\n    ${(props) =>\n        props.$noChildren\n            ? css`\n                  &:hover,\n                  &:focus {\n                      background: ${Colour[\"bg-hover\"]};\n                      color: ${Colour[\"text-hover\"]};\n                  }\n              `\n            : css`\n                  &:hover,\n                  &:focus {\n                      background: ${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: ${Colour.icon};\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform ${Motion[\"duration-150\"]} ${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","Radius","Font","Colour","text","props","$noChildren","css","DrawerSubitemContainer","div","ChevronIcon","ChevronUpIcon","icon","$expanded","Motion","TextElement","span","lineClampCss","DrawerContent","ul"],"mappings":"0UAsBO,MAAMA,EAAYC,EAAAA,SAASC,UAAOC,EAAE,IAE9BC,EAAaF,EAAAA,QAAOG,EAAAA,YAAiC;;;;;;;;qBAQ7CC,EAAAA,OAAW;;MAE1BC,EAAAA,KAAK;aACEC,EAAAA,OAAOC;;MAEbC,GACCA,EAAMC,YACAC,KAAG;;;oCAGmBJ,EAAAA,OAAO;+BACZA,EAAAA,OAAO;;gBAGxBI,KAAG;;;oCAGmBJ,EAAAA,OAAO;;;EAK9BK,EAAyBZ,EAAAA,SAASC,EAAAA,QAAOY,GAAG;;;GAK5CC,EAAcb,EAAAA,QAAOc,EAAAA,cAA6B;;aAElDR,EAAAA,OAAOS;wBACKP,GAAWA,EAAMQ,UAAY,EAAI;4BAC9BC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;EAGhDC,EAAclB,EAAAA,QAAOmB,IAAI;MAChCC,EAAAA,aAAa;;EAINC,EAAgBtB,EAAAA,SAASC,UAAOsB,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":[],"mappings":"4GAwCwB,uCAOQ,yCAZG,6BA3BZ,wCAmBU,8BAwBT"}

package/cjs/sidenav/sidenav-drawer-item.styles_1ljnyx2.css

@@ -0,0 +1,6 @@
+@layer fds{.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-body);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/cjs/sidenav/sidenav-drawer-subitem.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.tsx"],"sourcesContent":["import { SidenavDrawerSubitemProps } from \"./types\";\nimport { Container, LinkButton } from \"./sidenav-drawer-subitem.styles\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { useContext } from \"react\";\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":["_a","id","title","onClick","otherProps","__rest","currentItem","setSelectedItem","setCurrentItem","setPreviouslySelectedItemId","useContext","SidenavContext","_jsx","Container","Object","assign","children","LinkButton","type","itemId","content","undefined"],"mappings":"qNAKqCA,QAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,KACGC,EAAUC,EAAAA,OAAAL,EAJoB,CAAA,KAAA,QAAA,YASjC,MAAMM,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAAA,WAAWC,kBAiBf,OACIC,EAAAA,IAACC,EAAAA,UAASC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SACrBJ,EAAAA,IAACK,EAAAA,WAAU,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":["_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":"gXAQqCA,IAAA,IAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,UACPA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALoB,CAAA,KAAA,QAAA,UAAA,cAUjC,MAAMO,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAAA,WAAWC,kBAiBf,OACIC,MAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQV,EAAU,CAAED,UAAWY,UAAKZ,GAAUa,SAC1CJ,MAACK,EAAAA,aACGC,KAAK,SACLhB,QAhBU,KACdA,GACAA,EAAQF,GAEZO,EAAgB,CAAEY,OAAQb,aAAW,EAAXA,EAAaa,OAAQC,aAASC,IACxDb,OAAea,GACfZ,OAA4BY,EAAU,EAW9BlB,UAAWmB,EAAAA,WAAiBN,SAE3Bf,MAEJ"}

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

@@ -1,17 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../theme/index.js"),t=require("../shared/input-wrapper/input-wrapper.js"),o=require("../shared/styles/index.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=u(e);const n=i.default.li``,s=i.default(t.BasicButton)`
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border-radius: ${r.Radius.md};
-
-    ${r.Font["body-md-regular"]}
-    color: ${r.Colour.text};
-    ${o.lineClampCss(2)}
-    text-align: left;
-
-    &:hover,
-    &:focus {
-        background-color: ${r.Colour["bg-hover"]};
-        color: ${r.Colour["text-hover"]};
-    }
-`;exports.Container=n,exports.LinkButton=s;
+"use strict";require("./sidenav-drawer-subitem.styles_2y58kf.css");exports.linkButton="l1ge7as9";
 //# sourceMappingURL=sidenav-drawer-subitem.styles.js.map

package/cjs/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\";\nimport { Colour, Font, Radius } from \"../theme\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\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: ${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":["Container","styled","li","LinkButton","BasicButton","Radius","Font","Colour","lineClampCss"],"mappings":"qQAQaA,EAAYC,EAAAA,QAAOC,EAAE,GAErBC,EAAaF,EAAAA,QAAOG,EAAAA,YAAY;;;qBAGxBC,EAAAA,OAAW;;MAE1BC,EAAAA,KAAK;aACEC,EAAAA,OAAa;MACpBC,EAAAA,aAAa;;;;;4BAKSD,EAAAA,OAAO;iBAClBA,EAAAA,OAAO;;"}
+{"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":[],"mappings":"6GAQuB"}

package/cjs/sidenav/sidenav-drawer-subitem.styles_2y58kf.css

@@ -0,0 +1 @@
+@layer fds{.l1ge7as9{width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family-body);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/cjs/sidenav/sidenav-group.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),i=require("./sidenav-group.styles.js");exports.SidenavGroup=s=>{var{separator:t,children:a}=s,d=r.__rest(s,["separator","children"]);return e.jsxs(i.Container,Object.assign({},d,{children:[a,t&&e.jsx(i.Divider,{"data-testid":"divider"})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),a=require("./sidenav-group.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(s);exports.SidenavGroup=s=>{var{separator:t,children:l,className:u}=s,c=e.__rest(s,["separator","children","className"]);return r.jsxs("ul",Object.assign({},c,{className:i.default(a.container,u),children:[l,t&&r.jsx("li",{"data-testid":"divider",className:a.divider})]}))};
 //# sourceMappingURL=sidenav-group.js.map

package/cjs/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 { 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":["_a","separator","children","otherProps","__rest","_jsxs","Container","Object","assign","_jsx","Divider"],"mappings":"+IAG6BA,QAAAC,UACzBA,EAASC,SACTA,GAAQF,EACLG,EAAUC,EAAAA,OAAAJ,EAHY,0BAQzB,OACIK,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,GAAKL,aACVD,EACAD,GAAaQ,EAAAA,IAACC,UAAO,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":["_a","separator","children","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.container","_jsx","styles.divider"],"mappings":"oPAK6BA,QAAAC,UACzBA,EAASC,SACTA,EAAQC,UACRA,KACGC,EAAUC,EAAAA,OAAAL,EAJY,CAAA,YAAA,WAAA,cASzB,OACIM,OAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQJ,EAAU,CAAED,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUD,SAAA,CAC3DA,EACAD,GACGU,MAAA,KAAA,CAAA,cAAgB,UAAUR,UAAWS,EAAAA,aAExC"}

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

@@ -1,13 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.ul`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    list-style: none;
-`,n=i.default.li`
-    margin-top: 1rem;
-    width: 6.5rem;
-    height: 1px;
-    background-color: ${t.Colour.border};
-`;exports.Container=o,exports.Divider=n;
+"use strict";require("./sidenav-group.styles_1x604sw.css");exports.container="c4k7n35",exports.divider="d14gvick";
 //# sourceMappingURL=sidenav-group.styles.js.map

package/cjs/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\";\nimport { Colour } from \"../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: ${Colour.border};\n`;\n"],"names":["Container","styled","ul","Divider","li","Colour","border"],"mappings":"kKAMO,MAAMA,EAAYC,EAAAA,QAAOC,EAAE;;;;;;EAQrBC,EAAUF,EAAAA,QAAOG,EAAE;;;;wBAIRC,EAAAA,OAAOC;"}
+{"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":[],"mappings":"oGAOsB,0BAQF"}

package/cjs/sidenav/sidenav-group.styles_1x604sw.css

@@ -0,0 +1,2 @@
+@layer fds{.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/cjs/sidenav/sidenav-item.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.js","sources":["../../../src/sidenav/sidenav-item.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    OpenChangeReason,\n    safePolygon,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport { HTMLAttributes, useContext, useEffect, useState } from \"react\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport {\n    Container,\n    DefaultButton,\n    DesktopDrawer,\n    IconContainer,\n    TitleText,\n} from \"./sidenav-item.styles\";\nimport { SidenavItemProps } from \"./types\";\nimport { useResizeDetector } from \"react-resize-detector\";\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: children ? safePolygon() : null,\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\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                            style={floatingStyles}\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":["_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","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":"oSA0B4BA,IAAA,IAAAC,SACxBA,EAAQC,KACRA,EAAIC,MACJA,EAAKC,QACLA,EAAOC,SACPA,GAAQL,EACLM,EAAUC,EAAAA,OAAAP,EANW,kDAWxB,MAAMQ,WACFA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,yBACXA,EAAwBC,aACxBA,EAAYC,eACZA,EAAcC,4BACdA,EAA2BC,gBAC3BA,GACAC,EAAAA,WAAWC,EAAAA,gBAETC,EAAKZ,EAAWY,IAAMf,EAAMgB,cAAcC,WAAW,IAAK,KAC1DC,EAAW,GAAGb,WACdc,IAAeV,GAAgBA,EAAaW,SAAWL,EACvDM,IAAcd,GAAeA,EAAYa,SAAWL,GACnDO,EAAQC,GAAaC,EAAAA,UAAS,IAE9BC,EAAWC,GAAgBF,EAAAA,SAAmC,OAC9DG,EAAWC,GAAgBJ,EAAAA,SAAgC,OAK5DK,eAAEA,EAAcC,KAAEA,EAAIC,QAAEA,GAAYC,EAAAA,YAAY,CAClDC,KAAMX,EACNY,aAAc,CAACD,EAAeE,EAAQC,KAC9BH,GACI3B,EAAQ+B,SACRP,EAAKQ,qBAAqBhC,EAAQ+B,SAGlCvC,GACAyB,GAAU,GAGC,UAAXa,EACAG,IACkB,UAAXH,GAAiC,UAAXA,GAC7BI,MAGJjB,GAAU,GACVkB,IACJ,EAEJC,UAAW,QACXC,WAAY,CACRC,OAAK,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,KAIZ4B,EAAQC,EAAAA,SAASzB,EAAS,CAC5B0B,QAAQ,EACRC,aAAa,IAEXC,EAAQC,EAAAA,SAAS7B,EAAS,CAC5B8B,YAAa/D,EAAWgE,EAAAA,cAAgB,OAEtCC,EAAQC,EAAAA,SAASjC,EAAS,CAAEkC,aAAa,IACzCC,EAAUC,EAAAA,WAAWpC,EAAS,CAAEqC,UAAWtE,KAE3CuE,kBAAEA,EAAiBC,iBAAEA,GAAqBC,kBAAgB,CAC5DhB,EACAQ,EACAJ,EACAO,KAGEM,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoB3C,GAKlD4C,EAAAA,WAAU,KACFzE,GACAU,EAAgB,CAAEQ,OAAQL,EAAI6D,aAASC,GAC3C,GACD,CAAC9D,EAAIb,EAAUU,IAElBkE,oBAAkB,CACdC,SAAU,KAENjD,EAAKQ,qBAAqBhC,EAAQ+B,QAAQ,EAE9C2C,UAAW1E,EACX2E,YAAa,WACbC,YAAa,MAMjB,MAQM3C,EAAe,KACjB5B,EAT8B,MAC9B,GAAKb,GAAaW,EAClB,OAAID,GAGGC,EAAaW,MAAM,EAIE+D,IAC5BzE,EAAe,CAAEU,OAAQL,EAAI6D,QAAS9E,IACtCc,EAAgB,CACZQ,OAAQL,EACR6D,QAAS9E,IAETG,IAAYH,GACZG,EAAQc,EACZ,EAGEyB,EAAc,KAChB9B,EAAe,CAAEU,OAAQL,EAAI6D,QAAS9E,GAAW,EAS/C2C,EAAgB,KAClB/B,GAAgB2B,IACZ,IAAIA,aAAO,EAAPA,EAASjB,UAAWL,EAGxB,OAAOsB,CAAO,GAChB,EAMA+C,EAAsDtF,EACtD,CACI,gBAAiBoB,EACjB,iBAAiB,EACjB,gBACKG,KAAed,EAAYqE,SAC3BzD,KAAgBV,EAAamE,SAEtC,CAAA,EAEN,OACIS,OAACC,EAAAA,UAAS,CAAAxF,SAAA,CACNuF,EAAAA,KAACE,EAAAA,cAAaC,OAAAC,OAAA,CACVC,KAAK,SACLC,IAAKjE,EAAY,eACHP,EAAa,YAAS0D,GAChCO,EACAjF,EAAU,CAAAyF,WACFzE,GAAcE,GACtBgD,IAAmB,CACvBwB,aAtCa,KACjBvE,GACAZ,OAAemE,EACnB,EAmCsC/E,SAAA,CAE9BgG,MAACC,EAAAA,cAAa,CAAA,eAAA,EAAAjG,SAAcC,IAC5B+F,MAACE,EAAAA,UAAS,CAACC,QAAM,EAAAnG,SAAEE,QAEtBwE,GACGsB,EAAAA,IAACI,EAAAA,yBACGJ,MAACK,EAAAA,qBAAoB,CACjBpE,QAASA,EACTqE,OAAO,EACPC,gBAAgBvG,SAEhBgG,EAAAA,IAAA,MAAAN,OAAAC,OAAA,CACI1E,GAAIG,EAAQ,cACA,iBACZyE,IAAK/D,EACL0B,MAAOzB,GACHyC,IAAkB,CAAAxE,SAEtBgG,MAACQ,EAAAA,cAAa,CACVhD,MAAOmB,EAAM8B,YACAjF,EAAMkF,YAEfnF,GAAcF,IAAeZ,EAAYT,SAG5CA,aAMb"}
+{"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: children ? safePolygon() : null,\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":["_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":"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"}

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

@@ -1,70 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../shared/input-wrapper/input-wrapper.js"),r=require("../shared/styles/index.js"),t=require("../theme/index.js"),i=require("../typography/typography.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(e);const n=d.default.li`
-    width: 100%;
-`,a=d.default.span`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: 0.25rem 1rem;
-    border-radius: ${t.Radius.md};
-    color: ${t.Colour["icon-primary"]};
-    transition: ${t.Motion["duration-250"]} ${t.Motion["ease-default"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-`,l=d.default(i.Typography.BodyXS)`
-    ${r.lineClampCss(2)}
-    margin-top: 0.25rem;
-    transition: ${t.Motion["duration-250"]} ${t.Motion["ease-default"]};
-`,u=d.default(o.BasicButton)`
-    width: 100%;
-    margin-top: 1rem;
-    cursor: pointer;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    &:hover,
-    &:focus {
-        ${a} {
-            background-color: ${t.Colour["bg-hover"]};
-        }
-
-        ${l} {
-            ${t.Font["body-xs-semibold"]}
-            color: ${t.Colour["text-hover"]};
-        }
-    }
-
-    ${o=>o.$highlight&&e.css`
-            ${a} {
-                background-color: ${t.Colour["bg-hover"]};
-            }
-
-            ${l} {
-                ${t.Font["body-xs-semibold"]}
-                color: ${t.Colour["text-selected"]};
-            }
-        `}
-`,p=d.default.ul`
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    width: 15rem;
-    height: 100%;
-    padding: 1rem 0.5rem;
-    background-color: ${t.Colour["bg-primary-subtlest"]};
-    border-top-right-radius: ${t.Radius.md};
-    border-bottom-right-radius: ${t.Radius.md};
-    border: ${t.Border["width-010"]} ${t.Border.solid} ${t.Colour.border};
-    ${o=>o.$showShadow&&e.css`
-            box-shadow: ${t.Shadow["xs-subtle"]};
-            clip-path: inset(0 -6px 0 0);
-        `}
-`;exports.Container=n,exports.DefaultButton=u,exports.DesktopDrawer=p,exports.IconContainer=a,exports.TitleText=l;
+"use strict";require("./sidenav-item.styles_lqw3kh.css");exports.container="cfxt5d9",exports.defaultButton="d5cbs2m",exports.defaultButtonHighlight="d1g4locu",exports.desktopDrawer="d1ao5fhb",exports.desktopDrawerShowShadow="d1m7u3sj",exports.iconContainer="i1rznncx",exports.titleText="tegzrsi";
 //# sourceMappingURL=sidenav-item.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.styles.js","sources":["../../../src/sidenav/sidenav-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $highlight: boolean;\n}\n\ninterface DrawerStyleProps {\n    $showDrawer: boolean;\n    $showShadow: boolean;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.li`\n    width: 100%;\n`;\n\nexport const IconContainer = styled.span`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const TitleText = styled(Typography.BodyXS)`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const DefaultButton = styled(BasicButton)<StyleProps>`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        ${IconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        ${TitleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n\n    ${(props) =>\n        props.$highlight &&\n        css`\n            ${IconContainer} {\n                background-color: ${Colour[\"bg-hover\"]};\n            }\n\n            ${TitleText} {\n                ${Font[\"body-xs-semibold\"]}\n                color: ${Colour[\"text-selected\"]};\n            }\n        `}\n`;\n\nexport const DesktopDrawer = styled.ul<DrawerStyleProps>`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour.border};\n    ${(props) =>\n        props.$showShadow &&\n        css`\n            box-shadow: ${Shadow[\"xs-subtle\"]};\n            clip-path: inset(0 -6px 0 0);\n        `}\n`;\n"],"names":["Container","styled","li","IconContainer","span","Radius","Colour","Motion","TitleText","Typography","BodyXS","lineClampCss","DefaultButton","BasicButton","Font","props","$highlight","css","DesktopDrawer","ul","Border","border","$showShadow","Shadow"],"mappings":"wSAqBO,MAAMA,EAAYC,EAAAA,QAAOC,EAAE;;EAIrBC,EAAgBF,EAAAA,QAAOG,IAAI;;;;;;qBAMnBC,EAAAA,OAAW;aACnBC,EAAAA,OAAO;kBACFC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;;;;;;EAQtCC,EAAYP,EAAAA,QAAOQ,aAAWC,OAAO;MAC5CC,EAAAA,aAAa;;kBAEDJ,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;EAGtCK,EAAgBX,EAAAA,QAAOY,EAAAA,YAAwB;;;;;;;;;;;;UAYlDV;gCACsBG,EAAAA,OAAO;;;UAG7BE;cACIM,EAAAA,KAAK;qBACER,EAAAA,OAAO;;;;MAIrBS,GACCA,EAAMC,YACNC,KAAG;cACGd;oCACsBG,EAAAA,OAAO;;;cAG7BE;kBACIM,EAAAA,KAAK;yBACER,EAAAA,OAAO;;;EAKnBY,EAAgBjB,EAAAA,QAAOkB,EAAoB;;;;;;;;wBAQhCb,EAAAA,OAAO;+BACAD,EAAAA,OAAW;kCACRA,EAAAA,OAAW;cAC/Be,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKd,EAAAA,OAAOe;MACxDN,GACCA,EAAMO,aACNL,KAAG;0BACeM,EAAAA,OAAO;;;"}
+{"version":3,"file":"sidenav-item.styles.js","sources":["../../../src/sidenav/sidenav-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    width: 100%;\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const titleText = css`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const defaultButton = css`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        .${iconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        .${titleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const defaultButtonHighlight = css`\n    .${iconContainer} {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n\n    .${titleText} {\n        ${Font[\"body-xs-semibold\"]}\n        color: ${Colour[\"text-selected\"]};\n    }\n`;\n\nexport const desktopDrawer = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const desktopDrawerShowShadow = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n"],"names":[],"mappings":"kGAQsB,gCA0BI,yCAuBS,iCAWT,2CAcU,iCAtEV,6BAgBJ"}