@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/dist/bricks/Textarea.d.ts

@@ -0,0 +1,24 @@
+import { type FocusableProps } from "./~utils.js";
+interface TextareaProps extends FocusableProps<"textarea"> {
+}
+/**
+ * A styled textarea element that allows users to enter multiline text values.
+ *
+ * Example usage:
+ * ```tsx
+ * <TextBox.Textarea defaultValue="Hello" />
+ * ```
+ *
+ * Works well with the `Field` and `Label` components.
+ * ```tsx
+ * <Field>
+ *   <Label>Leave a comment, be kind</Label>
+ *   <TextBox.Textarea />
+ * </Field>
+ * ```
+ *
+ * Underneath, it's an HTML textarea, i.e. `<textarea>`, so it supports the same props, including
+ * `value`, `defaultValue`, `onChange`, and `disabled`.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLElement | HTMLTextAreaElement>>;
+export {};

package/dist/bricks/Textarea.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import cx from "classnames";
+import { useFieldId } from "./Field.js";
+import { forwardRef } from "./~utils.js";
+const Textarea = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.textarea,
+      {
+        id: fieldId,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  Textarea
+};

package/dist/bricks/Tooltip.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+import { type FocusableProps } from "./~utils.js";
+interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<Ariakit.TooltipProps, "open" | "unmountOnHide">, Pick<Ariakit.TooltipProviderProps, "defaultOpen" | "setOpen"> {
+    /**
+     * The content to be displayed inside the tooltip when the trigger element is hovered or focused.
+     */
+    content: React.ReactNode;
+    /**
+     * The element that will trigger the tooltip when hovered or focused.
+     * Common examples include buttons, links, or form controls.
+     *
+     * **Note**: The trigger must be a single interactive element. Do not add a
+     * tooltip to a non-interactive static element (such as a `<div>` or `<svg>`). Also,
+     * the trigger element must forward its ref and spread its props.
+     */
+    children: React.ReactElement;
+    /**
+     * Determines how ARIA attributes are applied to the tooltip for accessibility:
+     *
+     * - `"description"`: The tooltip provides additional information via `aria-describedby`.
+     * - `"label"`: The tooltip acts as a label for the trigger element via `aria-labelledby`.
+     * - `"none"`: No ARIA attributes are applied; the tooltip is only for visual assistance.
+     *
+     * @default "description"
+     */
+    type?: "description" | "label" | "none";
+}
+/**
+ * A tooltip component that provides additional information or context for an interactive trigger element.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <button>Hover over me</button>
+ * </Tooltip>
+ * ```
+ *
+ * **Note**: The trigger element must be a single interactive element, such as a button or link. Do not add a
+ * tooltip to a non-interactive static element (such as a `<div>` or `<svg>`).
+ *
+ * **Note**: If `type` is set to `"none"`, the tooltip will not use ARIA attributes.
+ */
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Tooltip.js

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef, supportsPopover } from "./~utils.js";
+const Tooltip = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      content,
+      children,
+      className,
+      type = "description",
+      id = React.useId(),
+      defaultOpen: defaultOpenProp,
+      open: openProp,
+      setOpen: setOpenProp,
+      unmountOnHide = type === "none",
+      ...rest
+    } = props;
+    const store = Ariakit.useTooltipStore();
+    const open = Ariakit.useStoreState(store, (state) => state.open);
+    const popover = Ariakit.useStoreState(
+      store,
+      (state) => state.popoverElement
+    );
+    React.useEffect(
+      function syncPopoverWithOpenState() {
+        if (popover?.isConnected) {
+          popover?.togglePopover?.(open);
+        }
+      },
+      [open, popover]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      Ariakit.TooltipProvider,
+      {
+        store,
+        defaultOpen: defaultOpenProp,
+        open: openProp,
+        setOpen: setOpenProp,
+        children: [
+          /* @__PURE__ */ jsx(
+            Ariakit.TooltipAnchor,
+            {
+              render: children,
+              ...type === "description" && { "aria-describedby": id },
+              ...type === "label" && { "aria-labelledby": id }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Ariakit.Tooltip,
+            {
+              "aria-hidden": "true",
+              ...rest,
+              unmountOnHide,
+              className: cx("\u{1F95D}-tooltip", className),
+              ref: forwardedRef,
+              id,
+              style: {
+                zIndex: supportsPopover ? void 0 : 9999,
+                ...props.style
+              },
+              wrapperProps: { popover: "manual" },
+              portal: !supportsPopover,
+              children: content
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+export {
+  Tooltip
+};

package/dist/bricks/Tree.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { IconButton } from "./IconButton.js";
+import { type BaseProps } from "./~utils.js";
+interface TreeProps extends BaseProps {
+}
+declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TreeItemProps extends Omit<BaseProps, "content"> {
+    content?: React.ReactNode;
+    selected?: boolean;
+    /** Specifies if the tree item is expanded. Used to determine if a tree item is a parent node. Defaults to `undefined`. */
+    expanded?: boolean;
+}
+declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TreeItemContentProps extends BaseProps<"span"> {
+}
+declare const TreeItemContent: React.ForwardRefExoticComponent<TreeItemContentProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+type IconButtonProps = React.ComponentProps<typeof IconButton>;
+interface TreeItemExpanderProps extends Omit<IconButtonProps, "variant" | "label" | "icon"> {
+    label?: IconButtonProps["label"];
+    icon?: IconButtonProps["icon"];
+}
+declare const TreeItemExpander: React.ForwardRefExoticComponent<Omit<TreeItemExpanderProps, "ref"> & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { Tree as Root, TreeItem as Item, TreeItemExpander as Expander, TreeItemContent as Content, };

package/dist/bricks/Tree.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import * as ListItem from "./ListItem.js";
+import { IconButton } from "./IconButton.js";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "./~utils.js";
+const Tree = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Ariakit.Role.div, { ...props, role: "list", ref: forwardedRef, children: props.children });
+});
+const TreeItem = forwardRef((props, forwardedRef) => {
+  const { selected, content, children, className, expanded, style, ...rest } = props;
+  const parentContext = React.useContext(TreeItemContext);
+  const level = parentContext ? parentContext.level + 1 : 1;
+  const firstSelected = !!selected && !parentContext?.selected;
+  return /* @__PURE__ */ jsx(
+    TreeItemContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          level,
+          expanded,
+          selected
+        }),
+        [level, expanded, selected]
+      ),
+      children: /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-current": firstSelected ? true : void 0, children: [
+        /* @__PURE__ */ jsx(
+          ListItem.Root,
+          {
+            ...rest,
+            "data-kiwi-expanded": expanded,
+            "data-kiwi-selected": selected,
+            "data-kiwi-parent-selected": parentContext?.selected,
+            className: cx("\u{1F95D}-tree-item", className),
+            style: {
+              ...style,
+              "--\u{1F95D}tree-item-level": level
+            },
+            ref: forwardedRef,
+            role: void 0,
+            children: content
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { role: "list", children })
+      ] })
+    }
+  );
+});
+const TreeItemContent = forwardRef(
+  (props, forwardedRef) => {
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Content,
+      {
+        ...rest,
+        className: cx("\u{1F95D}-tree-item-content", props.className),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx("button", { type: "button", children })
+      }
+    );
+  }
+);
+const TreeItemExpander = forwardRef(
+  (props, forwardedRef) => {
+    const context = React.useContext(TreeItemContext);
+    const expanded = context?.expanded;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: /* @__PURE__ */ jsx(TreeChevron, {}),
+        label: "Toggle",
+        "aria-expanded": expanded === void 0 ? void 0 : expanded,
+        ...props,
+        className: cx("\u{1F95D}-tree-item-expander", props.className),
+        variant: "ghost",
+        labelVariant: "visually-hidden",
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const TreeChevron = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: /* @__PURE__ */ jsx("path", { d: "M4.146 6.146a.5.5 0 0 1 .708 0L8 9.293l3.146-3.147a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 0 1 0-.708Z" })
+          }
+        ),
+        className: cx("\u{1F95D}-tree-chevron", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const TreeItemContext = React.createContext(void 0);
+export {
+  TreeItemContent as Content,
+  TreeItemExpander as Expander,
+  TreeItem as Item,
+  Tree as Root
+};

package/dist/bricks/VisuallyHidden.d.ts

@@ -0,0 +1,18 @@
+import { type BaseProps } from "./~utils.js";
+interface VisuallyHiddenProps extends BaseProps<"span"> {
+}
+/**
+ * A visually hidden element that is still accessible to screen readers and other assistive technology.
+ *
+ * This is useful when you want to provide a text alternative to a visual element (e.g. an icon or symbol).
+ *
+ * Example:
+ * ```tsx
+ * <span aria-hidden="true">⭐</span>
+ * <VisuallyHidden>Favorite</VisuallyHidden>
+ * ```
+ *
+ * **Note**: The `IconButton` component utilizes `VisuallyHidden` internally when the `label` prop is set.
+ */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<VisuallyHiddenProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export {};

package/dist/bricks/VisuallyHidden.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const VisuallyHidden = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Ariakit.VisuallyHidden, { ...props, ref: forwardedRef });
+  }
+);
+export {
+  VisuallyHidden
+};

