@box-kite/react 2.2.5 → 2.2.7

package/catalog.mjs

@@ -2171,6 +2171,527 @@ var a = i, o = {
 			required: [],
 			styled: !0
 		},
+		DateField: {
+			description: "A date, a time or both, typed one segment at a time — in the order and with the separators the reader's locale writes them, so `19.10.2026` in Moldova and `10/19/2026` in the US with nothing to configure and nothing to parse.",
+			import: "import DateField from '@box-kite/react/components/dateField';",
+			slots: ["label", "end"],
+			events: ["onValueChange", "isDateUnavailable"],
+			props: {
+				type: {
+					type: "string",
+					enum: [
+						"date",
+						"time",
+						"datetime"
+					],
+					description: "What it edits: a day (`'date'`, default), a time of day (`'time'`), or both (`'datetime'`)."
+				},
+				value: {
+					anyOf: [{ type: "string" }],
+					description: "Controlled value, an ISO string of the field's kind: `2026-10-19`, `14:30:00`, or for a date-time an instant with its offset (`2026-10-19T14:30:00+03:00`), `…Z` in UTC, or a wall clock with `zone=\"none\"`."
+				},
+				defaultValue: {
+					anyOf: [{ type: "string" }],
+					description: "The value it starts with when the field owns its state."
+				},
+				locale: {
+					type: "string",
+					description: "The language the segments are ordered and named in."
+				},
+				hourCycle: {
+					type: "number",
+					enum: [12, 24],
+					description: "A 12- or 24-hour clock."
+				},
+				granularity: {
+					type: "string",
+					enum: ["minute", "second"],
+					description: "Whether a time is edited to the minute (default) or the second."
+				},
+				min: {
+					anyOf: [{ type: "string" }],
+					description: "The earliest value that is valid."
+				},
+				max: {
+					anyOf: [{ type: "string" }],
+					description: "The latest value that is valid."
+				},
+				disabled: {
+					type: "boolean",
+					description: "Not editable and not focusable, and read out as such."
+				},
+				readOnly: {
+					type: "boolean",
+					description: "Focusable and read out, but not editable."
+				},
+				required: {
+					type: "boolean",
+					description: "The form is not valid until it is filled in — the browser's own check, announced and translated for free."
+				},
+				invalid: {
+					type: "boolean",
+					description: "Marks the value invalid whatever the bounds say."
+				},
+				name: {
+					type: "string",
+					description: "What the value posts under in a form: the canonical string, or nothing while empty."
+				},
+				labelledBy: {
+					type: "string",
+					description: "Names the field after an element already on the page, instead of `label`."
+				},
+				describedBy: {
+					type: "string",
+					description: "An element that describes the field — a hint, an error."
+				},
+				placeholderValue: {
+					type: "string",
+					description: "What an empty segment starts from on an arrow key."
+				},
+				disambiguation: {
+					type: "string",
+					enum: [
+						"compatible",
+						"earlier",
+						"later",
+						"reject"
+					],
+					description: "What a wall-clock time a zone skips or repeats means."
+				},
+				showZone: {
+					type: "boolean",
+					description: "Whether a date-time names its zone after the time."
+				},
+				autoFocus: {
+					type: "boolean",
+					description: "Focus the first segment on mount."
+				},
+				emptyText: {
+					type: "string",
+					description: "What an empty segment is read out as."
+				},
+				tabIndex: {
+					type: "number",
+					description: "Every segment's tab index."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		Calendar: {
+			description: "A month of days to pick from, on APG's grid keys — one day or, with `mode=\"range\"`, a start and an end.",
+			import: "import Calendar from '@box-kite/react/components/calendar';",
+			slots: ["default"],
+			events: ["isDateUnavailable", "onFocusedDateChange"],
+			props: {
+				min: {
+					anyOf: [{ type: "string" }],
+					description: "The earliest day that can be chosen, `YYYY-MM-DD`."
+				},
+				max: {
+					anyOf: [{ type: "string" }],
+					description: "The latest day that can be chosen."
+				},
+				locale: {
+					type: "string",
+					description: "The language of the month and weekday names, and whose week it is."
+				},
+				firstDayOfWeek: {
+					type: "number",
+					description: "The day the week starts on, 0 for Sunday."
+				},
+				months: {
+					type: "number",
+					enum: [
+						1,
+						2,
+						3
+					],
+					description: "How many months side by side."
+				},
+				weekNumbers: {
+					type: "boolean",
+					description: "A leading column of ISO week numbers."
+				},
+				showOutsideDays: {
+					type: "boolean",
+					description: "Whether the days that complete the first and last weeks are drawn."
+				},
+				focusedDate: {
+					type: "string",
+					description: "The day the keyboard is on, which decides the month on show."
+				},
+				defaultFocusedDate: {
+					type: "string",
+					description: "Where the keyboard starts when the calendar owns it."
+				},
+				disabled: {
+					type: "boolean",
+					description: "Nothing can be chosen and nothing is focusable."
+				},
+				readOnly: {
+					type: "boolean",
+					description: "Can be read and navigated, but not chosen in."
+				},
+				autoFocus: {
+					type: "boolean",
+					description: "Focus the day the keyboard is on, on mount — what a picker's panel wants."
+				},
+				label: {
+					type: "string",
+					description: "The calendar's accessible name, which a screen reader hears before the month."
+				},
+				previousLabel: {
+					type: "string",
+					description: "The previous-page button's name."
+				},
+				nextLabel: {
+					type: "string",
+					description: "The next-page button's name."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		DatePicker: {
+			description: "A field with a calendar, a list of times, or both, behind a button inside it — type the value or pick it.",
+			import: "import DatePicker from '@box-kite/react/components/datePicker';",
+			slots: ["label"],
+			events: [
+				"onValueChange",
+				"isDateUnavailable",
+				"onOpenChange"
+			],
+			props: {
+				type: {
+					type: "string",
+					enum: [
+						"date",
+						"time",
+						"datetime"
+					],
+					description: "A day (`'date'`, default), a time of day (`'time'`), or both (`'datetime'`)."
+				},
+				value: {
+					anyOf: [{ type: "string" }],
+					description: "Controlled value, an ISO string of the picker's kind — see `DateField`."
+				},
+				defaultValue: {
+					anyOf: [{ type: "string" }],
+					description: "The value it starts with when the picker owns its state."
+				},
+				hourCycle: {
+					type: "number",
+					enum: [12, 24],
+					description: "A 12- or 24-hour clock, in the field and the list of times."
+				},
+				granularity: {
+					type: "string",
+					enum: ["minute", "second"],
+					description: "Whether a time is edited to the minute (default) or the second."
+				},
+				disambiguation: {
+					type: "string",
+					enum: [
+						"compatible",
+						"earlier",
+						"later",
+						"reject"
+					],
+					description: "What a wall-clock time a zone skips or repeats means."
+				},
+				name: {
+					type: "string",
+					description: "What the value posts under in a form."
+				},
+				step: {
+					type: "number",
+					description: "Minutes between the times the list offers."
+				},
+				defaultTime: {
+					type: "string",
+					description: "The time a day picked before any time takes."
+				},
+				showZone: {
+					type: "boolean",
+					description: "Whether a date-time names its zone after the time."
+				},
+				locale: {
+					type: "string",
+					description: "The language of the field, the calendar and the times."
+				},
+				min: {
+					anyOf: [{ type: "string" }],
+					description: "The earliest value that is valid, and the first day the calendar offers."
+				},
+				max: {
+					anyOf: [{ type: "string" }],
+					description: "The latest."
+				},
+				disabled: {
+					type: "boolean",
+					description: "Not editable, not focusable and not openable."
+				},
+				readOnly: {
+					type: "boolean",
+					description: "Focusable and read out, but not editable, and the button does not open."
+				},
+				required: {
+					type: "boolean",
+					description: "The form is not valid until it is filled in — the browser's own check."
+				},
+				invalid: {
+					type: "boolean",
+					description: "Marks the value invalid whatever the bounds say."
+				},
+				labelledBy: {
+					type: "string",
+					description: "Names the field after an element already on the page, instead of `label`."
+				},
+				describedBy: {
+					type: "string",
+					description: "An element that describes the field — a hint, an error."
+				},
+				open: {
+					type: "boolean",
+					description: "Whether the panel is open."
+				},
+				defaultOpen: {
+					type: "boolean",
+					description: "Whether it starts open, when the picker owns that itself."
+				},
+				closeOnSelect: {
+					type: "boolean",
+					description: "Whether choosing closes the panel."
+				},
+				firstDayOfWeek: {
+					type: "number",
+					description: "The day the week starts on, 0 for Sunday."
+				},
+				weekNumbers: {
+					type: "boolean",
+					description: "ISO week numbers down the calendar's side."
+				},
+				side: {
+					type: "string",
+					enum: [
+						"top",
+						"bottom",
+						"start",
+						"end"
+					],
+					description: "Which side of the field the panel opens on."
+				},
+				align: {
+					type: "string",
+					enum: [
+						"start",
+						"center",
+						"end"
+					],
+					description: "Which of the field's edges it lines up with."
+				},
+				clearable: {
+					type: "boolean",
+					description: "A button inside the field that empties it."
+				},
+				triggerLabel: {
+					type: "string",
+					description: "The calendar button's name."
+				},
+				clearLabel: {
+					type: "string",
+					description: "The clear button's name."
+				},
+				tabIndex: {
+					type: "number",
+					description: "Every segment's and button's tab index."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		DateRangePicker: {
+			description: "Two dates that make a span — a stay, a reporting period — typed into two fields or picked on a range calendar.",
+			import: "import { DateRangePicker } from '@box-kite/react/components/datePicker';",
+			slots: ["label"],
+			events: [
+				"onValueChange",
+				"isDateUnavailable",
+				"onOpenChange"
+			],
+			props: {
+				startName: {
+					type: "string",
+					description: "What the start posts under in a form."
+				},
+				endName: {
+					type: "string",
+					description: "What the end posts under."
+				},
+				startLabel: {
+					type: "string",
+					description: "The names a screen reader gives the two fields."
+				},
+				endLabel: {
+					type: "string",
+					description: "The end field's name."
+				},
+				months: {
+					type: "number",
+					enum: [
+						1,
+						2,
+						3
+					],
+					description: "Months side by side in the panel."
+				},
+				locale: {
+					type: "string",
+					description: "The language of the field, the calendar and the times."
+				},
+				min: {
+					anyOf: [{ type: "string" }],
+					description: "The earliest value that is valid, and the first day the calendar offers."
+				},
+				max: {
+					anyOf: [{ type: "string" }],
+					description: "The latest."
+				},
+				disabled: {
+					type: "boolean",
+					description: "Not editable, not focusable and not openable."
+				},
+				readOnly: {
+					type: "boolean",
+					description: "Focusable and read out, but not editable, and the button does not open."
+				},
+				required: {
+					type: "boolean",
+					description: "The form is not valid until it is filled in — the browser's own check."
+				},
+				invalid: {
+					type: "boolean",
+					description: "Marks the value invalid whatever the bounds say."
+				},
+				labelledBy: {
+					type: "string",
+					description: "Names the field after an element already on the page, instead of `label`."
+				},
+				describedBy: {
+					type: "string",
+					description: "An element that describes the field — a hint, an error."
+				},
+				open: {
+					type: "boolean",
+					description: "Whether the panel is open."
+				},
+				defaultOpen: {
+					type: "boolean",
+					description: "Whether it starts open, when the picker owns that itself."
+				},
+				closeOnSelect: {
+					type: "boolean",
+					description: "Whether choosing closes the panel."
+				},
+				firstDayOfWeek: {
+					type: "number",
+					description: "The day the week starts on, 0 for Sunday."
+				},
+				weekNumbers: {
+					type: "boolean",
+					description: "ISO week numbers down the calendar's side."
+				},
+				side: {
+					type: "string",
+					enum: [
+						"top",
+						"bottom",
+						"start",
+						"end"
+					],
+					description: "Which side of the field the panel opens on."
+				},
+				align: {
+					type: "string",
+					enum: [
+						"start",
+						"center",
+						"end"
+					],
+					description: "Which of the field's edges it lines up with."
+				},
+				clearable: {
+					type: "boolean",
+					description: "A button inside the field that empties it."
+				},
+				triggerLabel: {
+					type: "string",
+					description: "The calendar button's name."
+				},
+				clearLabel: {
+					type: "string",
+					description: "The clear button's name."
+				},
+				tabIndex: {
+					type: "number",
+					description: "Every segment's and button's tab index."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		TimeZoneSelect: {
+			description: "Picks a time zone by place, region or offset — `chis`, `europe` and `+3` all find Chisinau — out of every zone the runtime knows, each with the offset it is at now.",
+			import: "import TimeZoneSelect from '@box-kite/react/components/timeZoneSelect';",
+			slots: ["label", "emptyText"],
+			events: ["onValueChange"],
+			props: {
+				value: {
+					anyOf: [{ type: "string" }],
+					description: "The chosen IANA zone (`Europe/Chisinau`, `UTC`), or `null`."
+				},
+				defaultValue: {
+					anyOf: [{ type: "string" }],
+					description: "The zone it starts with when it owns its state."
+				},
+				zones: {
+					type: "array",
+					items: { type: "string" },
+					description: "Only these zones, in IANA names."
+				},
+				placeholder: {
+					type: "string",
+					description: "The field's placeholder."
+				},
+				name: {
+					type: "string",
+					description: "What the zone posts under in a form."
+				},
+				disabled: {
+					type: "boolean",
+					description: "Not editable and not openable, but still read out."
+				},
+				props: {
+					type: "object",
+					description: "Attributes for the `<input>` itself — an `aria-label`, an `id`."
+				}
+			},
+			required: [],
+			styled: !0
+		},
+		DateTime: {
+			description: "A date or a time, written for whoever is reading: in their language and on their wall clock, inside a real `<time datetime>` that keeps the exact value for a machine.",
+			import: "import DateTime from '@box-kite/react/components/dateTime';",
+			slots: ["default"],
+			events: [],
+			props: { locale: {
+				type: "string",
+				description: "The reader's language."
+			} },
+			required: [],
+			styled: !0
+		},
 		Combobox: {
 			description: "The APG editable combobox over a list of your own rows: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
 			import: "import Combobox from '@box-kite/react/components/combobox';",

package/client.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react/jsx-runtime"),c=require("react-dom");var l=`[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19`;function u(e){if(typeof e.createContext!=`function`)throw Error(l)}u(a.default);var d=a.default.createContext(void 0);function f({value:e,children:t}){return(0,s.jsx)(d.Provider,{value:e,children:t})}function p(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.u(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var m=r.t;function h(e,n){let{classNames:r,signature:i,styleElements:s}=t.l(e,n,(0,a.useContext)(d));return m(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:s}}function g(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return m(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var _;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(_||={}),u(a.default);var v=a.default.createContext({theme:``,setTheme:()=>{}});function y(e){let{theme:t,use:n=`local`,storageKey:l,globalStyles:u,viewTransition:d,components:p}=e,m=p?(0,s.jsx)(f,{value:p,children:e.children}):e.children,h=g(n===`global`?u:void 0,`html`),[_,y]=(0,a.useState)(t??o.defaultThemeName),[b,x]=(0,a.useState)(t!==void 0),S=(0,a.useRef)(null),C=(0,a.useRef)(_),w=(0,a.useRef)(null),T=(0,a.useRef)(void 0),E=(0,a.useCallback)(e=>{let t=()=>{e===null?(l&&(0,o.clearStoredTheme)(l),x(!1)):(l&&(0,o.writeStoredTheme)(l,e),y(e),x(!0))};if(d){let e=(0,o.transitionTheme)(()=>(0,c.flushSync)(t),d===`reveal`?`reveal`:`fade`);T.current=e.finished,e.finished.then(()=>T.current=void 0,()=>T.current=void 0)}else t()},[l,d]),D=d===`reveal`;(0,a.useEffect)(()=>D?(0,o.prepareReveal)():void 0,[D]);let[O,k]=(0,a.useState)(t);return t!==O&&(k(t),t===void 0?x(!1):(y(t),x(!0))),(0,a.useLayoutEffect)(()=>{if(b)return;let e=l?(0,o.readStoredTheme)(l):null,t=e??(0,o.getSystemTheme)();if(t!==C.current&&(S.current=t),y(t),e){x(!0);return}return(0,o.watchSystemTheme)(y)},[b,l]),r.t(()=>{_!==C.current&&(w.current??=(0,o.pauseTransitions)())},[_]),(0,a.useLayoutEffect)(()=>{if(C.current=_,S.current!==null&&S.current!==_)return;S.current=null;let e=w.current;w.current=null;let t=n===`global`?(0,o.documentRoot)():null,r=t?(0,o.applyThemeToElement)(t,_):void 0;return e?.(T.current),r},[_,n]),n===`local`?(0,s.jsxs)(v.Provider,{value:{theme:_,setTheme:E},children:[h,(0,s.jsx)(i.default,{className:_,props:{"data-theme":_},children:m})]}):(0,s.jsxs)(v.Provider,{value:{theme:_,setTheme:E},children:[h,m]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(v);return[e,t]}e.useTheme=t})(y||={});var b=y,x=new WeakMap;function S(e){let t=x.get(e);return t||(t=new Map,x.set(e,t)),t}function C(e=!0){let[t]=b.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=S(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}var w=0;function T(e){let{classNames:t,styleElements:i}=h({overflow:`hidden`},!1),a=t.slice(1).join(` `);return r.n(()=>{let t=n.n();if(!(!e||!t||!a))return w+=1,t.classList.add(a),()=>{--w,w===0&&t.classList.remove(a)}},[e,a]),i}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return T}});
+const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react/jsx-runtime"),c=require("react-dom");var l=`[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19`;function u(e){if(typeof e.createContext!=`function`)throw Error(l)}u(a.default);var d=a.default.createContext(void 0);function f({value:e,children:t}){return(0,s.jsx)(d.Provider,{value:e,children:t})}function p(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.u(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var m=r.t;function h(e,n){let{classNames:r,signature:i,styleElements:s}=t.l(e,n,(0,a.useContext)(d));return m(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:s}}function g(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return m(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var _;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(_||={}),u(a.default);var v=a.default.createContext({theme:``,setTheme:()=>{},setDesign:()=>{}});function y(e){let{theme:t,use:n=`local`,storageKey:l,globalStyles:u,viewTransition:d,components:p,design:m,designStorageKey:h}=e,_=p?(0,s.jsx)(f,{value:p,children:e.children}):e.children,y=g(n===`global`?u:void 0,`html`),[b,x]=(0,a.useState)(t??o.defaultThemeName),[S,C]=(0,a.useState)(t!==void 0),w=(0,a.useRef)(null),T=(0,a.useRef)(b),E=(0,a.useRef)(null),D=(0,a.useRef)(null),O=(0,a.useRef)(void 0),k=(0,a.useCallback)(e=>{if(!d)return e();let t=(0,o.transitionTheme)(()=>(0,c.flushSync)(e),d===`reveal`?`reveal`:`fade`);O.current=t.finished,t.finished.then(()=>O.current=void 0,()=>O.current=void 0)},[d]),A=(0,a.useCallback)(e=>k(()=>{e===null?(l&&(0,o.clearStoredTheme)(l),C(!1)):(l&&(0,o.writeStoredTheme)(l,e),x(e),C(!0))}),[l,k]),[j,M]=(0,a.useState)(m),[N,P]=(0,a.useState)(m);m!==N&&(P(m),M(m));let F=(0,a.useCallback)(e=>k(()=>{D.current??=(0,o.pauseTransitions)(),h&&(e===null?o.clearStoredTheme:o.writeStoredTheme)(h,e),M(e??m)}),[m,h,k]),I=(0,a.useRef)(null);(0,a.useLayoutEffect)(()=>{let e=h?(0,o.readStoredTheme)(h):null;e&&(I.current=e,M(e))},[h]),(0,a.useLayoutEffect)(()=>{if(I.current!==null&&I.current!==j)return;I.current=null;let e=n===`global`&&j?(0,o.documentRoot)():null,t=e?(0,o.applyDesignToElement)(e,j):void 0;return D.current?.(O.current),D.current=null,t},[j,n]);let L=d===`reveal`;(0,a.useEffect)(()=>L?(0,o.prepareReveal)():void 0,[L]);let[R,z]=(0,a.useState)(t);t!==R&&(z(t),t===void 0?C(!1):(x(t),C(!0))),(0,a.useLayoutEffect)(()=>{if(S)return;let e=l?(0,o.readStoredTheme)(l):null,t=e??(0,o.getSystemTheme)();if(t!==T.current&&(w.current=t),x(t),e){C(!0);return}return(0,o.watchSystemTheme)(x)},[S,l]),r.t(()=>{b!==T.current&&(E.current??=(0,o.pauseTransitions)())},[b]),(0,a.useLayoutEffect)(()=>{if(T.current=b,w.current!==null&&w.current!==b)return;w.current=null;let e=E.current;E.current=null;let t=n===`global`?(0,o.documentRoot)():null,r=t?(0,o.applyThemeToElement)(t,b):void 0;return e?.(O.current),r},[b,n]);let B=(0,a.useMemo)(()=>({theme:b,setTheme:A,design:j,setDesign:F}),[b,A,j,F]);return n===`local`?(0,s.jsxs)(v.Provider,{value:B,children:[y,(0,s.jsx)(i.default,{className:b,props:{"data-theme":b,"data-design":j},children:_})]}):(0,s.jsxs)(v.Provider,{value:B,children:[y,_]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(v);return[e,t]}e.useTheme=t;function n(){let{design:e,setDesign:t}=(0,a.useContext)(v);return[e,t]}e.useDesign=n})(y||={});var b=y,x=new WeakMap;function S(e){let t=x.get(e);return t||(t=new Map,x.set(e,t)),t}function C(e=!0){let[t]=b.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=S(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return C}});