@knkcs/anker 0.0.1

package/dist/chunk-4D3EY2W2.js

@@ -0,0 +1,1628 @@
+import { defineRecipe, defineSlotRecipe, createSystem, defaultConfig } from '@chakra-ui/react';
+import { toHex, transparentize as transparentize$1 } from 'color2k';
+
+// src/theme/index.ts
+var buttonTheme = defineRecipe({
+  base: {
+    lineHeight: "1.2",
+    borderRadius: "md",
+    fontWeight: "semibold",
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    _focusVisible: {
+      boxShadow: "none",
+      outlineOffset: "2px",
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: "primary.600"
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+      boxShadow: "none"
+    },
+    _hover: {
+      _disabled: {
+        bg: "initial"
+      }
+    }
+  },
+  variants: {
+    size: {
+      xl: {
+        rounded: "md",
+        px: 3.5,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "10",
+        minW: "10"
+      },
+      lg: {
+        rounded: "md",
+        px: 3,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "9",
+        minW: "9"
+      },
+      md: {
+        rounded: "md",
+        px: 2.5,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "8",
+        minW: "8"
+      },
+      sm: {
+        rounded: "md",
+        px: 2,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "7",
+        minW: "7"
+      },
+      xs: {
+        h: "6",
+        minW: "6",
+        rounded: "md",
+        px: 2,
+        fontSize: "xs",
+        lineHeight: "1rem",
+        fontWeight: 600
+      }
+    },
+    variant: {
+      // Solid variant: highlights the current page item
+      solid: {
+        '&[aria-current="page"]': {
+          bg: "colorPalette.300",
+          _dark: {
+            bg: "colorPalette.400"
+          }
+        }
+      },
+      // Primary: solid style locked to the primary color palette
+      primary: {
+        bg: "primary.500",
+        color: "white",
+        _hover: {
+          bg: "primary.600",
+          _disabled: {
+            bg: "primary.500"
+          }
+        },
+        _active: {
+          bg: "primary.700"
+        }
+      },
+      // Secondary: outline style using gray color palette
+      secondary: {
+        bg: { base: "white", _dark: "gray.800" },
+        borderWidth: "1px",
+        borderColor: "gray.200",
+        color: "gray.800",
+        _dark: {
+          borderColor: "gray.600",
+          color: "gray.200"
+        },
+        _hover: {
+          bg: { base: "gray.50", _dark: "gray.700" }
+        },
+        _active: {
+          bg: { base: "gray.100", _dark: "gray.700" }
+        }
+      },
+      // Outline: white background with subtle hover/active states
+      outline: {
+        bg: { base: "white", _dark: "gray.800" },
+        _hover: {
+          bg: { base: "gray.50", _dark: "gray.700/40" }
+        },
+        _checked: {
+          bg: { base: "gray.100", _dark: "gray.700" }
+        },
+        _active: {
+          bg: { base: "gray.100", _dark: "gray.700" }
+        }
+      },
+      // Ghost: transparent hover that shifts to primary color, gray active
+      ghost: {
+        _hover: {
+          bg: "transparent",
+          color: "primary.500"
+        },
+        _active: {
+          bg: "gray.200"
+        }
+      },
+      // Link: no background, text color based on color palette.
+      link: {
+        color: { base: "colorPalette.600", _dark: "colorPalette.200" },
+        _hover: {
+          color: { base: "colorPalette.700", _dark: "colorPalette.300" },
+          textDecoration: "none"
+        },
+        _active: {
+          color: { base: "colorPalette.700", _dark: "colorPalette.300" }
+        }
+      },
+      // Link variant for gray colorScheme
+      "link-gray": {
+        color: "fg.muted",
+        _hover: {
+          textDecoration: "none",
+          color: "fg.default"
+        },
+        _active: {
+          color: "fg.default"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg",
+    variant: "solid"
+  }
+});
+var cardSlotRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body", "footer", "title", "description"],
+  base: {
+    root: {
+      bg: { base: "white", _dark: "gray.800" }
+    }
+  },
+  variants: {
+    variant: {
+      elevated: {
+        root: {
+          boxShadow: "md"
+        }
+      },
+      flat: {
+        root: {
+          shadow: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "elevated"
+  }
+});
+var card_default = cardSlotRecipe;
+var checkboxSlotRecipe = defineSlotRecipe({
+  slots: ["root", "label", "control", "indicator", "group"],
+  base: {
+    label: {
+      color: "muted",
+      fontWeight: "medium"
+    },
+    control: {
+      bg: { base: "white", _dark: "gray.800" },
+      borderRadius: "base"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        label: {
+          fontSize: "sm"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    colorPalette: "primary"
+  }
+});
+var checkbox_default = checkboxSlotRecipe;
+var commentSlotRecipe = defineSlotRecipe({
+  slots: [
+    "container",
+    "avatar",
+    "contentContainer",
+    "children",
+    "field",
+    "deletedText"
+  ],
+  base: {
+    container: {
+      display: "grid",
+      position: "relative",
+      gap: 2,
+      gridTemplateAreas: `"avatar-area comment-area" ". nested-comments-area"`,
+      gridTemplateColumns: "auto 1fr",
+      fontSize: "sm"
+    },
+    avatar: {
+      gridArea: "avatar-area",
+      display: "block"
+    },
+    contentContainer: {
+      minW: 0,
+      pt: 1,
+      gridArea: "comment-area",
+      wordWrap: "break-word",
+      bg: { base: "gray.50", _dark: "gray.700" },
+      borderRadius: "md",
+      p: 4
+    },
+    children: {
+      gridArea: "nested-comments-area",
+      paddingTop: 8
+    },
+    field: {
+      fontWeight: "inherit",
+      "&:not(:hover):not(:active)": {
+        color: { base: "gray.500", _dark: "gray.400" }
+      }
+    },
+    deletedText: {
+      color: { base: "gray.500", _dark: "gray.400" },
+      fontStyle: "italic"
+    }
+  }
+});
+var comment_default = commentSlotRecipe;
+var container_default = defineRecipe({
+  base: {
+    maxW: "9xl",
+    px: { base: "4", md: "8" }
+  }
+});
+var dialog = defineSlotRecipe({
+  slots: ["content"],
+  variants: {
+    size: {
+      "7xl": {
+        content: {
+          maxW: "95%",
+          minH: "95%",
+          maxH: "95%",
+          my: 0
+        }
+      }
+    }
+  }
+});
+var drawerTheme = defineSlotRecipe({
+  slots: ["content"],
+  variants: {
+    size: {
+      xl: {
+        content: { minW: "50vw", h: "100vh" }
+      },
+      xxl: {
+        content: { minW: "51vw", h: "100vh", maxW: "70vw" }
+      },
+      full: {
+        content: { maxW: "90vw", h: "100vh" }
+      }
+    }
+  }
+});
+var form_label_default = defineRecipe({
+  base: {
+    color: "emphasized",
+    mb: "1.5",
+    fontSize: "sm"
+  },
+  variants: {
+    size: {
+      sm: {
+        _peerPlaceholderShown: {
+          fontSize: "sm",
+          top: "1.5",
+          left: "4"
+        }
+      },
+      md: {
+        _peerPlaceholderShown: {
+          fontSize: "md",
+          top: "2",
+          left: "4"
+        }
+      },
+      lg: {
+        _peerPlaceholderShown: {
+          fontSize: "lg",
+          top: "2.5",
+          left: "4"
+        }
+      }
+    },
+    variant: {
+      inline: {
+        margin: 0,
+        minW: "2xs"
+      },
+      floating: {
+        position: "absolute",
+        transition: "all 0.12s ease-in",
+        pointerEvents: "none",
+        top: "-27px",
+        left: "0",
+        _peerPlaceholderShown: {
+          fontWeight: "normal",
+          color: "subtle"
+        },
+        _peerFocus: {
+          fontSize: "sm",
+          fontWeight: "medium",
+          top: "-27px",
+          left: "0",
+          color: "muted"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var inputSlotRecipe = defineSlotRecipe({
+  slots: ["field", "addon"],
+  variants: {
+    variant: {
+      outline: {
+        field: {
+          borderRadius: "md",
+          bg: { base: "white", _dark: "gray.800" },
+          _hover: { borderColor: { base: "gray.300", _dark: "gray.600" } },
+          _focus: {
+            borderColor: { base: "primary.500", _dark: "primary.200" },
+            boxShadow: "0px 0px 0px 1px var(--chakra-colors-primary-500)"
+          }
+        },
+        addon: {
+          borderRadius: "md",
+          bg: { base: "gray.50", _dark: "gray.700" }
+        }
+      },
+      "outline-on-accent": {
+        field: {
+          bg: "white",
+          borderRadius: "md",
+          color: "gray.900",
+          borderWidth: "1px",
+          borderColor: "primary.50",
+          _placeholder: {
+            color: "gray.500"
+          },
+          _hover: {
+            borderColor: "primary.100"
+          },
+          _focus: {
+            borderColor: "primary.200",
+            boxShadow: "0px 0px 0px 1px var(--chakra-colors-primary-200)"
+          }
+        }
+      },
+      filled: {
+        field: {
+          bg: { base: "white", _dark: "gray.800" },
+          _hover: {
+            borderColor: { base: "gray.200", _dark: "gray.700" },
+            bg: { base: "white", _dark: "gray.700" }
+          },
+          _focus: {
+            borderColor: "accent",
+            bg: { base: "white", _dark: "gray.800" }
+          }
+        }
+      },
+      link: {
+        field: {
+          background: "transparent",
+          border: "none",
+          boxShadow: "none",
+          padding: 0,
+          minHeight: "auto",
+          color: "primary.500",
+          textDecoration: "underline",
+          cursor: "pointer",
+          _hover: {
+            color: "primary.600",
+            textDecoration: "underline"
+          },
+          _focus: {
+            boxShadow: "none",
+            color: "primary.600"
+          }
+        }
+      }
+    },
+    size: {
+      lg: {
+        field: {
+          fontSize: "md",
+          borderRadius: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    colorPalette: "gray"
+  }
+});
+var input_default = inputSlotRecipe;
+var $bg = "--menu-bg";
+var $shadow = "--menu-shadow";
+var menuTheme = defineSlotRecipe({
+  slots: ["content", "item", "itemGroupLabel", "itemCommand", "separator"],
+  base: {
+    content: {
+      [$bg]: "colors.white",
+      [$shadow]: "shadows.md",
+      _dark: {
+        [$bg]: "colors.gray.700",
+        [$shadow]: "shadows.lg"
+      },
+      color: "inherit",
+      minW: "3xs",
+      py: "2",
+      zIndex: 1,
+      borderRadius: "md",
+      borderWidth: "1px",
+      bg: `var(${$bg})`,
+      boxShadow: `var(${$shadow})`
+    },
+    item: {
+      py: "0.4rem",
+      px: "0.8rem",
+      fontSize: "sm",
+      fontWeight: "normal",
+      color: "black",
+      transitionProperty: "background",
+      transitionDuration: "ultra-fast",
+      transitionTimingFunction: "ease-in",
+      _focus: {
+        [$bg]: "colors.gray.100",
+        _dark: {
+          [$bg]: "colors.whiteAlpha.100"
+        }
+      },
+      _active: {
+        [$bg]: "colors.gray.200",
+        _dark: {
+          [$bg]: "colors.whiteAlpha.200"
+        }
+      },
+      _expanded: {
+        [$bg]: "colors.gray.100",
+        _dark: {
+          [$bg]: "colors.whiteAlpha.100"
+        }
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      },
+      bg: `var(${$bg})`
+    },
+    itemGroupLabel: {
+      mx: 4,
+      my: 2,
+      fontWeight: "semibold",
+      fontSize: "sm"
+    },
+    itemCommand: {
+      opacity: 0.6
+    },
+    separator: {
+      border: 0,
+      borderBottom: "1px solid",
+      borderColor: "inherit",
+      my: "2",
+      opacity: 0.6
+    }
+  }
+});
+var modalSlotRecipe = defineSlotRecipe({
+  slots: ["header", "closeButton", "dialog"],
+  base: {
+    header: {
+      px: "6",
+      py: "4",
+      fontSize: "xl",
+      fontWeight: "semibold",
+      roundedTop: "md"
+    },
+    closeButton: {}
+  },
+  variants: {
+    size: {
+      "7xl": {
+        dialog: {
+          maxW: "95%",
+          minH: "95%",
+          maxH: "95%",
+          my: 0
+        }
+      }
+    }
+  }
+});
+var personaSlotRecipe = defineSlotRecipe({
+  slots: [
+    "container",
+    "details",
+    "avatar",
+    "label",
+    "secondaryLabel",
+    "tertiaryLabel"
+  ],
+  base: {
+    container: {},
+    avatar: {},
+    label: {},
+    secondaryLabel: {
+      color: { base: "gray.500", _dark: "whiteAlpha.600" },
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
+    },
+    tertiaryLabel: {
+      color: { base: "gray.500", _dark: "whiteAlpha.600" },
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
+    }
+  },
+  variants: {
+    size: {
+      "2xs": {
+        details: { ms: 2 },
+        label: { fontSize: "xs" },
+        secondaryLabel: { display: "none" },
+        tertiaryLabel: { display: "none" }
+      },
+      xs: {
+        details: { ms: 2 },
+        label: { fontSize: "md" },
+        secondaryLabel: { display: "none" },
+        tertiaryLabel: { display: "none" }
+      },
+      sm: {
+        details: { ms: 2 },
+        label: { fontSize: "md" },
+        secondaryLabel: { fontSize: "sm" },
+        tertiaryLabel: { display: "none" }
+      },
+      md: {
+        details: { ms: 2 },
+        label: { fontSize: "md" },
+        secondaryLabel: { fontSize: "sm" },
+        tertiaryLabel: { display: "none" }
+      },
+      lg: {
+        details: { ms: 3 },
+        label: { fontSize: "md" },
+        secondaryLabel: { fontSize: "sm" },
+        tertiaryLabel: { fontSize: "sm" }
+      },
+      xl: {
+        details: { ms: 3 },
+        label: { fontSize: "xl" },
+        secondaryLabel: { fontSize: "md" },
+        tertiaryLabel: { fontSize: "md" }
+      },
+      "2xl": {
+        details: { ms: 4 },
+        label: { fontSize: "2xl" },
+        secondaryLabel: { fontSize: "lg" },
+        tertiaryLabel: { fontSize: "lg" }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var persona_default = personaSlotRecipe;
+var popoverSlotRecipe = defineSlotRecipe({
+  slots: ["content"],
+  base: {
+    content: {
+      borderWidth: "1px",
+      boxShadow: "lg",
+      borderRadius: "md",
+      background: "bg-surface",
+      overflow: "hidden"
+    }
+  }
+});
+var popover_default = popoverSlotRecipe;
+var propertyTheme = defineSlotRecipe({
+  slots: ["property", "label", "value"],
+  base: {
+    label: {
+      color: "muted"
+    }
+  }
+});
+var radioCardTheme = defineRecipe({
+  base: {
+    borderWidth: "1px",
+    borderRadius: "md",
+    p: "4",
+    bg: "bg-surface",
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    _hover: {
+      borderColor: { base: "gray.300", _dark: "gray.600" }
+    },
+    _checked: {
+      borderColor: { base: "primary.500", _dark: "primary.200" },
+      boxShadow: {
+        base: "0px 0px 0px 1px var(--chakra-colors-primary-500)",
+        _dark: "0px 0px 0px 1px var(--chakra-colors-primary-200)"
+      }
+    }
+  }
+});
+var separator_default = defineRecipe({
+  base: {
+    opacity: 1
+  }
+});
+var stepperTheme = defineSlotRecipe({
+  slots: [
+    "container",
+    "steps",
+    "icon",
+    "content",
+    "title",
+    "separator",
+    "step"
+  ],
+  base: {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      py: 4
+    },
+    steps: {
+      display: "flex",
+      mb: 4
+    },
+    step: {
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "row"
+    },
+    icon: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      fontSize: "1em",
+      bg: "whiteAlpha.400",
+      lineHeight: 1,
+      flexShrink: 0,
+      transitionProperty: "common",
+      transitionDuration: "normal"
+    },
+    separator: {
+      flex: 1,
+      transitionProperty: "common",
+      transitionDuration: "normal"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        icon: {
+          bg: "blackAlpha.300",
+          color: "blackAlpha.600",
+          _dark: {
+            bg: "whiteAlpha.200",
+            color: "whiteAlpha.600"
+          }
+        },
+        step: {
+          "&[data-active] .stepper__icon, &[data-completed] .stepper__icon": {
+            bg: "colorPalette.muted",
+            color: "colorPalette.fg"
+          }
+        },
+        separator: {
+          "&[data-active]": {
+            bg: "colorPalette.emphasized"
+          }
+        }
+      },
+      solid: {
+        icon: {
+          bg: "gray.300",
+          color: "gray.600",
+          _dark: {
+            bg: "gray.600",
+            color: "gray.400"
+          }
+        },
+        step: {
+          "&[data-active] .stepper__icon": {
+            bg: "colorPalette.muted",
+            borderColor: "colorPalette.solid",
+            color: "colorPalette.fg"
+          },
+          "&[data-completed] .stepper__icon": {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast"
+          }
+        },
+        separator: {
+          "&[data-active]": {
+            borderColor: "colorPalette.solid"
+          }
+        }
+      }
+    },
+    size: {
+      md: {
+        icon: {
+          boxSize: 6,
+          fontSize: "sm"
+        },
+        title: {
+          fontSize: "md"
+        }
+      },
+      lg: {
+        icon: {
+          boxSize: 8
+        },
+        title: {
+          fontSize: "lg"
+        }
+      }
+    },
+    orientation: {
+      vertical: {
+        steps: {
+          flexDirection: "column",
+          alignItems: "stretch"
+        },
+        icon: {
+          me: 2
+        },
+        separator: {
+          minHeight: 4,
+          borderLeftWidth: 1,
+          borderTopWidth: 0,
+          mx: 3
+        },
+        content: {
+          borderLeftWidth: 1,
+          ms: 3,
+          ps: 5
+        }
+      },
+      horizontal: {
+        steps: {
+          flexDirection: "row",
+          alignItems: { base: "flex-start", sm: "center" },
+          position: "relative"
+        },
+        icon: {
+          me: { base: 0, sm: 2 }
+        },
+        title: {
+          mt: { base: 2, sm: 0 },
+          textAlign: "center"
+        },
+        separator: {
+          borderTopWidth: 1,
+          mx: { base: 0, sm: 3 },
+          mt: { base: 5, sm: 0 },
+          alignSelf: { base: "flex-start", sm: "center" },
+          flex: { base: "inherit", sm: 1 }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    colorPalette: "primary",
+    size: "lg",
+    orientation: "horizontal"
+  }
+});
+var tableTheme = defineSlotRecipe({
+  slots: [
+    "root",
+    "header",
+    "body",
+    "footer",
+    "row",
+    "columnHeader",
+    "cell",
+    "caption"
+  ],
+  base: {
+    root: {
+      whiteSpace: "nowrap",
+      tableLayout: "fixed",
+      textIndent: 0
+    },
+    columnHeader: {
+      py: 3,
+      px: 3,
+      textAlign: "start",
+      fontSize: "xs",
+      fontWeight: "600",
+      textTransform: "uppercase",
+      letterSpacing: "wider",
+      color: "gray.500",
+      bg: "gray.50",
+      borderBottomWidth: "1px",
+      borderColor: "border"
+    },
+    cell: {
+      fontSize: "sm",
+      py: 3,
+      px: 3,
+      whiteSpace: "nowrap",
+      borderColor: "border"
+    },
+    row: {
+      bg: "bg-surface",
+      _hover: {
+        bg: "gray.50"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      line: {
+        columnHeader: {
+          borderBottomWidth: "1px",
+          borderColor: "border"
+        },
+        cell: {
+          borderBottomWidth: "1px",
+          borderColor: "border"
+        },
+        row: {
+          bg: "bg"
+        }
+      },
+      striped: {
+        body: {
+          "& tr:nth-of-type(odd) td": {
+            bg: "gray.50"
+          }
+        }
+      },
+      hoverable: {
+        body: {
+          "& tr:hover": {
+            bg: "primary.50"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  }
+});
+var tabTheme = defineSlotRecipe({
+  slots: ["root", "list", "trigger", "content", "contentGroup", "indicator"],
+  variants: {
+    variant: {
+      "with-line": {
+        list: {
+          borderBottom: "1px solid",
+          borderColor: "border"
+        },
+        trigger: {
+          color: "muted",
+          borderBottom: "2px solid transparent",
+          marginBottom: "-1px",
+          pt: "0",
+          pb: "4.5",
+          px: "1",
+          justifyContent: "start",
+          "&:not(:last-child)": {
+            me: "4"
+          },
+          _selected: {
+            color: "colorPalette.solid",
+            borderBottom: "2px solid",
+            borderBottomColor: "colorPalette.solid"
+          },
+          _active: {
+            bg: "transparent"
+          }
+        }
+      },
+      "with-line-vertical": {
+        list: {
+          borderStart: "1px solid",
+          borderColor: "border"
+        },
+        trigger: {
+          color: "muted",
+          borderStart: "2px solid transparent",
+          marginStart: "-1px",
+          justifyContent: "start",
+          px: "3",
+          "&:not(:last-child)": {
+            mb: "2"
+          },
+          _selected: {
+            color: "colorPalette.solid",
+            borderStartColor: "colorPalette.solid"
+          },
+          _active: {
+            bg: "transparent"
+          }
+        }
+      }
+    }
+  }
+});
+var tagTheme = defineRecipe({
+  base: {
+    lineHeight: "1.2",
+    borderRadius: "md",
+    fontWeight: "semibold",
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    _focusVisible: {
+      boxShadow: "none",
+      outlineOffset: "2px",
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: "primary.600"
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+      boxShadow: "none"
+    },
+    _hover: {
+      _disabled: {
+        bg: "initial"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      solid: {
+        '&[aria-current="page"]': {
+          bg: { base: "colorPalette.300", _dark: "colorPalette.400" }
+        }
+      },
+      primary: {
+        bg: { base: "primary.300", _dark: "primary.400" }
+      },
+      secondary: {
+        borderWidth: "1px",
+        bg: { base: "white", _dark: "gray.800" },
+        color: { base: "gray.800", _dark: "whiteAlpha.900" }
+      },
+      outline: {
+        bg: { base: "white", _dark: "gray.800" },
+        _hover: {
+          bg: { base: "gray.50", _dark: "gray.700/40" }
+        },
+        _checked: {
+          bg: { base: "gray.100", _dark: "gray.700" }
+        },
+        _active: {
+          bg: { base: "gray.100", _dark: "gray.700" }
+        }
+      },
+      ghost: {
+        _hover: {
+          bg: "transparent",
+          color: "primary.500"
+        },
+        _active: {
+          bg: "transparent"
+        }
+      },
+      link: {
+        color: { base: "colorPalette.600", _dark: "colorPalette.200" },
+        _hover: {
+          color: { base: "colorPalette.700", _dark: "colorPalette.300" },
+          textDecoration: "none"
+        },
+        _active: {
+          color: { base: "colorPalette.700", _dark: "colorPalette.300" }
+        }
+      }
+    },
+    size: {
+      xl: {
+        rounded: "md",
+        px: 3.5,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "10",
+        minW: "10"
+      },
+      lg: {
+        rounded: "md",
+        px: 3,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "9",
+        minW: "9"
+      },
+      md: {
+        rounded: "md",
+        px: 2.5,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "8",
+        minW: "8"
+      },
+      sm: {
+        rounded: "base",
+        px: 2,
+        fontSize: "sm",
+        lineHeight: 1.5,
+        fontWeight: 600,
+        h: "7",
+        minW: "7"
+      },
+      xs: {
+        h: "6",
+        minW: "6",
+        rounded: "base",
+        px: 2,
+        fontSize: "xs",
+        lineHeight: "1rem",
+        fontWeight: 600
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var textarea_default = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        borderRadius: "md",
+        bg: { base: "white", _dark: "gray.800" },
+        _hover: { borderColor: { base: "gray.300", _dark: "gray.600" } },
+        _focus: {
+          borderColor: { base: "primary.500", _dark: "primary.200" },
+          boxShadow: {
+            base: "0px 0px 0px 1px var(--chakra-colors-primary-500)",
+            _dark: "0px 0px 0px 1px var(--chakra-colors-primary-200)"
+          }
+        }
+      }
+    }
+  }
+});
+var tooltipTheme = defineRecipe({
+  base: {
+    px: "2",
+    py: "1",
+    bg: "gray.700",
+    color: "whiteAlpha.900",
+    _dark: {
+      bg: "gray.300",
+      color: "gray.900"
+    },
+    borderRadius: "md",
+    fontWeight: "medium",
+    fontSize: "sm",
+    boxShadow: "md",
+    maxW: "xs",
+    zIndex: "tooltip"
+  }
+});
+var tree_item_default = defineSlotRecipe({
+  slots: [
+    "treeItem",
+    "treeItemElement",
+    "treeItemToggle",
+    "treeItemIcon",
+    "treeItemContent",
+    "treeItemLabel",
+    "treeItemActions",
+    "treeItemChildren"
+  ],
+  base: {
+    treeItem: {},
+    treeItemElement: {
+      height: "42px",
+      display: "grid",
+      gridTemplateColumns: "30px 24px 20px auto 50px",
+      gridGap: "2px",
+      alignItems: "center",
+      alignContent: "center",
+      padding: 0,
+      fontSize: "xs",
+      color: { base: "gray.700", _dark: "gray.300" },
+      borderRadius: "base",
+      _hover: {
+        bg: { base: "gray.100", _dark: "gray.700" }
+      },
+      ".is--no-checkbox &": {
+        gridTemplateColumns: "30px 0 24px auto 50px"
+      }
+    },
+    treeItemToggle: {
+      width: "15px",
+      height: "24px",
+      lineHeight: "20px",
+      textAlign: "center",
+      position: "relative",
+      cursor: "pointer",
+      userSelect: "none",
+      justifySelf: "center",
+      _expanded: {
+        color: "primary.400"
+      }
+    },
+    treeItemIcon: {
+      width: "45px",
+      height: "22px",
+      color: "primary.600",
+      "&[aria-leaf=true],&[data-leaf]": {
+        color: "gray.400"
+      }
+    },
+    treeItemContent: {},
+    treeItemLabel: {
+      color: "gray.700"
+    },
+    treeItemActions: {
+      textAlign: "right",
+      marginLeft: "4px"
+    },
+    treeItemChildren: {
+      position: "relative",
+      paddingLeft: 12,
+      _before: {
+        content: '""',
+        position: "absolute",
+        left: "16px",
+        height: "100%",
+        width: "1px",
+        bg: { base: "gray.200", _dark: "gray.600" }
+      }
+    }
+  }
+});
+
+// src/theme/tokens/animations.ts
+var durations = {
+  fast: { value: "150ms" },
+  normal: { value: "200ms" },
+  slow: { value: "300ms" }
+};
+var easings = {
+  "ease-in": { value: "cubic-bezier(0.4, 0, 1, 1)" },
+  "ease-out": { value: "cubic-bezier(0, 0, 0.2, 1)" },
+  "ease-in-out": { value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+};
+
+// src/theme/tokens/colors.ts
+var colors = {
+  primary: {
+    "50": { value: "#f1f7fe" },
+    "100": { value: "#e2effc" },
+    "200": { value: "#bfddf8" },
+    "300": { value: "#87c1f2" },
+    "400": { value: "#48a3e8" },
+    "500": { value: "#2087d7" },
+    "600": { value: "#126ab7" },
+    "700": { value: "#105595" },
+    "800": { value: "#11497b" },
+    "900": { value: "#143e66" },
+    "950": { value: "#0d2744" }
+  },
+  secondary: {
+    "50": { value: "#FEF0E6" },
+    "100": { value: "#FCD9BF" },
+    "200": { value: "#F9B888" },
+    "300": { value: "#F59651" },
+    "400": { value: "#F27726" },
+    "500": { value: "#e9580c" },
+    "600": { value: "#C54A0A" },
+    "700": { value: "#9A3A08" },
+    "800": { value: "#6F2A06" },
+    "900": { value: "#441A03" }
+  },
+  // Exact brand guideline colors for branding elements (headers, logos, about pages).
+  // See: knk Brand Guidelines, October 2021
+  brand: {
+    blue: { value: "#004576" },
+    navy: { value: "#0f395d" },
+    "light-blue": { value: "#6fa7d1" },
+    orange: { value: "#e9580c" },
+    gold: { value: "#f4b235" },
+    "light-gray": { value: "#f2f2f2" }
+  },
+  // Blue-tinted gray
+  gray: {
+    "50": { value: "#f8fafc" },
+    "100": { value: "#f1f5f9" },
+    "200": { value: "#e2e8f0" },
+    "300": { value: "#cbd5e1" },
+    "400": { value: "#94a3b8" },
+    "500": { value: "#64748b" },
+    "600": { value: "#475569" },
+    "700": { value: "#334155" },
+    "800": { value: "#1e293b" },
+    "900": { value: "#0f172a" }
+  }
+};
+var colors_default = colors;
+
+// src/theme/tokens/radii.ts
+var radii = {
+  sm: "0.375rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem",
+  "2xl": "1.25rem"
+};
+var radii_default = radii;
+
+// src/theme/tokens/semantic.ts
+var semanticTokens = {
+  colors: {
+    "bg-canvas": {
+      value: { base: "gray.50", _dark: "gray.900" }
+    },
+    "bg-surface": {
+      value: { base: "white", _dark: "gray.800" }
+    },
+    "bg-subtle": {
+      value: { base: "gray.50", _dark: "gray.700" }
+    },
+    "bg-muted": {
+      value: { base: "gray.100", _dark: "gray.600" }
+    },
+    default: {
+      value: { base: "gray.900", _dark: "white" }
+    },
+    inverted: {
+      value: { base: "white", _dark: "gray.900" }
+    },
+    emphasized: {
+      value: { base: "gray.700", _dark: "gray.100" }
+    },
+    muted: {
+      value: { base: "gray.600", _dark: "gray.300" }
+    },
+    subtle: {
+      value: { base: "gray.500", _dark: "gray.400" }
+    },
+    border: {
+      value: { base: "{colors.gray.200}", _dark: "{colors.gray.700}" }
+    },
+    accent: {
+      value: { base: "primary.500", _dark: "primary.200" }
+    },
+    success: {
+      value: { base: "green.600", _dark: "green.200" }
+    },
+    error: {
+      value: { base: "red.600", _dark: "red.200" }
+    },
+    // Color palette tokens for colorPalette="primary" (required by Chakra v3
+    // for solid/subtle/outline/ghost button variants and other components)
+    primary: {
+      contrast: { value: { base: "white", _dark: "white" } },
+      fg: {
+        value: {
+          base: "{colors.primary.700}",
+          _dark: "{colors.primary.300}"
+        }
+      },
+      subtle: {
+        value: {
+          base: "{colors.primary.100}",
+          _dark: "{colors.primary.900}"
+        }
+      },
+      muted: {
+        value: {
+          base: "{colors.primary.200}",
+          _dark: "{colors.primary.800}"
+        }
+      },
+      emphasized: {
+        value: {
+          base: "{colors.primary.300}",
+          _dark: "{colors.primary.700}"
+        }
+      },
+      solid: {
+        value: {
+          base: "{colors.primary.500}",
+          _dark: "{colors.primary.500}"
+        }
+      },
+      focusRing: {
+        value: {
+          base: "{colors.primary.500}",
+          _dark: "{colors.primary.500}"
+        }
+      },
+      border: {
+        value: {
+          base: "{colors.primary.500}",
+          _dark: "{colors.primary.400}"
+        }
+      }
+    },
+    // Static accent surface tokens
+    "bg-accent": { value: "primary.600" },
+    "bg-accent-subtle": { value: "primary.500" },
+    "bg-accent-muted": { value: "primary.400" },
+    "on-accent": { value: "white" },
+    "on-accent-muted": { value: "primary.50" },
+    "on-accent-subtle": { value: "primary.100" }
+  },
+  shadows: {
+    xs: {
+      value: {
+        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 1px 2px rgba(45, 55, 72, 0.1)",
+        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 1px 2px rgba(13, 14, 20, 0.9)"
+      }
+    },
+    sm: {
+      value: {
+        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 2px 4px rgba(45, 55, 72, 0.1)",
+        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 2px 4px rgba(13, 14, 20, 0.9)"
+      }
+    },
+    md: {
+      value: {
+        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 4px 8px rgba(45, 55, 72, 0.1)",
+        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 4px 8px rgba(13, 14, 20, 0.9)"
+      }
+    },
+    lg: {
+      value: {
+        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 8px 16px rgba(45, 55, 72, 0.1)",
+        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 8px 16px rgba(13, 14, 20, 0.9)"
+      }
+    },
+    xl: {
+      value: {
+        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 16px 24px rgba(45, 55, 72, 0.1)",
+        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 16px 24px rgba(13, 14, 20, 0.9)"
+      }
+    }
+  },
+  opacity: {
+    disabled: { value: 0.4 },
+    readOnly: { value: 0.8 }
+  }
+};
+var semantic_default = semanticTokens;
+
+// src/theme/tokens/spacing.ts
+var space = {
+  "1.5": "0.375rem",
+  "2.5": "0.625rem",
+  "3.5": "0.875rem",
+  "4.5": "1.125rem"
+};
+var spacing_default = space;
+
+// src/theme/tokens/typography.ts
+var fonts = {
+  heading: "InterVariable, -apple-system, system-ui, sans-serif",
+  body: "InterVariable, -apple-system, system-ui, sans-serif"
+};
+var textStyles = {
+  "7xl": {
+    fontSize: "7xl",
+    lineHeight: "5.75rem",
+    // 92px
+    letterSpacing: "-0.02em"
+  },
+  "6xl": {
+    fontSize: "6xl",
+    lineHeight: "4.5rem",
+    // 72px
+    letterSpacing: "-0.02em"
+  },
+  "5xl": {
+    fontSize: "5xl",
+    lineHeight: "3.75rem",
+    // 60px
+    letterSpacing: "-0.02em"
+  },
+  "4xl": {
+    fontSize: "4xl",
+    lineHeight: "2.75rem",
+    // 44px
+    letterSpacing: "-0.02em"
+  },
+  "3xl": {
+    fontSize: "3xl",
+    lineHeight: "2.375rem"
+    // 38px
+  },
+  "2xl": {
+    fontSize: "2xl",
+    lineHeight: "2rem"
+    // 32px
+  },
+  xl: {
+    fontSize: "xl",
+    lineHeight: "1.875rem"
+    // 30px
+  },
+  lg: {
+    fontSize: "lg",
+    lineHeight: "1.75rem"
+    // 28px
+  },
+  md: {
+    fontSize: "md",
+    lineHeight: "1.5rem"
+    // 24px
+  },
+  sm: {
+    fontSize: "sm",
+    lineHeight: "1.25rem"
+    // 20px
+  },
+  xs: {
+    fontSize: "xs",
+    lineHeight: "1.125rem"
+    // 18px
+  }
+};
+
+// src/theme/tokens/z-index.ts
+var zIndex = {
+  dropdown: { value: 1e3 },
+  sticky: { value: 1100 },
+  overlay: { value: 1300 },
+  modal: { value: 1400 },
+  popover: { value: 1500 },
+  toast: { value: 1700 }
+};
+var z_index_default = zIndex;
+var getColor = (theme, color, fallback) => {
+  const hex = get(theme, `colors.${color}`, color);
+  try {
+    toHex(hex);
+    return hex;
+  } catch {
+    return fallback ?? "#000000";
+  }
+};
+var transparentize = (color, opacity) => (theme) => {
+  const raw = getColor(theme, color);
+  return transparentize$1(raw, 1 - opacity);
+};
+function get(obj, path, fallback) {
+  const keys = path.split(".");
+  let current = obj;
+  for (const key of keys) {
+    if (current == null || typeof current !== "object") return String(fallback);
+    current = current[key];
+  }
+  return current != null ? String(current) : String(fallback);
+}
+
+// src/theme/index.ts
+var system = createSystem(defaultConfig, {
+  globalCss: {
+    body: {
+      color: "default",
+      bg: { base: "white", _dark: "#000" }
+    },
+    "*::placeholder": {
+      opacity: 1,
+      color: "muted"
+    },
+    "*, *::before, *::after": {
+      borderColor: "border"
+    },
+    "table, td, th": {
+      borderColor: "border"
+    },
+    "html, body": {
+      height: "100%"
+    },
+    "#__next, #root, #app": {
+      display: "flex",
+      flexDirection: "column",
+      minH: "100%"
+    },
+    "*": {
+      _motionReduce: {
+        animationDuration: "0.01ms !important",
+        animationIterationCount: "1 !important",
+        transitionDuration: "0.01ms !important",
+        scrollBehavior: "auto !important"
+      }
+    }
+  },
+  theme: {
+    tokens: {
+      colors: colors_default,
+      durations,
+      easings,
+      fonts: {
+        heading: { value: fonts.heading },
+        body: { value: fonts.body }
+      },
+      spacing: Object.fromEntries(
+        Object.entries(spacing_default).map(([k, v]) => [k, { value: v }])
+      ),
+      radii: Object.fromEntries(
+        Object.entries(radii_default).map(([k, v]) => [k, { value: v }])
+      ),
+      zIndex: z_index_default
+    },
+    textStyles,
+    semanticTokens: semantic_default,
+    recipes: {
+      button: buttonTheme,
+      container: container_default,
+      separator: separator_default,
+      formLabel: form_label_default,
+      textarea: textarea_default,
+      tooltip: tooltipTheme,
+      tsRadioCard: radioCardTheme,
+      tsProperty: propertyTheme,
+      treeItem: tree_item_default,
+      tag: tagTheme
+    },
+    slotRecipes: {
+      card: card_default,
+      checkbox: checkbox_default,
+      comment: comment_default,
+      dialog,
+      drawer: drawerTheme,
+      // Field.Root override: v3 defaults to alignItems: flex-start which
+      // shrinks children. Restore v2 behavior where children stretch.
+      field: defineSlotRecipe({
+        slots: ["root"],
+        variants: {
+          orientation: {
+            vertical: {
+              root: {
+                alignItems: "stretch"
+              }
+            }
+          }
+        }
+      }),
+      input: input_default,
+      menu: menuTheme,
+      modal: modalSlotRecipe,
+      persona: persona_default,
+      popover: popover_default,
+      stepper: stepperTheme,
+      table: tableTheme,
+      tabs: tabTheme
+    }
+  }
+});
+var theme_default = system;
+
+export { colors_default, durations, easings, fonts, getColor, radii_default, semantic_default, spacing_default, textStyles, theme_default, transparentize, z_index_default };
+//# sourceMappingURL=chunk-4D3EY2W2.js.map
+//# sourceMappingURL=chunk-4D3EY2W2.js.map