chordia-ui 4.0.3 → 4.0.5

package/dist/SideDrawer.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),f=require("react"),m=require("lucide-react"),w=require("./useMediaQuery.cjs.js");function S({open:t,onClose:n,title:r,subtitle:i,children:a,footer:s,width:p=515,height:y=762,toggleLabel:x,toggleChecked:c,onToggle:u,topOffset:d}){const b=f.useRef(null),o=w.useMediaQuery("(max-width: 640px)"),h=d!=null,g=typeof d=="number"?`${d}px`:d;return f.useEffect(()=>{if(!t)return;const l=v=>{v.key==="Escape"&&(n==null||n())};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[t,n]),t?e.jsxs(e.Fragment,{children:[e.jsx("div",{onClick:n,style:{position:"fixed",inset:0,zIndex:1200,background:"rgba(0, 0, 0, 0.20)"}}),e.jsxs("div",{ref:b,style:{position:"fixed",top:o?0:h?g:"50%",right:0,transform:o||h?"none":"translateY(-50%)",zIndex:1201,display:"flex",width:o?"100vw":p,maxWidth:"100vw",height:o?"100dvh":y,maxHeight:o?"100dvh":h?`calc(100vh - ${g})`:"100vh",padding:"20px",boxSizing:o?"border-box":void 0,flexDirection:"column",alignItems:"flex-start",gap:"20px",borderRadius:o?0:"12px 0 0 12px",background:"#FFF",boxShadow:"648px 0 100px 0 rgba(0, 0, 0, 0.20)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",flexShrink:0},children:[e.jsx("h2",{style:{fontSize:"24px",fontWeight:600,fontStyle:"normal",color:"var(--Grey-3, #252525)",margin:0,lineHeight:"normal"},children:r}),e.jsx("button",{onClick:n,style:{display:"flex",alignItems:"center",justifyContent:"center",width:"28px",height:"28px",border:"none",background:"transparent",color:"var(--Grey-Strong, #808183)",cursor:"pointer",borderRadius:"4px",transition:"background 0.15s ease"},onMouseEnter:l=>{l.currentTarget.style.background="#ECEEF2"},onMouseLeave:l=>{l.currentTarget.style.background="transparent"},children:e.jsx(m.X,{size:20,strokeWidth:2})})]}),e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),(i||x)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:"12px",flexShrink:0},children:[i&&e.jsx("p",{style:{fontSize:"13px",fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"#0B0B0B",margin:0,flex:1},children:i}),x&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",flexShrink:0},children:[e.jsx("button",{onClick:()=>u==null?void 0:u(!c),style:{position:"relative",width:"40px",height:"22px",borderRadius:"11px",border:"none",background:c?"var(--Base-Strong, #0B0B0B)":"var(--Base-Faint, #D9D9D9)",cursor:"pointer",transition:"background 0.2s ease",padding:0,flexShrink:0},children:e.jsx("div",{style:{position:"absolute",top:"2px",left:c?"20px":"2px",width:"18px",height:"18px",borderRadius:"50%",background:"#FFF",transition:"left 0.2s ease",boxShadow:"0 1px 3px rgba(0,0,0,0.15)"}})}),e.jsx("span",{style:{fontSize:"13px",fontWeight:500,color:"var(--Base-Strong, #1E1E1E)",lineHeight:1.4},children:x})]})]}),e.jsx("div",{style:{flex:1,width:"100%",overflowY:"auto",display:"flex",flexDirection:"column",gap:"16px",minHeight:0},children:a}),s&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:"12px",width:"100%",flexShrink:0},children:s})]})]})]}):null}function k({label:t,variant:n="secondary",onClick:r,disabled:i}){const a=n==="primary";return e.jsx("button",{onClick:r,disabled:i,style:{display:"flex",height:"36px",padding:"0 20px",justifyContent:"center",alignItems:"center",gap:"8px",borderRadius:"6px",border:a?"none":"1px solid #D9D9D9",background:a?"var(--Base-Strong, #0B0B0B)":"var(--Base-White, #FFF)",color:a?"#FFF":"var(--Base-Strong, #1E1E1E)",fontSize:"16px",fontWeight:600,cursor:i?"default":"pointer",opacity:i?.5:1,transition:"all 0.15s ease"},onMouseEnter:s=>{!i&&!a&&(s.currentTarget.style.background="#ECEEF2")},onMouseLeave:s=>{!i&&!a&&(s.currentTarget.style.background="var(--Base-White, #FFF)")},children:t})}function j({children:t,htmlFor:n}){return e.jsx("label",{htmlFor:n,style:{display:"block",color:"var(--Base-Strong, #2E3236)",fontSize:"16px",fontStyle:"normal",fontWeight:400,lineHeight:"normal",marginBottom:"6px"},children:t})}function F(t){return e.jsx("input",{...t,style:{width:"100%",padding:"10px 12px",borderRadius:"6px",border:"1px solid #D9D9D9",color:"var(--Base-Strong, #2E3236)",fontSize:"16px",fontStyle:"normal",fontWeight:400,lineHeight:"normal",outline:"none",boxSizing:"border-box",background:"#FFF",transition:"border-color 0.15s ease",...t.style},onFocus:n=>{var r;n.currentTarget.style.borderColor="#808183",(r=t.onFocus)==null||r.call(t,n)},onBlur:n=>{var r;n.currentTarget.style.borderColor="#D9D9D9",(r=t.onBlur)==null||r.call(t,n)}})}exports.DrawerButton=k;exports.DrawerInput=F;exports.DrawerLabel=j;exports.SideDrawer=S;
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),m=require("lucide-react"),w=require("./useMediaQuery.cjs.js");function S({open:t,onClose:n,title:r,subtitle:i,children:x,footer:a,width:l=515,height:y=762,toggleLabel:c,toggleChecked:u,onToggle:h,topOffset:d}){const b=p.useRef(null),o=w.useMediaQuery("(max-width: 640px)"),g=d!=null,f=typeof d=="number"?`${d}px`:d;return p.useEffect(()=>{if(!t)return;const s=v=>{v.key==="Escape"&&(n==null||n())};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[t,n]),t?e.jsxs(e.Fragment,{children:[e.jsx("div",{onClick:n,style:{position:"fixed",inset:0,zIndex:1200,background:"rgba(0, 0, 0, 0.20)"}}),e.jsxs("div",{ref:b,style:{position:"fixed",top:o?0:g?f:"50%",right:0,transform:o||g?"none":"translateY(-50%)",zIndex:1201,display:"flex",width:o?"100vw":l,maxWidth:"100vw",height:o?"100dvh":y,maxHeight:o?"100dvh":g?`calc(100vh - ${f})`:"100vh",padding:"20px",boxSizing:o?"border-box":void 0,flexDirection:"column",alignItems:"flex-start",gap:"20px",borderRadius:o?0:"12px 0 0 12px",background:"#FFF",boxShadow:"648px 0 100px 0 rgba(0, 0, 0, 0.20)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",flexShrink:0},children:[e.jsx("h2",{style:{fontSize:"24px",fontWeight:600,fontStyle:"normal",color:"var(--Grey-3, #252525)",margin:0,lineHeight:"normal"},children:r}),e.jsx("button",{onClick:n,style:{display:"flex",alignItems:"center",justifyContent:"center",width:"28px",height:"28px",border:"none",background:"transparent",color:"var(--Grey-Strong, #808183)",cursor:"pointer",borderRadius:"4px",transition:"background 0.15s ease"},onMouseEnter:s=>{s.currentTarget.style.background="#ECEEF2"},onMouseLeave:s=>{s.currentTarget.style.background="transparent"},children:e.jsx(m.X,{size:20,strokeWidth:2})})]}),e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),(i||c)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:"12px",flexShrink:0},children:[i&&e.jsx("p",{style:{fontSize:"13px",fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"#0B0B0B",margin:0,flex:1},children:i}),c&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",flexShrink:0},children:[e.jsx("button",{onClick:()=>h==null?void 0:h(!u),style:{position:"relative",width:"40px",height:"22px",borderRadius:"11px",border:"none",background:u?"var(--Base-Strong, #0B0B0B)":"var(--Base-Faint, #D9D9D9)",cursor:"pointer",transition:"background 0.2s ease",padding:0,flexShrink:0},children:e.jsx("div",{style:{position:"absolute",top:"2px",left:u?"20px":"2px",width:"18px",height:"18px",borderRadius:"50%",background:"#FFF",transition:"left 0.2s ease",boxShadow:"0 1px 3px rgba(0,0,0,0.15)"}})}),e.jsx("span",{style:{fontSize:"13px",fontWeight:500,color:"var(--Base-Strong, #1E1E1E)",lineHeight:1.4},children:c})]})]}),e.jsx("div",{style:{flex:1,width:"100%",overflowY:"auto",display:"flex",flexDirection:"column",gap:"16px",minHeight:0},children:x}),a&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:"12px",width:"100%",flexShrink:0},children:a})]})]})]}):null}function k({label:t,variant:n="secondary",onClick:r,disabled:i,style:x}){const a=n==="primary";return e.jsx("button",{onClick:r,disabled:i,style:{display:"flex",height:"36px",padding:"0 20px",justifyContent:"center",alignItems:"center",gap:"8px",borderRadius:"6px",border:a?"none":"1px solid #D9D9D9",background:a?"var(--Base-Strong, #0B0B0B)":"var(--Base-White, #FFF)",color:a?"#FFF":"var(--Base-Strong, #1E1E1E)",fontSize:"16px",fontWeight:600,cursor:i?"default":"pointer",opacity:i?.5:1,transition:"all 0.15s ease",...x},onMouseEnter:l=>{!i&&!a&&(l.currentTarget.style.background="#ECEEF2")},onMouseLeave:l=>{!i&&!a&&(l.currentTarget.style.background="var(--Base-White, #FFF)")},children:t})}function j({children:t,htmlFor:n}){return e.jsx("label",{htmlFor:n,style:{display:"block",color:"var(--Base-Strong, #2E3236)",fontSize:"16px",fontStyle:"normal",fontWeight:400,lineHeight:"normal",marginBottom:"6px"},children:t})}function F(t){return e.jsx("input",{...t,style:{width:"100%",padding:"10px 12px",borderRadius:"6px",border:"1px solid #D9D9D9",color:"var(--Base-Strong, #2E3236)",fontSize:"16px",fontStyle:"normal",fontWeight:400,lineHeight:"normal",outline:"none",boxSizing:"border-box",background:"#FFF",transition:"border-color 0.15s ease",...t.style},onFocus:n=>{var r;n.currentTarget.style.borderColor="#808183",(r=t.onFocus)==null||r.call(t,n)},onBlur:n=>{var r;n.currentTarget.style.borderColor="#D9D9D9",(r=t.onBlur)==null||r.call(t,n)}})}exports.DrawerButton=k;exports.DrawerInput=F;exports.DrawerLabel=j;exports.SideDrawer=S;
 //# sourceMappingURL=SideDrawer.cjs.js.map

package/dist/SideDrawer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideDrawer.cjs.js","sources":["../src/components/common/SideDrawer.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\nimport { useMediaQuery } from \"../../utils/useMediaQuery\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n *  - topOffset     number|string Optional top offset (e.g. below navbar)\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n  topOffset,\n}) {\n  const drawerRef = useRef(null);\n  const isPhone = useMediaQuery(\"(max-width: 640px)\");\n  const hasTopOffset = topOffset !== undefined && topOffset !== null;\n  const normalizedTopOffset = typeof topOffset === \"number\" ? `${topOffset}px` : topOffset;\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          // On phones the drawer fills the screen so its content isn't clipped\n          // off the left edge by a fixed width wider than the viewport.\n          top: isPhone ? 0 : hasTopOffset ? normalizedTopOffset : \"50%\",\n          right: 0,\n          transform: isPhone ? \"none\" : hasTopOffset ? \"none\" : \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width: isPhone ? \"100vw\" : width,\n          maxWidth: \"100vw\",\n          height: isPhone ? \"100dvh\" : height,\n          maxHeight: isPhone ? \"100dvh\" : hasTopOffset ? `calc(100vh - ${normalizedTopOffset})` : \"100vh\",\n          padding: \"20px\",\n          // border-box only on phones (full-screen) so the desktop drawer keeps\n          // its original content-box width (515px content + padding).\n          boxSizing: isPhone ? \"border-box\" : undefined,\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: isPhone ? 0 : \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"24px\",\n              fontWeight: 600,\n              fontStyle: \"normal\",\n              color: \"var(--Grey-3, #252525)\",\n              margin: 0,\n              lineHeight: \"normal\",\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  fontStyle: \"normal\",\n                  fontWeight: 400,\n                  lineHeight: \"140%\",\n                  color: \"#0B0B0B\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"16px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * DrawerLabel — form label for use inside SideDrawer.\n *\n * Props:\n *  - children   ReactNode\n *  - htmlFor    string\n */\nexport function DrawerLabel({ children, htmlFor }) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      style={{\n        display: \"block\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        marginBottom: \"6px\",\n      }}\n    >\n      {children}\n    </label>\n  );\n}\n\n/**\n * DrawerInput — text input for use inside SideDrawer.\n *\n * Props:\n *  - All standard <input> props (type, placeholder, value, onChange, etc.)\n */\nexport function DrawerInput(props) {\n  return (\n    <input\n      {...props}\n      style={{\n        width: \"100%\",\n        padding: \"10px 12px\",\n        borderRadius: \"6px\",\n        border: \"1px solid #D9D9D9\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        outline: \"none\",\n        boxSizing: \"border-box\",\n        background: \"#FFF\",\n        transition: \"border-color 0.15s ease\",\n        ...props.style,\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.borderColor = \"#808183\";\n        props.onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.borderColor = \"#D9D9D9\";\n        props.onBlur?.(e);\n      }}\n    />\n  );\n}\n"],"names":["SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","topOffset","drawerRef","useRef","isPhone","useMediaQuery","hasTopOffset","normalizedTopOffset","useEffect","handleKey","e","jsxs","Fragment","jsx","X","DrawerButton","label","variant","onClick","disabled","isPrimary","DrawerLabel","htmlFor","DrawerInput","props","_a"],"mappings":"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"}
+{"version":3,"file":"SideDrawer.cjs.js","sources":["../src/components/common/SideDrawer.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\nimport { useMediaQuery } from \"../../utils/useMediaQuery\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n *  - topOffset     number|string Optional top offset (e.g. below navbar)\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n  topOffset,\n}) {\n  const drawerRef = useRef(null);\n  const isPhone = useMediaQuery(\"(max-width: 640px)\");\n  const hasTopOffset = topOffset !== undefined && topOffset !== null;\n  const normalizedTopOffset = typeof topOffset === \"number\" ? `${topOffset}px` : topOffset;\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          // On phones the drawer fills the screen so its content isn't clipped\n          // off the left edge by a fixed width wider than the viewport.\n          top: isPhone ? 0 : hasTopOffset ? normalizedTopOffset : \"50%\",\n          right: 0,\n          transform: isPhone ? \"none\" : hasTopOffset ? \"none\" : \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width: isPhone ? \"100vw\" : width,\n          maxWidth: \"100vw\",\n          height: isPhone ? \"100dvh\" : height,\n          maxHeight: isPhone ? \"100dvh\" : hasTopOffset ? `calc(100vh - ${normalizedTopOffset})` : \"100vh\",\n          padding: \"20px\",\n          // border-box only on phones (full-screen) so the desktop drawer keeps\n          // its original content-box width (515px content + padding).\n          boxSizing: isPhone ? \"border-box\" : undefined,\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: isPhone ? 0 : \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"24px\",\n              fontWeight: 600,\n              fontStyle: \"normal\",\n              color: \"var(--Grey-3, #252525)\",\n              margin: 0,\n              lineHeight: \"normal\",\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  fontStyle: \"normal\",\n                  fontWeight: 400,\n                  lineHeight: \"140%\",\n                  color: \"#0B0B0B\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n  style,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"16px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n        ...style,\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * DrawerLabel — form label for use inside SideDrawer.\n *\n * Props:\n *  - children   ReactNode\n *  - htmlFor    string\n */\nexport function DrawerLabel({ children, htmlFor }) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      style={{\n        display: \"block\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        marginBottom: \"6px\",\n      }}\n    >\n      {children}\n    </label>\n  );\n}\n\n/**\n * DrawerInput — text input for use inside SideDrawer.\n *\n * Props:\n *  - All standard <input> props (type, placeholder, value, onChange, etc.)\n */\nexport function DrawerInput(props) {\n  return (\n    <input\n      {...props}\n      style={{\n        width: \"100%\",\n        padding: \"10px 12px\",\n        borderRadius: \"6px\",\n        border: \"1px solid #D9D9D9\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        outline: \"none\",\n        boxSizing: \"border-box\",\n        background: \"#FFF\",\n        transition: \"border-color 0.15s ease\",\n        ...props.style,\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.borderColor = \"#808183\";\n        props.onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.borderColor = \"#D9D9D9\";\n        props.onBlur?.(e);\n      }}\n    />\n  );\n}\n"],"names":["SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","topOffset","drawerRef","useRef","isPhone","useMediaQuery","hasTopOffset","normalizedTopOffset","useEffect","handleKey","e","jsxs","Fragment","jsx","X","DrawerButton","label","variant","onClick","disabled","style","isPrimary","DrawerLabel","htmlFor","DrawerInput","props","_a"],"mappings":"mIAuBA,SAAwBA,EAAW,CACjC,KAAAC,EACA,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EAAS,IACT,YAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAG,CACK,MAAAC,EAAYC,SAAO,IAAI,EACvBC,EAAUC,gBAAc,oBAAoB,EAC5CC,EAA0CL,GAAc,KACxDM,EAAsB,OAAON,GAAc,SAAW,GAAGA,CAAS,KAAOA,EAY/E,OATAO,EAAAA,UAAU,IAAM,CACd,GAAI,CAAClB,EAAM,OACL,MAAAmB,EAAaC,GAAM,CACnBA,EAAE,MAAQ,WAAoBnB,GAAA,MAAAA,IAAA,EAE3B,gBAAA,iBAAiB,UAAWkB,CAAS,EACvC,IAAM,SAAS,oBAAoB,UAAWA,CAAS,CAAA,EAC7D,CAACnB,EAAMC,CAAO,CAAC,EAEbD,EAKDqB,EAAA,KAAAC,WAAA,CAAA,SAAA,CAAAC,EAAA,IAAC,MAAA,CACC,QAAStB,EACT,MAAO,CACL,SAAU,QACV,MAAO,EACP,OAAQ,KACR,WAAY,qBACd,CAAA,CACF,EAGAoB,EAAA,KAAC,MAAA,CACC,IAAKT,EACL,MAAO,CACL,SAAU,QAGV,IAAKE,EAAU,EAAIE,EAAeC,EAAsB,MACxD,MAAO,EACP,UAAWH,GAAmBE,EAAT,OAAiC,mBACtD,OAAQ,KACR,QAAS,OACT,MAAOF,EAAU,QAAUR,EAC3B,SAAU,QACV,OAAQQ,EAAU,SAAWP,EAC7B,UAAWO,EAAU,SAAWE,EAAe,gBAAgBC,CAAmB,IAAM,QACxF,QAAS,OAGT,UAAWH,EAAU,aAAe,OACpC,cAAe,SACf,WAAY,aACZ,IAAK,OACL,aAAcA,EAAU,EAAI,gBAC5B,WAAY,OACZ,UAAW,qCACb,EAGA,SAAA,CAAAO,EAAA,KAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,MAAO,OACP,WAAY,CACd,EAEA,SAAA,CAAAE,EAAA,IAAC,KAAA,CACC,MAAO,CACL,SAAU,OACV,WAAY,IACZ,UAAW,SACX,MAAO,yBACP,OAAQ,EACR,WAAY,QACd,EAEC,SAAArB,CAAA,CACH,EACAqB,EAAA,IAAC,SAAA,CACC,QAAStB,EACT,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,OACP,OAAQ,OACR,OAAQ,OACR,WAAY,cACZ,MAAO,8BACP,OAAQ,UACR,aAAc,MACd,WAAY,uBACd,EACA,aAAemB,GAAM,CACjBA,EAAA,cAAc,MAAM,WAAa,SACrC,EACA,aAAeA,GAAM,CACjBA,EAAA,cAAc,MAAM,WAAa,aACrC,EAEA,SAACG,EAAA,IAAAC,IAAA,CAAE,KAAM,GAAI,YAAa,EAAG,CAAA,CAC/B,CAAA,CAAA,CACF,EAGAD,EAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,OAAQ,MACR,WAAY,UACZ,WAAY,CACd,CAAA,CACF,GAGEpB,GAAYK,IACZa,EAAA,KAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,MAAO,OACP,IAAK,OACL,WAAY,CACd,EAEC,SAAA,CACClB,GAAAoB,EAAA,IAAC,IAAA,CACC,MAAO,CACL,SAAU,OACV,UAAW,SACX,WAAY,IACZ,WAAY,OACZ,MAAO,UACP,OAAQ,EACR,KAAM,CACR,EAEC,SAAApB,CAAA,CACH,EAEDK,GACCa,EAAA,KAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,IAAK,MACL,WAAY,CACd,EAGA,SAAA,CAAAE,EAAA,IAAC,SAAA,CACC,QAAS,IAAMb,GAAA,YAAAA,EAAW,CAACD,GAC3B,MAAO,CACL,SAAU,WACV,MAAO,OACP,OAAQ,OACR,aAAc,OACd,OAAQ,OACR,WAAYA,EACR,8BACA,6BACJ,OAAQ,UACR,WAAY,uBACZ,QAAS,EACT,WAAY,CACd,EAEA,SAAAc,EAAA,IAAC,MAAA,CACC,MAAO,CACL,SAAU,WACV,IAAK,MACL,KAAMd,EAAgB,OAAS,MAC/B,MAAO,OACP,OAAQ,OACR,aAAc,MACd,WAAY,OACZ,WAAY,iBACZ,UAAW,4BACb,CAAA,CACF,CAAA,CACF,EACAc,EAAA,IAAC,OAAA,CACC,MAAO,CACL,SAAU,OACV,WAAY,IACZ,MAAO,8BACP,WAAY,GACd,EAEC,SAAAf,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,EAIFe,EAAA,IAAC,MAAA,CACC,MAAO,CACL,KAAM,EACN,MAAO,OACP,UAAW,OACX,QAAS,OACT,cAAe,SACf,IAAK,OACL,UAAW,CACb,EAEC,SAAAnB,CAAA,CACH,EAGCC,GAEGgB,EAAA,KAAAC,WAAA,CAAA,SAAA,CAAAC,EAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,OAAQ,MACR,WAAY,UACZ,WAAY,CACd,CAAA,CACF,EACAA,EAAA,IAAC,MAAA,CACC,MAAO,CACL,QAAS,OACT,WAAY,SACZ,eAAgB,WAChB,IAAK,OACL,MAAO,OACP,WAAY,CACd,EAEC,SAAAlB,CAAA,CACH,CAAA,EACF,CAAA,CAAA,CAEJ,CACF,CAAA,CAAA,EAjOgB,IAmOpB,CAWO,SAASoB,EAAa,CAC3B,MAAAC,EACA,QAAAC,EAAU,YACV,QAAAC,EACA,SAAAC,EACA,MAAAC,CACF,EAAG,CACD,MAAMC,EAAYJ,IAAY,UAG5B,OAAAJ,EAAA,IAAC,SAAA,CACC,QAAAK,EACA,SAAAC,EACA,MAAO,CACL,QAAS,OACT,OAAQ,OACR,QAAS,SACT,eAAgB,SAChB,WAAY,SACZ,IAAK,MACL,aAAc,MACd,OAAQE,EAAY,OAAS,oBAC7B,WAAYA,EACR,8BACA,0BACJ,MAAOA,EAAY,OAAS,8BAC5B,SAAU,OACV,WAAY,IACZ,OAAQF,EAAW,UAAY,UAC/B,QAASA,EAAW,GAAM,EAC1B,WAAY,iBACZ,GAAGC,CACL,EACA,aAAeV,GAAM,CACf,CAACS,GAAY,CAACE,IACdX,EAAA,cAAc,MAAM,WAAa,UAEvC,EACA,aAAeA,GAAM,CACf,CAACS,GAAY,CAACE,IACdX,EAAA,cAAc,MAAM,WAAa,0BAEvC,EAEC,SAAAM,CAAA,CAAA,CAGP,CASO,SAASM,EAAY,CAAE,SAAA5B,EAAU,QAAA6B,GAAW,CAE/C,OAAAV,EAAA,IAAC,QAAA,CACC,QAAAU,EACA,MAAO,CACL,QAAS,QACT,MAAO,8BACP,SAAU,OACV,UAAW,SACX,WAAY,IACZ,WAAY,SACZ,aAAc,KAChB,EAEC,SAAA7B,CAAA,CAAA,CAGP,CAQO,SAAS8B,EAAYC,EAAO,CAE/B,OAAAZ,EAAA,IAAC,QAAA,CACE,GAAGY,EACJ,MAAO,CACL,MAAO,OACP,QAAS,YACT,aAAc,MACd,OAAQ,oBACR,MAAO,8BACP,SAAU,OACV,UAAW,SACX,WAAY,IACZ,WAAY,SACZ,QAAS,OACT,UAAW,aACX,WAAY,OACZ,WAAY,0BACZ,GAAGA,EAAM,KACX,EACA,QAAUf,GAAM,OACZA,EAAA,cAAc,MAAM,YAAc,WACpCgB,EAAAD,EAAM,UAAN,MAAAC,EAAA,KAAAD,EAAgBf,EAClB,EACA,OAASA,GAAM,OACXA,EAAA,cAAc,MAAM,YAAc,WACpCgB,EAAAD,EAAM,SAAN,MAAAC,EAAA,KAAAD,EAAef,EACjB,CAAA,CAAA,CAGN"}

package/dist/SideDrawer.es.js

@@ -1,4 +1,4 @@
-import { jsxs as s, Fragment as g, jsx as n } from "react/jsx-runtime";
+import { jsxs as d, Fragment as y, jsx as n } from "react/jsx-runtime";
 import { useRef as S, useEffect as k } from "react";
 import { X as w } from "lucide-react";
 import { u as E } from "./useMediaQuery.es.js";
@@ -7,24 +7,24 @@ function I({
   onClose: t,
   title: r,
   subtitle: i,
-  children: o,
-  footer: l,
-  width: y = 515,
+  children: x,
+  footer: o,
+  width: s = 515,
   height: b = 762,
-  toggleLabel: x,
-  toggleChecked: u,
-  onToggle: h,
+  toggleLabel: u,
+  toggleChecked: h,
+  onToggle: f,
   topOffset: c
 }) {
-  const m = S(null), a = E("(max-width: 640px)"), f = c != null, p = typeof c == "number" ? `${c}px` : c;
+  const m = S(null), a = E("(max-width: 640px)"), p = c != null, g = typeof c == "number" ? `${c}px` : c;
   return k(() => {
     if (!e)
       return;
-    const d = (v) => {
+    const l = (v) => {
       v.key === "Escape" && (t == null || t());
     };
-    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
-  }, [e, t]), e ? /* @__PURE__ */ s(g, { children: [
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [e, t]), e ? /* @__PURE__ */ d(y, { children: [
     /* @__PURE__ */ n(
       "div",
       {
@@ -37,7 +37,7 @@ function I({
         }
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ d(
       "div",
       {
         ref: m,
@@ -45,15 +45,15 @@ function I({
           position: "fixed",
           // On phones the drawer fills the screen so its content isn't clipped
           // off the left edge by a fixed width wider than the viewport.
-          top: a ? 0 : f ? p : "50%",
+          top: a ? 0 : p ? g : "50%",
           right: 0,
-          transform: a || f ? "none" : "translateY(-50%)",
+          transform: a || p ? "none" : "translateY(-50%)",
           zIndex: 1201,
           display: "flex",
-          width: a ? "100vw" : y,
+          width: a ? "100vw" : s,
           maxWidth: "100vw",
           height: a ? "100dvh" : b,
-          maxHeight: a ? "100dvh" : f ? `calc(100vh - ${p})` : "100vh",
+          maxHeight: a ? "100dvh" : p ? `calc(100vh - ${g})` : "100vh",
           padding: "20px",
           // border-box only on phones (full-screen) so the desktop drawer keeps
           // its original content-box width (515px content + padding).
@@ -66,7 +66,7 @@ function I({
           boxShadow: "648px 0 100px 0 rgba(0, 0, 0, 0.20)"
         },
         children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ d(
             "div",
             {
               style: {
@@ -108,11 +108,11 @@ function I({
                       borderRadius: "4px",
                       transition: "background 0.15s ease"
                     },
-                    onMouseEnter: (d) => {
-                      d.currentTarget.style.background = "#ECEEF2";
+                    onMouseEnter: (l) => {
+                      l.currentTarget.style.background = "#ECEEF2";
                     },
-                    onMouseLeave: (d) => {
-                      d.currentTarget.style.background = "transparent";
+                    onMouseLeave: (l) => {
+                      l.currentTarget.style.background = "transparent";
                     },
                     children: /* @__PURE__ */ n(w, { size: 20, strokeWidth: 2 })
                   }
@@ -131,7 +131,7 @@ function I({
               }
             }
           ),
-          (i || x) && /* @__PURE__ */ s(
+          (i || u) && /* @__PURE__ */ d(
             "div",
             {
               style: {
@@ -158,7 +158,7 @@ function I({
                     children: i
                   }
                 ),
-                x && /* @__PURE__ */ s(
+                u && /* @__PURE__ */ d(
                   "div",
                   {
                     style: {
@@ -171,14 +171,14 @@ function I({
                       /* @__PURE__ */ n(
                         "button",
                         {
-                          onClick: () => h == null ? void 0 : h(!u),
+                          onClick: () => f == null ? void 0 : f(!h),
                           style: {
                             position: "relative",
                             width: "40px",
                             height: "22px",
                             borderRadius: "11px",
                             border: "none",
-                            background: u ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-Faint, #D9D9D9)",
+                            background: h ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-Faint, #D9D9D9)",
                             cursor: "pointer",
                             transition: "background 0.2s ease",
                             padding: 0,
@@ -190,7 +190,7 @@ function I({
                               style: {
                                 position: "absolute",
                                 top: "2px",
-                                left: u ? "20px" : "2px",
+                                left: h ? "20px" : "2px",
                                 width: "18px",
                                 height: "18px",
                                 borderRadius: "50%",
@@ -211,7 +211,7 @@ function I({
                             color: "var(--Base-Strong, #1E1E1E)",
                             lineHeight: 1.4
                           },
-                          children: x
+                          children: u
                         }
                       )
                     ]
@@ -232,10 +232,10 @@ function I({
                 gap: "16px",
                 minHeight: 0
               },
-              children: o
+              children: x
             }
           ),
-          l && /* @__PURE__ */ s(g, { children: [
+          o && /* @__PURE__ */ d(y, { children: [
             /* @__PURE__ */ n(
               "div",
               {
@@ -258,7 +258,7 @@ function I({
                   width: "100%",
                   flexShrink: 0
                 },
-                children: l
+                children: o
               }
             )
           ] })
@@ -271,7 +271,8 @@ function W({
   label: e,
   variant: t = "secondary",
   onClick: r,
-  disabled: i
+  disabled: i,
+  style: x
 }) {
   const o = t === "primary";
   return /* @__PURE__ */ n(
@@ -294,13 +295,14 @@ function W({
         fontWeight: 600,
         cursor: i ? "default" : "pointer",
         opacity: i ? 0.5 : 1,
-        transition: "all 0.15s ease"
+        transition: "all 0.15s ease",
+        ...x
       },
-      onMouseEnter: (l) => {
-        !i && !o && (l.currentTarget.style.background = "#ECEEF2");
+      onMouseEnter: (s) => {
+        !i && !o && (s.currentTarget.style.background = "#ECEEF2");
       },
-      onMouseLeave: (l) => {
-        !i && !o && (l.currentTarget.style.background = "var(--Base-White, #FFF)");
+      onMouseLeave: (s) => {
+        !i && !o && (s.currentTarget.style.background = "var(--Base-White, #FFF)");
       },
       children: e
     }

package/dist/SideDrawer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideDrawer.es.js","sources":["../src/components/common/SideDrawer.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\nimport { useMediaQuery } from \"../../utils/useMediaQuery\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n *  - topOffset     number|string Optional top offset (e.g. below navbar)\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n  topOffset,\n}) {\n  const drawerRef = useRef(null);\n  const isPhone = useMediaQuery(\"(max-width: 640px)\");\n  const hasTopOffset = topOffset !== undefined && topOffset !== null;\n  const normalizedTopOffset = typeof topOffset === \"number\" ? `${topOffset}px` : topOffset;\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          // On phones the drawer fills the screen so its content isn't clipped\n          // off the left edge by a fixed width wider than the viewport.\n          top: isPhone ? 0 : hasTopOffset ? normalizedTopOffset : \"50%\",\n          right: 0,\n          transform: isPhone ? \"none\" : hasTopOffset ? \"none\" : \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width: isPhone ? \"100vw\" : width,\n          maxWidth: \"100vw\",\n          height: isPhone ? \"100dvh\" : height,\n          maxHeight: isPhone ? \"100dvh\" : hasTopOffset ? `calc(100vh - ${normalizedTopOffset})` : \"100vh\",\n          padding: \"20px\",\n          // border-box only on phones (full-screen) so the desktop drawer keeps\n          // its original content-box width (515px content + padding).\n          boxSizing: isPhone ? \"border-box\" : undefined,\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: isPhone ? 0 : \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"24px\",\n              fontWeight: 600,\n              fontStyle: \"normal\",\n              color: \"var(--Grey-3, #252525)\",\n              margin: 0,\n              lineHeight: \"normal\",\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  fontStyle: \"normal\",\n                  fontWeight: 400,\n                  lineHeight: \"140%\",\n                  color: \"#0B0B0B\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"16px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * DrawerLabel — form label for use inside SideDrawer.\n *\n * Props:\n *  - children   ReactNode\n *  - htmlFor    string\n */\nexport function DrawerLabel({ children, htmlFor }) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      style={{\n        display: \"block\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        marginBottom: \"6px\",\n      }}\n    >\n      {children}\n    </label>\n  );\n}\n\n/**\n * DrawerInput — text input for use inside SideDrawer.\n *\n * Props:\n *  - All standard <input> props (type, placeholder, value, onChange, etc.)\n */\nexport function DrawerInput(props) {\n  return (\n    <input\n      {...props}\n      style={{\n        width: \"100%\",\n        padding: \"10px 12px\",\n        borderRadius: \"6px\",\n        border: \"1px solid #D9D9D9\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        outline: \"none\",\n        boxSizing: \"border-box\",\n        background: \"#FFF\",\n        transition: \"border-color 0.15s ease\",\n        ...props.style,\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.borderColor = \"#808183\";\n        props.onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.borderColor = \"#D9D9D9\";\n        props.onBlur?.(e);\n      }}\n    />\n  );\n}\n"],"names":["SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","topOffset","drawerRef","useRef","isPhone","useMediaQuery","hasTopOffset","normalizedTopOffset","useEffect","handleKey","e","jsxs","Fragment","jsx","X","DrawerButton","label","variant","onClick","disabled","isPrimary","DrawerLabel","htmlFor","DrawerInput","props","_a"],"mappings":"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"}
+{"version":3,"file":"SideDrawer.es.js","sources":["../src/components/common/SideDrawer.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\nimport { useMediaQuery } from \"../../utils/useMediaQuery\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n *  - topOffset     number|string Optional top offset (e.g. below navbar)\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n  topOffset,\n}) {\n  const drawerRef = useRef(null);\n  const isPhone = useMediaQuery(\"(max-width: 640px)\");\n  const hasTopOffset = topOffset !== undefined && topOffset !== null;\n  const normalizedTopOffset = typeof topOffset === \"number\" ? `${topOffset}px` : topOffset;\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          // On phones the drawer fills the screen so its content isn't clipped\n          // off the left edge by a fixed width wider than the viewport.\n          top: isPhone ? 0 : hasTopOffset ? normalizedTopOffset : \"50%\",\n          right: 0,\n          transform: isPhone ? \"none\" : hasTopOffset ? \"none\" : \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width: isPhone ? \"100vw\" : width,\n          maxWidth: \"100vw\",\n          height: isPhone ? \"100dvh\" : height,\n          maxHeight: isPhone ? \"100dvh\" : hasTopOffset ? `calc(100vh - ${normalizedTopOffset})` : \"100vh\",\n          padding: \"20px\",\n          // border-box only on phones (full-screen) so the desktop drawer keeps\n          // its original content-box width (515px content + padding).\n          boxSizing: isPhone ? \"border-box\" : undefined,\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: isPhone ? 0 : \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"24px\",\n              fontWeight: 600,\n              fontStyle: \"normal\",\n              color: \"var(--Grey-3, #252525)\",\n              margin: 0,\n              lineHeight: \"normal\",\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  fontStyle: \"normal\",\n                  fontWeight: 400,\n                  lineHeight: \"140%\",\n                  color: \"#0B0B0B\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n  style,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"16px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n        ...style,\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * DrawerLabel — form label for use inside SideDrawer.\n *\n * Props:\n *  - children   ReactNode\n *  - htmlFor    string\n */\nexport function DrawerLabel({ children, htmlFor }) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      style={{\n        display: \"block\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        marginBottom: \"6px\",\n      }}\n    >\n      {children}\n    </label>\n  );\n}\n\n/**\n * DrawerInput — text input for use inside SideDrawer.\n *\n * Props:\n *  - All standard <input> props (type, placeholder, value, onChange, etc.)\n */\nexport function DrawerInput(props) {\n  return (\n    <input\n      {...props}\n      style={{\n        width: \"100%\",\n        padding: \"10px 12px\",\n        borderRadius: \"6px\",\n        border: \"1px solid #D9D9D9\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        outline: \"none\",\n        boxSizing: \"border-box\",\n        background: \"#FFF\",\n        transition: \"border-color 0.15s ease\",\n        ...props.style,\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.borderColor = \"#808183\";\n        props.onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.borderColor = \"#D9D9D9\";\n        props.onBlur?.(e);\n      }}\n    />\n  );\n}\n"],"names":["SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","topOffset","drawerRef","useRef","isPhone","useMediaQuery","hasTopOffset","normalizedTopOffset","useEffect","handleKey","e","jsxs","Fragment","jsx","X","DrawerButton","label","variant","onClick","disabled","style","isPrimary","DrawerLabel","htmlFor","DrawerInput","props","_a"],"mappings":"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"}