@graphty/compact-mantine 0.4.0 → 0.5.1

package/README.md

@@ -1 +1,198 @@
+# @graphty/compact-mantine
 
+[![npm version](https://img.shields.io/npm/v/@graphty/compact-mantine.svg)](https://www.npmjs.com/package/@graphty/compact-mantine)
+[![Storybook](https://img.shields.io/badge/storybook-examples-ff4785)](https://graphty.app/storybook/compact-mantine/)
+
+A Mantine theme and component library optimized for dense, compact UIs. All components default to compact sizing automatically using Mantine's `defaultProps` system.
+
+## Features
+
+- **Compact by Default**: All components render at compact size without explicit props
+- **Mantine-Idiomatic**: Uses `defaultProps` with `size="sm"` as default
+- **Global Token Overrides**: Smaller font sizes, tighter spacing, compact radii
+- **Visual Styling**: Borderless inputs, semantic color backgrounds
+- **Fully Customizable**: Spread the theme to add your own customizations
+
+## Installation
+
+```bash
+npm install @graphty/compact-mantine @mantine/core @mantine/hooks
+```
+
+## Quick Start
+
+```tsx
+import { MantineProvider, TextInput, Button } from '@mantine/core';
+import { compactTheme } from '@graphty/compact-mantine';
+
+function App() {
+    return (
+        <MantineProvider theme={compactTheme}>
+            {/* Components use compact sizing automatically */}
+            <TextInput label="Name" />
+            <Button>Submit</Button>
+        </MantineProvider>
+    );
+}
+```
+
+## Usage
+
+### Default Compact Sizing
+
+No size prop needed - components render compact by default:
+
+```tsx
+// All of these use compact sizing automatically
+<TextInput label="Name" />
+<NumberInput label="Amount" />
+<Select label="Country" data={countries} />
+<Button>Submit</Button>
+<Checkbox label="I agree" />
+<Switch label="Enable notifications" />
+```
+
+### Override to Larger Sizes
+
+When you need larger components, use the standard Mantine size prop:
+
+```tsx
+// Override to larger sizes when needed
+<TextInput size="md" label="Medium Input" />
+<TextInput size="lg" label="Large Input" />
+<Button size="lg">Large Button</Button>
+```
+
+### Theme Customization
+
+Spread the compact theme to add your own customizations:
+
+```tsx
+import { MantineProvider } from '@mantine/core';
+import { compactTheme } from '@graphty/compact-mantine';
+
+const customTheme = {
+    ...compactTheme,
+    primaryColor: 'teal',
+    other: {
+        myCustomProperty: true,
+    },
+};
+
+function App() {
+    return (
+        <MantineProvider theme={customTheme}>
+            {/* Still compact by default with your customizations */}
+            <Button>Teal Button</Button>
+        </MantineProvider>
+    );
+}
+```
+
+### Compact Region in Larger UI
+
+Use nested `MantineProvider` to create compact regions within a regular-sized UI:
+
+```tsx
+import { MantineProvider, TextInput, Button } from '@mantine/core';
+import { compactTheme } from '@graphty/compact-mantine';
+
+function App() {
+    return (
+        <MantineProvider>
+            {/* Regular Mantine UI */}
+            <TextInput label="Regular Size" />
+
+            {/* Compact region */}
+            <MantineProvider theme={compactTheme}>
+                <div className="settings-panel">
+                    <TextInput label="Compact Input" />
+                    <Button>Compact Button</Button>
+                </div>
+            </MantineProvider>
+        </MantineProvider>
+    );
+}
+```
+
+## Global Token Overrides
+
+The compact theme overrides Mantine's global tokens:
+
+| Token | Values |
+|-------|--------|
+| **fontSizes** | xs=10px, sm=11px, md=13px, lg=14px, xl=16px |
+| **spacing** | xs=4px, sm=6px, md=8px, lg=12px, xl=16px |
+| **radius** | xs=2px, sm=4px, md=6px, lg=8px, xl=12px |
+
+## Exports
+
+### Theme
+
+```tsx
+import { compactTheme, compactColors, compactDarkColors } from '@graphty/compact-mantine';
+```
+
+- `compactTheme` - Complete Mantine theme with compact defaults
+- `compactColors` - Color palette including dark colors
+- `compactDarkColors` - Dark color palette array
+
+### Components
+
+```tsx
+import {
+    CompactColorInput,
+    ControlGroup,
+    ControlSection,
+    ControlSubGroup,
+    EffectToggle,
+    GradientEditor,
+    Popout,
+    PopoutManager,
+    StatRow,
+    StyleNumberInput,
+    StyleSelect,
+} from '@graphty/compact-mantine';
+```
+
+### Hooks
+
+```tsx
+import { useActualColorScheme } from '@graphty/compact-mantine';
+```
+
+## Affected Components (43 total)
+
+### Input Components (14)
+TextInput, NumberInput, Select, Textarea, PasswordInput, Autocomplete, MultiSelect, TagsInput, PillsInput, FileInput, JsonInput, ColorInput, NativeSelect, InputWrapper
+
+### Button Components (3)
+Button, ActionIcon, CloseButton
+
+### Control Components (6)
+Switch, Checkbox, Radio, Slider, RangeSlider, SegmentedControl
+
+### Display Components (7)
+Badge, Text, Avatar, ThemeIcon, Indicator, Kbd, Pill
+
+### Navigation Components (6)
+Tabs, NavLink, Pagination, Stepper, Anchor, Burger
+
+### Feedback Components (3)
+Loader, Progress, RingProgress
+
+### Overlay Components (4)
+Menu, Tooltip, Popover, HoverCard
+
+## Migration from size="compact"
+
+If you're migrating from the previous `size="compact"` pattern:
+
+1. Remove all `size="compact"` props - components are now compact by default
+2. Add `size="md"` or `size="lg"` where you previously relied on Mantine's default sizing
+
+See the [Migration Guide](./stories/docs/Migration.mdx) for detailed instructions.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@mantine/core"),r=require("react/jsx-runtime"),G=require("@mantine/hooks"),R=require("lucide-react"),i=require("react"),ye=require("react-dom"),ue=["#d5d7da","#a3a8b1","#7a828e","#5f6873","#48525c","#374047","#2a3035","#1f2428","#161b22","#0d1117"],pe={dark:ue},_e={Button:o.Button.extend({vars:(t,e)=>e.size==="compact"?{root:{"--button-height":"24px","--button-fz":"11px","--button-padding-x":"8px"}}:{root:{}}}),ActionIcon:o.ActionIcon.extend({vars:(t,e)=>e.size==="compact"?{root:{"--ai-size":"24px"}}:{root:{}}}),CloseButton:o.CloseButton.extend({defaultProps:{size:"compact"},vars:(t,e)=>e.size==="compact"?{root:{"--cb-size":"16px","--cb-icon-size":"12px"}}:{root:{}}})},je={SegmentedControl:o.SegmentedControl.extend({vars:(t,e)=>e.size==="compact"?{root:{"--sc-font-size":"10px","--sc-padding":"4px 8px"}}:{root:{}}}),Checkbox:o.Checkbox.extend({vars:(t,e)=>e.size==="compact"?{root:{"--checkbox-size":"16px"}}:{root:{}},styles:(t,e)=>e.size==="compact"?{label:{fontSize:11}}:{}}),Switch:o.Switch.extend({vars:(t,e)=>e.size==="compact"?{root:{"--switch-height":"16px","--switch-width":"28px","--switch-thumb-size":"12px","--switch-track-label-padding":"2px","--switch-label-font-size":"5px"}}:{root:{}},styles:(t,e)=>e.size==="compact"?{label:{fontSize:11}}:{}}),Slider:o.Slider.extend({vars:(t,e)=>e.size==="compact"?{root:{"--slider-size":"4px","--slider-thumb-size":"12px"}}:{root:{}},styles:(t,e)=>e.size==="compact"?{markLabel:{fontSize:10,marginTop:2}}:{}}),Radio:o.Radio.extend({vars:(t,e)=>e.size==="compact"?{root:{"--radio-size":"16px","--radio-icon-size":"6px"}}:{root:{}},styles:(t,e)=>e.size==="compact"?{label:{fontSize:11}}:{}}),RangeSlider:o.RangeSlider.extend({vars:(t,e)=>e.size==="compact"?{root:{"--slider-size":"4px","--slider-thumb-size":"12px"}}:{root:{}},styles:(t,e)=>e.size==="compact"?{markLabel:{fontSize:10,marginTop:2}}:{}})},Ie={Text:o.Text.extend({vars:(t,e)=>e.size==="compact"?{root:{"--text-fz":"11px","--text-lh":"1.2"}}:{root:{}}}),Badge:o.Badge.extend({vars:(t,e)=>e.size==="compact"?{root:{"--badge-height":"14px","--badge-fz":"9px","--badge-padding-x":"4px"}}:{root:{}}}),Pill:o.Pill.extend({vars:(t,e)=>e.size==="compact"?{root:{"--pill-height":"16px","--pill-fz":"10px"}}:{root:{}}}),Avatar:o.Avatar.extend({vars:(t,e)=>e.size==="compact"?{root:{"--avatar-size":"24px"}}:{root:{}}}),ThemeIcon:o.ThemeIcon.extend({vars:(t,e)=>e.size==="compact"?{root:{"--ti-size":"24px"}}:{root:{}}}),Indicator:o.Indicator.extend({vars:(t,e)=>e.size==="compact"?{root:{"--indicator-size":"8px"}}:{root:{}}}),Kbd:o.Kbd.extend({vars:(t,e)=>e.size==="compact"?{root:{"--kbd-fz":"10px","--kbd-padding":"2px 4px"}}:{root:{}}})},ke={Loader:o.Loader.extend({vars:(t,e)=>e.size==="compact"?{root:{"--loader-size":"18px"}}:{root:{}}}),Progress:o.Progress.extend({vars:(t,e)=>e.size==="compact"?{root:{"--progress-size":"4px"}}:{root:{}},styles:(t,e)=>e.size==="compact"?{label:{fontSize:9}}:{}}),RingProgress:o.RingProgress.extend({vars:()=>({root:{}})})},K=1e3,L=1100,de=8,Be=4,X={root:{},wrapper:{"--input-size":"24px","--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"}},k={label:{fontSize:11,color:"var(--mantine-color-dimmed)",marginBottom:1,lineHeight:1.2},input:{paddingLeft:8,paddingRight:8,border:"none"}},W={dropdown:{padding:4,border:"none",boxShadow:"var(--mantine-shadow-md)"},option:{fontSize:11,padding:"4px 8px",borderRadius:4},options:{},groupLabel:{fontSize:10,padding:"4px 8px"},empty:{fontSize:11,padding:"8px"}},Ae={TextInput:o.TextInput.extend({vars:(t,e)=>e.size==="compact"?X:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?k:{}}),NumberInput:o.NumberInput.extend({vars:(t,e)=>e.size==="compact"?{root:{},wrapper:{"--input-size":"24px","--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none","--input-right-section-width":"24px"},controls:{"--ni-chevron-size":"10px"}}:{root:{},wrapper:{},controls:{}},styles:(t,e)=>e.size==="compact"?{...k,control:{borderColor:"transparent"}}:{}}),Select:o.Select.extend({defaultProps:{comboboxProps:{zIndex:L}},vars:(t,e)=>e.size==="compact"?X:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?{...k,...W}:{}}),Textarea:o.Textarea.extend({vars:(t,e)=>e.size==="compact"?{root:{},wrapper:{"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"}}:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?k:{}}),PasswordInput:o.PasswordInput.extend({vars:(t,e)=>e.size==="compact"?X:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?{...k,innerInput:{paddingLeft:8,paddingRight:8}}:{}}),Autocomplete:o.Autocomplete.extend({defaultProps:{comboboxProps:{zIndex:L}},vars:(t,e)=>e.size==="compact"?X:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?{...k,...W}:{}}),ColorInput:o.ColorInput.extend({defaultProps:{popoverProps:{zIndex:L}},styles:(t,e)=>e.size==="compact"?{...k,wrapper:{"--input-size":"24px","--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"}}:{}}),MultiSelect:o.MultiSelect.extend({defaultProps:{comboboxProps:{zIndex:L}},vars:(t,e)=>e.size==="compact"?{root:{},wrapper:{"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none","--input-size":"24px","--combobox-chevron-size":"12px"}}:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?{...k,...W,input:{...k.input,minHeight:24,height:"auto",display:"flex",alignItems:"center",paddingTop:4,paddingBottom:4},inputField:{minWidth:60,flexBasis:60},pillsList:{columnGap:4,rowGap:2},pill:{margin:0,paddingTop:2,paddingBottom:2}}:{}}),TagsInput:o.TagsInput.extend({defaultProps:{comboboxProps:{zIndex:L}},vars:(t,e)=>e.size==="compact"?{root:{},wrapper:{"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"}}:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?{...k,...W,input:{...k.input,minHeight:24,height:"auto",display:"flex",alignItems:"center",paddingTop:4,paddingBottom:4},inputField:{minWidth:30,flexBasis:30},pillsList:{columnGap:4,rowGap:2},pill:{margin:0,paddingTop:2,paddingBottom:2}}:{}}),PillsInput:o.PillsInput.extend({vars:(t,e)=>e.size==="compact"?{root:{},wrapper:{"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"}}:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?{...k,input:{...k.input,minHeight:24,height:"auto",display:"flex",alignItems:"center",paddingTop:4,paddingBottom:4},inputField:{minWidth:30,flexBasis:30},pillsList:{columnGap:4,rowGap:2},pill:{margin:0,paddingTop:2,paddingBottom:2}}:{}}),FileInput:o.FileInput.extend({vars:(t,e)=>e.size==="compact"?X:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?k:{}}),JsonInput:o.JsonInput.extend({vars:(t,e)=>e.size==="compact"?{root:{},wrapper:{"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"}}:{root:{},wrapper:{}},styles:(t,e)=>e.size==="compact"?k:{}}),InputClearButton:o.InputClearButton.extend({defaultProps:{size:"compact"},vars:(t,e)=>e.size==="compact"?{root:{"--cb-size":"16px","--cb-icon-size":"12px"}}:{root:{}}})},Ee={Anchor:o.Anchor.extend({styles:(t,e)=>e.size==="compact"?{root:{fontSize:11}}:{}}),Burger:o.Burger.extend({vars:(t,e)=>e.size==="compact"?{root:{"--burger-size":"18px","--burger-line-size":"2px"}}:{root:{}}}),NavLink:o.NavLink.extend({styles:(t,e)=>e.variant==="compact"?{root:{fontSize:11,minHeight:28},label:{fontSize:11}}:{}}),Pagination:o.Pagination.extend({vars:(t,e)=>e.size==="compact"?{root:{"--pagination-control-size":"24px","--pagination-control-fz":"11px"}}:{root:{}}}),Stepper:o.Stepper.extend({vars:(t,e)=>e.size==="compact"?{root:{"--stepper-icon-size":"24px","--stepper-fz":"11px","--stepper-spacing":"8px"}}:{root:{}}}),Tabs:o.Tabs.extend({styles:(t,e)=>e.variant==="compact"?{tab:{fontSize:11,padding:"6px 10px"}}:{}})},Re={Menu:o.Menu.extend({defaultProps:{zIndex:L}}),Tooltip:o.Tooltip.extend({defaultProps:{zIndex:L}}),Popover:o.Popover.extend({defaultProps:{zIndex:L}}),HoverCard:o.HoverCard.extend({defaultProps:{zIndex:L}})},Oe=o.createTheme({colors:pe,components:{...Ae,..._e,...je,...Ie,...ke,...Ee,...Re}}),De=["#5B8FF9","#FF6B6B","#61D095","#F7B731","#9B59B6"],fe=["#5B8FF9FF","#FF6B6BFF","#61D095FF","#F7B731FF","#9B59B6FF","#5B8FF980","#FF6B6B80","#61D09580","#F7B73180","#9B59B680"],xe="#888888",J=255,Q=100;function ee(t){return Math.round(parseInt(t,16)/J*Q)}function te(t){return Math.round(t/Q*J).toString(16).padStart(2,"0")}function Fe(t){let e=t.replace("#","");e.length===3?e=`${e.split("").map(n=>n+n).join("")}ff`:e.length===4?e=e.split("").map(n=>n+n).join(""):e.length===6&&(e=`${e}ff`);const s=`#${e.slice(0,6)}`,a=e.slice(6,8),c=ee(a);return{hex:s,opacity:c}}function Le(t,e){const s=t.replace("#",""),a=te(e);return`#${s}${a}`}function Ge(t){return/^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)}function He({color:t,defaultColor:e,opacity:s,defaultOpacity:a=100,onColorChange:c,onOpacityChange:n,label:l,showOpacity:p=!0}){const[g,z]=G.useUncontrolled({value:t,defaultValue:void 0,finalValue:void 0,onChange:c}),[C,b]=G.useUncontrolled({value:s,defaultValue:void 0,finalValue:void 0,onChange:n}),d=g===void 0,m=C===void 0,B=d&&(!p||m),u=g??e,v=C??a,[S,_]=i.useState(!1),[E,j]=i.useState(u.replace("#","").toUpperCase()),[O,H]=i.useState(v);i.useEffect(()=>{j(u.replace("#","").toUpperCase())},[u]),i.useEffect(()=>{H(v)},[v]);const $=x=>{if(x.length===9){const A=x.slice(0,7).toUpperCase(),I=x.slice(7,9),w=ee(I);z(A),p&&b(w)}else z(x.toUpperCase())},f=()=>{const x=te(v);return`${u}${x}`.toUpperCase()},h=x=>{j(x.currentTarget.value.toUpperCase())},P=()=>{let x=E.toUpperCase();x&&!x.startsWith("#")&&(x=`#${x}`),/^#[0-9A-F]{6}$/i.test(x)&&x!==u?z(x):j(u.replace("#","").toUpperCase())},T=x=>{H(x)},D=()=>{const x=typeof O=="string"?parseFloat(O):O;if(isNaN(x))H(v);else{const A=Math.min(100,Math.max(0,x));A!==v&&b(A)}},M=()=>{z(void 0),p&&b(void 0)},F=r.jsxs(o.Group,{gap:4,wrap:"nowrap",children:[r.jsxs(o.Group,{gap:0,children:[r.jsxs(o.Popover,{opened:S,onChange:_,position:"bottom-start",shadow:"md",children:[r.jsx(o.Popover.Target,{children:r.jsx(o.ActionIcon,{variant:"filled",size:24,radius:0,style:{backgroundColor:"var(--mantine-color-default)",borderRadius:"4px 0 0 4px"},onClick:()=>{_(x=>!x)},"aria-label":"Color swatch",children:r.jsx(o.ColorSwatch,{color:u,size:14,radius:2,style:{border:"1px solid var(--mantine-color-default-border)"}})})}),r.jsx(o.Popover.Dropdown,{p:"xs",children:r.jsx(o.ColorPicker,{format:"hexa",value:f(),onChange:$,swatches:[...fe]})})]}),r.jsx(o.TextInput,{size:"compact",value:E,onChange:h,onBlur:P,"aria-label":"Color hex value","data-is-default":d?"true":"false",w:72,styles:{input:{borderRadius:p?0:"0 4px 4px 0",fontFamily:"monospace",textTransform:"uppercase",...d?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}}),p&&r.jsxs(r.Fragment,{children:[r.jsx(o.Box,{style:{width:1,height:24,backgroundColor:"var(--mantine-color-default-border)"}}),r.jsx(o.NumberInput,{size:"compact",value:O,onChange:T,onBlur:D,min:0,max:100,hideControls:!0,suffix:"%","aria-label":"Opacity","data-is-default":m?"true":"false",w:54,styles:{input:{borderRadius:"0 4px 4px 0",textAlign:"right",...m?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}})]})]}),!B&&r.jsx(o.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${l??"color"} to default`,onClick:M,children:r.jsx(R.X,{size:12})})]});return l?r.jsxs(o.Stack,{gap:0,children:[r.jsx(o.Text,{size:"xs",c:"dimmed",mb:1,lh:1.2,children:l}),F]}):F}function Ne({label:t,actions:e,children:s}){return r.jsxs(o.Box,{children:[r.jsx(o.Divider,{color:"gray.7",mt:8,mb:0}),r.jsxs(o.Group,{justify:"space-between",py:8,children:[r.jsx(o.Text,{size:"xs",fw:500,lh:1.2,children:t}),e&&r.jsx(o.Group,{gap:4,children:e})]}),r.jsx(o.Stack,{gap:0,children:s})]})}function Me({label:t,defaultOpen:e=!0,children:s,hasConfiguredValues:a=!1}){const[c,{toggle:n}]=G.useDisclosure(e);return r.jsxs(o.Box,{children:[r.jsx(o.Divider,{color:"gray.7",mt:8,mb:0}),r.jsx(o.Group,{justify:"space-between",py:8,style:{cursor:"pointer"},onClick:n,children:r.jsxs(o.Group,{gap:4,children:[r.jsx(o.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":c?`Collapse ${t}`:`Expand ${t}`,children:c?r.jsx(R.ChevronDown,{size:12}):r.jsx(R.ChevronRight,{size:12})}),r.jsx(o.Text,{size:"xs",fw:500,lh:1.2,children:t}),a&&r.jsx(o.Box,{"aria-label":`${t} has configured values`,style:{width:6,height:6,borderRadius:"50%",backgroundColor:"var(--mantine-color-blue-5)",marginLeft:4}})]})}),r.jsx(o.Collapse,{in:c,children:r.jsx(o.Stack,{gap:0,children:s})})]})}function Ue({label:t,defaultOpen:e=!1,children:s}){const[a,{toggle:c}]=G.useDisclosure(e);return r.jsxs(o.Box,{children:[r.jsxs(o.Group,{gap:4,py:4,style:{cursor:"pointer"},onClick:c,children:[r.jsx(o.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":a?`Collapse ${t}`:`Expand ${t}`,children:a?r.jsx(R.ChevronDown,{size:10}):r.jsx(R.ChevronRight,{size:10})}),r.jsx(o.Text,{size:"xs",c:"dimmed",lh:1.2,children:t})]}),a&&r.jsx(o.Box,{pl:"md",children:r.jsx(o.Stack,{gap:4,children:s})})]})}function $e({label:t,checked:e,defaultChecked:s,onChange:a,children:c}){const[n,l]=G.useUncontrolled({value:e,defaultValue:s,finalValue:!1,onChange:a});return r.jsxs(o.Stack,{gap:4,children:[r.jsx(o.Checkbox,{size:"compact",label:t,checked:n,onChange:p=>{l(p.currentTarget.checked)}}),n&&r.jsx(o.Box,{"data-testid":"effect-toggle-children",pl:"md",children:r.jsx(o.Stack,{gap:4,children:c})})]})}function Ve(){return crypto.randomUUID().slice(0,8)}function Z(t,e){return{id:Ve(),offset:t,color:e}}function me(){return[Z(0,"#6366F1"),Z(1,"#06B6D4")]}function Xe({stops:t,defaultStops:e,direction:s,defaultDirection:a=0,showDirection:c=!0,onChange:n}){const[l,p]=G.useUncontrolled({value:t,defaultValue:e,finalValue:me(),onChange:u=>n==null?void 0:n(u,g)}),[g,z]=G.useUncontrolled({value:s,defaultValue:a,finalValue:0,onChange:u=>n==null?void 0:n(l,u)}),C=(u,v)=>{const S=[...l];S[u]={...S[u],color:v},p(S),n==null||n(S,g)},b=(u,v)=>{const S=[...l];S[u]={...S[u],offset:v/100},p(S),n==null||n(S,g)},d=u=>{z(u),n==null||n(l,u)},m=()=>{if(l.length>=5)return;const u=l.length>0?(l[l.length-1].offset+1)/2:.5,v=[...l,Z(u,xe)];v.sort((S,_)=>S.offset-_.offset),p(v),n==null||n(v,g)},B=u=>{if(l.length<=2)return;const v=l.filter((S,_)=>_!==u);p(v),n==null||n(v,g)};return r.jsxs(o.Stack,{gap:"xs",children:[r.jsxs(o.Group,{justify:"space-between",align:"center",children:[r.jsx(o.Text,{size:"xs",c:"dimmed",children:"Color Stops"}),r.jsx(o.ActionIcon,{size:"compact",variant:"subtle",color:"gray",onClick:m,disabled:l.length>=5,"aria-label":"Add color stop",children:r.jsx(R.Plus,{size:12})})]}),l.map((u,v)=>r.jsxs(o.Group,{gap:"xs",align:"flex-end",children:[r.jsx(o.Box,{style:{flex:1},children:r.jsx(o.ColorInput,{size:"compact",value:u.color,onChange:S=>{C(v,S)},"aria-label":`Color stop ${v+1}`})}),r.jsx(o.Box,{style:{width:"80px"},children:r.jsx(o.Slider,{size:"compact",min:0,max:100,value:u.offset*100,onChange:S=>{b(v,S)},label:S=>`${Math.round(S)}%`,"aria-label":`Stop ${v+1} position`})}),r.jsx(o.ActionIcon,{size:"compact",variant:"subtle",color:"gray",onClick:()=>{B(v)},disabled:l.length<=2,"aria-label":`Remove color stop ${v+1}`,children:r.jsx(R.Minus,{size:12})})]},u.id)),c&&r.jsxs(o.Box,{children:[r.jsx(o.Text,{size:"xs",c:"dimmed",mb:4,children:"Direction"}),r.jsx(o.Slider,{size:"compact",min:0,max:360,value:g,onChange:d,label:u=>`${u}°`,"aria-label":"Gradient direction",marks:[{value:0,label:"0°"},{value:90,label:"90°"},{value:180,label:"180°"},{value:270,label:"270°"},{value:360,label:"360°"}]})]})]})}function qe({children:t}){return r.jsx(o.Box,{p:"sm",children:t})}const We=["[data-portal]","[data-combobox-dropdown]","[data-menu-dropdown]","[data-popover-dropdown]","[data-tooltip]","[data-hovercard-dropdown]","[data-dates-dropdown]","[data-modal]"].join(", ");function Ze(t,e=!0){i.useEffect(()=>{if(!e)return;const s=a=>{const c=a.target;c.closest('[role="dialog"]')||c.closest("[data-popout-trigger]")||c.closest("[data-popout-portal-container]")||c.closest(We)||t()};return document.addEventListener("mousedown",s),()=>{document.removeEventListener("mousedown",s)}},[t,e])}function Ye(t,e=!0){i.useEffect(()=>{if(!e)return;const s=a=>{a.key==="Escape"&&(a.preventDefault(),t())};return document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)}},[t,e])}const oe=i.createContext(null),he=i.createContext(null);function ge(){const t=i.useContext(oe);if(!t)throw new Error("usePopoutContext must be used within a Popout component");return t}function Ke(){return i.useContext(oe)}function Je(){const t=i.useContext(he);if(!t)throw new Error("usePopoutManagerContext must be used within a PopoutManager");return t}function Qe({children:t,parentId:e=null}){const s=i.useId(),[a,c]=i.useState(!1),n=i.useRef(null),l=i.useMemo(()=>({id:s,isOpen:a,open:()=>{c(!0)},close:()=>{c(!1)},toggle:()=>{c(p=>!p)},triggerRef:n,parentId:e}),[s,a,e]);return r.jsx(oe.Provider,{value:l,children:t})}function et({children:t}){const[e,s]=i.useState(null),a=i.useRef([]),c=i.useRef(new Map),n=i.useRef(new Map),[l,p]=i.useState(0),g=i.useCallback((f,h,P)=>{var T,D;if(!a.current.includes(f)){const M=a.current,F=[];for(const x of M)n.current.get(x)===(P??null)&&F.push(x);for(const x of F.reverse()){const A=[];for(const I of M){let w=I;for(;w;){const U=n.current.get(w);if(U===x){A.push(I);break}w=U??null}}for(const I of A.reverse())(T=c.current.get(I))==null||T();(D=c.current.get(x))==null||D()}a.current=[...a.current.filter(x=>!F.includes(x)&&!F.some(A=>{let I=x;for(;I;){const w=n.current.get(I);if(w===A)return!0;I=w??null}return!1})),f],c.current.set(f,h),n.current.set(f,P??null),p(x=>x+1)}},[]),z=i.useCallback(f=>{a.current=a.current.filter(h=>h!==f),c.current.delete(f),n.current.delete(f),p(h=>h+1)},[]),C=i.useCallback(f=>{const h=a.current.indexOf(f);return h>=0?K+h:K},[]),b=i.useCallback(f=>{const h=a.current,P=h.indexOf(f);P===-1||P===h.length-1||(a.current=[...h.filter(T=>T!==f),f],p(T=>T+1))},[]),d=i.useCallback(f=>n.current.get(f)??null,[]),m=i.useCallback((f,h)=>{let P=h;for(;P;){const T=n.current.get(P);if(T===f)return!0;P=T??null}return!1},[]),B=i.useCallback(f=>{const h=[],P=a.current;for(const T of P)m(f,T)&&h.push(T);return h},[m]),u=i.useCallback(f=>{const h=B(f);for(const P of[...h].reverse()){const T=c.current.get(P);T==null||T()}},[B]),v=i.useCallback(f=>{u(f);const h=c.current.get(f);h==null||h()},[u]),S=i.useCallback((f,h)=>{const P=a.current;for(const T of P){if(T===f)continue;n.current.get(T)===h&&v(T)}},[v]),_=i.useCallback(()=>{const f=a.current;if(f.length===0)return;const h=f[f.length-1],P=c.current.get(h);P==null||P()},[]),E=i.useCallback(()=>{const f=[...a.current];for(const h of f){const P=c.current.get(h);P==null||P()}},[]),j=i.useCallback(()=>a.current.length>0,[]),[O,H]=i.useState(!1);i.useEffect(()=>{H(a.current.length>0)},[l]),Ye(_,O),Ze(E,O);const $=i.useMemo(()=>({register:g,unregister:z,getZIndex:C,bringToFront:b,portalContainer:e,zIndexVersion:l,closeFocused:_,closeAll:E,hasOpenPopouts:j,closeWithDescendants:v,closeDescendants:u,closeSiblings:S,getParentId:d,isAncestor:m}),[g,z,C,b,e,l,_,E,j,v,u,S,d,m]);return r.jsxs(he.Provider,{value:$,children:[t,r.jsx("div",{ref:s,"data-popout-portal-container":!0})]})}function tt(t){const{isOpen:e,onDragStart:s}=t,[a,c]=i.useState({left:0,top:0}),n=i.useRef(!1),l=i.useRef({x:0,y:0,offsetLeft:0,offsetTop:0}),p=i.useCallback(()=>{c({left:0,top:0})},[]),g=i.useCallback(b=>{const d=b.target;d.tagName==="INPUT"||d.tagName==="TEXTAREA"||d.tagName==="BUTTON"||d.tagName==="SELECT"||d.closest("button")||d.closest("input")||d.closest("textarea")||d.closest("select")||(n.current=!0,l.current={x:b.clientX,y:b.clientY,offsetLeft:a.left,offsetTop:a.top},s==null||s(),b.target.setPointerCapture(b.pointerId))},[a.left,a.top,s]),z=i.useCallback(b=>{if(!n.current)return;const d=b.clientX-l.current.x,m=b.clientY-l.current.y;c({left:l.current.offsetLeft+d,top:l.current.offsetTop+m})},[]),C=i.useCallback(b=>{n.current&&(n.current=!1,b.target.releasePointerCapture(b.pointerId))},[]);return e?{dragTriggerProps:{"data-drag-trigger":!0,onPointerDown:g,onPointerMove:z,onPointerUp:C,style:{cursor:"grab",userSelect:"none",touchAction:"none"}},dragOffset:a,resetDragOffset:p}:{dragTriggerProps:{},dragOffset:{left:0,top:0},resetDragOffset:p}}function ot({id:t,label:e,isActive:s,onClick:a}){return r.jsx(o.UnstyledButton,{role:"tab",id:`tab-${t}`,"aria-selected":s,"aria-controls":`tabpanel-${t}`,onClick:a,px:"xs",py:3,style:{fontSize:"11px",fontWeight:s?500:400,color:s?"var(--mantine-color-text)":"var(--mantine-color-dimmed)",borderBottom:s?"2px solid var(--mantine-color-blue-filled)":"2px solid transparent",cursor:"pointer"},children:e})}function rt({config:t,onClose:e,dragTriggerProps:s={},actions:a=[],activeTab:c,onTabChange:n,titleId:l}){var d;const{style:p,...g}=s,C=t.variant==="tabs"?t:null,b=m=>{n&&n(m)};return r.jsxs(o.Group,{justify:"space-between",px:"sm",py:"xs",...g,style:{...p},children:[t.variant==="title"?r.jsx(o.Text,{id:l,size:"compact",fw:500,children:t.title}):r.jsxs(o.Group,{gap:0,role:"tablist","aria-label":"Panel tabs",children:[r.jsx("span",{id:l,style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0, 0, 0, 0)"},children:((d=C==null?void 0:C.tabs[0])==null?void 0:d.label)??"Settings"}),C==null?void 0:C.tabs.map(m=>r.jsx(ot,{id:m.id,label:m.label,isActive:c===m.id,onClick:()=>{b(m.id)}},m.id))]}),r.jsxs(o.Group,{gap:4,children:[a.map(m=>r.jsx(o.ActionIcon,{variant:"subtle",size:"compact",onClick:m.onClick,"aria-label":m.label,children:m.icon},m.id)),r.jsx(o.ActionIcon,{variant:"subtle",size:"compact",onClick:e,"aria-label":"Close panel",children:r.jsx(R.X,{size:14})})]})]})}function nt(t,e,s=de,a={}){const{placement:c="left",alignment:n="start",panelHeight:l=0}=a;let p,g;switch(c){case"left":p=t.left-e-s,g=ce(t,n,l);break;case"right":p=t.right+s,g=ce(t,n,l);break;case"top":p=le(t,n,e),g=t.top-l-s;break;case"bottom":p=le(t,n,e),g=t.bottom+s;break;default:{const z=c;throw new Error(`Unknown placement: ${String(z)}`)}}return{left:p,top:g}}function ce(t,e,s){switch(e){case"start":return t.top;case"center":return t.top+t.height/2-s/2;case"end":return t.bottom-s;default:{const a=e;throw new Error(`Unknown alignment: ${String(a)}`)}}}function le(t,e,s){switch(e){case"start":return t.left;case"center":return t.left+t.width/2-s/2;case"end":return t.right-s;default:{const a=e;throw new Error(`Unknown alignment: ${String(a)}`)}}}function st({width:t,height:e,header:s,children:a,anchorRef:c,placement:n="left",alignment:l="start",gap:p=0,actions:g}){var ae,ie;const{isOpen:z,close:C,triggerRef:b,id:d,parentId:m}=ge(),{getZIndex:B,portalContainer:u,register:v,unregister:S,bringToFront:_,zIndexVersion:E,closeWithDescendants:j,closeDescendants:O}=Je(),H=i.useId(),$=`popout-panel-${d}`,f=`popout-title-${H}`,[h,P]=i.useState(null),T=i.useRef(!1),D=i.useRef(null),M=i.useCallback(()=>{_(d)},[_,d]),{dragTriggerProps:F,dragOffset:x,resetDragOffset:A}=tt({isOpen:z,onDragStart:M}),I=s.variant==="tabs",w=I?s:null,U=(w==null?void 0:w.defaultTab)??((ae=w==null?void 0:w.tabs[0])==null?void 0:ae.id),[re,ne]=i.useState(U),be=i.useCallback(y=>{var N;ne(y),(N=w==null?void 0:w.onTabChange)==null||N.call(w,y)},[w]),ve=i.useCallback(y=>{y.stopPropagation(),O(d),_(d)},[O,_,d]),ze=i.useCallback(()=>{j(d)},[j,d]);if(i.useEffect(()=>(z?v(d,C,m):S(d),()=>{S(d)}),[z,d,v,S,C,m]),i.useEffect(()=>{if(z){let y=(c==null?void 0:c.current)??null;if(!y&&m&&(y=document.querySelector(`[data-popout-id="${m}"]`)),y||(y=b.current),y){const N=y.getBoundingClientRect(),we=nt(N,t,p,{placement:n,alignment:l,panelHeight:e});P(we),T.current||(A(),I&&ne(U))}}T.current=z},[z,t,e,p,b,c,n,l,A,I,U,m]),i.useEffect(()=>{if(z&&D.current){const y=setTimeout(()=>{var N;(N=D.current)==null||N.focus()},0);return()=>{clearTimeout(y)}}else!z&&b.current&&b.current.focus()},[z,b]),!z||!u||!h)return null;const Ce=B(d),se={left:h.left+x.left,top:h.top+x.top},V="1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12))",q="none",Y=c!==void 0||m!==void 0,Se=()=>Y?{borderTop:n==="bottom"?q:V,borderRight:n==="left"?q:V,borderBottom:n==="top"?q:V,borderLeft:n==="right"?q:V}:{border:V},Pe=()=>{if(!Y)return{};const y=8;switch(n){case"left":return{borderTopLeftRadius:y,borderBottomLeftRadius:y,borderTopRightRadius:0,borderBottomRightRadius:0};case"right":return{borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:y,borderBottomRightRadius:y};case"top":return{borderTopLeftRadius:y,borderTopRightRadius:y,borderBottomLeftRadius:0,borderBottomRightRadius:0};case"bottom":return{borderTopLeftRadius:0,borderTopRightRadius:0,borderBottomLeftRadius:y,borderBottomRightRadius:y};default:return{}}},Te=r.jsxs(o.Paper,{ref:D,id:$,role:"dialog","aria-modal":"false","aria-labelledby":f,tabIndex:-1,radius:Y?0:8,onClick:ve,"data-popout-id":d,...m&&{"data-parent-id":m},style:{position:"fixed",left:se.left,top:se.top,width:t,...e!==void 0&&{height:e},zIndex:Ce,backgroundColor:"var(--mantine-color-body)",...Se(),...Pe(),boxShadow:["0 1px 2px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4))","0 4px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35))","0 8px 16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25))"].join(", "),outline:"none"},children:[r.jsx(rt,{config:s,onClose:ze,dragTriggerProps:F,activeTab:re,onTabChange:be,actions:g,titleId:f}),r.jsx(o.Box,{children:I?(ie=w==null?void 0:w.tabs.find(y=>y.id===re))==null?void 0:ie.content:a})]});return ye.createPortal(Te,u)}function at({children:t}){const{toggle:e,triggerRef:s,isOpen:a,id:c}=ge(),n=i.useCallback(g=>{g.stopPropagation(),e()},[e]);if(!i.isValidElement(t))throw new Error("PopoutTrigger requires a single valid React element as its child");const l=`popout-panel-${c}`,p=t;return i.cloneElement(p,{onClick:g=>{var z,C;(C=(z=p.props).onClick)==null||C.call(z,g),n(g)},ref:s,"data-popout-trigger":!0,"aria-expanded":a,"aria-controls":l,"aria-haspopup":"dialog"})}function it({children:t}){const e=Ke(),s=(e==null?void 0:e.id)??null;return r.jsx(Qe,{parentId:s,children:t})}const ct=Object.assign(it,{Trigger:at,Panel:st,Content:qe});function lt({children:t}){return r.jsx(et,{children:t})}function ut({label:t,value:e}){return r.jsxs(o.Group,{justify:"space-between",py:4,children:[r.jsx(o.Text,{size:"compact",c:"dimmed",children:t}),r.jsx(o.Text,{size:"compact",c:"var(--mantine-color-text)",fw:500,children:String(e)})]})}function pt({label:t,value:e,defaultValue:s,onChange:a,min:c,max:n,step:l,decimalScale:p,suffix:g,hideControls:z=!0}){const[C,b]=G.useUncontrolled({value:e,defaultValue:void 0,finalValue:void 0,onChange:a}),d=C===void 0,m=C??s,[B,u]=i.useState(m);i.useEffect(()=>{u(C??s)},[C,s]);const v=E=>{u(E)},S=()=>{const E=typeof B=="string"?parseFloat(B):B;if(isNaN(E))u(C??s);else{let j=E;c!==void 0&&j<c&&(j=c),n!==void 0&&j>n&&(j=n),j!==C&&b(j),u(j)}},_=()=>{b(void 0)};return r.jsxs(o.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[r.jsx(o.NumberInput,{label:t,"aria-label":t,value:B,onChange:v,onBlur:S,min:c,max:n,step:l,decimalScale:p,suffix:g,hideControls:z,size:"compact","data-is-default":d?"true":"false",styles:{input:d?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!d&&r.jsx(o.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:_,style:{marginBottom:2},children:r.jsx(R.X,{size:12})})]})}function dt({label:t,value:e,defaultValue:s,options:a,onChange:c}){const[n,l]=G.useUncontrolled({value:e,defaultValue:void 0,finalValue:void 0,onChange:c}),p=n===void 0,g=n??s,z=b=>{b!==null&&l(b)},C=()=>{l(void 0)};return r.jsxs(o.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[r.jsx(o.Select,{label:t,"aria-label":t,value:g,onChange:z,data:a,size:"compact",rightSection:r.jsx(R.ChevronDown,{size:14}),rightSectionPointerEvents:"none","data-is-default":p?"true":"false",allowDeselect:!1,styles:{input:p?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!p&&r.jsx(o.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:C,style:{marginBottom:2},children:r.jsx(R.X,{size:12})})]})}function ft(){return o.useComputedColorScheme("dark")}const xt={xs:o.rem(4),sm:o.rem(8),md:o.rem(16),lg:o.rem(24),xl:o.rem(32)},mt="0.1.0";exports.CompactColorInput=He;exports.ControlGroup=Ne;exports.ControlSection=Me;exports.ControlSubGroup=Ue;exports.DEFAULT_GRADIENT_STOP_COLOR=xe;exports.EffectToggle=$e;exports.GradientEditor=Xe;exports.MANTINE_SPACING=xt;exports.MAX_ALPHA_HEX=J;exports.MAX_OPACITY_PERCENT=Q;exports.POPOUT_GAP=de;exports.POPOUT_NESTED_GAP=Be;exports.POPOUT_Z_INDEX_BASE=K;exports.Popout=ct;exports.PopoutManager=lt;exports.SWATCH_COLORS=De;exports.SWATCH_COLORS_HEXA=fe;exports.StatRow=ut;exports.StyleNumberInput=pt;exports.StyleSelect=dt;exports.VERSION=mt;exports.compactColors=pe;exports.compactDarkColors=ue;exports.compactTheme=Oe;exports.createColorStop=Z;exports.createDefaultGradientStops=me;exports.isValidHex=Ge;exports.opacityToAlphaHex=te;exports.parseAlphaFromHexa=ee;exports.parseHexaColor=Fe;exports.toHexaColor=Le;exports.useActualColorScheme=ft;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mantine/core"),o=require("react/jsx-runtime"),B=require("@mantine/hooks"),D=require("lucide-react"),s=require("react"),Be=require("react-dom"),ve=["#d5d7da","#a3a8b1","#7a828e","#5f6873","#48525c","#374047","#2a3035","#1f2428","#161b22","#0d1117"],Ce={...e.DEFAULT_THEME.colors,dark:ve},Re={"--button-height":"24px","--button-fz":"11px","--button-padding-x":"8px"},_e={"--ai-size":"24px"},Fe={"--cb-size":"16px","--cb-icon-size":"12px"},Ve={Button:e.Button.extend({defaultProps:{size:"sm"},vars:()=>({root:Re})}),ActionIcon:e.ActionIcon.extend({defaultProps:{size:"sm",variant:"subtle"},vars:()=>({root:_e})}),CloseButton:e.CloseButton.extend({defaultProps:{size:"xs"},vars:()=>({root:Fe})})},Ne={"--switch-height":"16px","--switch-width":"28px","--switch-thumb-size":"12px","--switch-track-label-padding":"2px","--switch-label-font-size":"5px"},Me={"--checkbox-size":"16px"},He={"--radio-size":"16px","--radio-icon-size":"6px"},xe={"--slider-size":"4px","--slider-thumb-size":"12px"},Le={"--sc-font-size":"10px","--sc-padding":"4px 8px"},Ge={backgroundColor:"transparent"},Ue={backgroundColor:"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))"},Q={fontSize:11},ge={fontSize:10,marginTop:2},$e={SegmentedControl:e.SegmentedControl.extend({defaultProps:{size:"sm",withItemsBorders:!1},vars:()=>({root:Le}),styles:{root:Ge,indicator:Ue}}),Checkbox:e.Checkbox.extend({defaultProps:{size:"sm"},vars:()=>({root:Me}),styles:{label:Q}}),Switch:e.Switch.extend({defaultProps:{size:"sm"},vars:()=>({root:Ne}),styles:{label:Q}}),Slider:e.Slider.extend({defaultProps:{size:"sm"},vars:()=>({root:xe}),styles:{markLabel:ge}}),Radio:e.Radio.extend({defaultProps:{size:"sm"},vars:()=>({root:He}),styles:{label:Q}}),RangeSlider:e.RangeSlider.extend({defaultProps:{size:"sm"},vars:()=>({root:xe}),styles:{markLabel:ge}})},Xe={"--badge-height":"14px","--badge-fz":"9px","--badge-padding-x":"4px"},qe={"--avatar-size":"24px"},Ke={"--ti-size":"24px"},We={"--indicator-size":"8px"},Ze={"--kbd-fz":"10px","--kbd-padding":"2px 4px"},Ye={"--pill-height":"16px","--pill-fz":"10px"},Je={Text:e.Text.extend({}),Badge:e.Badge.extend({defaultProps:{size:"sm"},vars:()=>({root:Xe})}),Pill:e.Pill.extend({defaultProps:{size:"sm"},vars:()=>({root:Ye})}),Avatar:e.Avatar.extend({defaultProps:{size:"sm"},vars:()=>({root:qe})}),ThemeIcon:e.ThemeIcon.extend({defaultProps:{size:"sm"},vars:()=>({root:Ke})}),Indicator:e.Indicator.extend({defaultProps:{size:"sm"},vars:()=>({root:We})}),Kbd:e.Kbd.extend({defaultProps:{size:"sm"},vars:()=>({root:Ze})})},Qe={"--loader-size":"18px"},et={"--progress-size":"4px"},tt={label:{fontSize:9}},ot={Loader:e.Loader.extend({defaultProps:{size:"sm"},vars:()=>({root:Qe})}),Progress:e.Progress.extend({defaultProps:{size:"sm"},vars:()=>({root:et}),styles:tt}),RingProgress:e.RingProgress.extend({})},te=1e3,R=1100,Pe=8,nt=4,H={"--input-height":"24px","--input-size":"24px","--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"},K={"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"},$={fontSize:11,color:"var(--mantine-color-dimmed)",marginBottom:1,lineHeight:1.2},oe={paddingLeft:8,paddingRight:8,border:"none",backgroundColor:"var(--mantine-color-default)"},U={label:$,input:oe},me={label:$,input:oe},W={dropdown:{padding:4,border:"none",boxShadow:"var(--mantine-shadow-md)"},option:{fontSize:11,padding:"4px 8px",borderRadius:4},options:{},groupLabel:{fontSize:10,padding:"4px 8px"},empty:{fontSize:11,padding:"8px"}},ee={input:{...U.input,minHeight:24,height:"auto",display:"flex",alignItems:"center",paddingTop:4,paddingBottom:4},pillsList:{columnGap:4,rowGap:2},pill:{margin:0}},st={TextInput:e.TextInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:H}),styles:U}),NumberInput:e.NumberInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:{...H,"--input-right-section-width":"24px"},controls:{"--ni-chevron-size":"10px"}}),styles:{label:$,input:oe,control:{borderColor:"transparent"}}}),Select:e.Select.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:H}),styles:{...U,...W}}),Textarea:e.Textarea.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:K}),styles:me}),PasswordInput:e.PasswordInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:H}),styles:{...U,innerInput:{paddingLeft:8,paddingRight:8}}}),Autocomplete:e.Autocomplete.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:H}),styles:{...U,...W}}),MultiSelect:e.MultiSelect.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:{...H,"--combobox-chevron-size":"12px"}}),styles:{label:$,...W,...ee,inputField:{minWidth:60,flexBasis:60}}}),TagsInput:e.TagsInput.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:K}),styles:{label:$,...W,...ee,inputField:{minWidth:30,flexBasis:30}}}),PillsInput:e.PillsInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:K}),styles:{label:$,...ee}}),FileInput:e.FileInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:H}),styles:U}),JsonInput:e.JsonInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:K}),styles:me}),InputClearButton:e.InputClearButton.extend({defaultProps:{size:"xs"},vars:()=>({root:{"--cb-size":"16px","--cb-icon-size":"12px"}})})},rt={"--pagination-control-size":"24px","--pagination-control-fz":"11px"},at={"--stepper-icon-size":"24px","--stepper-fz":"11px","--stepper-spacing":"8px"},lt={"--burger-size":"18px","--burger-line-size":"2px"},it={root:{fontSize:11}},ct={root:{fontSize:11,minHeight:28},label:{fontSize:11}},ut={tab:{fontSize:11,padding:"6px 10px"}},dt={Anchor:e.Anchor.extend({defaultProps:{size:"sm"},styles:it}),Burger:e.Burger.extend({defaultProps:{size:"sm"},vars:()=>({root:lt})}),NavLink:e.NavLink.extend({styles:ct}),Pagination:e.Pagination.extend({defaultProps:{size:"sm"},vars:()=>({root:rt})}),Stepper:e.Stepper.extend({defaultProps:{size:"sm"},vars:()=>({root:at})}),Tabs:e.Tabs.extend({styles:ut})},pt={"--menu-item-fz":"11px"},ft={tooltip:{fontSize:11,padding:"4px 8px"}},xt={dropdown:{padding:8}},gt={dropdown:{padding:8}},mt={Menu:e.Menu.extend({defaultProps:{zIndex:R},vars:()=>({dropdown:pt})}),Tooltip:e.Tooltip.extend({defaultProps:{zIndex:R},styles:ft}),Popover:e.Popover.extend({defaultProps:{zIndex:R},styles:xt}),HoverCard:e.HoverCard.extend({defaultProps:{zIndex:R},styles:gt})},ht={xs:"10px",sm:"11px",md:"13px",lg:"14px",xl:"16px"},bt={xs:"4px",sm:"6px",md:"8px",lg:"12px",xl:"16px"},vt={xs:"2px",sm:"4px",md:"6px",lg:"8px",xl:"12px"},Se=e.createTheme({colors:Ce,fontSizes:ht,spacing:bt,radius:vt,focusRing:"never",components:{...st,...Ve,...$e,...Je,...ot,...dt,...mt}}),Ct=e.mergeMantineTheme(e.DEFAULT_THEME,Se),ye=["#5B8FF9FF","#FF6B6BFF","#61D095FF","#F7B731FF","#9B59B6FF","#5B8FF980","#FF6B6B80","#61D09580","#F7B73180","#9B59B680"],Z="#888888",ne=255,se=100;function re(t){return Math.round(parseInt(t,16)/ne*se)}function ae(t){return Math.round(t/se*ne).toString(16).padStart(2,"0")}function Pt(t){let n=t.replace("#","");n.length===3?n=`${n.split("").map(l=>l+l).join("")}ff`:n.length===4?n=n.split("").map(l=>l+l).join(""):n.length===6&&(n=`${n}ff`);const i=`#${n.slice(0,6)}`,r=n.slice(6,8),c=re(r);return{hex:i,opacity:c}}function St(t,n){const i=t.replace("#",""),r=ae(n);return`#${i}${r}`}function yt(t){return/^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)}const ze=s.createContext(null);function zt(){return s.useContext(ze)}function It({children:t}){const n=s.useRef(null);if(!s.isValidElement(t))throw new Error("PopoutAnchor requires a single valid React element as its child");const i=t,r=s.cloneElement(i,{ref:n});return o.jsx(ze.Provider,{value:{anchorRef:n},children:r})}function wt({children:t}){return o.jsx(e.Box,{p:"sm",children:t})}const kt=["[data-portal]","[data-combobox-dropdown]","[data-menu-dropdown]","[data-popover-dropdown]","[data-tooltip]","[data-hovercard-dropdown]","[data-dates-dropdown]","[data-modal]"].join(", ");function Tt(t,n=!0){s.useEffect(()=>{if(!n)return;const i=r=>{const c=r.target;c.closest('[role="dialog"]')||c.closest("[data-popout-trigger]")||c.closest("[data-popout-portal-container]")||c.closest(kt)||t()};return document.addEventListener("mousedown",i),()=>{document.removeEventListener("mousedown",i)}},[t,n])}function jt(t,n=!0){s.useEffect(()=>{if(!n)return;const i=r=>{r.key==="Escape"&&(r.preventDefault(),t())};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[t,n])}const le=s.createContext(null),Ie=s.createContext(null);function ie(){const t=s.useContext(le);if(!t)throw new Error("usePopoutContext must be used within a Popout component");return t}function At(){return s.useContext(le)}function Et(){const t=s.useContext(Ie);if(!t)throw new Error("usePopoutManagerContext must be used within a PopoutManager");return t}function Ot({children:t,parentId:n=null}){const i=s.useId(),[r,c]=s.useState(!1),l=s.useRef(null),u=s.useMemo(()=>({id:i,isOpen:r,open:()=>{c(!0)},close:()=>{c(!1)},toggle:()=>{c(p=>!p)},triggerRef:l,parentId:n}),[i,r,n]);return o.jsx(le.Provider,{value:u,children:t})}function Dt({children:t}){const[n,i]=s.useState(null),r=s.useRef([]),c=s.useRef(new Map),l=s.useRef(new Map),[u,p]=s.useState(0),P=s.useCallback(d=>{const a=[];for(const f of r.current)(l.current.get(f)??null)===d&&a.push(f);return a},[]),b=s.useCallback(d=>{const a=[];for(const f of r.current){let m=f;for(;m;){const E=l.current.get(m)??null;if(E===d){a.push(f);break}m=E}}return a},[]),v=s.useCallback(d=>{let a=0,f=d;for(;f;){const m=l.current.get(f)??null;if(!m)break;a++,f=m}return a},[]),h=s.useCallback(d=>{var f;const a=[...d].sort((m,E)=>v(E)-v(m));for(const m of a)(f=c.current.get(m))==null||f()},[v]),x=s.useCallback((d,a,f)=>{if(r.current.includes(d))return;const m=f??null,E=P(m),N=[];for(const z of E)N.push(z),N.push(...b(z));h(N);const G=new Set(N);r.current=r.current.filter(z=>!G.has(z)),r.current.push(d),c.current.set(d,a),l.current.set(d,m),p(z=>z+1)},[P,b,h]),S=s.useCallback(d=>{r.current=r.current.filter(a=>a!==d),c.current.delete(d),l.current.delete(d),p(a=>a+1)},[]),j=s.useCallback(d=>{const a=r.current.indexOf(d);return a>=0?te+a:te},[]),g=s.useCallback(d=>{const a=r.current,f=a.indexOf(d);f===-1||f===a.length-1||(r.current=[...a.filter(m=>m!==d),d],p(m=>m+1))},[]),C=s.useCallback(d=>l.current.get(d)??null,[]),y=s.useCallback((d,a)=>{let f=a;for(;f;){const m=l.current.get(f);if(m===d)return!0;f=m??null}return!1},[]),I=s.useCallback(d=>{const a=[],f=r.current;for(const m of f)y(d,m)&&a.push(m);return a},[y]),A=s.useCallback(d=>{const a=I(d);for(const f of[...a].reverse()){const m=c.current.get(f);m==null||m()}},[I]),k=s.useCallback(d=>{A(d);const a=c.current.get(d);a==null||a()},[A]),T=s.useCallback((d,a)=>{const f=r.current;for(const m of f){if(m===d)continue;l.current.get(m)===a&&k(m)}},[k]),O=s.useCallback(()=>{const d=r.current;if(d.length===0)return;const a=d[d.length-1],f=c.current.get(a);f==null||f()},[]),_=s.useCallback(()=>{const d=[...r.current];for(const a of d){const f=c.current.get(a);f==null||f()}},[]),L=s.useCallback(()=>r.current.length>0,[]),[F,V]=s.useState(!1);s.useEffect(()=>{V(r.current.length>0)},[u]),jt(O,F),Tt(_,F);const X=s.useMemo(()=>({register:x,unregister:S,getZIndex:j,bringToFront:g,portalContainer:n,zIndexVersion:u,closeFocused:O,closeAll:_,hasOpenPopouts:L,closeWithDescendants:k,closeDescendants:A,closeSiblings:T,getParentId:C,isAncestor:y}),[x,S,j,g,n,u,O,_,L,k,A,T,C,y]);return o.jsxs(Ie.Provider,{value:X,children:[t,o.jsx("div",{ref:i,"data-popout-portal-container":!0})]})}function Bt(t){const{isOpen:n,onDragStart:i}=t,[r,c]=s.useState({left:0,top:0}),l=s.useRef(!1),u=s.useRef({x:0,y:0,offsetLeft:0,offsetTop:0}),p=s.useCallback(()=>{c({left:0,top:0})},[]),P=s.useCallback(h=>{const x=h.target;x.tagName==="INPUT"||x.tagName==="TEXTAREA"||x.tagName==="BUTTON"||x.tagName==="SELECT"||x.closest("button")||x.closest("input")||x.closest("textarea")||x.closest("select")||(l.current=!0,u.current={x:h.clientX,y:h.clientY,offsetLeft:r.left,offsetTop:r.top},i==null||i(),h.target.setPointerCapture(h.pointerId))},[r.left,r.top,i]),b=s.useCallback(h=>{if(!l.current)return;const x=h.clientX-u.current.x,S=h.clientY-u.current.y;c({left:u.current.offsetLeft+x,top:u.current.offsetTop+S})},[]),v=s.useCallback(h=>{l.current&&(l.current=!1,h.target.releasePointerCapture(h.pointerId))},[]);return n?{dragTriggerProps:{"data-drag-trigger":!0,onPointerDown:P,onPointerMove:b,onPointerUp:v,style:{cursor:"grab",userSelect:"none",touchAction:"none"}},dragOffset:r,resetDragOffset:p}:{dragTriggerProps:{},dragOffset:{left:0,top:0},resetDragOffset:p}}function Rt({config:t,onClose:n,dragTriggerProps:i={},actions:r=[],activeTab:c,onTabChange:l,titleId:u}){var x;const{style:p,...P}=i,v=t.variant==="tabs"?t:null,h=(v==null?void 0:v.tabs.map(S=>({value:S.id,label:S.label})))??[];return o.jsxs(e.Group,{justify:"space-between",px:"sm",py:"xs",...P,style:{...p},children:[t.variant==="title"?o.jsx(e.Text,{id:u,size:"sm",fw:500,children:t.title}):o.jsxs(o.Fragment,{children:[o.jsx("span",{id:u,style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0, 0, 0, 0)"},children:((x=v==null?void 0:v.tabs[0])==null?void 0:x.label)??"Settings"}),o.jsx(e.SegmentedControl,{data:h,value:c,onChange:S=>l==null?void 0:l(S),size:"xs"})]}),o.jsxs(e.Group,{gap:4,children:[r.map(S=>o.jsx(e.ActionIcon,{variant:"subtle",onClick:S.onClick,"aria-label":S.label,children:S.icon},S.id)),o.jsx(e.CloseButton,{size:"sm",onClick:n,"aria-label":"Close panel"})]})]})}function _t(t,n,i=Pe,r={}){const{placement:c="left",alignment:l="start",panelHeight:u=0}=r;let p,P;switch(c){case"left":p=t.left-n-i,P=he(t,l,u);break;case"right":p=t.right+i,P=he(t,l,u);break;case"top":p=be(t,l,n),P=t.top-u-i;break;case"bottom":p=be(t,l,n),P=t.bottom+i;break;default:{const b=c;throw new Error(`Unknown placement: ${String(b)}`)}}return{left:p,top:P}}function he(t,n,i){switch(n){case"start":return t.top;case"center":return t.top+t.height/2-i/2;case"end":return t.bottom-i;default:{const r=n;throw new Error(`Unknown alignment: ${String(r)}`)}}}function be(t,n,i){switch(n){case"start":return t.left;case"center":return t.left+t.width/2-i/2;case"end":return t.right-i;default:{const r=n;throw new Error(`Unknown alignment: ${String(r)}`)}}}function Ft({width:t,height:n,header:i,children:r,anchorRef:c,placement:l="left",alignment:u="start",gap:p=0,actions:P}){var pe,fe;const{isOpen:b,close:v,triggerRef:h,id:x,parentId:S}=ie(),{getZIndex:j,portalContainer:g,register:C,unregister:y,bringToFront:I,zIndexVersion:A,closeWithDescendants:k,closeDescendants:T}=Et(),O=zt(),_=s.useId(),L=`popout-panel-${x}`,F=`popout-title-${_}`,[V,X]=s.useState(null),d=s.useRef(!1),a=s.useRef(null),f=s.useCallback(()=>{I(x)},[I,x]),{dragTriggerProps:m,dragOffset:E,resetDragOffset:N}=Bt({isOpen:b,onDragStart:f}),G=i.variant==="tabs",z=G?i:null,J=(z==null?void 0:z.defaultTab)??((pe=z==null?void 0:z.tabs[0])==null?void 0:pe.id),[ce,ue]=s.useState(J),Te=s.useCallback(w=>{var M;ue(w),(M=z==null?void 0:z.onTabChange)==null||M.call(z,w)},[z]),je=s.useCallback(w=>{w.stopPropagation(),T(x),I(x)},[T,I,x]),Ae=s.useCallback(()=>{k(x)},[k,x]);if(s.useEffect(()=>(b?C(x,v,S):y(x),()=>{y(x)}),[b,x,C,y,v,S]),s.useEffect(()=>{if(b){let w=(c==null?void 0:c.current)??null;if(!w&&(O!=null&&O.anchorRef.current)&&(w=O.anchorRef.current),!w&&S&&(w=document.querySelector(`[data-popout-id="${S}"]`)),w||(w=h.current),w){const M=w.getBoundingClientRect(),De=_t(M,t,p,{placement:l,alignment:u,panelHeight:n});X(De),d.current||(N(),G&&ue(J))}}d.current=b},[b,t,n,p,h,c,l,u,N,G,J,S,O]),s.useEffect(()=>{if(b&&a.current){const w=setTimeout(()=>{var M;(M=a.current)==null||M.focus()},0);return()=>{clearTimeout(w)}}else!b&&h.current&&h.current.focus()},[b,h]),!b||!g||!V)return null;const Ee=j(x),de={left:V.left+E.left,top:V.top+E.top},Oe=o.jsxs(e.Paper,{ref:a,id:L,role:"dialog","aria-modal":"false","aria-labelledby":F,tabIndex:-1,radius:8,onClick:je,"data-popout-id":x,...S&&{"data-parent-id":S},style:{position:"fixed",left:de.left,top:de.top,minWidth:t,...n!==void 0&&{minHeight:n},zIndex:Ee,backgroundColor:"var(--mantine-color-body)",border:"1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12))",boxShadow:["0 1px 2px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4))","0 4px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35))","0 8px 16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25))"].join(", "),outline:"none"},children:[o.jsx(Rt,{config:i,onClose:Ae,dragTriggerProps:m,activeTab:ce,onTabChange:Te,actions:P,titleId:F}),o.jsx(e.Box,{children:G?(fe=z==null?void 0:z.tabs.find(w=>w.id===ce))==null?void 0:fe.content:r})]});return Be.createPortal(Oe,g)}function Vt({children:t}){const{toggle:n,triggerRef:i,isOpen:r,id:c}=ie(),l=s.useCallback(P=>{P.stopPropagation(),n()},[n]);if(!s.isValidElement(t))throw new Error("PopoutTrigger requires a single valid React element as its child");const u=`popout-panel-${c}`,p=t;return s.cloneElement(p,{onClick:P=>{var b,v;(v=(b=p.props).onClick)==null||v.call(b,P),l(P)},ref:i,"data-popout-trigger":!0,"aria-expanded":r,"aria-controls":u,"aria-haspopup":"dialog"})}function Nt({children:t}){const n=At(),i=(n==null?void 0:n.id)??null;return o.jsx(Ot,{parentId:i,children:t})}const q=Object.assign(Nt,{Trigger:Vt,Panel:Ft,Content:wt,Anchor:It}),Mt=s.forwardRef(function({icon:n,size:i="xs",...r},c){const{isOpen:l}=ie();return o.jsx(e.ActionIcon,{ref:c,variant:l?"light":"subtle",size:i,c:l?void 0:"dimmed",...r,children:n})});function Ht({children:t}){return o.jsx(Dt,{children:t})}function we({color:t,defaultColor:n,opacity:i,defaultOpacity:r=100,onColorChange:c,onOpacityChange:l,label:u,showOpacity:p=!0}){const[P,b]=B.useUncontrolled({value:t,defaultValue:void 0,finalValue:void 0,onChange:c}),[v,h]=B.useUncontrolled({value:i,defaultValue:void 0,finalValue:void 0,onChange:l}),x=P===void 0,S=v===void 0,j=x&&(!p||S),g=P??n,C=v??r,[y,I]=s.useState(g.replace("#","").toUpperCase()),[A,k]=s.useState(C);s.useEffect(()=>{I(g.replace("#","").toUpperCase())},[g]),s.useEffect(()=>{k(C)},[C]);const T=a=>{if(a.length===9){const f=a.slice(0,7).toUpperCase(),m=a.slice(7,9),E=re(m);b(f),p&&h(E)}else b(a.toUpperCase())},O=()=>{const a=ae(C);return`${g}${a}`.toUpperCase()},_=a=>{I(a.currentTarget.value.toUpperCase())},L=()=>{let a=y.toUpperCase();a&&!a.startsWith("#")&&(a=`#${a}`),/^#[0-9A-F]{6}$/i.test(a)&&a!==g?b(a):I(g.replace("#","").toUpperCase())},F=a=>{k(a)},V=()=>{const a=typeof A=="string"?parseFloat(A):A;if(isNaN(a))k(C);else{const f=Math.min(100,Math.max(0,a));f!==C&&h(f)}},X=()=>{b(void 0),p&&h(void 0)},d=o.jsxs(e.Group,{gap:4,wrap:"nowrap",children:[o.jsxs(e.Group,{gap:0,children:[o.jsxs(q,{children:[o.jsx(q.Trigger,{children:o.jsx(e.ActionIcon,{variant:"filled",size:24,radius:0,style:{backgroundColor:"var(--mantine-color-default)",borderRadius:"4px 0 0 4px"},"aria-label":"Color swatch",children:o.jsx(e.ColorSwatch,{color:g,size:14,radius:2,style:{border:"1px solid var(--mantine-color-default-border)"}})})}),o.jsx(q.Panel,{width:220,header:{variant:"title",title:u??"Color"},placement:"bottom",alignment:"start",gap:4,children:o.jsx(q.Content,{children:o.jsx(e.ColorPicker,{format:"hexa",value:O(),onChange:T,swatches:[...ye]})})})]}),o.jsx(e.TextInput,{value:y,onChange:_,onBlur:L,"aria-label":"Color hex value","data-is-default":x?"true":"false",w:72,styles:{input:{borderRadius:p?0:"0 4px 4px 0",fontFamily:"monospace",textTransform:"uppercase",...x?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}}),p&&o.jsxs(o.Fragment,{children:[o.jsx(e.Box,{style:{width:1,height:24,backgroundColor:"var(--mantine-color-default-border)"}}),o.jsx(e.NumberInput,{value:A,onChange:F,onBlur:V,min:0,max:100,hideControls:!0,suffix:"%","aria-label":"Opacity","data-is-default":S?"true":"false",w:54,styles:{input:{borderRadius:"0 4px 4px 0",textAlign:"right",...S?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}})]})]}),!j&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${u??"color"} to default`,onClick:X,children:o.jsx(D.X,{size:12})})]});return u?o.jsxs(e.Stack,{gap:0,children:[o.jsx(e.Text,{size:"xs",c:"dimmed",mb:1,lh:1.2,children:u}),d]}):d}function Lt({label:t,actions:n,children:i,bleed:r}){const c=r?"calc(-1 * var(--mantine-spacing-sm) - 1px)":void 0;return o.jsxs(e.Box,{children:[o.jsx(e.Divider,{color:"var(--mantine-color-default-border)",mt:8,mb:0,mx:c}),o.jsxs(e.Group,{justify:"space-between",py:8,px:8,children:[o.jsx(e.Text,{size:"xs",fw:500,lh:1.2,children:t}),n&&o.jsx(e.Group,{gap:4,children:n})]}),o.jsx(e.Stack,{gap:0,px:8,children:i})]})}function Gt({label:t,defaultOpen:n=!0,children:i,hasConfiguredValues:r=!1}){const[c,{toggle:l}]=B.useDisclosure(n),u=p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),l())};return o.jsxs(e.Box,{children:[o.jsx(e.Divider,{color:"var(--mantine-color-default-border)",mt:8,mb:0,mx:8}),o.jsx(e.Group,{justify:"space-between",py:8,px:8,style:{cursor:"pointer"},onClick:l,role:"button",tabIndex:0,"aria-expanded":c,"aria-label":c?`Collapse ${t}`:`Expand ${t}`,onKeyDown:u,children:o.jsxs(e.Group,{gap:4,children:[o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed",tabIndex:-1,"aria-hidden":"true",children:c?o.jsx(D.ChevronDown,{size:12}):o.jsx(D.ChevronRight,{size:12})}),o.jsx(e.Text,{size:"xs",fw:500,lh:1.2,children:t}),r&&o.jsx(e.Box,{"aria-label":`${t} has configured values`,style:{width:6,height:6,borderRadius:"50%",backgroundColor:"var(--mantine-color-blue-5)",marginLeft:4}})]})}),o.jsx(e.Collapse,{in:c,children:o.jsx(e.Stack,{gap:0,children:i})})]})}function Ut({label:t,defaultOpen:n=!1,children:i}){const[r,{toggle:c}]=B.useDisclosure(n),l=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),c())};return o.jsxs(e.Box,{children:[o.jsxs(e.Group,{gap:4,py:4,style:{cursor:"pointer"},onClick:c,role:"button",tabIndex:0,"aria-expanded":r,"aria-label":r?`Collapse ${t}`:`Expand ${t}`,onKeyDown:l,children:[o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed",tabIndex:-1,"aria-hidden":"true",children:r?o.jsx(D.ChevronDown,{size:10}):o.jsx(D.ChevronRight,{size:10})}),o.jsx(e.Text,{size:"xs",c:"dimmed",lh:1.2,children:t})]}),o.jsx(e.Collapse,{in:r,children:o.jsx(e.Box,{pl:"md",children:o.jsx(e.Stack,{gap:4,children:i})})})]})}function $t(){return crypto.randomUUID().slice(0,8)}function Y(t,n){return{id:$t(),offset:t,color:n}}function ke(){return[Y(0,"#6366F1"),Y(1,"#06B6D4")]}function Xt({stops:t,defaultStops:n,direction:i,defaultDirection:r=0,showDirection:c=!0,onChange:l}){const[u,p]=B.useUncontrolled({value:t,defaultValue:n,finalValue:ke(),onChange:g=>l==null?void 0:l(g,P)}),[P,b]=B.useUncontrolled({value:i,defaultValue:r,finalValue:0,onChange:g=>l==null?void 0:l(u,g)}),v=(g,C)=>{const y=[...u];y[g]={...y[g],color:C},p(y)},h=(g,C)=>{const y=[...u];y[g]={...y[g],offset:C/100},p(y)},x=g=>{b(g)},S=()=>{if(u.length>=5)return;const g=u.length>0?(u[u.length-1].offset+1)/2:.5,C=[...u,Y(g,Z)];C.sort((y,I)=>y.offset-I.offset),p(C)},j=g=>{if(u.length<=2)return;const C=u.filter((y,I)=>I!==g);p(C)};return o.jsxs(e.Stack,{gap:"xs",children:[o.jsxs(e.Group,{justify:"space-between",align:"center",children:[o.jsx(e.Text,{size:"xs",c:"dimmed",children:"Color Stops"}),o.jsx(e.ActionIcon,{variant:"subtle",color:"gray",onClick:S,disabled:u.length>=5,"aria-label":"Add color stop",children:o.jsx(D.Plus,{size:12})})]}),u.map((g,C)=>o.jsxs(e.Group,{gap:"xs",align:"flex-end",children:[o.jsx(we,{color:g.color,defaultColor:Z,onColorChange:y=>{v(C,y??Z)},showOpacity:!1}),o.jsx(e.Box,{style:{width:"80px"},children:o.jsx(e.Slider,{min:0,max:100,value:g.offset*100,onChange:y=>{h(C,y)},label:y=>`${Math.round(y)}%`,"aria-label":`Stop ${C+1} position`})}),o.jsx(e.ActionIcon,{variant:"subtle",color:"gray",onClick:()=>{j(C)},disabled:u.length<=2,"aria-label":`Remove color stop ${C+1}`,children:o.jsx(D.Minus,{size:12})})]},g.id)),c&&o.jsxs(e.Box,{pb:"md",children:[o.jsx(e.Text,{size:"xs",c:"dimmed",mb:4,children:"Direction"}),o.jsx(e.Slider,{min:0,max:360,value:P,onChange:x,label:g=>`${g}°`,"aria-label":"Gradient direction",marks:[{value:0,label:"0°"},{value:90,label:"90°"},{value:180,label:"180°"},{value:270,label:"270°"},{value:360,label:"360°"}]})]})]})}function qt({label:t,value:n}){return o.jsxs(e.Group,{justify:"space-between",py:4,children:[o.jsx(e.Text,{size:"sm",c:"dimmed",children:t}),o.jsx(e.Text,{size:"sm",c:"var(--mantine-color-text)",fw:500,children:String(n)})]})}function Kt({label:t,value:n,defaultValue:i,onChange:r,min:c,max:l,step:u,decimalScale:p,suffix:P,hideControls:b=!0}){const[v,h]=B.useUncontrolled({value:n,defaultValue:void 0,finalValue:void 0,onChange:r}),x=v===void 0,S=v??i,j=s.useRef(!1),[g,C]=s.useState(S);s.useEffect(()=>{j.current||C(v??i),j.current=!1},[v,i]);const y=k=>{j.current=!0,C(k)},I=()=>{const k=typeof g=="string"?parseFloat(g):g;if(isNaN(k))C(v??i);else{let T=k;c!==void 0&&T<c&&(T=c),l!==void 0&&T>l&&(T=l),T!==v&&h(T),C(T)}},A=()=>{h(void 0)};return o.jsxs(e.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[o.jsx(e.NumberInput,{label:t,"aria-label":t,value:g,onChange:y,onBlur:I,min:c,max:l,step:u,decimalScale:p,suffix:P,hideControls:b,"data-is-default":x?"true":"false",styles:{input:x?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!x&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:A,style:{marginBottom:2},children:o.jsx(D.X,{size:12})})]})}function Wt({label:t,value:n,defaultValue:i,options:r,onChange:c}){const[l,u]=B.useUncontrolled({value:n,defaultValue:void 0,finalValue:void 0,onChange:c}),p=l===void 0,P=l??i,b=h=>{h!==null&&u(h)},v=()=>{u(void 0)};return o.jsxs(e.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[o.jsx(e.Select,{label:t,"aria-label":t,value:P,onChange:b,data:r,rightSection:o.jsx(D.ChevronDown,{size:14}),rightSectionPointerEvents:"none","data-is-default":p?"true":"false",allowDeselect:!1,styles:{input:p?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!p&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:v,style:{marginBottom:2},children:o.jsx(D.X,{size:12})})]})}function Zt({label:t,checked:n,defaultChecked:i,onChange:r,children:c}){const[l,u]=B.useUncontrolled({value:n,defaultValue:i,finalValue:!1,onChange:r});return o.jsxs(e.Stack,{gap:4,children:[o.jsx(e.Checkbox,{label:t,checked:l,onChange:p=>{u(p.currentTarget.checked)}}),l&&o.jsx(e.Box,{"data-testid":"toggle-with-content-children",pl:"md",children:o.jsx(e.Stack,{gap:4,children:c})})]})}function Yt(t="dark"){return e.useComputedColorScheme(t)}const Jt={xs:e.rem(4),sm:e.rem(8),md:e.rem(16),lg:e.rem(24),xl:e.rem(32)},Qt={HEIGHT:24,FONT_SIZE:11,CONTROL_PADDING:8,SECTION_GAP:4},eo="0.1.0";exports.COMPACT_SIZING=Qt;exports.CompactColorInput=we;exports.ControlGroup=Lt;exports.ControlSection=Gt;exports.ControlSubGroup=Ut;exports.DEFAULT_GRADIENT_STOP_COLOR=Z;exports.GradientEditor=Xt;exports.MANTINE_SPACING=Jt;exports.MAX_ALPHA_HEX=ne;exports.MAX_OPACITY_PERCENT=se;exports.POPOUT_GAP=Pe;exports.POPOUT_NESTED_GAP=nt;exports.POPOUT_Z_INDEX_BASE=te;exports.Popout=q;exports.PopoutButton=Mt;exports.PopoutManager=Ht;exports.SWATCH_COLORS_HEXA=ye;exports.StatRow=qt;exports.StyleNumberInput=Kt;exports.StyleSelect=Wt;exports.ToggleWithContent=Zt;exports.VERSION=eo;exports.compactColors=Ce;exports.compactDarkColors=ve;exports.compactTheme=Ct;exports.compactThemeOverride=Se;exports.createColorStop=Y;exports.createDefaultGradientStops=ke;exports.isValidHex=yt;exports.opacityToAlphaHex=ae;exports.parseAlphaFromHexa=re;exports.parseHexaColor=Pt;exports.toHexaColor=St;exports.useActualColorScheme=Yt;