@enonic/ui 0.10.0 → 0.11.0

package/dist/enonic-ui.es.js

@@ -1,6 +1,6 @@
 import { options, Fragment } from "preact";
 import * as React from "react";
-import { forwardRef, createContext, useId, useContext, createElement, useState, isValidElement, Children, useRef, useEffect, useCallback, createPortal } from "react";
+import { forwardRef, createContext, useId, useContext, createElement, useState, isValidElement, Children, useRef, useEffect, useCallback, createPortal, useMemo } from "react";
 import "preact/compat";
 import { useState as useState$1 } from "preact/hooks";
 var f = 0;
@@ -3028,18 +3028,18 @@ const cva = (base, config) => (props) => {
 const buttonVariants = cva(
   [
     "inline-flex items-center justify-center",
-    "text-main dark:text-main font-medium",
+    "text-main font-medium",
     "box-border rounded-sm transition-highlight",
     "focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-0",
-    "disabled:pointer-events-none disabled:opacity-30",
-    "cursor-pointer"
+    "disabled:select-none disabled:pointer-events-none disabled:opacity-30",
+    "overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer"
   ],
   {
     variants: {
       variant: {
         text: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-rev dark:active:text-main",
         filled: "bg-btn-secondary hover:bg-btn-secondary-hover active:bg-btn-active active:text-rev dark:active:text-main",
-        solid: "bg-btn-tertiary text-rev dark:text-main hover:bg-btn-tertiary-hover active:bg-btn-active dark:active:text-main",
+        solid: "bg-btn-tertiary text-alt hover:bg-btn-tertiary-hover active:bg-btn-active dark:active:text-main",
         outline: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-rev dark:active:text-main border border-bdr-strong"
       },
       size: {
@@ -3065,7 +3065,19 @@ const getIconSize = (size) => {
   }
 };
 const Button = forwardRef(
-  ({ className, variant = "text", size = "md", iconSize, startIcon, label, endIcon, title, children, ...props }, ref) => {
+  ({
+    className,
+    variant = "text",
+    size = "md",
+    iconSize,
+    iconStrokeWidth = 1.5,
+    startIcon,
+    label,
+    endIcon,
+    title,
+    children,
+    ...props
+  }, ref) => {
     const StartIcon = startIcon;
     const EndIcon = endIcon;
     const iconSizeValue = iconSize ?? getIconSize(size ?? "md");
@@ -3080,10 +3092,10 @@ const Button = forwardRef(
         "aria-disabled": props.disabled,
         ...props,
         children: [
-          StartIcon && /* @__PURE__ */ u(StartIcon, { size: iconSizeValue, strokeWidth: 1.5 }),
+          StartIcon && /* @__PURE__ */ u(StartIcon, { size: iconSizeValue, strokeWidth: iconStrokeWidth }),
           children,
           label,
-          EndIcon && /* @__PURE__ */ u(EndIcon, { size: iconSizeValue, strokeWidth: 1.5 })
+          EndIcon && /* @__PURE__ */ u(EndIcon, { size: iconSizeValue, strokeWidth: iconStrokeWidth })
         ]
       }
     );
@@ -3105,7 +3117,7 @@ const usePrefixedId = (providedId) => {
   return id;
 };
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3130,7 +3142,7 @@ const hasA11yProp = (props) => {
   }
 };
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3147,7 +3159,7 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3182,7 +3194,7 @@ const Icon = forwardRef(
   )
 );
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3204,7 +3216,7 @@ const createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3215,7 +3227,7 @@ const __iconNode$7 = [
 ];
 const ArrowRight = createLucideIcon("arrow-right", __iconNode$7);
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3223,7 +3235,7 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$7);
 const __iconNode$6 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
 const Check = createLucideIcon("check", __iconNode$6);
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3235,7 +3247,7 @@ const __iconNode$5 = [
 ];
 const ExternalLink = createLucideIcon("external-link", __iconNode$5);
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3247,7 +3259,7 @@ const __iconNode$4 = [
 ];
 const LockKeyhole = createLucideIcon("lock-keyhole", __iconNode$4);
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3255,7 +3267,7 @@ const LockKeyhole = createLucideIcon("lock-keyhole", __iconNode$4);
 const __iconNode$3 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
 const Minus = createLucideIcon("minus", __iconNode$3);
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3273,7 +3285,7 @@ const __iconNode$2 = [
 ];
 const OctagonAlert = createLucideIcon("octagon-alert", __iconNode$2);
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3284,7 +3296,7 @@ const __iconNode$1 = [
 ];
 const Search = createLucideIcon("search", __iconNode$1);
 /**
- * @license lucide-react v0.544.0 - ISC
+ * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -3306,7 +3318,10 @@ const checkboxBoxVariants = cva(
   {
     variants: {
       editable: {
-        true: "peer-focus-visible:focus-ring peer-hover:focus-ring",
+        true: [
+          "peer-focus-visible:outline-none peer-focus-visible:ring-3 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-0",
+          "peer-hover:outline-none peer-hover:ring-3 peer-hover:ring-ring/50 peer-hover:ring-offset-0"
+        ],
         false: "opacity-30"
       },
       state: {
@@ -3477,7 +3492,8 @@ const inputContainerVariants = cva(
   [
     "relative flex rounded-sm overflow-hidden",
     "h-12 border focus-within:border-bdr-solid",
-    "focus-within:focus-ring transition-highlight"
+    "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+    "transition-highlight"
   ],
   {
     variants: {
@@ -3486,7 +3502,7 @@ const inputContainerVariants = cva(
         error: "border-error focus-within:border-error focus-within:ring-error/50"
       },
       disabled: {
-        true: "pointer-events-none"
+        true: "select-none"
       }
     },
     defaultVariants: {
@@ -3539,7 +3555,7 @@ const Input = forwardRef(
               "flex-1 w-full px-4.5 text-base",
               "text-main bg-surface-neutral placeholder:text-subtle",
               "border-0 focus:outline-none",
-              "disabled:pointer-events-none read-only:bg-surface-primary",
+              "disabled:select-none read-only:bg-surface-primary",
               startAddon && "rounded-l-none",
               endAddon && "rounded-r-none"
             ),
@@ -3610,11 +3626,7 @@ function isOfType(node, Comp) {
 function findComponentByType(children, Comp) {
   return Children.toArray(children).find((child) => isOfType(child, Comp));
 }
-const ListItemLeft = ({
-  children,
-  className,
-  ...props
-}) => /* @__PURE__ */ u("div", { className: cn("flex items-center gap-2.5 flex-shrink-0", className), ...props, children });
+const ListItemLeft = ({ children, className, ...props }) => /* @__PURE__ */ u("div", { className: cn("flex items-center gap-2.5 flex-shrink-0", className), ...props, children });
 const ListItemContent = ({
   className,
   children,
@@ -3645,12 +3657,7 @@ const ListItemRight = ({
   ...props
 }) => /* @__PURE__ */ u("div", { className: cn("flex items-center gap-5 flex-shrink-0", className), ...props, children });
 ListItemRight.displayName = "ListItem.Right";
-const ListItemRoot = ({
-  children,
-  className,
-  selected,
-  ...props
-}) => {
+const ListItemRoot = ({ children, className, selected, ...props }) => {
   const left = findComponentByType(children, ListItemLeft);
   const content = findComponentByType(children, ListItemContent) ?? findComponentByType(children, ListItemDefaultContent);
   const right = findComponentByType(children, ListItemRight);
@@ -3942,7 +3949,7 @@ function TooltipContent({
     {
       ref: tooltipRef,
       role: "tooltip",
-      className: cn("fixed z-50 pointer-events-none", !position.transformOrigin && "opacity-0"),
+      className: cn("fixed z-50 pointer-events-none select-none", !position.transformOrigin && "opacity-0"),
       style: {
         top: `${position.top}px`,
         left: `${position.left}px`,
@@ -4047,6 +4054,18 @@ function Tooltip({
     )
   ] });
 }
+const DialogContext = createContext(void 0);
+const DialogProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(DialogContext.Provider, { value, children });
+};
+DialogProvider.displayName = "DialogProvider";
+const useDialog = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("useDialog must be used within a DialogProvider");
+  }
+  return context;
+};
 function setRef(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -4104,8 +4123,9 @@ const SearchInput = forwardRef(
         className: cn(
           "relative flex rounded-sm overflow-hidden",
           "h-12 border border-bdr-subtle focus-within:border-bdr-strong",
-          "focus-within:focus-ring transition-highlight",
-          disabled && "pointer-events-none opacity-30",
+          "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+          "transition-highlight",
+          disabled && "pointer-events-none select-none opacity-30",
           className
         ),
         children: [
@@ -4127,7 +4147,6 @@ const SearchInput = forwardRef(
                 "text-main bg-surface-neutral",
                 "placeholder:text-subtle",
                 "focus:outline-none",
-                "disabled:pointer-events-none",
                 "read-only:bg-surface-primary"
               ),
               value: inputValue,
@@ -4157,18 +4176,190 @@ const SearchInput = forwardRef(
   }
 );
 SearchInput.displayName = "SearchInput";
+function ListboxImpl({
+  className,
+  selection: controlledSelection,
+  selectionMode = "single",
+  disabled = false,
+  defaultSelection = /* @__PURE__ */ new Set(),
+  setSelection,
+  active: controlledActive,
+  defaultActive,
+  onActiveChange,
+  items,
+  renderItem,
+  getValue,
+  ...props
+}, ref) {
+  const listboxId = usePrefixedId();
+  const innerRef = useRef(null);
+  const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelection);
+  const isSelectionControlled = controlledSelection !== void 0;
+  const selection = isSelectionControlled ? controlledSelection : uncontrolledSelection;
+  const [uncontrolledActive, setUncontrolledActive] = useState(
+    defaultActive ?? (items[0] ? getValue(items[0]) : void 0)
+  );
+  const isActiveControlled = controlledActive !== void 0;
+  const active = isActiveControlled ? controlledActive : uncontrolledActive;
+  const valueToIndexMap = useMemo(() => {
+    return new Map(items.map((item, idx) => [getValue(item), idx]));
+  }, [items, getValue]);
+  const updateActive = useCallback(
+    (newActive) => {
+      if (!isActiveControlled) {
+        setUncontrolledActive(newActive);
+      }
+      onActiveChange?.(newActive);
+    },
+    [isActiveControlled, onActiveChange]
+  );
+  useEffect(() => {
+    if (!active || !items.some((item) => getValue(item) === active)) {
+      updateActive(items[0] ? getValue(items[0]) : void 0);
+    }
+  }, [items, getValue, active, updateActive]);
+  useEffect(() => {
+    if (!active || !innerRef.current) return;
+    const el = innerRef.current.querySelector(`#${listboxId}-option-${active}`);
+    el?.scrollIntoView({ block: "nearest", behavior: "auto" });
+  }, [active, listboxId]);
+  const handleToggleValue = (value) => {
+    const isAlreadySelected = selection.has(value);
+    let newSelection;
+    if (selectionMode === "single") {
+      newSelection = isAlreadySelected ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([value]);
+    } else {
+      newSelection = new Set(selection);
+      if (isAlreadySelected) {
+        newSelection.delete(value);
+      } else {
+        newSelection.add(value);
+      }
+    }
+    if (!isSelectionControlled) {
+      setUncontrolledSelection(newSelection);
+    }
+    setSelection?.(newSelection);
+    updateActive(value);
+  };
+  const handleClickItem = ({ target }) => {
+    const li = target instanceof Element ? target.closest("li") : null;
+    const value = li?.getAttribute("data-value");
+    if (value) {
+      handleToggleValue(value);
+    }
+  };
+  const moveActive = (delta) => {
+    const activeIndex = active ? valueToIndexMap.get(active) ?? 0 : 0;
+    const newIndex = Math.max(0, Math.min(items.length - 1, activeIndex + delta));
+    updateActive(getValue(items[newIndex]));
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) {
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveActive(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveActive(-1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      const firstItem = items[0];
+      updateActive(firstItem && getValue(firstItem));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      const lastItem = items.at(-1);
+      updateActive(lastItem && getValue(lastItem));
+    } else if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      if (active) {
+        handleToggleValue(active);
+      }
+    }
+  };
+  return /* @__PURE__ */ u(
+    "ul",
+    {
+      id: listboxId,
+      ref: useComposedRefs(ref, innerRef),
+      tabIndex: disabled ? -1 : 0,
+      className: cn(
+        "flex flex-col items-start grow-1 shrink-0 basis-0",
+        "max-h-100 px-0 overflow-y-auto",
+        "focus-within:border-bdr-solid focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+        "focus-within:[&>li[data-active=true]]:bg-surface-primary-hover",
+        "focus-within:[&>li[data-active=true][aria-selected=true]]:bg-surface-primary-selected-hover",
+        "transition-highlight",
+        disabled && "pointer-events-none select-none opacity-30",
+        className
+      ),
+      role: "listbox",
+      "aria-activedescendant": active ? `${listboxId}-option-${active}` : void 0,
+      "aria-disabled": disabled,
+      "aria-multiselectable": selectionMode === "multiple",
+      "aria-label": props.label ?? void 0,
+      "aria-orientation": "vertical",
+      onKeyDown: handleKeyDown,
+      onClick: handleClickItem,
+      children: items.map((item) => {
+        const value = getValue(item);
+        const selected = selection.has(value);
+        const isActive = value === active;
+        return /* @__PURE__ */ u(
+          "li",
+          {
+            id: `${listboxId}-option-${value}`,
+            "data-value": value,
+            "data-active": isActive ? "true" : "false",
+            tabIndex: -1,
+            className: cn(
+              "flex items-center w-full px-4.5 py-1 gap-x-2.5",
+              !disabled && "cursor-pointer",
+              selected ? "bg-surface-primary-selected text-alt hover:bg-surface-primary-selected-hover" : "hover:bg-surface-primary-hover"
+            ),
+            role: "option",
+            "aria-selected": selected,
+            children: renderItem(item, selected, isActive)
+          },
+          value
+        );
+      })
+    }
+  );
+}
+const Listbox = forwardRef(ListboxImpl);
+Listbox.displayName = "Listbox";
+const useScrollLock = (lock, element) => {
+  useEffect(() => {
+    if (!lock) {
+      return;
+    }
+    const target = element ?? document.body;
+    const originalOverflow = target.style.overflow;
+    target.style.overflow = "hidden";
+    return () => {
+      target.style.overflow = originalOverflow;
+    };
+  }, [lock, element]);
+};
 export {
   Button,
   Checkbox,
+  DialogProvider,
   IconButton,
   IdProvider,
   Input,
   Link,
   ListItem,
+  Listbox,
   SearchInput,
   SelectableListItem,
   Tooltip,
   cn,
   unwrap,
-  usePrefixedId
+  useDialog,
+  usePrefixedId,
+  useScrollLock
 };

package/dist/styles/preset.css

@@ -1 +1 @@
-/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer base{:root{--color-black:#000;--color-grey-950:#242829;--color-grey-900:#3d4142;--color-grey-800:#5b5f60;--color-grey-700:#797d7e;--color-grey-600:#8d9192;--color-grey-500:#b2b2b2;--color-grey-400:#b5b9ba;--color-grey-300:#d3d7d8;--color-grey-200:#dde1e2;--color-grey-100:#e7ebeb;--color-grey-50:#f1f5f6;--color-white:#fff;--color-fbk-info:#0270a0;--color-fbk-info-subtle:#208ebe;--color-fbk-info-surface:#d7f3ff;--color-fbk-warn:#cb9126;--color-fbk-warn-subtle:#e9af44;--color-fbk-warn-surface:#f7e5c4;--color-fbk-success:#499349;--color-fbk-success-subtle:#67b167;--color-fbk-success-surface:#cee2ce;--color-fbk-danger:#d33030;--color-fbk-danger-subtle:#f56262;--color-fbk-danger-surface:#f6d7d7;--color-purple:purple;--color-purple-subtle:#e46ee4;--color-juke:#9747ff;--color-main:var(--color-black);--color-main-hover:var(--color-grey-800);--color-subtle:var(--color-grey-800);--color-alt:var(--color-white);--color-rev:var(--color-white);--color-alt-rev:var(--color-black);--color-info:var(--color-fbk-info);--color-warn:var(--color-fbk-warn);--color-success:var(--color-fbk-success);--color-error:var(--color-fbk-danger);--color-surface-neutral:var(--color-white);--color-surface-primary:var(--color-grey-50);--color-surface-primary-hover:var(--color-grey-50);--color-surface-primary-selected:var(--color-grey-800);--color-bdr-subtle:var(--color-grey-500);--color-bdr-soft:var(--color-grey-200);--color-bdr-strong:var(--color-black);--color-ring:var(--color-grey-500);--color-btn-primary:var(--color-white);--color-btn-primary-hover:var(--color-grey-50);--color-btn-secondary:var(--color-grey-50);--color-btn-secondary-hover:var(--color-grey-100);--color-btn-tertiary:var(--color-black);--color-btn-tertiary-hover:var(--color-grey-900);--color-btn-active:var(--color-grey-800);--color-input-disabled:var(--color-grey-100);--color-link-visited:var(--color-purple);--color-tooltip:var(--color-black);--color-tooltip-foreground:var(--color-white);--color-docs:var(--color-juke);color:var(--color-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}.dark{--color-main:var(--color-white);--color-main-hover:var(--color-grey-200);--color-subtle:var(--color-grey-400);--color-alt:var(--color-white);--color-rev:var(--color-black);--color-alt-rev:var(--color-black);--color-info:var(--color-fbk-info-subtle);--color-warn:var(--color-fbk-warn-subtle);--color-success:var(--color-fbk-success-subtle);--color-error:var(--color-fbk-danger-subtle);--color-surface-neutral:var(--color-grey-950);--color-surface-primary:var(--color-grey-900);--color-surface-primary-hover:var(--color-grey-900);--color-surface-primary-selected:var(--color-grey-800);--color-bdr-subtle:var(--color-grey-500);--color-bdr-soft:var(--color-grey-800);--color-bdr-strong:var(--color-white);--color-ring:var(--color-grey-500);--color-btn-primary:var(--color-grey-950);--color-btn-primary-hover:var(--color-grey-900);--color-btn-secondary:var(--color-grey-900);--color-btn-secondary-hover:var(--color-grey-800);--color-btn-tertiary:var(--color-grey-600);--color-btn-tertiary-hover:var(--color-grey-700);--color-btn-active:var(--color-grey-800);--color-input-disabled:var(--color-grey-800);--color-link-visited:var(--color-purple-subtle);--color-tooltip:var(--color-grey-600);--color-tooltip-foreground:var(--color-white);--color-docs:var(--color-juke)}}:root,:host{--color-main:var(--color-main);--color-main-hover:var(--color-main-hover);--color-subtle:var(--color-subtle);--color-alt:var(--color-alt);--color-rev:var(--color-rev);--color-alt-rev:var(--color-alt-rev);--color-surface-neutral:var(--color-surface-neutral);--color-surface-primary:var(--color-surface-primary);--color-surface-primary-hover:var(--color-surface-primary-hover);--color-surface-primary-selected:var(--color-surface-primary-selected);--color-bdr-subtle:var(--color-bdr-subtle);--color-bdr-soft:var(--color-bdr-soft);--color-bdr-strong:var(--color-bdr-strong);--color-ring:var(--color-ring);--color-btn-primary:var(--color-btn-primary);--color-btn-primary-hover:var(--color-btn-primary-hover);--color-btn-secondary:var(--color-btn-secondary);--color-btn-secondary-hover:var(--color-btn-secondary-hover);--color-btn-tertiary:var(--color-btn-tertiary);--color-btn-tertiary-hover:var(--color-btn-tertiary-hover);--color-btn-active:var(--color-btn-active);--color-input-disabled:var(--color-input-disabled);--color-link-visited:var(--color-link-visited);--color-tooltip:var(--color-tooltip);--color-tooltip-foreground:var(--color-tooltip-foreground);--color-docs:var(--color-docs)}
+@layer base{:root{--color-black: #000000;--color-grey-950: #242829;--color-grey-900: #3d4142;--color-grey-800: #5b5f60;--color-grey-700: #797d7e;--color-grey-600: #8d9192;--color-grey-500: #b2b2b2;--color-grey-400: #b5b9ba;--color-grey-300: #d3d7d8;--color-grey-200: #dde1e2;--color-grey-100: #e7ebeb;--color-grey-50: #f1f5f6;--color-white: #ffffff;--color-fbk-info: #0270a0;--color-fbk-info-subtle: #208ebe;--color-fbk-info-surface: #d7f3ff;--color-fbk-warn: #cb9126;--color-fbk-warn-subtle: #e9af44;--color-fbk-warn-surface: #f7e5c4;--color-fbk-success: #499349;--color-fbk-success-subtle: #67b167;--color-fbk-success-surface: #cee2ce;--color-fbk-danger: #d33030;--color-fbk-danger-subtle: #f56262;--color-fbk-danger-surface: #f6d7d7;--color-purple: #800080;--color-purple-subtle: #e46ee4;--color-juke: #9747ff}}@layer base{:root{--color-main: var(--color-black);--color-main-hover: var(--color-grey-800);--color-subtle: var(--color-grey-800);--color-alt: var(--color-white);--color-rev: var(--color-white);--color-alt-rev: var(--color-black);--color-info: var(--color-fbk-info);--color-warn: var(--color-fbk-warn);--color-success: var(--color-fbk-success);--color-error: var(--color-fbk-danger);--color-surface-neutral: var(--color-white);--color-surface-primary: var(--color-grey-50);--color-surface-primary-hover: var(--color-grey-50);--color-surface-primary-selected: var(--color-grey-800);--color-surface-primary-selected-hover: var(--color-grey-900);--color-bdr-subtle: var(--color-grey-500);--color-bdr-soft: var(--color-grey-200);--color-bdr-strong: var(--color-black);--color-ring: var(--color-grey-500);--color-btn-primary: var(--color-white);--color-btn-primary-hover: var(--color-grey-50);--color-btn-secondary: var(--color-grey-50);--color-btn-secondary-hover: var(--color-grey-100);--color-btn-tertiary: var(--color-black);--color-btn-tertiary-hover: var(--color-grey-900);--color-btn-active: var(--color-grey-800);--color-input-disabled: var(--color-grey-100);--color-link-visited: var(--color-purple);--color-tooltip: var(--color-black);--color-tooltip-foreground: var(--color-white);--color-overlay: oklch(0 0 0 / .4);--color-docs: var(--color-juke)}}@layer base{.dark{--color-main: var(--color-white);--color-main-hover: var(--color-grey-200);--color-subtle: var(--color-grey-400);--color-alt: var(--color-white);--color-rev: var(--color-black);--color-alt-rev: var(--color-black);--color-info: var(--color-fbk-info-subtle);--color-warn: var(--color-fbk-warn-subtle);--color-success: var(--color-fbk-success-subtle);--color-error: var(--color-fbk-danger-subtle);--color-surface-neutral: var(--color-grey-950);--color-surface-primary: var(--color-grey-900);--color-surface-primary-hover: var(--color-grey-900);--color-surface-primary-selected: var(--color-grey-800);--color-surface-primary-selected-hover: var(--color-grey-900);--color-bdr-subtle: var(--color-grey-500);--color-bdr-soft: var(--color-grey-800);--color-bdr-strong: var(--color-white);--color-ring: var(--color-grey-500);--color-btn-primary: var(--color-grey-950);--color-btn-primary-hover: var(--color-grey-900);--color-btn-secondary: var(--color-grey-900);--color-btn-secondary-hover: var(--color-grey-800);--color-btn-tertiary: var(--color-grey-600);--color-btn-tertiary-hover: var(--color-grey-700);--color-btn-active: var(--color-grey-800);--color-input-disabled: var(--color-grey-800);--color-link-visited: var(--color-purple-subtle);--color-tooltip: var(--color-grey-600);--color-tooltip-foreground: var(--color-white);--color-overlay: oklch(0 0 0 / .6);--color-docs: var(--color-juke)}}@custom-variant dark (&:where(.dark,.dark *));@theme{ --color-main: var(--color-main); --color-main-hover: var(--color-main-hover); --color-subtle: var(--color-subtle); --color-alt: var(--color-alt); --color-rev: var(--color-rev); --color-alt-rev: var(--color-alt-rev); --color-info: var(--color-fbk-info); --color-warn: var(--color-fbk-warn); --color-success: var(--color-fbk-success); --color-error: var(--color-fbk-danger); --color-surface-neutral: var(--color-surface-neutral); --color-surface-primary: var(--color-surface-primary); --color-surface-primary-hover: var(--color-surface-primary-hover); --color-surface-primary-selected: var(--color-surface-primary-selected); --color-surface-primary-selected-hover: var(--color-surface-primary-selected-hover); --color-surface-info: var(--color-fbk-info-surface); --color-surface-warn: var(--color-fbk-warn-surface); --color-surface-success: var(--color-fbk-success-surface); --color-surface-error: var(--color-fbk-danger-surface); --color-bdr-subtle: var(--color-bdr-subtle); --color-bdr-soft: var(--color-bdr-soft); --color-bdr-strong: var(--color-bdr-strong); --color-ring: var(--color-ring); --color-btn-primary: var(--color-btn-primary); --color-btn-primary-hover: var(--color-btn-primary-hover); --color-btn-secondary: var(--color-btn-secondary); --color-btn-secondary-hover: var(--color-btn-secondary-hover); --color-btn-tertiary: var(--color-btn-tertiary); --color-btn-tertiary-hover: var(--color-btn-tertiary-hover); --color-btn-active: var(--color-btn-active); --color-input-disabled: var(--color-input-disabled); --color-link-visited: var(--color-link-visited); --color-tooltip: var(--color-tooltip); --color-tooltip-foreground: var(--color-tooltip-foreground); --color-overlay: var(--color-overlay); --color-docs: var(--color-docs); --sizing-11\.5: calc(var(--spacing) * 11.5); }@layer base{:root{font-size:16px;color:var(--color-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@utility transition-highlight{transition-property: color,box-shadow; transition-duration: .1s;}