package/dist/bricks/index.d.ts

@@ -0,0 +1,19 @@
+export { Root } from "./Root.js";
+export { Anchor } from "./Anchor.js";
+export { Button } from "./Button.js";
+export { Checkbox } from "./Checkbox.js";
+export * as DropdownMenu from "./DropdownMenu.js";
+export { Divider } from "./Divider.js";
+export { Icon } from "./Icon.js";
+export { IconButton } from "./IconButton.js";
+export { Field } from "./Field.js";
+export { Kbd } from "./Kbd.js";
+export { Label } from "./Label.js";
+export { Radio } from "./Radio.js";
+export * as Select from "./Select.js";
+export { Switch } from "./Switch.js";
+export * as Tabs from "./Tabs.js";
+export { Text } from "./Text.js";
+export * as TextBox from "./TextBox.js";
+export { Tooltip } from "./Tooltip.js";
+export { VisuallyHidden } from "./VisuallyHidden.js";

package/dist/bricks/index.js

@@ -0,0 +1,41 @@
+"use client";
+import { Root } from "./Root.js";
+import { Anchor } from "./Anchor.js";
+import { Button } from "./Button.js";
+import { Checkbox } from "./Checkbox.js";
+import * as DropdownMenu from "./DropdownMenu.js";
+import { Divider } from "./Divider.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Field } from "./Field.js";
+import { Kbd } from "./Kbd.js";
+import { Label } from "./Label.js";
+import { Radio } from "./Radio.js";
+import * as Select from "./Select.js";
+import { Switch } from "./Switch.js";
+import * as Tabs from "./Tabs.js";
+import { Text } from "./Text.js";
+import * as TextBox from "./TextBox.js";
+import { Tooltip } from "./Tooltip.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+export {
+  Anchor,
+  Button,
+  Checkbox,
+  Divider,
+  DropdownMenu,
+  Field,
+  Icon,
+  IconButton,
+  Kbd,
+  Label,
+  Radio,
+  Root,
+  Select,
+  Switch,
+  Tabs,
+  Text,
+  TextBox,
+  Tooltip,
+  VisuallyHidden
+};

package/dist/bricks/styles.css.d.ts

