@box-kite/react 2.1.0 → 2.2.0

package/catalog.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./dashboardSchema.cjs"),t=require("./specSchema.cjs");let n=require("@box-kite/core");var r;(function(t){let n=[`start`,`end`,`center`,`left`,`right`],r=[`START`,`END`,`LEFT`,`RIGHT`],i=[`sum`,`avg`,`min`,`max`,`count`],a=[`text`,`number`,`checkbox`,`select`],o=[`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],s={columns:{type:`array`,description:`The columns, left to right.`,items:{type:`object`,properties:{key:{type:`string`,description:`The row field this column shows, and the name it is addressed by.`},header:{type:`string`,description:`The heading. Without one the key is shown.`},width:{type:`number`,description:`Its starting width in pixels.`},align:{type:`string`,enum:n,description:"`start` and `end` follow the reading order; `left` and `right` do not."},pin:{type:`string`,enum:r,description:`Hold it at one end while the rest of the grid scrolls sideways.`},aggregate:{type:`string`,enum:i,description:`Total this column over each group row, and over the footer.`},sortable:{type:`boolean`,description:`Whether this column can be sorted. Without it the grid decides.`},resizable:{type:`boolean`,description:`Whether this column can be resized. Without it the grid decides.`},flexible:{type:`boolean`,description:"Whether it shares the space left over. `false` keeps it at its width."},filterable:{type:`boolean`,description:`Give this column a filter of its own.`},editable:{type:`boolean`,description:`Whether its cells can be edited.`},editor:{type:`string`,enum:a,description:`Which editor a cell opens. Without one it is read off the value.`},exportFormat:{type:`string`,description:"The number format a spreadsheet writes it with — `'#,##0.00'`."}},required:[`key`],additionalProperties:!1}},rowKey:{type:`string`,description:`The field that identifies a row.`},title:{type:`string`,description:`The top bar's title.`},showRowNumber:{type:`boolean`,description:`A row number down the left.`},rowSelection:{type:`boolean`,description:`A checkbox per row, and one in the header.`},rowHeight:{type:`number`,description:`The height of one row, in pixels.`},visibleRowsCount:{anyOf:[{type:`number`},{type:`string`,enum:[`all`]}],description:"How many rows are on screen at once. `all` renders every one and virtualizes nothing."},topBar:{type:`boolean`,description:`The bar above the rows, which holds the title and the search.`},bottomBar:{type:`boolean`,description:`The bar below the rows, which holds the pager.`},globalFilter:{type:`boolean`,description:`A search box over every column.`},globalFilterKeys:{type:`array`,items:{type:`string`},description:`Search only these columns.`},sortable:{type:`boolean`,description:`Whether every column can be sorted. A column may say otherwise.`},resizable:{type:`boolean`,description:`Whether every column can be resized. A column may say otherwise.`},editable:{type:`boolean`,description:`Whether every column can be edited. A column may say otherwise.`},rangeSelection:{type:`boolean`,description:`Drag or Shift+arrow across cells to mark a block, and Ctrl+C to copy it.`},footer:{type:`boolean`,description:"A row of grand totals under the rows, over every column carrying an `aggregate`."},export:{type:`boolean`,description:`CSV and Excel buttons in the top bar.`},groupBy:{type:`array`,items:{type:`string`},description:`The columns to group by, outermost first.`},groupDefaultExpanded:{anyOf:[{type:`boolean`},{type:`integer`}],description:"Which group rows start open: `true` is all of them, a number is how many levels down."}},c={type:`integer`,description:`How many columns that width is written in.`};t.CONTRACTS={DataGrid:{props:{data:{type:`array`,items:{type:`object`},description:`The rows.`},def:{type:`object`,description:`Everything about the grid that is not the rows: the columns, the bars, the title.`,properties:s,required:[`columns`],additionalProperties:!1}},required:[`def`]},DashboardGrid:{props:{layout:{...e.t,description:`Where each widget goes. A generated dashboard sets this one — it is read on every render.`},defaultLayout:{...e.t,description:"The layout it starts with, for a dashboard the user then rearranges. Read once, at the first render, so a spec that arrives in pieces should set `layout` instead."},columns:{anyOf:[{type:`integer`},{type:`object`,properties:Object.fromEntries(o.map(e=>[e,c])),additionalProperties:!1}],description:"How many columns, at one width or at several: `12`, or `{ xs: 1, md: 6, xxl: 12 }`."}}},Widget:{props:{empty:{anyOf:[{type:`boolean`},{type:`string`}],description:"There is nothing to show: `true` for the default line, or the words to use instead."}}},ChartContainer:{props:{series:{anyOf:[{type:`array`,items:{type:`string`}},{type:`object`}],description:`The series drawn inside, and what colour each of them is.`}}}}})(r||={});var i=r,a={props:{appearance:`The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme.`,animation:"One of the four presets — their `@keyframes` are registered already and their durations ride `--transitionTime`, so `prefers-reduced-motion` stops them with no opt-in.",animationDelay:`The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.`,animationDirection:`The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.`,animationDuration:`The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.`,animationFillMode:`The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.`,animationIterationCount:`The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.`,animationName:"Which `@keyframes` to run: a sequence registered with `Box.keyframes()`, one of the four preset names, or a name from a stylesheet this library never wrote — an unknown name is left alone rather than dropped, because `@keyframes` can come from anywhere.",animationPlayState:`The animation-play-state CSS property sets whether an animation is running or paused.`,animationTimingFunction:"How an animation progresses through each cycle: a keyword, one of the four sampled springs, or a curve of your own — `cubic-bezier()`, `steps()` and `linear()` are values.",b:`The border-width shorthand CSS property sets the width of an element's border.`,bx:`The border-width shorthand CSS property sets the width of an element's left and right border.`,by:`The border-width shorthand CSS property sets the width of an element's top and bottom border.`,bt:`The border-top-width CSS property sets the width of the top border of an element.`,br:`The border-right-width CSS property sets the width of the right border of an element.`,bb:`The border-bottom-width CSS property sets the width of the bottom border of an element.`,bl:`The border-left-width CSS property sets the width of the left border of an element.`,bs:"The border-inline-start-width CSS property sets the width of the border on the side the text starts from: `bl` in a left-to-right writing mode, `br` in a right-to-left one.",be:"The border-inline-end-width CSS property sets the width of the border on the side the text ends at: `br` in a left-to-right writing mode, `bl` in a right-to-left one.",borderStyle:`The border-style shorthand CSS property sets the line style for all four sides of an element's border.`,borderRadius:`The border-radius CSS property rounds the corners of an element's outer border edge.`,borderRadiusTop:`The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusRight:`The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusBottom:`The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusLeft:`The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusTopLeft:`The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusTopRight:`The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusBottomRight:`The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusBottomLeft:`The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusStart:`Rounds both corners on the side the text starts from: the left ones in a left-to-right writing mode, the right ones in a right-to-left one.`,borderRadiusEnd:`Rounds both corners on the side the text ends at: the right ones in a left-to-right writing mode, the left ones in a right-to-left one.`,borderRadiusStartStart:`Rounds the block-start, inline-start corner: top-left in a left-to-right writing mode, top-right in a right-to-left one.`,borderRadiusStartEnd:`Rounds the block-start, inline-end corner: top-right in a left-to-right writing mode, top-left in a right-to-left one.`,borderRadiusEndEnd:`Rounds the block-end, inline-end corner: bottom-right in a left-to-right writing mode, bottom-left in a right-to-left one.`,borderRadiusEndStart:`Rounds the block-end, inline-start corner: bottom-left in a left-to-right writing mode, bottom-right in a right-to-left one.`,position:`The position CSS property sets how an element is positioned in a document.`,anchorName:`Names this element as an anchor, so a floating layer can hang off it by name.`,positionAnchor:"Which anchor this element is positioned against, by the name `anchorName` gave it.",positionArea:`Which cell of the 3x3 grid around the anchor to sit in, and the whole of what a side and an alignment used to take JS to work out.`,positionTryFallbacks:"Where to put the layer when it does not fit: `flip-block` tries the opposite side of the block axis, `flip-inline` the inline one, `flip-start` swaps the two axes, and space-separated flips are one position tried together.",positionTryOrder:"How to choose among the fallbacks rather than taking the first that fits: `most-width`, `most-height`, `most-block-size` and `most-inline-size` each pick the position that leaves the layer most room on that axis.",positionVisibility:"When to hide the layer instead of positioning it: `anchors-visible` hides it once the anchor is scrolled out of sight, `no-overflow` once the layer itself would overflow, and the two combine.",top:`The top CSS property sets the vertical position of a positioned element.`,right:`The right CSS property participates in specifying the horizontal position of a positioned element.`,bottom:`The bottom CSS property participates in setting the vertical position of a positioned element.`,left:`The left CSS property participates in specifying the horizontal position of a positioned element.`,inset:`The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties.`,insetX:"The inset-inline CSS shorthand sets both insets on the inline axis: `insetX` is `left` and `right` in a left-to-right writing mode, the way `mx` is `margin-inline`.",insetY:"The inset-block CSS shorthand sets both insets on the block axis — `top` and `bottom` in a horizontal writing mode.",insetStart:"The inset-inline-start CSS property sets the distance from the edge the text starts at: `left` in a left-to-right writing mode, `right` in a right-to-left one.",insetEnd:"The inset-inline-end CSS property sets the distance from the edge the text ends at: `right` in a left-to-right writing mode, `left` in a right-to-left one.",boxSizing:"The `box-sizing` CSS property sets how the total width and height of an element is calculated.",contentVisibility:`The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.`,clipPath:`The clip-path CSS property creates a clipping region that sets what part of an element should be shown.`,cursor:`The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.`,display:"The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.",inline:"The `inline` property is a shortcut to transform `block`, `flex` and `grid` value to `inline-block`, `inline-flex` and `inline-grid` respectively.",borderCollapse:`Whether a table's cell borders are shared or every cell keeps its own.`,borderSpacing:"The gap between the cells of a `separate` table, on the spacing scale.",tableLayout:"`fixed` sizes a table from its own width and its first row rather than from every cell in it, so one long cell cannot widen the column it sits in — and the table lays out in one pass instead of after measuring all of it.",container:"Makes this element a query container, so the `cq` styles inside it answer to *its* width: `container` alone is an anonymous one (the nearest container `cq={{ md: … }}` finds), a name is what `cq={{ 'sidebar/md': … }}` addresses.",containerName:"The name `cq={{ 'sidebar/md': … }}` addresses.",containerType:"What may be asked about this container: `inline-size` (its width, what `container` sets), `size` (both axes — which needs the element to have a block size of its own, or its content stops laying it out), or `normal` to stop being a query container at all.",interpolateSize:"Whether `height`/`width` may interpolate to and from a keyword — `auto`, `min-content`, `fit-content`.",jc:`The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers.`,ai:`The CSS align-items property sets the align-self value on all direct children as a group.`,justifyItems:"The CSS justify-items property sets the `justify-self` of every item in the box: in a grid, where each one sits on the inline axis of its own area.",placeItems:'The place-items CSS shorthand sets `align-items` and `justify-items` in one declaration — `placeItems="center"` is the whole of grid centring.',placeContent:"The place-content CSS shorthand sets `alignContent` and `justifyContent` at once, so one keyword places a grid’s tracks on both axes.",alignContent:`The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.`,flex1:`The flex CSS shorthand property sets flex to fit the space available in its flex container.`,d:`The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).`,flexWrap:`The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.`,flexGrow:`The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size.`,flexShrink:`The flex-shrink CSS property sets the flex shrink factor of a flex item.`,alignSelf:`The align-self CSS property overrides a grid or flex item's align-items value.`,justifySelf:`The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.`,fontSize:`The font-size CSS property sets the size of the font.`,fontStyle:`The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.`,fontWeight:`The font-weight CSS property sets the weight (or boldness) of the font.`,gap:`The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns.`,rowGap:`The row-gap CSS property sets the size of the gap (gutter) between an element's rows.`,columnGap:`The column-gap CSS property sets the size of the gap (gutter) between an element's columns.`,order:`The order CSS property sets the order to lay out an item in a flex or grid container.`,height:`The height CSS property specifies the height of an element.`,minHeight:`The min-height CSS property sets the minimum height of an element.`,maxHeight:`The max-height CSS property sets the maximum height of an element.`,width:`The width CSS property sets an element's width.`,minWidth:`The min-width CSS property sets the minimum width of an element.`,maxWidth:`The max-width CSS property sets the maximum width of an element.`,aspectRatio:'The aspect-ratio CSS property sets a preferred ratio for the box, which the sizing props then fill in one axis of: `aspectRatio="video" width="fit"` is a 16/9 embed.',letterSpacing:`The letter-spacing CSS property sets the horizontal spacing behavior between text characters.`,lineHeight:`The line-height CSS property sets the height of a line box.`,listStyle:`The list-style CSS shorthand property allows you to set all the list style properties at once.`,m:`The margin CSS shorthand property sets the margin area on all four sides of an element.`,mx:`The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.`,my:`The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.`,mt:`The margin-top CSS property sets the margin area on the top of an element.`,mr:`The margin-right CSS property sets the margin area on the right side of an element.`,mb:`The margin-bottom CSS property sets the margin area on the bottom of an element.`,ml:`The margin-left CSS property sets the margin area on the left side of an element.`,ms:"The margin-inline-start CSS property sets the margin on the side the text starts from: `ml` in a left-to-right writing mode, `mr` in a right-to-left one.",me:"The margin-inline-end CSS property sets the margin on the side the text ends at: `mr` in a left-to-right writing mode, `ml` in a right-to-left one.",p:`The padding CSS shorthand property sets the padding area on all four sides of an element at once.`,px:`The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.`,py:`The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.`,pt:`The padding-top CSS property sets the height of the padding area on the top of an element.`,pr:`The padding-right CSS property sets the width of the padding area on the right of an element.`,pb:`The padding-bottom CSS property sets the height of the padding area on the bottom of an element.`,pl:`The padding-left CSS property sets the width of the padding area to the left of an element.`,ps:"The padding-inline-start CSS property sets the padding on the side the text starts from: `pl` in a left-to-right writing mode, `pr` in a right-to-left one.",pe:"The padding-inline-end CSS property sets the padding on the side the text ends at: `pr` in a left-to-right writing mode, `pl` in a right-to-left one.",objectFit:`The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.`,opacity:`The opacity CSS property sets the opacity of an element.`,outline:`The CSS outline-width property sets the thickness of an element's outline.`,outlineStyle:`The outline-style CSS property sets the style of an element's outline.`,outlineOffset:`The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element.`,overflow:`The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.`,overflowX:`The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges.`,overflowY:`The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges.`,pointerEvents:`The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.`,resize:`The resize CSS property sets whether an element is resizable, and if so, in which directions.`,rotate:`The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property.`,flip:"Mirrors the element: `xAxis` flips it left to right, `yAxis` top to bottom.",scale:"The scale CSS property lets you specify scale transforms individually and independently of the transform property: `scale={1.05}` is 105% in both axes.",textAlign:`The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.`,textDecoration:`The text-decoration shorthand CSS property sets the appearance of decorative lines on text.`,textOverflow:`The text-overflow CSS property sets how hidden overflow content is signaled to users.`,textTransform:`The text-transform CSS property specifies how to capitalize an element's text.`,textWrap:`The text-wrap CSS shorthand property controls how text inside an element is wrapped.`,transition:"What a transition applies to: `all` (what the base class already does), `none`, or one of the property groups — `colors`, `opacity`, `shadow`, `transform`, `size`, `filter`.",transitionBehavior:"Whether the properties that cannot be interpolated transition at all: `display`, `overlay`, `content-visibility`.",transitionDelay:`The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.`,transitionDuration:`How long a transition takes.`,transitionTimingFunction:"How a transition gets from one value to the other: a keyword, one of the four sampled springs (`spring`, `spring-gentle`, `spring-bouncy`, `spring-snappy`), or a curve — `cubic-bezier()`, `steps()` and `linear()` are values.",willChange:`The will-change CSS property warns the browser that a property is about to change, so it can promote the element first instead of mid-animation.`,userSelect:`The user-select CSS property controls whether the user can select text.`,visibility:`The visibility CSS property shows or hides an element without changing the layout of a document.`,whiteSpace:`The white-space CSS property sets how white space inside an element is handled.`,zIndex:`The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items.`,gridTemplateColumns:`The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.`,gridTemplateRows:`The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.`,gridColumn:`The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.`,gridColumnStart:`The grid-column-start CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement.`,gridColumnEnd:`The grid-column-end CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.`,gridRow:`The grid-row CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.`,gridRowStart:`The grid-row-start CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.`,gridRowEnd:`The grid-row-end CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.`,color:`The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.`,bgColor:`The background-color CSS property sets the background color of an element.`,borderColor:`The border-color shorthand CSS property sets the color of an element's border.`,outlineColor:`The outline-color CSS property sets the color of an element's outline.`,accentColor:`The accent-color CSS property tints the parts of a native control the page does not draw: a checkbox's tick, a radio's dot, a range track, a progress bar.`,caretColor:`The caret-color CSS property sets the colour of the insertion caret in a text field or any editable element.`,colorScheme:"The color-scheme CSS property tells the browser which schemes the element is *built* for, and native UI follows it: scrollbars, form controls, the spellcheck underline, `Canvas`/`CanvasText`.",fieldSizing:'The field-sizing CSS property lets a form control size itself to its content: `fieldSizing="content"` is a textarea that grows as it is typed into, with no JavaScript measuring anything.',fill:`The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted.`,fillOpacity:`The fill-opacity CSS property defines the opacity of the paint applied to the interior of an SVG shape or to SVG text.`,fillRule:`The fill-rule CSS property defines which parts of a self-intersecting SVG shape count as inside it, and are therefore filled.`,stroke:`The stroke CSS property defines the color or SVG paint server used to draw an element's stroke.`,strokeOpacity:`The stroke-opacity CSS property defines the opacity of the paint applied to an SVG element's stroke.`,strokeWidth:"The stroke-width CSS property sets the width of an SVG element's stroke, in user units — `strokeWidth={2}` is `stroke-width: 2`, no divider.",strokeLinecap:`The stroke-linecap CSS property defines the shape drawn at the two ends of an open SVG subpath.`,strokeLinejoin:`The stroke-linejoin CSS property defines the shape drawn where two segments of an SVG path meet.`,strokeMiterlimit:`The stroke-miterlimit CSS property sets how far a miter join may extend before it is cut back to a bevel.`,strokeDasharray:"The stroke-dasharray CSS property turns an SVG stroke into dashes: a single number is the dash and the gap alike, a string is the full pattern (`'8 4'`).",strokeDashoffset:`The stroke-dashoffset CSS property moves the dash pattern along the path — the property a path-drawing animation transitions.`,paintOrder:`The paint-order CSS property sets what is painted first.`,vectorEffect:"How an SVG element's stroke reacts to the transforms above it: `non-scaling-stroke` keeps a hairline one pixel wide at any scale.",shapeRendering:"The shape-rendering CSS property tells the renderer what to trade away when drawing an SVG shape — `crispEdges` turns off anti-aliasing, which is what pixel-exact gridlines want.",textAnchor:"Which part of SVG text sits on its `x`: `middle` centres an axis label under a tick.",dominantBaseline:"Which baseline of SVG text sits on its `y`: `central` centres a number inside a gauge.",cx:"The centre of a `<circle>` or `<ellipse>`, horizontally, in user units.",cy:"The cy CSS property positions the centre of a `<circle>` or an `<ellipse>` vertically, in user units.",r:"The r CSS property sets the radius of a `<circle>`, in user units.",rx:"The horizontal radius of an `<ellipse>` or corner radius of a `<rect>` — `borderRadius` for SVG, in user units rather than on the spacing scale.",ry:"The ry CSS property sets the vertical radius of an `<ellipse>` or the vertical corner radius of a `<rect>`, in user units.",x:"Positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or nested `<svg>` horizontally, in user units.",y:"The y CSS property positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or a nested `<svg>` vertically, in user units.",bgImage:`The background-image CSS property sets one or more background images on an element.`,bgGradient:"A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair.",shadow:"The elevation of the box: `xxs` through `xxl` on the elevation scale, or one of the three original presets (`small`, `medium`, `large`, which carry their own colour).",shadowColor:"What colour `shadow` draws in — the scale's own translucent black otherwise.",insetShadow:"A shadow drawn inside the border box: `xxs`, `xs` or `sm`.",insetShadowColor:"What colour `insetShadow` draws in.",ring:"A hard-edged shadow outside the border box, in px — `ring={2}`.",ringColor:"What colour `ring` draws in.",insetRing:`The same ring, drawn inside the border box: an inner hairline that needs no second element.`,insetRingColor:"What colour `insetRing` draws in.",textShadow:"A shadow behind the text rather than the box: `xxs` through `lg`, recoloured by `textShadowColor`.",textShadowColor:"What colour `textShadow` draws in.",blur:"How far the element's own pixels are blurred: a step of the named scale (`xs` 4px through `xxxl` 64px) or a radius in px.",brightness:"How bright the element is rendered, as a percentage: `brightness={110}` is 10% brighter, `{50}` is half.",contrast:"How much contrast the element is rendered with, as a percentage — `100` being the element as it is.",grayscale:"How far the element is desaturated, as a percentage: `grayscale={100}` removes colour entirely.",hueRotate:`How far every hue in the element is rotated round the colour circle, in degrees.`,invert:"How far the element's colours are inverted, as a percentage: `invert={100}` is a photographic negative.",saturate:"How saturated the element is rendered, as a percentage — over `100` to push the colour, under to drain it.",sepia:`How far the element is pushed towards sepia, as a percentage.`,dropShadow:"A shadow cast by the element's *shape* rather than its box — the one that follows a transparent PNG's outline or an SVG's path, where `shadow` would draw a rectangle.",dropShadowColor:"What colour `dropShadow` draws in.",backdropBlur:`How far what is *behind* the element is blurred — the glassmorphism half.`,backdropBrightness:`How bright what is behind the element is rendered, as a percentage.`,backdropContrast:`How much contrast what is behind the element is rendered with, as a percentage.`,backdropGrayscale:`How far what is behind the element is desaturated, as a percentage.`,backdropHueRotate:`How far every hue behind the element is rotated round the colour circle, in degrees.`,backdropInvert:`How far the colours behind the element are inverted, as a percentage.`,backdropOpacity:`How opaque what is behind the element is rendered, as a percentage.`,backdropSaturate:`How saturated what is behind the element is rendered, as a percentage.`,backdropSepia:`How far what is behind the element is pushed towards sepia, as a percentage.`,maskImage:`What the element is masked by: the alpha channel of an image decides which of its pixels are painted.`,bgClip:"Which box the background is painted inside — and `text`, which clips it to the glyphs themselves.",translateX:"Moves an element horizontally on the 2D plane, on the ÷4 spacing scale, as a fraction of its own width (`'1/2'`) or as a percentage.",translateY:"Moves an element vertically on the 2D plane, on the ÷4 spacing scale, as a fraction of its own height (`'1/2'`) or as a percentage.",content:"What a `::before`/`::after` renders — and whether it renders at all: a generated element with no `content` produces no box.",backdropFilter:"The whole `backdrop-filter` at once, written as CSS.",scrollbarWidth:`How wide a scrollbar the browser draws.`,scrollbarColor:`The scrollbar-color CSS property sets the color of the scrollbar thumb and track.`,scrollbarGutter:`The scrollbar-gutter CSS property reserves the space a scrollbar would take before there is one, so a panel does not shift sideways the moment its content overflows.`,vars:"CSS custom properties on this element, inherited by everything inside it: `vars={{ 'color-x': 'sky-500' }}` emits `--color-x: var(--sky-500)`.",css:`The escape hatch: a style object for the properties this library has no prop for, compiled into a class through the same pipeline as every other prop — shared, nestable, server-rendered — rather than an inline style.`},components:{Box:{description:"Any element at all, with every style prop on it: `tag` chooses the element where no component names one.",import:`import Box from '@box-kite/react';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Label:{description:"A `<label>` element, with every style prop on it.",import:`import { Label } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Span:{description:"A `<span>` element, with every style prop on it.",import:`import { Span } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Article:{description:"A `<article>` element, with every style prop on it.",import:`import { Article } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Aside:{description:"A `<aside>` element, with every style prop on it.",import:`import { Aside } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Details:{description:"A `<details>` element, with every style prop on it.",import:`import { Details } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Figcaption:{description:"A `<figcaption>` element, with every style prop on it.",import:`import { Figcaption } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Figure:{description:"A `<figure>` element, with every style prop on it.",import:`import { Figure } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Footer:{description:"A `<footer>` element, with every style prop on it.",import:`import { Footer } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Header:{description:"A `<header>` element, with every style prop on it.",import:`import { Header } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Main:{description:"A `<main>` element, with every style prop on it.",import:`import { Main } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Mark:{description:"A `<mark>` element, with every style prop on it.",import:`import { Mark } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Nav:{description:"A `<nav>` element, with every style prop on it.",import:`import { Nav } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},MenuList:{description:"A `<menu>` element, with every style prop on it.",import:`import { MenuList } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Section:{description:"A `<section>` element, with every style prop on it.",import:`import { Section } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Summary:{description:"A `<summary>` element, with every style prop on it.",import:`import { Summary } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Time:{description:"A `<time>` element, with every style prop on it.",import:`import { Time } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},P:{description:"A `<p>` element, with every style prop on it.",import:`import { P } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Ul:{description:"A `<ul>` element, with every style prop on it.",import:`import { Ul } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Ol:{description:"A `<ol>` element, with every style prop on it.",import:`import { Ol } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Li:{description:"A `<li>` element, with every style prop on it.",import:`import { Li } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H1:{description:"A `<h1>` element, with every style prop on it.",import:`import { H1 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H2:{description:"A `<h2>` element, with every style prop on it.",import:`import { H2 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H3:{description:"A `<h3>` element, with every style prop on it.",import:`import { H3 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H4:{description:"A `<h4>` element, with every style prop on it.",import:`import { H4 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H5:{description:"A `<h5>` element, with every style prop on it.",import:`import { H5 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H6:{description:"A `<h6>` element, with every style prop on it.",import:`import { H6 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Link:{description:"A `<a>` element, with every style prop on it.",import:`import { Link } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Img:{description:"A `<img>` element, with every style prop on it.",import:`import { Img } from '@box-kite/react/components/semantics';`,slots:[],events:[],props:{},required:[],styled:!0},Button:{description:"A real `<button>` with the `button` component style on it — the variants are `primary` (the default), `secondary` and `ghost`, and every Box prop styles it on top of them.",import:`import Button from '@box-kite/react/components/button';`,slots:[`default`],events:[`onClick`],props:{},required:[],styled:!0},Textbox:{description:"A single-line text field: a real `<input>`, styled by Box props, whose `type` decides its validation, its mobile keyboard and its spinner.",import:`import Textbox from '@box-kite/react/components/textbox';`,slots:[],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:"What the field submits under, and what a `<label htmlFor>` of your own would point at."},type:{type:`string`,enum:[`date`,`datetime-local`,`email`,`hidden`,`month`,`number`,`password`,`search`,`tel`,`text`,`time`,`url`,`week`],description:`Which text input this is.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`Controlled value.`},defaultValue:{anyOf:[{type:`string`},{type:`number`}],description:`The value it starts with when the field owns its own state.`},pattern:{type:`string`,description:`A regular expression the value has to match for the form to be valid.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Editable to nobody, but still focusable, still read out and still submitted.`},step:{anyOf:[{type:`number`},{type:`string`}],description:"How far a `number` field's spinner and arrow keys move."}},required:[],styled:!0},Textarea:{description:"A multi-line text field: a real `<textarea>`, styled by Box props.",import:`import Textarea from '@box-kite/react/components/textarea';`,slots:[],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:"What the field submits under, and what a `<label htmlFor>` of your own would point at."},value:{type:`string`,description:`Controlled value.`},defaultValue:{type:`string`,description:`The value it starts with when the field owns its own state.`},rows:{type:`number`,description:`How many lines tall it starts.`},cols:{type:`number`,description:"How many characters wide it starts — `width` is the prop to reach for instead."},autoFocus:{type:`boolean`,description:`Focus it on mount.`},maxLength:{type:`number`,description:`The most characters the field accepts.`},minLength:{type:`number`,description:`The fewest characters that count as valid.`},readOnly:{type:`boolean`,description:`Editable to nobody, but still focusable, still read out and still submitted.`},required:{type:`boolean`,description:`The form will not submit while it is empty, and a screen reader says so.`}},required:[],styled:!0},Checkbox:{description:'The APG checkbox — which is to say, a real `<input type="checkbox">`.',import:`import Checkbox from '@box-kite/react/components/checkbox';`,slots:[`label`],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:`What the checkbox submits under.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`The value the form submits when it is checked.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Rendered and read, but not toggleable.`},defaultChecked:{type:`boolean`,description:`The state it starts in when the checkbox is uncontrolled.`}},required:[],styled:!0},Switch:{description:`The APG switch: an on/off control drawn as a track and a thumb.`,import:`import Switch from '@box-kite/react/components/switch';`,slots:[`label`],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:`What the switch submits under.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`The value the form submits when it is on.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Rendered and read, but not toggleable.`},defaultChecked:{type:`boolean`,description:`The state it starts in when the switch is uncontrolled.`}},required:[],styled:!0},RadioButton:{description:'One radio button — a real `<input type="radio">`, so the platform supplies the checked state, the shared-`name` grouping and form submission.',import:`import RadioButton from '@box-kite/react/components/radioButton';`,slots:[`label`],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:`The name the radios of one set share — it is what makes them one choice rather than several.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`What the set submits when this option is the chosen one.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Rendered and read, but not selectable.`},defaultChecked:{type:`boolean`,description:`Makes this the chosen option to begin with, when the set is uncontrolled.`}},required:[],styled:!0},RadioGroup:{description:`The APG radio group: one label over a set of radios, the arrow keys moving between them and choosing as they go.`,import:`import RadioGroup from '@box-kite/react/components/radioGroup';`,slots:[`label`,`default`],events:[`onValueChange`,`onChange`],props:{name:{type:`string`,description:"The `name` every radio in the group submits under."},value:{type:`string`,description:`Controlled selection.`},defaultValue:{type:`string`,description:`The option chosen to begin with, when the group owns its value.`},orientation:{type:`string`,enum:[`vertical`,`horizontal`],description:`Which way the radios stack.`}},required:[],styled:!0},"RadioGroup.Item":{description:"A radio that reads its group: the shared `name`, whether it is selected, and what to report when it is chosen.",import:`import RadioGroup from '@box-kite/react/components/radioGroup';`,slots:[`label`],events:[],props:{value:{type:`string`,description:`What this radio submits, and what the group reports when it is chosen.`},name:{type:`string`,description:`Only for an item rendered outside a group — inside one, the group supplies the name.`}},required:[`value`],styled:!0},Tooltip:{description:`The APG tooltip: a description that appears on hover *and* on focus and stays until the user is done with it.`,import:`import Tooltip from '@box-kite/react/components/tooltip';`,slots:[`content`],events:[`children`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the tooltip owns its own state.`},openDelay:{type:`number`,description:`How long the pointer has to rest on the trigger, in ms.`},closeDelay:{type:`number`,description:`The grace period after the pointer leaves, in ms.`},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the trigger the bubble sits on — `top`/`bottom` are the block axis, `start`/`end` the inline one."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the trigger's edges to line the bubble up with along the other axis.`},offset:{type:`number`,description:`The gap between trigger and bubble, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`}},required:[],styled:!0},Overlay:{description:`A floating layer: anchored by the browser, and in the browser's **top layer** for the stacking order.`,import:`import Overlay from '@box-kite/react/components/overlay';`,slots:[`default`],events:[],props:{side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the anchor the layer sits on: `top`/`bottom` are the block axis, `start`/`end` the inline one, so a layer beside its anchor mirrors in a right-to-left page."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the anchor's edges to line up with along the other axis.`},offset:{type:`number`,description:"The gap between anchor and layer, on the ÷4 spacing scale — `offset={2}` is 8px."},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`},matchWidth:{type:`boolean`,description:`Whether the layer is at least as wide as its anchor.`}},required:[],styled:!0},Popover:{description:`A panel anchored to a trigger, on the platform's own Popover API: the top layer, light dismiss and focus return are the browser's, and the position is CSS anchor positioning.`,import:`import Popover from '@box-kite/react/components/popover';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the popover owns its own state.`},label:{type:`string`,description:`The panel's accessible name.`},labelledBy:{type:`string`,description:"Names the panel after an element already on the page, instead of `label`."},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the trigger the panel sits on — `top`/`bottom` are the block axis, `start`/`end` the inline one, so a panel beside its trigger mirrors in a right-to-left page."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the trigger's edges to line the panel up with along the other axis.`},offset:{type:`number`,description:`The gap between trigger and panel, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`},matchWidth:{type:`boolean`,description:`Whether the panel is at least as wide as its trigger.`},autoFocus:{type:`boolean`,description:`Whether opening moves focus into the panel.`}},required:[],styled:!0},Dialog:{description:"A modal dialog on the platform's own `<dialog>`: `showModal()` supplies the top layer, the `::backdrop`, an inert page behind it, Escape, focus containment and focus return — so none of that is written here.",import:`import Dialog from '@box-kite/react/components/dialog';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the dialog owns its own state.`},label:{type:`string`,description:"The dialog's accessible name, when no `Dialog.Title` supplies one."},labelledBy:{type:`string`,description:"Names the dialog after an element already on the page, instead of `label` or a `Dialog.Title`."},describedBy:{type:`string`,description:"Describes it from an element already on the page, instead of a `Dialog.Description`."},modal:{type:`boolean`,description:`Whether the rest of the page is blocked while it is open.`},dismissible:{type:`boolean`,description:`Whether a press outside closes it.`},lockScroll:{type:`boolean`,description:`Whether the page behind it stops scrolling.`}},required:[],styled:!0},"Dialog.Title":{description:"The dialog's heading, and what names it: rendering one is what puts `aria-labelledby` on the dialog, so a name and a visible title cannot drift apart.",import:`import Dialog from '@box-kite/react/components/dialog';`,slots:[`default`],events:[],props:{},required:[],styled:!0},"Dialog.Description":{description:"The dialog's supporting text, and what describes it: rendering one puts `aria-describedby` on the dialog.",import:`import Dialog from '@box-kite/react/components/dialog';`,slots:[`default`],events:[],props:{},required:[],styled:!0},AlertDialog:{description:'A dialog that interrupts to ask something: `role="alertdialog"`, always modal, and **never dismissed by a press outside**, because a decision that can be clicked away is one the user did not make.',import:`import { AlertDialog } from '@box-kite/react/components/dialog';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Menu:{description:"A menu button and its menu, on the platform's own Popover API: `<Menu>` is the button's menu, and every `Menu.Sub` inside it is another popover nested in that one.",import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the menu owns its own state.`},label:{type:`string`,description:`The menu's accessible name.`},labelledBy:{type:`string`,description:"Names the menu after an element already on the page, instead of `label`."},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the trigger the menu sits on — `top`/`bottom` are the block axis, `start`/`end` the inline one, so a menu beside its trigger mirrors in a right-to-left page."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the trigger's edges to line the menu up with along the other axis.`},offset:{type:`number`,description:`The gap between trigger and menu, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`},matchWidth:{type:`boolean`,description:`Whether the menu is at least as wide as its trigger.`}},required:[],styled:!0},"Menu.Item":{description:`One command in the menu.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[],props:{disabled:{type:`boolean`,description:`Focusable, announced, and not activatable.`},closeOnSelect:{type:`boolean`,description:`Whether choosing it closes the whole menu.`}},required:[],styled:!0},"Menu.CheckboxItem":{description:'An item that carries a state of its own: `role="menuitemcheckbox"` and a tick.',import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[`onCheckedChange`],props:{checked:{type:`boolean`,description:`Controlled checked state.`},defaultChecked:{type:`boolean`,description:`Whether it starts checked, when the item owns its own state.`},closeOnSelect:{type:`boolean`,description:`Whether toggling it closes the menu.`},disabled:{type:`boolean`,description:`Focusable, announced, and not activatable.`}},required:[],styled:!0},"Menu.RadioGroup":{description:'A set of items of which one is chosen: `role="group"`, and `menuitemradio` inside it.',import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`,`label`],events:[`onValueChange`],props:{value:{type:`string`,description:"Controlled value — the `value` of whichever item is checked."},defaultValue:{type:`string`,description:`The value checked to start with, when the group owns its own state.`}},required:[],styled:!0},"Menu.RadioItem":{description:`One of a radio group's choices.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[],props:{value:{type:`string`,description:"What this item stands for, compared against the group's `value`."},closeOnSelect:{type:`boolean`,description:`Whether choosing it closes the menu.`},disabled:{type:`boolean`,description:`Focusable, announced, and not activatable.`}},required:[`value`],styled:!0},"Menu.Group":{description:`A titled section.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`,`label`],events:[],props:{},required:[],styled:!0},"Menu.Separator":{description:`The line between two sections.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[],props:{},required:[],styled:!0},"Menu.Sub":{description:`A submenu: an item that opens a menu of its own.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`label`,`default`],events:[],props:{disabled:{type:`boolean`,description:`Focusable, announced, and it opens nothing.`},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:`Which side of its item the submenu sits on.`},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the item's edges to line the submenu up with.`},offset:{type:`number`,description:`The gap between item and submenu, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`}},required:[],styled:!0},Tabs:{description:`The APG tabs pattern: one list of tabs over one panel at a time.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[`onValueChange`],props:{value:{type:`string`,description:`Controlled selection.`},defaultValue:{type:`string`,description:`Which tab starts selected.`},orientation:{type:`string`,enum:[`horizontal`,`vertical`],description:`Which way the tabs run.`},activation:{type:`string`,enum:[`automatic`,`manual`],description:`Whether moving to a tab selects it.`},loop:{type:`boolean`,description:`Whether the arrows wrap around at the ends.`},indicator:{type:`string`,enum:[`static`,`sliding`],description:"Which indicator marks the selected tab: the tab's own border (`'static'`, the default) or one element travelling between them (`'sliding'`), which animates because it is the same element."},keepMounted:{type:`boolean`,description:`Render every panel rather than only the selected one, hiding the rest.`}},required:[],styled:!0},"Tabs.List":{description:`The tabs themselves, and the keyboard: it sits on the list because roving tabindex puts one tab in the tab sequence.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{label:{type:`string`,description:`The list's accessible name.`},labelledBy:{type:`string`,description:"Names the list after an element already on the page, instead of `label`."}},required:[],styled:!0},"Tabs.Tab":{description:"One tab: a real `<button>`, so Enter and Space reach it the way the platform means them to.",import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{value:{type:`string`,description:`Which panel this tab shows, and what the widget reports when it is chosen.`},disabled:{type:`boolean`,description:"Not selectable, and stepped over by the arrows — unlike a disabled `Menu.Item`, which APG asks stay reachable."}},required:[`value`],styled:!0},"Tabs.Panels":{description:`The panels' container, and the only optional part: it takes the height of the panel on screen, so a switch between panels of different heights is a transition rather than a jump.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{},required:[],styled:!0},"Tabs.Panel":{description:`One panel.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{value:{type:`string`,description:`The tab this panel belongs to.`}},required:[`value`],styled:!0},Accordion:{description:`A set of sections, each opened by its own header.`,import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[`onValueChange`],props:{value:{type:`array`,items:{type:`string`},description:`Controlled: the values of every panel standing open.`},defaultValue:{type:`array`,items:{type:`string`},description:`Which panels start open.`},multiple:{type:`boolean`,description:`Whether several panels may stand open at once.`},loop:{type:`boolean`,description:`Whether Down and Up wrap around at the ends.`},level:{type:`number`,enum:[1,2,3,4,5,6],description:`Which heading each header sits in.`}},required:[],styled:!0},"Accordion.Item":{description:`One section.`,import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[],props:{value:{type:`string`,description:`What this section stands for, and what the widget reports when it is open.`},disabled:{type:`boolean`,description:`Not openable, and stepped over by Down and Up.`}},required:[`value`],styled:!0},"Accordion.Trigger":{description:"The header: a real `<button>` in a heading, which is the pair APG asks for.",import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[],props:{level:{type:`number`,enum:[1,2,3,4,5,6],description:`This header's heading level, when it differs from the one the accordion sets.`},arrow:{type:`boolean`,description:`Whether to draw the chevron.`}},required:[],styled:!0},"Accordion.Panel":{description:`The section's content, in the grid that gives it its height.`,import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Collapsible:{description:`One disclosure: a trigger, and the content it reveals.`,import:`import Collapsible from '@box-kite/react/components/accordion';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open.`}},required:[],styled:!0},Slider:{description:`A value chosen by dragging a thumb along a track.`,import:`import Slider from '@box-kite/react/components/slider';`,slots:[`default`],events:[`onValueChange`,`onValueCommit`,`format`],props:{min:{type:`number`,description:`The bottom of the range.`},max:{type:`number`,description:`The top of the range.`},step:{type:`number`,description:`The grid every value lands on.`},largeStep:{type:`number`,description:`What Page Up and Page Down move by.`},orientation:{type:`string`,enum:[`horizontal`,`vertical`],description:`Which way the thumbs run.`},disabled:{type:`boolean`,description:`Not adjustable, by pointer or by key.`},label:{type:`string`,description:`What the slider is called.`},labelledBy:{type:`string`,description:`The same, naming an element that already says it.`},thumbLabels:{type:`array`,items:{type:`string`},description:`One name per thumb — "Minimum", "Maximum".`},name:{type:`string`,description:`What the value submits under.`}},required:[],styled:!0},Progress:{description:`How far a task has got.`,import:`import Progress from '@box-kite/react/components/progress';`,slots:[`default`],events:[`format`],props:{value:{type:`number`,description:`How far along it is.`},min:{type:`number`,description:`The bottom of the range.`},max:{type:`number`,description:`The top of the range, and so what "full" means.`},label:{type:`string`,description:`What the bar is called.`},labelledBy:{type:`string`,description:`The same, naming an element that already says it.`}},required:[],styled:!0},Toaster:{description:`The viewport every toast is drawn in, and the live region they are announced from.`,import:`import Toaster from '@box-kite/react/components/toaster';`,slots:[`default`],events:[],props:{position:{type:`string`,enum:[`top-start`,`top-center`,`top-end`,`bottom-start`,`bottom-center`,`bottom-end`],description:`Which corner the stack is pinned to.`},limit:{type:`number`,description:`How many toasts are on screen at once.`},duration:{type:`number`,description:`Milliseconds a toast that names no duration of its own stays.`},label:{type:`string`,description:`The region's accessible name.`},closeLabel:{type:`string`,description:`The close button's accessible name.`}},required:[],styled:!0},Dropdown:{description:`The APG combobox, in both shapes: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/`,import:`import Dropdown from '@box-kite/react/components/dropdown';`,slots:[`label`],events:[`onValueChange`,`onChange`],props:{name:{type:`string`,description:`What the selection submits under: the component renders a hidden input carrying it.`},defaultOpen:{type:`boolean`,description:`Open the listbox as soon as the dropdown mounts, highlighting the selected option the way a press on the trigger would.`},multiple:{type:`boolean`,description:`Let more than one option be chosen.`},isSearchable:{type:`boolean`,description:"Turn the control into the APG *editable* combobox: a text field that filters the listbox, and a different pattern rather than a decoration — the field carries the role, the ARIA and your `props`."},searchPlaceholder:{type:`string`,description:"The placeholder for the `isSearchable` field."},hideIcon:{type:`boolean`,description:`Drop the chevron.`},showCheckbox:{type:`boolean`,description:`Show checkbox for each item in multiple selection mode`}},required:[],styled:!0},"Dropdown.Display":{description:``,import:`import Dropdown from '@box-kite/react/components/dropdown';`,slots:[],events:[`children`],props:{},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';`,slots:[`label`,`loadingText`,`emptyText`],events:[`createRow`,`createLabel`,`removeLabel`,`onQueryChange`,`onOpenChange`],props:{placeholder:{type:`string`,description:`The field's placeholder.`},name:{type:`string`,description:`What the selection submits under: one hidden input per selected row, carrying its key.`},disabled:{type:`boolean`,description:`Not editable and not openable, but still read out.`},props:{type:`object`,description:"Attributes for the `<input>` that *is* the combobox — an `aria-label`, an `inputMode`, an `id`."},hideIcon:{type:`boolean`,description:`Drop the chevron.`},loading:{type:`boolean`,description:`Rows are on their way.`},query:{type:`string`,description:`The typed text.`},defaultQuery:{type:`string`,description:`The text the field starts with when the combobox owns its own query.`},open:{type:`boolean`,description:`Whether the listbox is showing.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the combobox owns that itself.`}},required:[],styled:!0},DataGrid:{description:"The data grid: sorting, filtering, grouping, pinned columns, row selection, detail rows, pagination and virtualization, with every part of it styled through the `datagrid` component tree rather than a stylesheet of its own.",import:`import DataGrid from '@box-kite/react/components/dataGrid';`,slots:[`default`],events:[`onSelectedRowKeysChange`,`onSelectionChange`,`onGlobalFilterChange`,`onColumnFiltersChange`,`filters`,`onExpandedRowKeysChange`,`onExpandedTreeKeysChange`,`onPaginationChange`,`onPageChange`,`onPageSizeChange`,`onCellEditsChange`,`onRangeChange`,`onPaste`,`onSortingChange`,`onSortChange`,`onServerStateChange`],props:{loading:{type:`boolean`,description:`Show the loading sweep over the rows.`},globalFilterValue:{type:`string`,description:`Controlled global filter value`},expandedRowKeys:{type:`array`,items:{anyOf:[{type:`string`},{type:`number`}]},description:`Controlled expanded detail row keys`},expandedTreeKeys:{type:`array`,items:{anyOf:[{type:`string`},{type:`number`}]},description:"Controlled open rows of a `def.treeData` tree."},page:{type:`number`,description:`Controlled current page (1-indexed).`},pageSize:{type:`number`,description:`Controlled page size.`}},required:[],styled:!0},Flex:{description:"`Box` with `display: flex` on it — `inline` makes that `inline-flex`.",import:`import Flex from '@box-kite/react/components/flex';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Grid:{description:"`Box` with `display: grid` on it — `inline` makes that `inline-grid`.",import:`import Grid from '@box-kite/react/components/grid';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Icon:{description:"Box props on an icon somebody else drew — lucide, Tabler, react-icons, an Iconify set, a raw `<svg>`.",import:`import Icon from '@box-kite/react/components/icon';`,slots:[`default`],events:[],props:{label:{type:`string`,description:'Names the icon — `role="img"` and this text.'}},required:[],styled:!0},Presence:{description:"The exit half of the animation story: it keeps rendering its child with `present: false` until the child's own CSS says its transition is over, and only then lets React remove it.",import:`import Presence from '@box-kite/react/components/presence';`,slots:[],events:[`children`],props:{present:{type:`boolean`,description:`Whether the child should be there.`}},required:[`present`],styled:!1},Sparkline:{description:`A trend line with no axes, no legend and no labels: the shape of a series, small enough to sit in a table cell.`,import:`import { Sparkline } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{data:{type:`array`,items:{type:`number`},description:`The numbers to draw, oldest first.`},variant:{type:`string`,enum:[`line`,`area`,`bar`],description:"`line` (default), `area` — the line with the space beneath it filled — or `bar`."},min:{type:`number`,description:`Fix the ends of the value axis.`},max:{type:`number`,description:"The top of the value axis — see `min`, which it is written beside."},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`data`],styled:!0},ProgressRing:{description:`A circular progress arc: one value from 0 to 1, drawn as the filled part of a ring over its own track.`,import:`import { ProgressRing } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{value:{type:`number`,description:`How full the arc is, from 0 to 1.`},thickness:{type:`number`,description:`The width of the ring in view units, out of the 100 the box is wide.`},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`value`],styled:!0},Gauge:{description:"A `ProgressRing` that stops short of a full turn: `sweep` is how far round the dial goes and `start` where it begins, so a value reads as a needle position rather than as a proportion.",import:`import { Gauge } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{sweep:{type:`number`,description:`How far round the dial goes, in degrees.`},start:{type:`number`,description:`Where it starts, in degrees clockwise from twelve o'clock.`},value:{type:`number`,description:`How full the arc is, from 0 to 1.`},thickness:{type:`number`,description:`The width of the ring in view units, out of the 100 the box is wide.`},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`value`],styled:!0},MiniDonut:{description:"A ring of segments, each drawn as its share of the whole — so the values need no total, and the colours cycle through the six a `ChartContainer` declares.",import:`import { MiniDonut } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{data:{type:`array`,items:{type:`number`},description:`One value per segment.`},thickness:{type:`number`,description:`The width of the ring in view units, out of the 100 the box is wide.`},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`data`],styled:!0},ChartContainer:{description:'The theming bridge for a chart somebody else draws: a Box that declares `--chart-1` … `--chart-6` in both themes plus one `--color-<series>` per series, so a Recharts `<Line stroke="var(--color-revenue)">` names no colour of its own and its dark mode belongs to the page.',import:`import { ChartContainer } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{},required:[],styled:!0},DashboardGrid:{description:`A dashboard the people using it can rearrange, and a model can write.`,import:`import DashboardGrid from '@box-kite/react/components/dashboard';`,slots:[`default`],events:[`onLayoutChange`,`onLayoutCommit`],props:{rowHeight:{type:`number`,description:`The height of one row, on the ÷4 spacing scale.`},editable:{type:`boolean`,description:`Whether widgets can be moved and resized.`},label:{type:`string`,description:`What the set of widgets is called.`},labelledBy:{type:`string`,description:`The same, naming an element that already says it.`}},required:[],styled:!0},Widget:{description:"The chrome round whatever a widget shows: a title bar, the states a panel fed by a request can be in, and — inside a `DashboardGrid` — the handles that move and resize it.",import:`import { Widget } from '@box-kite/react/components/dashboard';`,slots:[`default`,`title`,`description`,`actions`,`error`],events:[`onRefresh`],props:{id:{type:`string`,description:`Which layout item this widget is.`},name:{type:`string`,description:`What the widget is called where a control has to say so — the handles' labels and the announcements.`},level:{type:`number`,enum:[2,3,4,5,6],description:`The heading level the title renders at.`},loading:{type:`boolean`,description:"Bars where the content will be, and `aria-busy` while they are showing."},refreshLabel:{type:`string`,description:`The refresh button's accessible name.`}},required:[],styled:!0},ToolCallCard:{description:`One call an agent made: what it ran, where it got to, and — when the header is opened — what went in and what came back.`,import:`import { ToolCallCard } from '@box-kite/react/components/agent';`,slots:[`name`,`description`,`inputLabel`,`outputLabel`,`errorLabel`,`default`],events:[`onOpenChange`],props:{status:{type:`string`,enum:[`pending`,`running`,`success`,`error`],description:`Where the call is.`},open:{type:`boolean`,description:`Controlled: whether the body is open.`},defaultOpen:{type:`boolean`,description:`Whether it starts open.`},collapsible:{type:`boolean`,description:`Whether the body can be opened at all.`},valueLimit:{type:`number`,description:`How much of a value is shown before it is cut.`}},required:[],styled:!0},ApprovalCard:{description:`The gate in front of something an agent wants to do: what it is, and the two answers.`,import:`import { ApprovalCard } from '@box-kite/react/components/agent';`,slots:[`title`,`description`,`inputLabel`,`approveLabel`,`rejectLabel`,`default`],events:[`onDecisionChange`],props:{decision:{type:`string`,enum:[`approved`,`rejected`],description:`Controlled: what has been decided.`},defaultDecision:{type:`string`,enum:[`approved`,`rejected`],description:`What it starts as.`},busy:{type:`boolean`,description:"The decision is on its way to a server: both buttons are disabled and the card reports `aria-busy`."},autoFocus:{type:`boolean`,description:`Whether to put focus on the card when it mounts.`},valueLimit:{type:`number`,description:`How much of the input is shown before it is cut.`}},required:[],styled:!0},Reasoning:{description:`What the model was thinking, folded away.`,import:`import { Reasoning } from '@box-kite/react/components/agent';`,slots:[`label`,`default`],events:[`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled: whether it is open.`},defaultOpen:{type:`boolean`,description:`Whether it starts open.`},streaming:{type:`boolean`,description:`Still arriving: the header says so and shimmers.`},duration:{type:`number`,description:`How long the thought took, in milliseconds.`}},required:[],styled:!0},StreamingText:{description:`What the agent is saying, as it arrives.`,import:`import { StreamingText } from '@box-kite/react/components/agent';`,slots:[`default`],events:[],props:{text:{type:`string`,description:`The message so far.`},streaming:{type:`boolean`,description:`Whether more is still coming.`},window:{type:`number`,description:`How many of the runs that arrived most recently stay faded in at once; the rest settle.`},caret:{type:`boolean`,description:`Whether to draw the caret while streaming.`}},required:[`text`],styled:!0},Skeleton:{description:`Where content will be, while it is being fetched.`,import:`import Skeleton from '@box-kite/react/components/skeleton';`,slots:[`label`],events:[],props:{lines:{type:`number`,description:`How many bars to draw.`},circle:{type:`boolean`,description:`A round placeholder — an avatar, a thumbnail.`}},required:[],styled:!0}}};function o(e){let t=(0,n.getDefaultEngine)();return n.BoxCatalogs.build({...t.getCatalogSource(),componentStyles:t.getComponentsStyles(),manifest:a,contracts:i.CONTRACTS},e)}exports.catalog=o,exports.default=o,exports.specSchema=t.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./dashboardSchema.cjs"),t=require("./specSchema.cjs");let n=require("@box-kite/core");var r;(function(t){let n=[`start`,`end`,`center`,`left`,`right`],r=[`START`,`END`,`LEFT`,`RIGHT`],i=[`sum`,`avg`,`min`,`max`,`count`],a=[`text`,`number`,`checkbox`,`select`],o=[`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],s={columns:{type:`array`,description:`The columns, left to right.`,items:{type:`object`,properties:{key:{type:`string`,description:`The row field this column shows, and the name it is addressed by.`},header:{type:`string`,description:`The heading. Without one the key is shown.`},width:{type:`number`,description:`Its starting width in pixels.`},align:{type:`string`,enum:n,description:"`start` and `end` follow the reading order; `left` and `right` do not."},pin:{type:`string`,enum:r,description:`Hold it at one end while the rest of the grid scrolls sideways.`},aggregate:{type:`string`,enum:i,description:`Total this column over each group row, and over the footer.`},sortable:{type:`boolean`,description:`Whether this column can be sorted. Without it the grid decides.`},resizable:{type:`boolean`,description:`Whether this column can be resized. Without it the grid decides.`},flexible:{type:`boolean`,description:"Whether it shares the space left over. `false` keeps it at its width."},filterable:{type:`boolean`,description:`Give this column a filter of its own.`},editable:{type:`boolean`,description:`Whether its cells can be edited.`},editor:{type:`string`,enum:a,description:`Which editor a cell opens. Without one it is read off the value.`},exportFormat:{type:`string`,description:"The number format a spreadsheet writes it with — `'#,##0.00'`."}},required:[`key`],additionalProperties:!1}},rowKey:{type:`string`,description:`The field that identifies a row.`},title:{type:`string`,description:`The top bar's title.`},showRowNumber:{type:`boolean`,description:`A row number down the left.`},rowSelection:{type:`boolean`,description:`A checkbox per row, and one in the header.`},rowHeight:{type:`number`,description:`The height of one row, in pixels.`},visibleRowsCount:{anyOf:[{type:`number`},{type:`string`,enum:[`all`]}],description:"How many rows are on screen at once. `all` renders every one and virtualizes nothing."},topBar:{type:`boolean`,description:`The bar above the rows, which holds the title and the search.`},bottomBar:{type:`boolean`,description:`The bar below the rows, which holds the pager.`},globalFilter:{type:`boolean`,description:`A search box over every column.`},globalFilterKeys:{type:`array`,items:{type:`string`},description:`Search only these columns.`},sortable:{type:`boolean`,description:`Whether every column can be sorted. A column may say otherwise.`},resizable:{type:`boolean`,description:`Whether every column can be resized. A column may say otherwise.`},editable:{type:`boolean`,description:`Whether every column can be edited. A column may say otherwise.`},rangeSelection:{type:`boolean`,description:`Drag or Shift+arrow across cells to mark a block, and Ctrl+C to copy it.`},footer:{type:`boolean`,description:"A row of grand totals under the rows, over every column carrying an `aggregate`."},export:{type:`boolean`,description:`CSV and Excel buttons in the top bar.`},groupBy:{type:`array`,items:{type:`string`},description:`The columns to group by, outermost first.`},groupDefaultExpanded:{anyOf:[{type:`boolean`},{type:`integer`}],description:"Which group rows start open: `true` is all of them, a number is how many levels down."}},c={type:`integer`,description:`How many columns that width is written in.`};t.CONTRACTS={DataGrid:{props:{data:{type:`array`,items:{type:`object`},description:`The rows.`},def:{type:`object`,description:`Everything about the grid that is not the rows: the columns, the bars, the title.`,properties:s,required:[`columns`],additionalProperties:!1}},required:[`def`]},DashboardGrid:{props:{layout:{...e.t,description:`Where each widget goes. A generated dashboard sets this one — it is read on every render.`},defaultLayout:{...e.t,description:"The layout it starts with, for a dashboard the user then rearranges. Read once, at the first render, so a spec that arrives in pieces should set `layout` instead."},columns:{anyOf:[{type:`integer`},{type:`object`,properties:Object.fromEntries(o.map(e=>[e,c])),additionalProperties:!1}],description:"How many columns, at one width or at several: `12`, or `{ xs: 1, md: 6, xxl: 12 }`."}}},Widget:{props:{empty:{anyOf:[{type:`boolean`},{type:`string`}],description:"There is nothing to show: `true` for the default line, or the words to use instead."}}},ChartContainer:{props:{series:{anyOf:[{type:`array`,items:{type:`string`}},{type:`object`}],description:`The series drawn inside, and what colour each of them is.`}}}}})(r||={});var i=r,a={props:{appearance:`The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme.`,animation:"One of the four presets — their `@keyframes` are registered already and their durations ride `--transitionTime`, so `prefers-reduced-motion` stops them with no opt-in.",animationDelay:`The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.`,animationDirection:`The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.`,animationDuration:`The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.`,animationFillMode:`The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.`,animationIterationCount:`The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.`,animationName:"Which `@keyframes` to run: a sequence registered with `Box.keyframes()`, one of the four preset names, or a name from a stylesheet this library never wrote — an unknown name is left alone rather than dropped, because `@keyframes` can come from anywhere.",animationPlayState:`The animation-play-state CSS property sets whether an animation is running or paused.`,animationRange:"The shorthand that sets both ends of the range at once: one value sets the start and leaves the end at `normal`, two set both.",animationRangeEnd:"Where along the timeline the animation finishes: a named part of the pass (`cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`), an offset into one, or a plain length.",animationRangeStart:`Where along the timeline the animation starts.`,animationTimeline:`What drives the animation — a scroll position rather than a clock, so there is no rAF loop, no scroll listener and no state.`,animationTimingFunction:"How an animation progresses through each cycle: a keyword, one of the four sampled springs, or a curve of your own — `cubic-bezier()`, `steps()` and `linear()` are values.",b:`The border-width shorthand CSS property sets the width of an element's border.`,bx:`The border-width shorthand CSS property sets the width of an element's left and right border.`,by:`The border-width shorthand CSS property sets the width of an element's top and bottom border.`,bt:`The border-top-width CSS property sets the width of the top border of an element.`,br:`The border-right-width CSS property sets the width of the right border of an element.`,bb:`The border-bottom-width CSS property sets the width of the bottom border of an element.`,bl:`The border-left-width CSS property sets the width of the left border of an element.`,bs:"The border-inline-start-width CSS property sets the width of the border on the side the text starts from: `bl` in a left-to-right writing mode, `br` in a right-to-left one.",be:"The border-inline-end-width CSS property sets the width of the border on the side the text ends at: `br` in a left-to-right writing mode, `bl` in a right-to-left one.",borderStyle:`The border-style shorthand CSS property sets the line style for all four sides of an element's border.`,borderRadius:`The border-radius CSS property rounds the corners of an element's outer border edge.`,borderRadiusTop:`The border-top-radius CSS property rounds the top corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusRight:`The border-right-radius CSS property rounds the right corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusBottom:`The border-bottom-radius CSS property rounds the bottom corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusLeft:`The border-left-radius CSS property rounds the left corners of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusTopLeft:`The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusTopRight:`The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusBottomRight:`The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusBottomLeft:`The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.`,borderRadiusStart:`Rounds both corners on the side the text starts from: the left ones in a left-to-right writing mode, the right ones in a right-to-left one.`,borderRadiusEnd:`Rounds both corners on the side the text ends at: the right ones in a left-to-right writing mode, the left ones in a right-to-left one.`,borderRadiusStartStart:`Rounds the block-start, inline-start corner: top-left in a left-to-right writing mode, top-right in a right-to-left one.`,borderRadiusStartEnd:`Rounds the block-start, inline-end corner: top-right in a left-to-right writing mode, top-left in a right-to-left one.`,borderRadiusEndEnd:`Rounds the block-end, inline-end corner: bottom-right in a left-to-right writing mode, bottom-left in a right-to-left one.`,borderRadiusEndStart:`Rounds the block-end, inline-start corner: bottom-left in a left-to-right writing mode, bottom-right in a right-to-left one.`,position:`The position CSS property sets how an element is positioned in a document.`,anchorName:`Names this element as an anchor, so a floating layer can hang off it by name.`,positionAnchor:"Which anchor this element is positioned against, by the name `anchorName` gave it.",positionArea:`Which cell of the 3x3 grid around the anchor to sit in, and the whole of what a side and an alignment used to take JS to work out.`,positionTryFallbacks:"Where to put the layer when it does not fit: `flip-block` tries the opposite side of the block axis, `flip-inline` the inline one, `flip-start` swaps the two axes, and space-separated flips are one position tried together.",positionTryOrder:"How to choose among the fallbacks rather than taking the first that fits: `most-width`, `most-height`, `most-block-size` and `most-inline-size` each pick the position that leaves the layer most room on that axis.",positionVisibility:"When to hide the layer instead of positioning it: `anchors-visible` hides it once the anchor is scrolled out of sight, `no-overflow` once the layer itself would overflow, and the two combine.",top:`The top CSS property sets the vertical position of a positioned element.`,right:`The right CSS property participates in specifying the horizontal position of a positioned element.`,bottom:`The bottom CSS property participates in setting the vertical position of a positioned element.`,left:`The left CSS property participates in specifying the horizontal position of a positioned element.`,inset:`The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties.`,insetX:"The inset-inline CSS shorthand sets both insets on the inline axis: `insetX` is `left` and `right` in a left-to-right writing mode, the way `mx` is `margin-inline`.",insetY:"The inset-block CSS shorthand sets both insets on the block axis — `top` and `bottom` in a horizontal writing mode.",insetStart:"The inset-inline-start CSS property sets the distance from the edge the text starts at: `left` in a left-to-right writing mode, `right` in a right-to-left one.",insetEnd:"The inset-inline-end CSS property sets the distance from the edge the text ends at: `right` in a left-to-right writing mode, `left` in a right-to-left one.",boxSizing:"The `box-sizing` CSS property sets how the total width and height of an element is calculated.",contentVisibility:`The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.`,clipPath:`The clip-path CSS property creates a clipping region that sets what part of an element should be shown.`,cursor:`The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.`,display:"The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.",inline:"The `inline` property is a shortcut to transform `block`, `flex` and `grid` value to `inline-block`, `inline-flex` and `inline-grid` respectively.",borderCollapse:`Whether a table's cell borders are shared or every cell keeps its own.`,borderSpacing:"The gap between the cells of a `separate` table, on the spacing scale.",tableLayout:"`fixed` sizes a table from its own width and its first row rather than from every cell in it, so one long cell cannot widen the column it sits in — and the table lays out in one pass instead of after measuring all of it.",container:"Makes this element a query container, so the `cq` styles inside it answer to *its* width: `container` alone is an anonymous one (the nearest container `cq={{ md: … }}` finds), a name is what `cq={{ 'sidebar/md': … }}` addresses.",containerName:"The name `cq={{ 'sidebar/md': … }}` addresses.",containerType:"What may be asked about this container: `inline-size` (its width, what `container` sets), `size` (both axes — which needs the element to have a block size of its own, or its content stops laying it out), or `normal` to stop being a query container at all.",interpolateSize:"Whether `height`/`width` may interpolate to and from a keyword — `auto`, `min-content`, `fit-content`.",jc:`The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers.`,ai:`The CSS align-items property sets the align-self value on all direct children as a group.`,justifyItems:"The CSS justify-items property sets the `justify-self` of every item in the box: in a grid, where each one sits on the inline axis of its own area.",placeItems:'The place-items CSS shorthand sets `align-items` and `justify-items` in one declaration — `placeItems="center"` is the whole of grid centring.',placeContent:"The place-content CSS shorthand sets `alignContent` and `justifyContent` at once, so one keyword places a grid’s tracks on both axes.",alignContent:`The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.`,flex1:`The flex CSS shorthand property sets flex to fit the space available in its flex container.`,d:`The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).`,flexWrap:`The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.`,flexGrow:`The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size.`,flexShrink:`The flex-shrink CSS property sets the flex shrink factor of a flex item.`,alignSelf:`The align-self CSS property overrides a grid or flex item's align-items value.`,justifySelf:`The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.`,fontSize:`The font-size CSS property sets the size of the font.`,fontStyle:`The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.`,fontWeight:`The font-weight CSS property sets the weight (or boldness) of the font.`,gap:`The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns.`,rowGap:`The row-gap CSS property sets the size of the gap (gutter) between an element's rows.`,columnGap:`The column-gap CSS property sets the size of the gap (gutter) between an element's columns.`,order:`The order CSS property sets the order to lay out an item in a flex or grid container.`,height:`The height CSS property specifies the height of an element.`,minHeight:`The min-height CSS property sets the minimum height of an element.`,maxHeight:`The max-height CSS property sets the maximum height of an element.`,width:`The width CSS property sets an element's width.`,minWidth:`The min-width CSS property sets the minimum width of an element.`,maxWidth:`The max-width CSS property sets the maximum width of an element.`,aspectRatio:'The aspect-ratio CSS property sets a preferred ratio for the box, which the sizing props then fill in one axis of: `aspectRatio="video" width="fit"` is a 16/9 embed.',letterSpacing:`The letter-spacing CSS property sets the horizontal spacing behavior between text characters.`,lineHeight:`The line-height CSS property sets the height of a line box.`,listStyle:`The list-style CSS shorthand property allows you to set all the list style properties at once.`,m:`The margin CSS shorthand property sets the margin area on all four sides of an element.`,mx:`The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.`,my:`The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.`,mt:`The margin-top CSS property sets the margin area on the top of an element.`,mr:`The margin-right CSS property sets the margin area on the right side of an element.`,mb:`The margin-bottom CSS property sets the margin area on the bottom of an element.`,ml:`The margin-left CSS property sets the margin area on the left side of an element.`,ms:"The margin-inline-start CSS property sets the margin on the side the text starts from: `ml` in a left-to-right writing mode, `mr` in a right-to-left one.",me:"The margin-inline-end CSS property sets the margin on the side the text ends at: `mr` in a left-to-right writing mode, `ml` in a right-to-left one.",p:`The padding CSS shorthand property sets the padding area on all four sides of an element at once.`,px:`The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.`,py:`The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.`,pt:`The padding-top CSS property sets the height of the padding area on the top of an element.`,pr:`The padding-right CSS property sets the width of the padding area on the right of an element.`,pb:`The padding-bottom CSS property sets the height of the padding area on the bottom of an element.`,pl:`The padding-left CSS property sets the width of the padding area to the left of an element.`,ps:"The padding-inline-start CSS property sets the padding on the side the text starts from: `pl` in a left-to-right writing mode, `pr` in a right-to-left one.",pe:"The padding-inline-end CSS property sets the padding on the side the text ends at: `pr` in a left-to-right writing mode, `pl` in a right-to-left one.",objectFit:`The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.`,opacity:`The opacity CSS property sets the opacity of an element.`,outline:`The CSS outline-width property sets the thickness of an element's outline.`,outlineStyle:`The outline-style CSS property sets the style of an element's outline.`,outlineOffset:`The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element.`,overflow:`The overflow CSS shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.`,overflowX:`The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges.`,overflowY:`The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges.`,pointerEvents:`The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.`,resize:`The resize CSS property sets whether an element is resizable, and if so, in which directions.`,rotate:`The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property.`,flip:"Mirrors the element: `xAxis` flips it left to right, `yAxis` top to bottom.",scale:"The scale CSS property lets you specify scale transforms individually and independently of the transform property: `scale={1.05}` is 105% in both axes.",textAlign:`The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.`,textDecoration:`The text-decoration shorthand CSS property sets the appearance of decorative lines on text.`,textOverflow:`The text-overflow CSS property sets how hidden overflow content is signaled to users.`,textTransform:`The text-transform CSS property specifies how to capitalize an element's text.`,textWrap:`The text-wrap CSS shorthand property controls how text inside an element is wrapped.`,transition:"What a transition applies to: `all` (what the base class already does), `none`, or one of the property groups — `colors`, `opacity`, `shadow`, `transform`, `size`, `filter`.",transitionBehavior:"Whether the properties that cannot be interpolated transition at all: `display`, `overlay`, `content-visibility`.",transitionDelay:`The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.`,transitionDuration:`How long a transition takes.`,transitionTimingFunction:"How a transition gets from one value to the other: a keyword, one of the four sampled springs (`spring`, `spring-gentle`, `spring-bouncy`, `spring-snappy`), or a curve — `cubic-bezier()`, `steps()` and `linear()` are values.",willChange:`The will-change CSS property warns the browser that a property is about to change, so it can promote the element first instead of mid-animation.`,userSelect:`The user-select CSS property controls whether the user can select text.`,visibility:`The visibility CSS property shows or hides an element without changing the layout of a document.`,whiteSpace:`The white-space CSS property sets how white space inside an element is handled.`,zIndex:`The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items.`,gridTemplateColumns:`The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.`,gridTemplateRows:`The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.`,gridColumn:`The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.`,gridColumnStart:`The grid-column-start CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement.`,gridColumnEnd:`The grid-column-end CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.`,gridRow:`The grid-row CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.`,gridRowStart:`The grid-row-start CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.`,gridRowEnd:`The grid-row-end CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.`,color:`The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.`,bgColor:`The background-color CSS property sets the background color of an element.`,borderColor:`The border-color shorthand CSS property sets the color of an element's border.`,outlineColor:`The outline-color CSS property sets the color of an element's outline.`,accentColor:`The accent-color CSS property tints the parts of a native control the page does not draw: a checkbox's tick, a radio's dot, a range track, a progress bar.`,caretColor:`The caret-color CSS property sets the colour of the insertion caret in a text field or any editable element.`,colorScheme:"The color-scheme CSS property tells the browser which schemes the element is *built* for, and native UI follows it: scrollbars, form controls, the spellcheck underline, `Canvas`/`CanvasText`.",fieldSizing:'The field-sizing CSS property lets a form control size itself to its content: `fieldSizing="content"` is a textarea that grows as it is typed into, with no JavaScript measuring anything.',fill:`The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted.`,fillOpacity:`The fill-opacity CSS property defines the opacity of the paint applied to the interior of an SVG shape or to SVG text.`,fillRule:`The fill-rule CSS property defines which parts of a self-intersecting SVG shape count as inside it, and are therefore filled.`,stroke:`The stroke CSS property defines the color or SVG paint server used to draw an element's stroke.`,strokeOpacity:`The stroke-opacity CSS property defines the opacity of the paint applied to an SVG element's stroke.`,strokeWidth:"The stroke-width CSS property sets the width of an SVG element's stroke, in user units — `strokeWidth={2}` is `stroke-width: 2`, no divider.",strokeLinecap:`The stroke-linecap CSS property defines the shape drawn at the two ends of an open SVG subpath.`,strokeLinejoin:`The stroke-linejoin CSS property defines the shape drawn where two segments of an SVG path meet.`,strokeMiterlimit:`The stroke-miterlimit CSS property sets how far a miter join may extend before it is cut back to a bevel.`,strokeDasharray:"The stroke-dasharray CSS property turns an SVG stroke into dashes: a single number is the dash and the gap alike, a string is the full pattern (`'8 4'`).",strokeDashoffset:`The stroke-dashoffset CSS property moves the dash pattern along the path — the property a path-drawing animation transitions.`,paintOrder:`The paint-order CSS property sets what is painted first.`,vectorEffect:"How an SVG element's stroke reacts to the transforms above it: `non-scaling-stroke` keeps a hairline one pixel wide at any scale.",shapeRendering:"The shape-rendering CSS property tells the renderer what to trade away when drawing an SVG shape — `crispEdges` turns off anti-aliasing, which is what pixel-exact gridlines want.",textAnchor:"Which part of SVG text sits on its `x`: `middle` centres an axis label under a tick.",dominantBaseline:"Which baseline of SVG text sits on its `y`: `central` centres a number inside a gauge.",cx:"The centre of a `<circle>` or `<ellipse>`, horizontally, in user units.",cy:"The cy CSS property positions the centre of a `<circle>` or an `<ellipse>` vertically, in user units.",r:"The r CSS property sets the radius of a `<circle>`, in user units.",rx:"The horizontal radius of an `<ellipse>` or corner radius of a `<rect>` — `borderRadius` for SVG, in user units rather than on the spacing scale.",ry:"The ry CSS property sets the vertical radius of an `<ellipse>` or the vertical corner radius of a `<rect>`, in user units.",x:"Positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or nested `<svg>` horizontally, in user units.",y:"The y CSS property positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or a nested `<svg>` vertically, in user units.",bgImage:`The background-image CSS property sets one or more background images on an element.`,bgGradient:"A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair.",shadow:"The elevation of the box: `xxs` through `xxl` on the elevation scale, or one of the three original presets (`small`, `medium`, `large`, which carry their own colour).",shadowColor:"What colour `shadow` draws in — the scale's own translucent black otherwise.",insetShadow:"A shadow drawn inside the border box: `xxs`, `xs` or `sm`.",insetShadowColor:"What colour `insetShadow` draws in.",ring:"A hard-edged shadow outside the border box, in px — `ring={2}`.",ringColor:"What colour `ring` draws in.",insetRing:`The same ring, drawn inside the border box: an inner hairline that needs no second element.`,insetRingColor:"What colour `insetRing` draws in.",textShadow:"A shadow behind the text rather than the box: `xxs` through `lg`, recoloured by `textShadowColor`.",textShadowColor:"What colour `textShadow` draws in.",blur:"How far the element's own pixels are blurred: a step of the named scale (`xs` 4px through `xxxl` 64px) or a radius in px.",brightness:"How bright the element is rendered, as a percentage: `brightness={110}` is 10% brighter, `{50}` is half.",contrast:"How much contrast the element is rendered with, as a percentage — `100` being the element as it is.",grayscale:"How far the element is desaturated, as a percentage: `grayscale={100}` removes colour entirely.",hueRotate:`How far every hue in the element is rotated round the colour circle, in degrees.`,invert:"How far the element's colours are inverted, as a percentage: `invert={100}` is a photographic negative.",saturate:"How saturated the element is rendered, as a percentage — over `100` to push the colour, under to drain it.",sepia:`How far the element is pushed towards sepia, as a percentage.`,dropShadow:"A shadow cast by the element's *shape* rather than its box — the one that follows a transparent PNG's outline or an SVG's path, where `shadow` would draw a rectangle.",dropShadowColor:"What colour `dropShadow` draws in.",backdropBlur:`How far what is *behind* the element is blurred — the glassmorphism half.`,backdropBrightness:`How bright what is behind the element is rendered, as a percentage.`,backdropContrast:`How much contrast what is behind the element is rendered with, as a percentage.`,backdropGrayscale:`How far what is behind the element is desaturated, as a percentage.`,backdropHueRotate:`How far every hue behind the element is rotated round the colour circle, in degrees.`,backdropInvert:`How far the colours behind the element are inverted, as a percentage.`,backdropOpacity:`How opaque what is behind the element is rendered, as a percentage.`,backdropSaturate:`How saturated what is behind the element is rendered, as a percentage.`,backdropSepia:`How far what is behind the element is pushed towards sepia, as a percentage.`,maskImage:`What the element is masked by: the alpha channel of an image decides which of its pixels are painted.`,bgClip:"Which box the background is painted inside — and `text`, which clips it to the glyphs themselves.",translateX:"Moves an element horizontally on the 2D plane, on the ÷4 spacing scale, as a fraction of its own width (`'1/2'`) or as a percentage.",translateY:"Moves an element vertically on the 2D plane, on the ÷4 spacing scale, as a fraction of its own height (`'1/2'`) or as a percentage.",content:"What a `::before`/`::after` renders — and whether it renders at all: a generated element with no `content` produces no box.",backdropFilter:"The whole `backdrop-filter` at once, written as CSS.",scrollbarWidth:`How wide a scrollbar the browser draws.`,scrollbarColor:`The scrollbar-color CSS property sets the color of the scrollbar thumb and track.`,scrollbarGutter:`The scrollbar-gutter CSS property reserves the space a scrollbar would take before there is one, so a panel does not shift sideways the moment its content overflows.`,scrollTimeline:"Declares a named scroll timeline on this scroller — the shorthand, `<name>` or `<name> <axis>`, and the one to reach for: the longhands exist to override half of it.",scrollTimelineAxis:`Which axis of this scroller the named timeline follows.`,scrollTimelineName:"The name half of `scrollTimeline`, on its own.",viewTimeline:`Declares a named view timeline on this element — its own progress across the scrollport, rather than the scroller's progress through its content.`,viewTimelineAxis:`Which axis this element's pass across the scrollport is measured on.`,viewTimelineInset:`Shrinks the scrollport the timeline measures against, so the pass starts and ends somewhere other than the viewport edges: one value for both ends, two for the start and the end.`,viewTimelineName:"The name half of `viewTimeline`, on its own.",timelineScope:`Makes the named timelines below this element reachable from anywhere else below it.`,viewTransitionName:`Names this element for a view transition, which is what makes the browser animate it from where it was to where it is rather than cross-fading the whole page over it.`,viewTransitionClass:'A class shared by several named elements, so one rule styles the lot of them: `::view-transition-group(.card)` reaches every element carrying `viewTransitionClass="card"`.',vars:"CSS custom properties on this element, inherited by everything inside it: `vars={{ 'color-x': 'sky-500' }}` emits `--color-x: var(--sky-500)`.",css:`The escape hatch: a style object for the properties this library has no prop for, compiled into a class through the same pipeline as every other prop — shared, nestable, server-rendered — rather than an inline style.`},components:{Box:{description:"Any element at all, with every style prop on it: `tag` chooses the element where no component names one.",import:`import Box from '@box-kite/react';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Label:{description:"A `<label>` element, with every style prop on it.",import:`import { Label } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Span:{description:"A `<span>` element, with every style prop on it.",import:`import { Span } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Article:{description:"A `<article>` element, with every style prop on it.",import:`import { Article } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Aside:{description:"A `<aside>` element, with every style prop on it.",import:`import { Aside } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Details:{description:"A `<details>` element, with every style prop on it.",import:`import { Details } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Figcaption:{description:"A `<figcaption>` element, with every style prop on it.",import:`import { Figcaption } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Figure:{description:"A `<figure>` element, with every style prop on it.",import:`import { Figure } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Footer:{description:"A `<footer>` element, with every style prop on it.",import:`import { Footer } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Header:{description:"A `<header>` element, with every style prop on it.",import:`import { Header } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Main:{description:"A `<main>` element, with every style prop on it.",import:`import { Main } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Mark:{description:"A `<mark>` element, with every style prop on it.",import:`import { Mark } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Nav:{description:"A `<nav>` element, with every style prop on it.",import:`import { Nav } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},MenuList:{description:"A `<menu>` element, with every style prop on it.",import:`import { MenuList } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Section:{description:"A `<section>` element, with every style prop on it.",import:`import { Section } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Summary:{description:"A `<summary>` element, with every style prop on it.",import:`import { Summary } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Time:{description:"A `<time>` element, with every style prop on it.",import:`import { Time } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},P:{description:"A `<p>` element, with every style prop on it.",import:`import { P } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Ul:{description:"A `<ul>` element, with every style prop on it.",import:`import { Ul } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Ol:{description:"A `<ol>` element, with every style prop on it.",import:`import { Ol } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Li:{description:"A `<li>` element, with every style prop on it.",import:`import { Li } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H1:{description:"A `<h1>` element, with every style prop on it.",import:`import { H1 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H2:{description:"A `<h2>` element, with every style prop on it.",import:`import { H2 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H3:{description:"A `<h3>` element, with every style prop on it.",import:`import { H3 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H4:{description:"A `<h4>` element, with every style prop on it.",import:`import { H4 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H5:{description:"A `<h5>` element, with every style prop on it.",import:`import { H5 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},H6:{description:"A `<h6>` element, with every style prop on it.",import:`import { H6 } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Link:{description:"A `<a>` element, with every style prop on it.",import:`import { Link } from '@box-kite/react/components/semantics';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Img:{description:"A `<img>` element, with every style prop on it.",import:`import { Img } from '@box-kite/react/components/semantics';`,slots:[],events:[],props:{},required:[],styled:!0},Button:{description:"A real `<button>` with the `button` component style on it — the variants are `primary` (the default), `secondary` and `ghost`, and every Box prop styles it on top of them.",import:`import Button from '@box-kite/react/components/button';`,slots:[`default`],events:[`onClick`],props:{},required:[],styled:!0},Textbox:{description:"A single-line text field: a real `<input>`, styled by Box props, whose `type` decides its validation, its mobile keyboard and its spinner.",import:`import Textbox from '@box-kite/react/components/textbox';`,slots:[],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:"What the field submits under, and what a `<label htmlFor>` of your own would point at."},type:{type:`string`,enum:[`date`,`datetime-local`,`email`,`hidden`,`month`,`number`,`password`,`search`,`tel`,`text`,`time`,`url`,`week`],description:`Which text input this is.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`Controlled value.`},defaultValue:{anyOf:[{type:`string`},{type:`number`}],description:`The value it starts with when the field owns its own state.`},pattern:{type:`string`,description:`A regular expression the value has to match for the form to be valid.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Editable to nobody, but still focusable, still read out and still submitted.`},step:{anyOf:[{type:`number`},{type:`string`}],description:"How far a `number` field's spinner and arrow keys move."}},required:[],styled:!0},Textarea:{description:"A multi-line text field: a real `<textarea>`, styled by Box props.",import:`import Textarea from '@box-kite/react/components/textarea';`,slots:[],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:"What the field submits under, and what a `<label htmlFor>` of your own would point at."},value:{type:`string`,description:`Controlled value.`},defaultValue:{type:`string`,description:`The value it starts with when the field owns its own state.`},rows:{type:`number`,description:`How many lines tall it starts.`},cols:{type:`number`,description:"How many characters wide it starts — `width` is the prop to reach for instead."},autoFocus:{type:`boolean`,description:`Focus it on mount.`},maxLength:{type:`number`,description:`The most characters the field accepts.`},minLength:{type:`number`,description:`The fewest characters that count as valid.`},readOnly:{type:`boolean`,description:`Editable to nobody, but still focusable, still read out and still submitted.`},required:{type:`boolean`,description:`The form will not submit while it is empty, and a screen reader says so.`}},required:[],styled:!0},Checkbox:{description:'The APG checkbox — which is to say, a real `<input type="checkbox">`.',import:`import Checkbox from '@box-kite/react/components/checkbox';`,slots:[`label`],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:`What the checkbox submits under.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`The value the form submits when it is checked.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Rendered and read, but not toggleable.`},defaultChecked:{type:`boolean`,description:`The state it starts in when the checkbox is uncontrolled.`}},required:[],styled:!0},Switch:{description:`The APG switch: an on/off control drawn as a track and a thumb.`,import:`import Switch from '@box-kite/react/components/switch';`,slots:[`label`],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:`What the switch submits under.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`The value the form submits when it is on.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Rendered and read, but not toggleable.`},defaultChecked:{type:`boolean`,description:`The state it starts in when the switch is uncontrolled.`}},required:[],styled:!0},RadioButton:{description:'One radio button — a real `<input type="radio">`, so the platform supplies the checked state, the shared-`name` grouping and form submission.',import:`import RadioButton from '@box-kite/react/components/radioButton';`,slots:[`label`],events:[`onInput`,`onChange`],props:{name:{type:`string`,description:`The name the radios of one set share — it is what makes them one choice rather than several.`},value:{anyOf:[{type:`string`},{type:`number`}],description:`What the set submits when this option is the chosen one.`},autoFocus:{type:`boolean`,description:`Focus it on mount.`},readOnly:{type:`boolean`,description:`Rendered and read, but not selectable.`},defaultChecked:{type:`boolean`,description:`Makes this the chosen option to begin with, when the set is uncontrolled.`}},required:[],styled:!0},RadioGroup:{description:`The APG radio group: one label over a set of radios, the arrow keys moving between them and choosing as they go.`,import:`import RadioGroup from '@box-kite/react/components/radioGroup';`,slots:[`label`,`default`],events:[`onValueChange`,`onChange`],props:{name:{type:`string`,description:"The `name` every radio in the group submits under."},value:{type:`string`,description:`Controlled selection.`},defaultValue:{type:`string`,description:`The option chosen to begin with, when the group owns its value.`},orientation:{type:`string`,enum:[`vertical`,`horizontal`],description:`Which way the radios stack.`}},required:[],styled:!0},"RadioGroup.Item":{description:"A radio that reads its group: the shared `name`, whether it is selected, and what to report when it is chosen.",import:`import RadioGroup from '@box-kite/react/components/radioGroup';`,slots:[`label`],events:[],props:{value:{type:`string`,description:`What this radio submits, and what the group reports when it is chosen.`},name:{type:`string`,description:`Only for an item rendered outside a group — inside one, the group supplies the name.`}},required:[`value`],styled:!0},Tooltip:{description:`The APG tooltip: a description that appears on hover *and* on focus and stays until the user is done with it.`,import:`import Tooltip from '@box-kite/react/components/tooltip';`,slots:[`content`],events:[`children`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the tooltip owns its own state.`},openDelay:{type:`number`,description:`How long the pointer has to rest on the trigger, in ms.`},closeDelay:{type:`number`,description:`The grace period after the pointer leaves, in ms.`},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the trigger the bubble sits on — `top`/`bottom` are the block axis, `start`/`end` the inline one."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the trigger's edges to line the bubble up with along the other axis.`},offset:{type:`number`,description:`The gap between trigger and bubble, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`}},required:[],styled:!0},Overlay:{description:`A floating layer: anchored by the browser, and in the browser's **top layer** for the stacking order.`,import:`import Overlay from '@box-kite/react/components/overlay';`,slots:[`default`],events:[],props:{side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the anchor the layer sits on: `top`/`bottom` are the block axis, `start`/`end` the inline one, so a layer beside its anchor mirrors in a right-to-left page."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the anchor's edges to line up with along the other axis.`},offset:{type:`number`,description:"The gap between anchor and layer, on the ÷4 spacing scale — `offset={2}` is 8px."},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`},matchWidth:{type:`boolean`,description:`Whether the layer is at least as wide as its anchor.`}},required:[],styled:!0},Popover:{description:`A panel anchored to a trigger, on the platform's own Popover API: the top layer, light dismiss and focus return are the browser's, and the position is CSS anchor positioning.`,import:`import Popover from '@box-kite/react/components/popover';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the popover owns its own state.`},label:{type:`string`,description:`The panel's accessible name.`},labelledBy:{type:`string`,description:"Names the panel after an element already on the page, instead of `label`."},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the trigger the panel sits on — `top`/`bottom` are the block axis, `start`/`end` the inline one, so a panel beside its trigger mirrors in a right-to-left page."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the trigger's edges to line the panel up with along the other axis.`},offset:{type:`number`,description:`The gap between trigger and panel, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`},matchWidth:{type:`boolean`,description:`Whether the panel is at least as wide as its trigger.`},autoFocus:{type:`boolean`,description:`Whether opening moves focus into the panel.`}},required:[],styled:!0},Dialog:{description:"A modal dialog on the platform's own `<dialog>`: `showModal()` supplies the top layer, the `::backdrop`, an inert page behind it, Escape, focus containment and focus return — so none of that is written here.",import:`import Dialog from '@box-kite/react/components/dialog';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the dialog owns its own state.`},label:{type:`string`,description:"The dialog's accessible name, when no `Dialog.Title` supplies one."},labelledBy:{type:`string`,description:"Names the dialog after an element already on the page, instead of `label` or a `Dialog.Title`."},describedBy:{type:`string`,description:"Describes it from an element already on the page, instead of a `Dialog.Description`."},modal:{type:`boolean`,description:`Whether the rest of the page is blocked while it is open.`},dismissible:{type:`boolean`,description:`Whether a press outside closes it.`},lockScroll:{type:`boolean`,description:`Whether the page behind it stops scrolling.`}},required:[],styled:!0},"Dialog.Title":{description:"The dialog's heading, and what names it: rendering one is what puts `aria-labelledby` on the dialog, so a name and a visible title cannot drift apart.",import:`import Dialog from '@box-kite/react/components/dialog';`,slots:[`default`],events:[],props:{},required:[],styled:!0},"Dialog.Description":{description:"The dialog's supporting text, and what describes it: rendering one puts `aria-describedby` on the dialog.",import:`import Dialog from '@box-kite/react/components/dialog';`,slots:[`default`],events:[],props:{},required:[],styled:!0},AlertDialog:{description:'A dialog that interrupts to ask something: `role="alertdialog"`, always modal, and **never dismissed by a press outside**, because a decision that can be clicked away is one the user did not make.',import:`import { AlertDialog } from '@box-kite/react/components/dialog';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Menu:{description:"A menu button and its menu, on the platform's own Popover API: `<Menu>` is the button's menu, and every `Menu.Sub` inside it is another popover nested in that one.",import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the menu owns its own state.`},label:{type:`string`,description:`The menu's accessible name.`},labelledBy:{type:`string`,description:"Names the menu after an element already on the page, instead of `label`."},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:"Which side of the trigger the menu sits on — `top`/`bottom` are the block axis, `start`/`end` the inline one, so a menu beside its trigger mirrors in a right-to-left page."},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the trigger's edges to line the menu up with along the other axis.`},offset:{type:`number`,description:`The gap between trigger and menu, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`},matchWidth:{type:`boolean`,description:`Whether the menu is at least as wide as its trigger.`}},required:[],styled:!0},"Menu.Item":{description:`One command in the menu.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[],props:{disabled:{type:`boolean`,description:`Focusable, announced, and not activatable.`},closeOnSelect:{type:`boolean`,description:`Whether choosing it closes the whole menu.`}},required:[],styled:!0},"Menu.CheckboxItem":{description:'An item that carries a state of its own: `role="menuitemcheckbox"` and a tick.',import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[`onCheckedChange`],props:{checked:{type:`boolean`,description:`Controlled checked state.`},defaultChecked:{type:`boolean`,description:`Whether it starts checked, when the item owns its own state.`},closeOnSelect:{type:`boolean`,description:`Whether toggling it closes the menu.`},disabled:{type:`boolean`,description:`Focusable, announced, and not activatable.`}},required:[],styled:!0},"Menu.RadioGroup":{description:'A set of items of which one is chosen: `role="group"`, and `menuitemradio` inside it.',import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`,`label`],events:[`onValueChange`],props:{value:{type:`string`,description:"Controlled value — the `value` of whichever item is checked."},defaultValue:{type:`string`,description:`The value checked to start with, when the group owns its own state.`}},required:[],styled:!0},"Menu.RadioItem":{description:`One of a radio group's choices.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[],props:{value:{type:`string`,description:"What this item stands for, compared against the group's `value`."},closeOnSelect:{type:`boolean`,description:`Whether choosing it closes the menu.`},disabled:{type:`boolean`,description:`Focusable, announced, and not activatable.`}},required:[`value`],styled:!0},"Menu.Group":{description:`A titled section.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`,`label`],events:[],props:{},required:[],styled:!0},"Menu.Separator":{description:`The line between two sections.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`default`],events:[],props:{},required:[],styled:!0},"Menu.Sub":{description:`A submenu: an item that opens a menu of its own.`,import:`import Menu from '@box-kite/react/components/menu';`,slots:[`label`,`default`],events:[],props:{disabled:{type:`boolean`,description:`Focusable, announced, and it opens nothing.`},side:{type:`string`,enum:[`top`,`bottom`,`start`,`end`],description:`Which side of its item the submenu sits on.`},align:{type:`string`,enum:[`start`,`center`,`end`],description:`Which of the item's edges to line the submenu up with.`},offset:{type:`number`,description:`The gap between item and submenu, on the ÷4 spacing scale.`},flip:{type:`boolean`,description:`Whether a side with no room may be swapped for its opposite.`}},required:[],styled:!0},Tabs:{description:`The APG tabs pattern: one list of tabs over one panel at a time.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[`onValueChange`],props:{value:{type:`string`,description:`Controlled selection.`},defaultValue:{type:`string`,description:`Which tab starts selected.`},orientation:{type:`string`,enum:[`horizontal`,`vertical`],description:`Which way the tabs run.`},activation:{type:`string`,enum:[`automatic`,`manual`],description:`Whether moving to a tab selects it.`},loop:{type:`boolean`,description:`Whether the arrows wrap around at the ends.`},indicator:{type:`string`,enum:[`static`,`sliding`],description:"Which indicator marks the selected tab: the tab's own border (`'static'`, the default) or one element travelling between them (`'sliding'`), which animates because it is the same element."},keepMounted:{type:`boolean`,description:`Render every panel rather than only the selected one, hiding the rest.`}},required:[],styled:!0},"Tabs.List":{description:`The tabs themselves, and the keyboard: it sits on the list because roving tabindex puts one tab in the tab sequence.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{label:{type:`string`,description:`The list's accessible name.`},labelledBy:{type:`string`,description:"Names the list after an element already on the page, instead of `label`."}},required:[],styled:!0},"Tabs.Tab":{description:"One tab: a real `<button>`, so Enter and Space reach it the way the platform means them to.",import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{value:{type:`string`,description:`Which panel this tab shows, and what the widget reports when it is chosen.`},disabled:{type:`boolean`,description:"Not selectable, and stepped over by the arrows — unlike a disabled `Menu.Item`, which APG asks stay reachable."}},required:[`value`],styled:!0},"Tabs.Panels":{description:`The panels' container, and the only optional part: it takes the height of the panel on screen, so a switch between panels of different heights is a transition rather than a jump.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{},required:[],styled:!0},"Tabs.Panel":{description:`One panel.`,import:`import Tabs from '@box-kite/react/components/tabs';`,slots:[`default`],events:[],props:{value:{type:`string`,description:`The tab this panel belongs to.`}},required:[`value`],styled:!0},Accordion:{description:`A set of sections, each opened by its own header.`,import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[`onValueChange`],props:{value:{type:`array`,items:{type:`string`},description:`Controlled: the values of every panel standing open.`},defaultValue:{type:`array`,items:{type:`string`},description:`Which panels start open.`},multiple:{type:`boolean`,description:`Whether several panels may stand open at once.`},loop:{type:`boolean`,description:`Whether Down and Up wrap around at the ends.`},level:{type:`number`,enum:[1,2,3,4,5,6],description:`Which heading each header sits in.`}},required:[],styled:!0},"Accordion.Item":{description:`One section.`,import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[],props:{value:{type:`string`,description:`What this section stands for, and what the widget reports when it is open.`},disabled:{type:`boolean`,description:`Not openable, and stepped over by Down and Up.`}},required:[`value`],styled:!0},"Accordion.Trigger":{description:"The header: a real `<button>` in a heading, which is the pair APG asks for.",import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[],props:{level:{type:`number`,enum:[1,2,3,4,5,6],description:`This header's heading level, when it differs from the one the accordion sets.`},arrow:{type:`boolean`,description:`Whether to draw the chevron.`}},required:[],styled:!0},"Accordion.Panel":{description:`The section's content, in the grid that gives it its height.`,import:`import Accordion from '@box-kite/react/components/accordion';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Collapsible:{description:`One disclosure: a trigger, and the content it reveals.`,import:`import { Collapsible } from '@box-kite/react/components/accordion';`,slots:[`default`],events:[`trigger`,`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled open state.`},defaultOpen:{type:`boolean`,description:`Whether it starts open.`}},required:[],styled:!0},Slider:{description:`A value chosen by dragging a thumb along a track.`,import:`import Slider from '@box-kite/react/components/slider';`,slots:[`default`],events:[`onValueChange`,`onValueCommit`,`format`],props:{min:{type:`number`,description:`The bottom of the range.`},max:{type:`number`,description:`The top of the range.`},step:{type:`number`,description:`The grid every value lands on.`},largeStep:{type:`number`,description:`What Page Up and Page Down move by.`},orientation:{type:`string`,enum:[`horizontal`,`vertical`],description:`Which way the thumbs run.`},disabled:{type:`boolean`,description:`Not adjustable, by pointer or by key.`},label:{type:`string`,description:`What the slider is called.`},labelledBy:{type:`string`,description:`The same, naming an element that already says it.`},thumbLabels:{type:`array`,items:{type:`string`},description:`One name per thumb — "Minimum", "Maximum".`},name:{type:`string`,description:`What the value submits under.`}},required:[],styled:!0},Progress:{description:`How far a task has got.`,import:`import Progress from '@box-kite/react/components/progress';`,slots:[`default`],events:[`format`],props:{value:{type:`number`,description:`How far along it is.`},min:{type:`number`,description:`The bottom of the range.`},max:{type:`number`,description:`The top of the range, and so what "full" means.`},label:{type:`string`,description:`What the bar is called.`},labelledBy:{type:`string`,description:`The same, naming an element that already says it.`}},required:[],styled:!0},Toaster:{description:`The viewport every toast is drawn in, and the live region they are announced from.`,import:`import Toaster from '@box-kite/react/components/toaster';`,slots:[`default`],events:[],props:{position:{type:`string`,enum:[`top-start`,`top-center`,`top-end`,`bottom-start`,`bottom-center`,`bottom-end`],description:`Which corner the stack is pinned to.`},limit:{type:`number`,description:`How many toasts are on screen at once.`},duration:{type:`number`,description:`Milliseconds a toast that names no duration of its own stays.`},label:{type:`string`,description:`The region's accessible name.`},closeLabel:{type:`string`,description:`The close button's accessible name.`}},required:[],styled:!0},Dropdown:{description:`The APG combobox, in both shapes: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/`,import:`import Dropdown from '@box-kite/react/components/dropdown';`,slots:[`label`],events:[`onValueChange`,`onChange`],props:{name:{type:`string`,description:`What the selection submits under: the component renders a hidden input carrying it.`},defaultOpen:{type:`boolean`,description:`Open the listbox as soon as the dropdown mounts, highlighting the selected option the way a press on the trigger would.`},multiple:{type:`boolean`,description:`Let more than one option be chosen.`},isSearchable:{type:`boolean`,description:"Turn the control into the APG *editable* combobox: a text field that filters the listbox, and a different pattern rather than a decoration — the field carries the role, the ARIA and your `props`."},searchPlaceholder:{type:`string`,description:"The placeholder for the `isSearchable` field."},hideIcon:{type:`boolean`,description:`Drop the chevron.`},showCheckbox:{type:`boolean`,description:`Show checkbox for each item in multiple selection mode`}},required:[],styled:!0},"Dropdown.Display":{description:``,import:`import Dropdown from '@box-kite/react/components/dropdown';`,slots:[],events:[`children`],props:{},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';`,slots:[`label`,`loadingText`,`emptyText`],events:[`createRow`,`createLabel`,`removeLabel`,`onQueryChange`,`onOpenChange`],props:{placeholder:{type:`string`,description:`The field's placeholder.`},name:{type:`string`,description:`What the selection submits under: one hidden input per selected row, carrying its key.`},disabled:{type:`boolean`,description:`Not editable and not openable, but still read out.`},props:{type:`object`,description:"Attributes for the `<input>` that *is* the combobox — an `aria-label`, an `inputMode`, an `id`."},hideIcon:{type:`boolean`,description:`Drop the chevron.`},loading:{type:`boolean`,description:`Rows are on their way.`},query:{type:`string`,description:`The typed text.`},defaultQuery:{type:`string`,description:`The text the field starts with when the combobox owns its own query.`},open:{type:`boolean`,description:`Whether the listbox is showing.`},defaultOpen:{type:`boolean`,description:`Whether it starts open, when the combobox owns that itself.`}},required:[],styled:!0},DataGrid:{description:"The data grid: sorting, filtering, grouping, pinned columns, row selection, detail rows, pagination and virtualization, with every part of it styled through the `datagrid` component tree rather than a stylesheet of its own.",import:`import DataGrid from '@box-kite/react/components/dataGrid';`,slots:[`default`],events:[`onSelectedRowKeysChange`,`onSelectionChange`,`onGlobalFilterChange`,`onColumnFiltersChange`,`filters`,`onExpandedRowKeysChange`,`onExpandedTreeKeysChange`,`onPaginationChange`,`onPageChange`,`onPageSizeChange`,`onCellEditsChange`,`onRangeChange`,`onPaste`,`onSortingChange`,`onSortChange`,`onServerStateChange`],props:{loading:{type:`boolean`,description:`Show the loading sweep over the rows.`},globalFilterValue:{type:`string`,description:`Controlled global filter value`},expandedRowKeys:{type:`array`,items:{anyOf:[{type:`string`},{type:`number`}]},description:`Controlled expanded detail row keys`},expandedTreeKeys:{type:`array`,items:{anyOf:[{type:`string`},{type:`number`}]},description:"Controlled open rows of a `def.treeData` tree."},page:{type:`number`,description:`Controlled current page (1-indexed).`},pageSize:{type:`number`,description:`Controlled page size.`}},required:[],styled:!0},Flex:{description:"`Box` with `display: flex` on it — `inline` makes that `inline-flex`.",import:`import Flex from '@box-kite/react/components/flex';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Grid:{description:"`Box` with `display: grid` on it — `inline` makes that `inline-grid`.",import:`import Grid from '@box-kite/react/components/grid';`,slots:[`default`],events:[],props:{},required:[],styled:!0},Icon:{description:"Box props on an icon somebody else drew — lucide, Tabler, react-icons, an Iconify set, a raw `<svg>`.",import:`import Icon from '@box-kite/react/components/icon';`,slots:[`default`],events:[],props:{label:{type:`string`,description:'Names the icon — `role="img"` and this text.'}},required:[],styled:!0},Presence:{description:"The exit half of the animation story: it keeps rendering its child with `present: false` until the child's own CSS says its transition is over, and only then lets React remove it.",import:`import Presence from '@box-kite/react/components/presence';`,slots:[],events:[`children`],props:{present:{type:`boolean`,description:`Whether the child should be there.`}},required:[`present`],styled:!1},Sparkline:{description:`A trend line with no axes, no legend and no labels: the shape of a series, small enough to sit in a table cell.`,import:`import { Sparkline } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{data:{type:`array`,items:{type:`number`},description:`The numbers to draw, oldest first.`},variant:{type:`string`,enum:[`line`,`area`,`bar`],description:"`line` (default), `area` — the line with the space beneath it filled — or `bar`."},min:{type:`number`,description:`Fix the ends of the value axis.`},max:{type:`number`,description:"The top of the value axis — see `min`, which it is written beside."},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`data`],styled:!0},ProgressRing:{description:`A circular progress arc: one value from 0 to 1, drawn as the filled part of a ring over its own track.`,import:`import { ProgressRing } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{value:{type:`number`,description:`How full the arc is, from 0 to 1.`},thickness:{type:`number`,description:`The width of the ring in view units, out of the 100 the box is wide.`},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`value`],styled:!0},Gauge:{description:"A `ProgressRing` that stops short of a full turn: `sweep` is how far round the dial goes and `start` where it begins, so a value reads as a needle position rather than as a proportion.",import:`import { Gauge } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{sweep:{type:`number`,description:`How far round the dial goes, in degrees.`},start:{type:`number`,description:`Where it starts, in degrees clockwise from twelve o'clock.`},value:{type:`number`,description:`How full the arc is, from 0 to 1.`},thickness:{type:`number`,description:`The width of the ring in view units, out of the 100 the box is wide.`},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`value`],styled:!0},MiniDonut:{description:"A ring of segments, each drawn as its share of the whole — so the values need no total, and the colours cycle through the six a `ChartContainer` declares.",import:`import { MiniDonut } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{data:{type:`array`,items:{type:`number`},description:`One value per segment.`},thickness:{type:`number`,description:`The width of the ring in view units, out of the 100 the box is wide.`},preserveAspectRatio:{type:`string`,description:`How the drawing is fitted when the box it is given is a different shape.`},width:{anyOf:[{type:`string`},{type:`number`}],description:'The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`.'},height:{anyOf:[{type:`string`},{type:`number`}],description:"The `height` attribute: a number in user units, or any CSS length."},label:{type:`string`,description:'Names the drawing — `role="img"` and this text.'}},required:[`data`],styled:!0},ChartContainer:{description:'The theming bridge for a chart somebody else draws: a Box that declares `--chart-1` … `--chart-6` in both themes plus one `--color-<series>` per series, so a Recharts `<Line stroke="var(--color-revenue)">` names no colour of its own and its dark mode belongs to the page.',import:`import { ChartContainer } from '@box-kite/react/components/chart';`,slots:[`default`],events:[],props:{},required:[],styled:!0},DashboardGrid:{description:`A dashboard the people using it can rearrange, and a model can write.`,import:`import DashboardGrid from '@box-kite/react/components/dashboard';`,slots:[`default`],events:[`onLayoutChange`,`onLayoutCommit`],props:{rowHeight:{type:`number`,description:`The height of one row, on the ÷4 spacing scale.`},editable:{type:`boolean`,description:`Whether widgets can be moved and resized.`},label:{type:`string`,description:`What the set of widgets is called.`},labelledBy:{type:`string`,description:`The same, naming an element that already says it.`}},required:[],styled:!0},Widget:{description:"The chrome round whatever a widget shows: a title bar, the states a panel fed by a request can be in, and — inside a `DashboardGrid` — the handles that move and resize it.",import:`import { Widget } from '@box-kite/react/components/dashboard';`,slots:[`default`,`title`,`description`,`actions`,`error`],events:[`onRefresh`],props:{id:{type:`string`,description:`Which layout item this widget is.`},name:{type:`string`,description:`What the widget is called where a control has to say so — the handles' labels and the announcements.`},level:{type:`number`,enum:[2,3,4,5,6],description:`The heading level the title renders at.`},loading:{type:`boolean`,description:"Bars where the content will be, and `aria-busy` while they are showing."},refreshLabel:{type:`string`,description:`The refresh button's accessible name.`}},required:[],styled:!0},ToolCallCard:{description:`One call an agent made: what it ran, where it got to, and — when the header is opened — what went in and what came back.`,import:`import { ToolCallCard } from '@box-kite/react/components/agent';`,slots:[`name`,`description`,`inputLabel`,`outputLabel`,`errorLabel`,`default`],events:[`onOpenChange`],props:{status:{type:`string`,enum:[`pending`,`running`,`success`,`error`],description:`Where the call is.`},open:{type:`boolean`,description:`Controlled: whether the body is open.`},defaultOpen:{type:`boolean`,description:`Whether it starts open.`},collapsible:{type:`boolean`,description:`Whether the body can be opened at all.`},valueLimit:{type:`number`,description:`How much of a value is shown before it is cut.`}},required:[],styled:!0},ApprovalCard:{description:`The gate in front of something an agent wants to do: what it is, and the two answers.`,import:`import { ApprovalCard } from '@box-kite/react/components/agent';`,slots:[`title`,`description`,`inputLabel`,`approveLabel`,`rejectLabel`,`default`],events:[`onDecisionChange`],props:{decision:{type:`string`,enum:[`approved`,`rejected`],description:`Controlled: what has been decided.`},defaultDecision:{type:`string`,enum:[`approved`,`rejected`],description:`What it starts as.`},busy:{type:`boolean`,description:"The decision is on its way to a server: both buttons are disabled and the card reports `aria-busy`."},autoFocus:{type:`boolean`,description:`Whether to put focus on the card when it mounts.`},valueLimit:{type:`number`,description:`How much of the input is shown before it is cut.`}},required:[],styled:!0},Reasoning:{description:`What the model was thinking, folded away.`,import:`import { Reasoning } from '@box-kite/react/components/agent';`,slots:[`label`,`default`],events:[`onOpenChange`],props:{open:{type:`boolean`,description:`Controlled: whether it is open.`},defaultOpen:{type:`boolean`,description:`Whether it starts open.`},streaming:{type:`boolean`,description:`Still arriving: the header says so and shimmers.`},duration:{type:`number`,description:`How long the thought took, in milliseconds.`}},required:[],styled:!0},StreamingText:{description:`What the agent is saying, as it arrives.`,import:`import { StreamingText } from '@box-kite/react/components/agent';`,slots:[`default`],events:[],props:{text:{type:`string`,description:`The message so far.`},streaming:{type:`boolean`,description:`Whether more is still coming.`},window:{type:`number`,description:`How many of the runs that arrived most recently stay faded in at once; the rest settle.`},caret:{type:`boolean`,description:`Whether to draw the caret while streaming.`}},required:[`text`],styled:!0},Skeleton:{description:`Where content will be, while it is being fetched.`,import:`import Skeleton from '@box-kite/react/components/skeleton';`,slots:[`label`],events:[],props:{lines:{type:`number`,description:`How many bars to draw.`},circle:{type:`boolean`,description:`A round placeholder — an avatar, a thumbnail.`}},required:[],styled:!0}}};function o(e){let t=(0,n.getDefaultEngine)();return n.BoxCatalogs.build({...t.getCatalogSource(),componentStyles:t.getComponentsStyles(),manifest:a,contracts:i.CONTRACTS},e)}exports.catalog=o,exports.default=o,exports.specSchema=t.t;

package/catalog.mjs

@@ -242,6 +242,10 @@ var a = i, o = {
 		animationIterationCount: "The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.",
 		animationName: "Which `@keyframes` to run: a sequence registered with `Box.keyframes()`, one of the four preset names, or a name from a stylesheet this library never wrote — an unknown name is left alone rather than dropped, because `@keyframes` can come from anywhere.",
 		animationPlayState: "The animation-play-state CSS property sets whether an animation is running or paused.",
+		animationRange: "The shorthand that sets both ends of the range at once: one value sets the start and leaves the end at `normal`, two set both.",
+		animationRangeEnd: "Where along the timeline the animation finishes: a named part of the pass (`cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`), an offset into one, or a plain length.",
+		animationRangeStart: "Where along the timeline the animation starts.",
+		animationTimeline: "What drives the animation — a scroll position rather than a clock, so there is no rAF loop, no scroll listener and no state.",
 		animationTimingFunction: "How an animation progresses through each cycle: a keyword, one of the four sampled springs, or a curve of your own — `cubic-bezier()`, `steps()` and `linear()` are values.",
 		b: "The border-width shorthand CSS property sets the width of an element's border.",
 		bx: "The border-width shorthand CSS property sets the width of an element's left and right border.",
@@ -452,6 +456,16 @@ var a = i, o = {
 		scrollbarWidth: "How wide a scrollbar the browser draws.",
 		scrollbarColor: "The scrollbar-color CSS property sets the color of the scrollbar thumb and track.",
 		scrollbarGutter: "The scrollbar-gutter CSS property reserves the space a scrollbar would take before there is one, so a panel does not shift sideways the moment its content overflows.",
+		scrollTimeline: "Declares a named scroll timeline on this scroller — the shorthand, `<name>` or `<name> <axis>`, and the one to reach for: the longhands exist to override half of it.",
+		scrollTimelineAxis: "Which axis of this scroller the named timeline follows.",
+		scrollTimelineName: "The name half of `scrollTimeline`, on its own.",
+		viewTimeline: "Declares a named view timeline on this element — its own progress across the scrollport, rather than the scroller's progress through its content.",
+		viewTimelineAxis: "Which axis this element's pass across the scrollport is measured on.",
+		viewTimelineInset: "Shrinks the scrollport the timeline measures against, so the pass starts and ends somewhere other than the viewport edges: one value for both ends, two for the start and the end.",
+		viewTimelineName: "The name half of `viewTimeline`, on its own.",
+		timelineScope: "Makes the named timelines below this element reachable from anywhere else below it.",
+		viewTransitionName: "Names this element for a view transition, which is what makes the browser animate it from where it was to where it is rather than cross-fading the whole page over it.",
+		viewTransitionClass: "A class shared by several named elements, so one rule styles the lot of them: `::view-transition-group(.card)` reaches every element carrying `viewTransitionClass=\"card\"`.",
 		vars: "CSS custom properties on this element, inherited by everything inside it: `vars={{ 'color-x': 'sky-500' }}` emits `--color-x: var(--sky-500)`.",
 		css: "The escape hatch: a style object for the properties this library has no prop for, compiled into a class through the same pipeline as every other prop — shared, nestable, server-rendered — rather than an inline style."
 	},
@@ -1585,7 +1599,7 @@ var a = i, o = {
 		},
 		Collapsible: {
 			description: "One disclosure: a trigger, and the content it reveals.",
-			import: "import Collapsible from '@box-kite/react/components/accordion';",
+			import: "import { Collapsible } from '@box-kite/react/components/accordion';",
 			slots: ["default"],
 			events: ["trigger", "onOpenChange"],
 			props: {

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");function c(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.l(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 l=r.t;function u(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return l(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function d(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return l(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var f;(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)().styleElementId}e.styleElementId=i;function a(e){(0,o.getDefaultEngine)().configure(e)}e.configure=a})(f||={});var p=`[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 m(e){if(typeof e.createContext!=`function`)throw Error(p)}m(a.default);var h=a.default.createContext({theme:``,setTheme:()=>{}});function g(e){let{children:t,theme:n,use:r=`local`,storageKey:c,globalStyles:l}=e,u=d(r===`global`?l:void 0,`html`),[f,p]=(0,a.useState)(n??o.defaultThemeName),[m,g]=(0,a.useState)(n!==void 0),_=(0,a.useCallback)(e=>{e===null?(c&&(0,o.clearStoredTheme)(c),g(!1)):(c&&(0,o.writeStoredTheme)(c,e),p(e),g(!0))},[c]),[v,y]=(0,a.useState)(n);return n!==v&&(y(n),n===void 0?g(!1):(p(n),g(!0))),(0,a.useLayoutEffect)(()=>{if(m)return;let e=c?(0,o.readStoredTheme)(c):null;if(e){p(e),g(!0);return}return p((0,o.getSystemTheme)()),(0,o.watchSystemTheme)(p)},[m,c]),(0,a.useLayoutEffect)(()=>{if(r===`local`)return;let e=(0,o.documentRoot)();if(e)return(0,o.applyThemeToElement)(e,f)},[f,r]),r===`local`?(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:_},children:[u,(0,s.jsx)(i.default,{className:f,props:{"data-theme":f},children:t})]}):(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:_},children:[u,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(h);return[e,t]}e.useTheme=t})(g||={});var _=g,v=new WeakMap;function y(e){let t=v.get(e);return t||(t=new Map,v.set(e,t)),t}function b(e=!0){let[t]=_.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=y(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 c}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});
+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-dom"),c=require("react/jsx-runtime");function l(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.l(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 u=r.t;function d(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return u(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function f(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return u(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var p;(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})(p||={});var m=`[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 h(e){if(typeof e.createContext!=`function`)throw Error(m)}h(a.default);var g=a.default.createContext({theme:``,setTheme:()=>{}});function _(e){let{children:t,theme:n,use:r=`local`,storageKey:l,globalStyles:u,viewTransition:d}=e,p=f(r===`global`?u:void 0,`html`),[m,h]=(0,a.useState)(n??o.defaultThemeName),[_,v]=(0,a.useState)(n!==void 0),y=(0,a.useRef)(null),b=(0,a.useRef)(m),x=(0,a.useCallback)(e=>{let t=()=>{e===null?(l&&(0,o.clearStoredTheme)(l),v(!1)):(l&&(0,o.writeStoredTheme)(l,e),h(e),v(!0))};d?(0,o.startViewTransition)(()=>(0,s.flushSync)(t)):t()},[l,d]),[S,C]=(0,a.useState)(n);return n!==S&&(C(n),n===void 0?v(!1):(h(n),v(!0))),(0,a.useLayoutEffect)(()=>{if(_)return;let e=l?(0,o.readStoredTheme)(l):null,t=e??(0,o.getSystemTheme)();if(t!==b.current&&(y.current=t),h(t),e){v(!0);return}return(0,o.watchSystemTheme)(h)},[_,l]),(0,a.useLayoutEffect)(()=>{if(b.current=m,y.current!==null&&y.current!==m||(y.current=null,r===`local`))return;let e=(0,o.documentRoot)();if(e)return(0,o.applyThemeToElement)(e,m)},[m,r]),r===`local`?(0,c.jsxs)(g.Provider,{value:{theme:m,setTheme:x},children:[p,(0,c.jsx)(i.default,{className:m,props:{"data-theme":m},children:t})]}):(0,c.jsxs)(g.Provider,{value:{theme:m,setTheme:x},children:[p,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(g);return[e,t]}e.useTheme=t})(_||={});var v=_,y=new WeakMap;function b(e){let t=y.get(e);return t||(t=new Map,y.set(e,t)),t}function x(e=!0){let[t]=v.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=b(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 l}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});