@@ -0,0 +1,2 @@
+import rawStyles from "./styles.css?inline";
+export default rawStyles;

package/dist/bricks/styles.css.js

@@ -0,0 +1,8 @@
+// inline-css:/home/runner/work/kiwi/kiwi/packages/kiwi-react/src/bricks/styles.css
+var styles_default = String.raw`@layer kiwi.components.base,kiwi.components.modifiers,kiwi.components.states;@layer kiwi.components{@layer base{.🥝-icon{width:var(--🥝icon-size);height:var(--🥝icon-size);color:var(--🥝icon-color);flex-shrink:0;transition:color .15s ease-out}}@layer modifiers{.🥝-icon[data-kiwi-size=regular]{--🥝icon-size:1rem}.🥝-icon[data-kiwi-size=large]{--🥝icon-size:1.5rem}}@layer base{.🥝-disclosure-arrow{rotate:var(--🥝disclosure-arrow-rotate);margin-inline-end:-8px}@media (prefers-reduced-motion:no-preference){.🥝-disclosure-arrow{transition:rotate .15s ease-in-out}}}@layer base{.🥝-anchor{cursor:pointer;font-size:var(--kiwi-font-size-12);text-underline-offset:.25ex;-webkit-text-decoration-color:inherit;text-decoration-color:inherit;color:var(--🥝anchor-color);border-radius:4px;font-weight:500;transition:color .15s ease-out,text-decoration-color .15s ease-out}.🥝-anchor:where(button){background:0 0;border:none}}@layer modifiers{.🥝-anchor[data-kiwi-tone=neutral]{--🥝anchor-color:var(--kiwi-color-text-neutral-primary)}.🥝-anchor[data-kiwi-tone=accent]{--🥝anchor-color:var(--kiwi-color-text-accent-strong)}.🥝-anchor[data-kiwi-tone=critical]{--🥝anchor-color:var(--kiwi-color-text-critical-base)}.🥝-anchor[data-kiwi-tone=critical]:focus-visible{outline-color:var(--🥝anchor-color)}}@layer states{@media (any-hover:hover){.🥝-anchor:where(:hover){text-decoration-color:#0000}}.🥝-anchor:where(:active){text-decoration-color:#0000}.🥝-anchor:where([disabled],:disabled,[aria-disabled=true]){--🥝anchor-color-text:var(--kiwi-color-text-neutral-disabled);cursor:not-allowed;text-decoration-color:#0000}}@layer base{.🥝-button{white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1.2;font-size:var(--kiwi-font-size-12);block-size:1.5rem;padding-inline:var(--🥝button-padding-inline,12px);background-color:var(--🥝button-background-color);color:var(--🥝button-color,var(--kiwi-color-text-neutral-primary));-webkit-tap-highlight-color:color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-pressed-\%));--🥝icon-color:var(--🌀button-state--default,var(--kiwi-color-icon-neutral-base))var(--🌀button-state--hover,var(--kiwi-color-icon-neutral-hover))var(--🌀button-state--pressed,var(--kiwi-color-icon-neutral-hover))var(--🌀button-state--active,var(--kiwi-color-icon-accent-strong))var(--🌀button-state--disabled,var(--kiwi-color-icon-neutral-disabled));border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;font-weight:500;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}@media (forced-colors:active){.🥝-button{border:1px solid}}}@layer modifiers{.🥝-button[data-kiwi-variant=solid]{--🥝button-background-color:var(--🌀button-state--default,var(--🥝button-bg--solid-default))var(--🌀button-state--hover,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--🥝button-bg--solid-default)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--kiwi-color-bg-glow-on-surface-disabled));box-shadow:var(--🌀button-state--default,var(--kiwi-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--kiwi-shadow-button-base-drop))var(--🌀button-state--hover,var(--kiwi-shadow-button-base-inset),0px 0px 0px 1px var(--🥝button-border-color)inset,var(--kiwi-shadow-button-base-drop))var(--🌀button-state--pressed,0px 0px 0px 1px var(--🥝button-border-color)inset)var(--🌀button-state--disabled,none)}.🥝-button[data-kiwi-variant=solid]:where([data-kiwi-tone=neutral]){--🥝button-bg--solid-default:var(--kiwi-color-bg-neutral-base);--🥝button-border-color:var(--🌀button-state--default,var(--kiwi-color-border-shadow-base))var(--🌀button-state--hover,color-mix(in oklch,var(--kiwi-color-border-shadow-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--kiwi-color-border-shadow-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent)}.🥝-button[data-kiwi-variant=solid]:where([data-kiwi-tone=accent]){--🥝button-bg--solid-default:var(--kiwi-color-bg-accent-base);--🥝button-border-color:var(--🌀button-state--default,var(--kiwi-color-border-shadow-strong))var(--🌀button-state--hover,color-mix(in oklch,var(--kiwi-color-border-shadow-strong)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-strong-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--kiwi-color-border-shadow-strong)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-strong-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-color:var(--kiwi-color-text-neutral-emphasis);--🥝icon-color:var(--🌀button-state--default,var(--kiwi-color-icon-neutral-emphasis))var(--🌀button-state--hover,var(--kiwi-color-icon-strong-hover))var(--🌀button-state--pressed,var(--kiwi-color-icon-neutral-hover))var(--🌀button-state--disabled,var(--kiwi-color-icon-neutral-disabled))}.🥝-button[data-kiwi-variant=outline]{--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-pressed-\%)))var(--🌀button-state--disabled,transparent);--🥝button-border-color:var(--🌀button-state--default,var(--kiwi-color-border-neutral-base))var(--🌀button-state--hover,color-mix(in oklch,var(--kiwi-color-border-neutral-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,var(--kiwi-color-border-neutral-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-pressed-\%)))var(--🌀button-state--disabled,var(--kiwi-color-border-glow-on-surface-disabled));box-shadow:0px 0px 0px 1px var(--🥝button-border-color)inset}.🥝-button[data-kiwi-variant=ghost]{--🥝button-background-color:var(--🌀button-state--default,transparent)var(--🌀button-state--hover,color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀button-state--pressed,color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-pressed-\%)))var(--🌀button-state--active,var(--kiwi-color-bg-glow-on-surface-accent-pressed))var(--🌀button-state--disabled,transparent)}}@layer states{@media (any-hover:hover){.🥝-button:where(:hover){--🌀button-state:var(--🌀button-state--hover)}}.🥝-button:where(:active){--🌀button-state:var(--🌀button-state--pressed)}.🥝-button:where([data-kiwi-variant=ghost][aria-pressed=true]){--🌀button-state:var(--🌀button-state--active)}.🥝-button:where([disabled],:disabled,[aria-disabled=true]){--🌀button-state:var(--🌀button-state--disabled);color:var(--kiwi-color-text-neutral-disabled);cursor:not-allowed}}@layer base.🌀{.🥝-button{--🌀button-state:var(--🌀button-state--default);--🌀button-state--default:var(--🌀button-state, );--🌀button-state--hover:var(--🌀button-state, );--🌀button-state--pressed:var(--🌀button-state, );--🌀button-state--active:var(--🌀button-state, );--🌀button-state--disabled:var(--🌀button-state, )}}@layer base{.🥝-checkbox{--🥝checkbox-color-svg:var(--kiwi-color-icon-neutral-emphasis);--🥝checkbox-border-radius:4px;--🥝checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M11.2 5.6 6.8 10l-2-2\"/></svg>");--🥝checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M5 8h6.5\"/></svg>");appearance:none;cursor:pointer;background-color:var(--🌀checkbox-visual-state--default,var(--kiwi-color-bg-neutral-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--kiwi-color-bg-neutral-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--kiwi-color-bg-accent-base))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--kiwi-color-bg-accent-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,var(--kiwi-color-bg-glow-on-surface-disabled));border-radius:var(--🥝checkbox-border-radius);block-size:1rem;inline-size:1rem;color:var(--🌀checkbox-aria-state--unchecked,transparent)var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-color-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-color-svg));box-shadow:var(--kiwi-shadow-button-base-inset),0px 0px 0px 1px var(--🥝checkbox-border-color)inset,var(--kiwi-shadow-button-base-drop);--🥝checkbox-border-color:var(--🌀checkbox-visual-state--default,var(--kiwi-color-border-shadow-base))var(--🌀checkbox-visual-state--hover,color-mix(in oklch,var(--kiwi-color-border-shadow-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-hover-\%)))var(--🌀checkbox-visual-state--checked,var(--kiwi-color-border-shadow-strong))var(--🌀checkbox-visual-state--checked-hover,color-mix(in oklch,var(--kiwi-color-border-shadow-strong)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-pressed-\%)))var(--🌀checkbox-visual-state--disabled,transparent);--🥝checkbox-mask-image:var(--🌀checkbox-aria-state--unchecked,var(--🥝checkbox-unchecked-svg))var(--🌀checkbox-aria-state--checked,var(--🥝checkbox-checkmark-svg))var(--🌀checkbox-aria-state--indeterminate,var(--🥝checkbox-indeterminate-svg));transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,--🥝checkbox-border-color .15s ease-out;position:relative}.🥝-checkbox:before,.🥝-checkbox:after{content:"";position:absolute;inset:0}.🥝-checkbox:before{inset:calc(.5rem - 12px)}.🥝-checkbox:after{-webkit-mask-image:var(--🥝checkbox-mask-image,initial);mask-image:var(--🥝checkbox-mask-image,initial);background-color:currentColor;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (forced-colors:active){.🥝-checkbox:after{background-color:canvastext}}}@layer states{@media (forced-colors:active){.🥝-checkbox{border:1px solid canvastext}}@media (any-hover:hover){.🥝-checkbox:where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--hover)}}.🥝-checkbox:where(:checked,[aria-checked=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked);--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--checked)}@media (any-hover:hover){.🥝-checkbox:where(:checked,[aria-checked=true]):where(:hover){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--checked-hover)}}.🥝-checkbox:where(:indeterminate,[aria-checked=mixed]){--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--indeterminate)}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--disabled);--🥝checkbox-color-svg:var(--kiwi-color-icon-neutral-disabled);cursor:not-allowed;box-shadow:none}@media (forced-colors:active){.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]){border-color:graytext}.🥝-checkbox:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-checkbox{--🌀checkbox-visual-state:var(--🌀checkbox-visual-state--default);--🌀checkbox-visual-state--default:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--checked-hover:var(--🌀checkbox-visual-state, );--🌀checkbox-visual-state--disabled:var(--🌀checkbox-visual-state, );--🌀checkbox-aria-state:var(--🌀checkbox-aria-state--unchecked);--🌀checkbox-aria-state--unchecked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--checked:var(--🌀checkbox-aria-state, );--🌀checkbox-aria-state--indeterminate:var(--🌀checkbox-aria-state, )}}.🥝-divider{background-color:var(--kiwi-color-border-neutral-muted);flex:none;align-self:stretch}@media (forced-colors:active){.🥝-divider{background-color:canvastext}}.🥝-divider:is(hr){border:none;margin:0}.🥝-divider:not([aria-orientation=vertical],[data-kiwi-orientation=vertical]){block-size:1px}.🥝-divider:is([aria-orientation=vertical],[data-kiwi-orientation=vertical]){min-block-size:100%;inline-size:1px}@layer base{.🥝-dropdown-menu{background-color:var(--kiwi-color-bg-surface-tertiary);box-shadow:var(--kiwi-shadow-surface-xl);border-radius:8px;flex-direction:column;gap:.25rem;padding-block:.5rem;display:flex}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-icon-button.🥝-button{aspect-ratio:1;--🥝button-padding-inline:4px}}@layer base{.🥝-kbd{color:var(--kiwi-color-text-neutral-secondary);min-block-size:16px;font-family:inherit;font-weight:500;font-size:var(--kiwi-font-size-12);letter-spacing:0;flex-shrink:0;justify-content:center;align-items:center;line-height:1.3333;display:inline-flex}}@layer modifiers{.🥝-kbd[data-kiwi-variant=solid],.🥝-kbd[data-kiwi-variant=muted]{background-color:var(--kiwi-color-bg-neutral-base);border-radius:4px;padding-inline:4px}.🥝-kbd[data-kiwi-variant=solid]{box-shadow:var(--kiwi-shadow-button-base-inset),0px 0px 0px 1px var(--kiwi-color-border-shadow-base)inset,var(--kiwi-shadow-button-base-drop)}.🥝-kbd[data-kiwi-variant=ghost]{color:var(--kiwi-color-text-neutral-tertiary)}}@layer base{.🥝-label{color:var(--kiwi-color-text-neutral-secondary);cursor:default;font-size:var(--kiwi-font-size-12)}.🥝-label:is(label){cursor:pointer}}@layer states{.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])){color:var(--kiwi-color-text-neutral-disabled)}.🥝-label:has(+:where(:disabled,[disabled],[aria-disabled=true])):is(label){cursor:not-allowed}}.🥝-radio{--🥝checkbox-border-radius:9999px;--🥝checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>");--🥝checkbox-indeterminate-svg:var(--🥝checkbox-unchecked-svg)}@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--kiwi-font-size-12);background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-on-surface-neutral-hover-\%)))var(--🌀list-item-state--pressed,color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-on-surface-neutral-pressed-\%)))var(--🌀list-item-state--active,var(--kiwi-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--kiwi-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-child,color-mix(in oklch,var(--kiwi-color-bg-glow-on-surface-accent-pressed),transparent 50.0%))var(--🌀list-item-state--active-child-hover,color-mix(in oklch,color-mix(in oklch,var(--kiwi-color-bg-glow-on-surface-accent-pressed),transparent 50.0%)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀list-item-state--disabled,transparent);min-block-size:1.5rem;color:var(--🌀list-item-state--default,var(--kiwi-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--kiwi-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--kiwi-color-text-neutral-primary))var(--🌀list-item-state--active,var(--kiwi-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--kiwi-color-text-accent-strong))var(--🌀list-item-state--active-child,var(--kiwi-color-text-neutral-primary))var(--🌀list-item-state--active-child-hover,var(--kiwi-color-text-neutral-primary))var(--🌀list-item-state--disabled,var(--kiwi-color-text-neutral-disabled));--🥝icon-color:var(--🌀list-item-state--default,var(--kiwi-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--kiwi-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--kiwi-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--kiwi-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--kiwi-color-icon-accent-strong))var(--🌀list-item-state--active-child,var(--kiwi-color-icon-neutral-base))var(--🌀list-item-state--active-child-hover,var(--kiwi-color-icon-neutral-base))var(--🌀list-item-state--disabled,var(--kiwi-color-icon-neutral-disabled));align-items:center;gap:.25rem;padding-inline:.75rem;display:flex}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where([disabled],:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--active-child:var(--🌀list-item-state, );--🌀list-item-state--active-child-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}.🥝-list-item-content{flex-grow:1}@layer base{.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true]){--🥝button-padding-inline:12px calc(4px + 16px + 4px);align-items:center;display:inline-grid}.🥝-select-root:where(:has(select.🥝-select),[data-kiwi-has-select=true])>*{grid-area:1/1/-1/-1}}@layer base{.🥝-select.🥝-button:where(select:not([multiple])){appearance:none}}@layer base{.🥝-select-arrow.🥝-disclosure-arrow{pointer-events:none;--🥝icon-color:var(--🌀select-arrow-state--default,var(--kiwi-color-icon-neutral-base))var(--🌀select-arrow-state--hover,var(--kiwi-color-icon-neutral-hover))var(--🌀select-arrow-state--disabled,var(--kiwi-color-icon-neutral-disabled));justify-self:end;margin-inline-end:4px}}@layer states{@media (any-hover:hover){:where(.🥝-select:hover)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--hover)}}:where(.🥝-select:disabled)+.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--disabled)}}@layer base.🌀{.🥝-select-arrow.🥝-disclosure-arrow{--🌀select-arrow-state:var(--🌀select-arrow-state--default);--🌀select-arrow-state--default:var(--🌀select-arrow-state, );--🌀select-arrow-state--hover:var(--🌀select-arrow-state, );--🌀select-arrow-state--disabled:var(--🌀select-arrow-state, )}}@layer base{.🥝-switch{appearance:none;cursor:pointer;background-color:var(--🌀switch-state--default,var(--kiwi-color-bg-surface-primary))var(--🌀switch-state--hover,color-mix(in oklch,var(--kiwi-color-bg-surface-primary)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--kiwi-color-bg-surface-primary)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀switch-state--checked,var(--kiwi-color-bg-accent-base))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--kiwi-color-bg-accent-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--kiwi-color-bg-surface-primary));border:1px solid #0000;border-color:var(--🌀switch-state--default,var(--kiwi-color-border-neutral-base))var(--🌀switch-state--hover,color-mix(in oklch,var(--kiwi-color-border-neutral-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-hover-\%)))var(--🌀switch-state--pressed,color-mix(in oklch,var(--kiwi-color-border-neutral-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-pressed-\%)))var(--🌀switch-state--checked,color-mix(in oklch,var(--kiwi-color-bg-accent-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-strong-hover-\%)))var(--🌀switch-state--checked-hover,color-mix(in oklch,var(--kiwi-color-bg-accent-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-strong-hover-\%)))var(--🌀switch-state--disabled,var(--kiwi-color-border-glow-on-surface-disabled));border-radius:9999px;align-items:center;inline-size:2rem;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-grid;position:relative}.🥝-switch:before,.🥝-switch:after{content:"";grid-area:1/1/-1/-1;display:block}.🥝-switch:before{block-size:24px;inline-size:2rem;margin:-1px;position:absolute}.🥝-switch:after{aspect-ratio:var(--🥝switch-thumb-aspect-ratio);background-color:var(--🥝switch-thumb-color);block-size:1rem;box-shadow:var(--kiwi-shadow-button-base-inset),0px 0px 0px 1px var(--kiwi-color-border-shadow-base)inset,var(--kiwi-shadow-button-base-drop);justify-self:var(--🥝switch-thumb-placement);border-radius:9999px;margin:calc(.125rem - 1px)}@media (prefers-reduced-motion:no-preference){.🥝-switch:after{will-change:aspect-ratio;transition:aspect-ratio .15s ease-out}}@media (forced-colors:active){.🥝-switch:after{background-color:canvastext}}}@layer states{.🥝-switch{--🥝switch-thumb-color:var(--kiwi-color-bg-neutral-inverse);--🥝switch-thumb-placement:start;--🥝switch-thumb-aspect-ratio:1/1}@media (any-hover:hover){.🥝-switch:where(:hover){--🌀switch-state:var(--🌀switch-state--hover)}}.🥝-switch:where(:checked,[aria-checked=true]){--🌀switch-state:var(--🌀switch-state--checked);--🥝switch-thumb-placement:end}@media (any-hover:hover){.🥝-switch:where(:checked,[aria-checked=true]):where(:hover){--🌀switch-state:var(--🌀switch-state--checked-hover)}}.🥝-switch:where(:active){--🌀switch-state:var(--🌀switch-state--pressed);--🥝switch-thumb-aspect-ratio:1.75}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]){--🌀switch-state:var(--🌀switch-state--disabled);--🥝switch-thumb-color:var(--kiwi-color-icon-neutral-disabled);cursor:not-allowed}.🥝-switch:where([disabled],:disabled,[aria-disabled=true]):after{box-shadow:none}}@layer base.🌀{.🥝-switch{--🌀switch-state:var(--🌀switch-state--default);--🌀switch-state--default:var(--🌀switch-state, );--🌀switch-state--hover:var(--🌀switch-state, );--🌀switch-state--pressed:var(--🌀switch-state, );--🌀switch-state--checked:var(--🌀switch-state, );--🌀switch-state--checked-hover:var(--🌀switch-state, );--🌀switch-state--disabled:var(--🌀switch-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:6px;gap:8px;display:flex}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}}@layer base{.🥝-tab{font-size:var(--kiwi-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-bg);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;block-size:1.25rem;padding-inline:4px;transition:background-color .15s ease-out,color .15s ease-out;position:relative}@media (forced-colors:active){.🥝-tab{color:buttontext}}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-active-stripe-color:var(--kiwi-color-border-neutral-inverse);--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-on-surface-neutral-hover-\%)))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--kiwi-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--kiwi-color-text-neutral-primary))var(--🌀tab-state--selected,var(--kiwi-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--kiwi-color-text-neutral-disabled));-webkit-tap-highlight-color:color-mix(in oklch,transparent 100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-on-surface-neutral-hover-\%))}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-active-stripe-color:var(--kiwi-color-border-accent-strong);--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--kiwi-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--kiwi-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--kiwi-color-text-accent-strong))var(--🌀tab-state--selected,var(--kiwi-color-text-accent-strong))var(--🌀tab-state--disabled,var(--kiwi-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--kiwi-color-bg-glow-on-surface-accent-hover)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected)}.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:2px;inset-inline:4px;inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}@media (prefers-reduced-motion:no-preference){.🥝-tab:where([aria-selected=true]):after{view-transition-name:var(--🥝tab-active-stripe-view-transition-name)}}@media (forced-colors:active){.🥝-tab:where([aria-selected=true]):after{background-color:selecteditem}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--kiwi-color-border-neutral-disabled);cursor:not-allowed}@media (forced-colors:active){.🥝-tab:where([disabled],:disabled,[aria-disabled=true]){color:graytext}.🥝-tab:where([disabled],:disabled,[aria-disabled=true]):after{background-color:graytext}}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@layer modifiers{.🥝-text:where([data-kiwi-text-variant=display-lg]){font-size:var(--kiwi-font-size-48);letter-spacing:0;line-height:1.1667}.🥝-text:where([data-kiwi-text-variant=display-md]){font-size:var(--kiwi-font-size-40);letter-spacing:0;line-height:1.2}.🥝-text:where([data-kiwi-text-variant=display-sm]){font-size:var(--kiwi-font-size-32);letter-spacing:0;line-height:1.25}.🥝-text:where([data-kiwi-text-variant=headline-lg]){font-size:var(--kiwi-font-size-28);letter-spacing:0;line-height:1.2857}.🥝-text:where([data-kiwi-text-variant=headline-md]){font-size:var(--kiwi-font-size-24);letter-spacing:0;line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=headline-sm]){font-size:var(--kiwi-font-size-20);letter-spacing:0;line-height:1.4}.🥝-text:where([data-kiwi-text-variant=body-lg]){font-size:var(--kiwi-font-size-16);letter-spacing:0;line-height:1.5}.🥝-text:where([data-kiwi-text-variant=body-md]){font-size:var(--kiwi-font-size-14);letter-spacing:0;line-height:1.4286}.🥝-text:where([data-kiwi-text-variant=body-sm]){font-size:var(--kiwi-font-size-12);letter-spacing:0;line-height:1.3333}.🥝-text:where([data-kiwi-text-variant=caption-lg]){font-size:var(--kiwi-font-size-11);letter-spacing:0;line-height:1.4545}.🥝-text:where([data-kiwi-text-variant=caption-md]){font-size:var(--kiwi-font-size-10);letter-spacing:0;line-height:1.2}.🥝-text:where([data-kiwi-text-variant=caption-sm]){font-size:var(--kiwi-font-size-8);letter-spacing:0;line-height:1.5}.🥝-text:where([data-kiwi-text-variant=mono-sm]){font-family:var(--kiwi-font-family-mono);font-size:var(--kiwi-font-size-12);letter-spacing:0;line-height:1.3333}}@layer base{.🥝-text-box{cursor:var(--🥝text-box-cursor);font-size:var(--kiwi-font-size-12);background-color:var(--🥝text-box-background-color);min-block-size:1.5rem;min-inline-size:0;box-shadow:var(--kiwi-shadow-input-base);color:var(--kiwi-color-text-neutral-primary);--🥝text-box-cursor:text;--🥝text-box-background-color:var(--🌀text-box-state--default,var(--kiwi-color-bg-surface-primary))var(--🌀text-box-state--hover,color-mix(in oklch,var(--kiwi-color-bg-surface-primary)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-bg-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--kiwi-color-bg-surface-base));--🥝text-box-border-color:var(--🌀text-box-state--default,var(--kiwi-color-border-neutral-base))var(--🌀text-box-state--hover,color-mix(in oklch,var(--kiwi-color-border-neutral-base)100.0%,var(--kiwi-color-glow-hue)var(--kiwi-color-border-glow-base-hover-\%)))var(--🌀text-box-state--disabled,var(--kiwi-color-border-glow-on-surface-disabled));border-radius:4px;padding-inline:8px;transition:background-color .15s ease-out,border-color .15s ease-out}.🥝-text-box:where(:not(input,textarea)){align-items:center;gap:4px;display:inline-flex;position:relative}.🥝-text-box:where(:not(input,textarea)):before{content:"";border-radius:inherit;pointer-events:none;border:1px solid var(--🥝text-box-border-color);transition:border-color .15s ease-out;position:absolute;inset:0}.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea){appearance:none;border:1px solid var(--🥝text-box-border-color);min-inline-size:0;cursor:var(--🥝text-box-cursor);padding-block:max(0px,.75rem - 1px - .5lh);line-height:1.3}:is(.🥝-text-box:where(input,textarea),.🥝-text-box :where(input,textarea))::placeholder{color:var(--kiwi-color-text-neutral-secondary);opacity:1}.🥝-text-box:where(textarea),.🥝-text-box :where(textarea){resize:vertical;resize:block}.🥝-text-box :where(input,textarea){background-color:var(--🥝text-box-background-color);outline:unset;border:none;flex:999;align-self:stretch;transition:background-color .15s ease-out}}@layer states{@media (any-hover:hover){.🥝-text-box:where(:hover){--🌀text-box-state:var(--🌀text-box-state--hover)}}.🥝-text-box:where(:has(:is(input,textarea):focus-visible),:is(input,textarea):focus-visible){outline:2px solid var(--kiwi-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--kiwi-color-border-accent-strong);--🥝icon-color:var(--kiwi-color-icon-accent-strong)}@supports not selector(:has(+ *)){.🥝-text-box:where(:not(input,textarea):focus-within){outline:2px solid var(--kiwi-color-border-accent-base);outline-offset:1px;--🥝text-box-border-color:var(--kiwi-color-border-accent-strong);--🥝icon-color:var(--kiwi-color-icon-accent-strong)}}.🥝-text-box:where([disabled],:disabled,[aria-disabled=true],[data-kiwi-disabled=true],:has(:is(input,textarea):disabled)){--🌀text-box-state:var(--🌀text-box-state--disabled);box-shadow:none;color:var(--kiwi-color-text-neutral-disabled);--🥝text-box-cursor:not-allowed}}@layer base.🌀{.🥝-text-box{--🌀text-box-state:var(--🌀text-box-state--default);--🌀text-box-state--default:var(--🌀text-box-state, );--🌀text-box-state--hover:var(--🌀text-box-state, );--🌀text-box-state--disabled:var(--🌀text-box-state, )}}@layer base{.🥝-text-box-decoration{flex-shrink:0}}@layer base{.🥝-tooltip{background-color:var(--kiwi-color-bg-surface-emphasis);box-shadow:var(--kiwi-shadow-tooltip-base);color:var(--kiwi-color-text-neutral-emphasis);border:1px solid var(--kiwi-color-border-surface-primary);min-block-size:1rem;max-inline-size:12.25rem;font-size:var(--kiwi-font-size-12);letter-spacing:0;border-radius:.25rem;justify-content:center;gap:.25rem;padding-block:calc(.25rem - 1px);padding-inline:calc(.625rem - 1px);line-height:1.3333;display:flex}}@layer base{.🥝-tree-item.🥝-list-item{isolation:isolate;padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:.25rem;position:relative}}@layer states{.🥝-tree-item.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-tree-item.🥝-list-item:where([data-kiwi-parent-selected=true][data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active-child)}.🥝-tree-item.🥝-list-item:where([data-kiwi-expanded=false]){--🥝tree-chevron-rotate:-.25turn}.🥝-tree-item.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}@media (any-hover:hover){.🥝-tree-item.🥝-list-item:where(:hover[data-kiwi-parent-selected=true][data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active-child-hover)}}}@layer base{.🥝-tree-item-content.🥝-list-item-content{min-inline-size:0;display:inline-flex}.🥝-tree-item-content.🥝-list-item-content :where(button){cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border:unset;background-color:unset;overflow:hidden}.🥝-tree-item-content.🥝-list-item-content :where(button):before{content:"";position:absolute;inset:0}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-chevron{rotate:var(--🥝tree-chevron-rotate)}@media (prefers-reduced-motion:no-preference){.🥝-tree-chevron{transition:rotate .15s ease-in-out}}}@layer base{.🥝-field{grid-template-columns:auto auto;justify-content:start;align-items:center;gap:.5rem;display:grid}.🥝-field:has(.🥝-text-box){grid-template-columns:auto}}@layer modifiers{.🥝-field:where([data-kiwi-layout=inline]){grid-template-columns:auto auto}}}`;
+
+// src/bricks/styles.css.ts
+var styles_css_default = styles_default;
+export {
+  styles_css_default as default
+};

package/dist/bricks/~hooks.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * ```tsx
+ * const [state, setState] = useControlledState(
+ *   props.defaultValue,
+ *   props.value,
+ *   props.onChange
+ * );
+ * ```
+ *
+ * @private
+ */
+export declare function useControlledState<T>(initialValue: T, controlledState: T | undefined, setControlledState?: React.Dispatch<React.SetStateAction<T>>): readonly [T, React.Dispatch<React.SetStateAction<T>>];
+/**
+ * Hook that keeps track of the latest value in a ref.
+ * This is useful for referencing unmemoized values inside Effects.
+ *
+ * ```tsx
+ * const valueRef = useLatestRef(props.value);
+ * ```
+ *
+ * @private
+ */
+export declare function useLatestRef<T>(value: T): React.RefObject<T>;
+/**
+ * Returns a memoized callback ref that merges the provided refs.
+ *
+ * ```tsx
+ * const mergedRef = useMergedRefs(ref1, ref2);
+ * ```
+ *
+ * This is useful when you need to internally use a ref in a component
+ * and also need to forward its ref.
+ *
+ * ```tsx
+ * const internalRef = useRef(null);
+ * return <div ref={useMergedRefs(internalRef, forwardedRef)} />;
+ * ```
+ *
+ * @private
+ */
+export declare function useMergedRefs<T>(...refs: ReadonlyArray<React.Ref<T> | React.LegacyRef<T> | undefined | null>): (instance: T | null) => void;

package/dist/bricks/~hooks.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+function useControlledState(initialValue, controlledState, setControlledState) {
+  const [uncontrolledState, setUncontrolledState] = React.useState(initialValue);
+  const state = React.useMemo(
+    () => controlledState !== void 0 ? controlledState : uncontrolledState,
+    [controlledState, uncontrolledState]
+  );
+  const setControlledStateRef = useLatestRef(setControlledState);
+  const setState = React.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledStateRef.current?.(value);
+    },
+    [setControlledStateRef]
+  );
+  return [state, setState];
+}
+function useLatestRef(value) {
+  const valueRef = React.useRef(value);
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  return valueRef;
+}
+function useMergedRefs(...refs) {
+  return React.useCallback(
+    (instance) => {
+      for (const ref of refs) {
+        if (typeof ref === "function") {
+          ref(instance);
+        } else if (ref) {
+          ref.current = instance;
+        }
+      }
+    },
+    [...refs]
+  );
+}
+export {
+  useControlledState,
+  useLatestRef,
+  useMergedRefs
+};

package/dist/bricks/~utils.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type * as Ariakit from "@ariakit/react";
+export declare const isBrowser: boolean;
+export declare const supportsPopover: boolean;
+/**
+ * Wrapper over `React.forwardRef` which allows refs to be loosely typed as `HTMLElement`.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * const Button = forwardRef<"button", ButtonProps>((props, forwardedRef) => {});
+ *
+ * const ref = React.useRef<HTMLElement>(null); // or React.useRef<HTMLButtonElement>(null)
+ * <Button ref={ref} />
+ * ```
+ *
+ * **Note**: The first type parameter is the default element type, which is slightly different
+ * from what `React.forwardRef` expects. e.g. This utility expects `"div"` instead of `ComponentRef<"div">`.
+ *
+ * @private
+ */
+export declare const forwardRef: ForwardRefHelper;
+type ForwardRefHelper = <DefaultElement extends React.ElementType, Props extends {}>(render: React.ForwardRefRenderFunction<React.ComponentRef<DefaultElement>, React.PropsWithoutRef<Props>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<React.ComponentRef<DefaultElement> | HTMLElement>>;
+/** Element type props merged with custom props. */
+type MergeProps<ElementType extends React.ElementType, CustomProps extends Record<string, unknown>> = CustomProps & Omit<React.ComponentPropsWithoutRef<ElementType>, keyof CustomProps>;
+/** Base component props with custom props. */
+export type BaseProps<ElementType extends React.ElementType = "div"> = MergeProps<ElementType, Pick<Ariakit.RoleProps, "render">>;
+/** Focusable component props with custom props. */
+export type FocusableProps<ElementType extends React.ElementType = "div"> = BaseProps<ElementType> & Pick<Ariakit.FocusableProps, "disabled" | "accessibleWhenDisabled" | "autoFocus">;
+export {};

package/dist/bricks/~utils.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+const isBrowser = typeof document !== "undefined";
+const supportsPopover = isBrowser && "popover" in HTMLElement.prototype;
+const forwardRef = React.forwardRef;
+export {
+  forwardRef,
+  isBrowser,
+  supportsPopover
+};

package/dist/foundations/styles.css.d.ts

@@ -0,0 +1,2 @@
+import rawStyles from "./styles.css?inline";
+export default rawStyles;