@butternutbox/pawprint-native 0.0.1

package/dist/index.js

@@ -0,0 +1,2617 @@
+import { useTheme, ThemeProvider as ThemeProvider$1 } from '@emotion/react';
+import { Brand, Theme, THEME_OPTIONS_MAP, DEFAULT_THEME_OPTIONS, tokens } from '@butternutbox/pawprint-tokens';
+export { tokens } from '@butternutbox/pawprint-tokens';
+import styled25 from '@emotion/native';
+export { default as styled } from '@emotion/native';
+import React26, { createContext, useRef, useEffect, forwardRef, useCallback, useState, useMemo, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as AvatarPrimitive from '@rn-primitives/avatar';
+import { Text, View, Animated, Easing, Pressable, TextInput, ScrollView, PanResponder, Linking } from 'react-native';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
+import * as SliderPrimitive from '@rn-primitives/slider';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/fonts/ida-narrow-500-normal.woff2
+var ida_narrow_500_normal_default = "./ida-narrow-500-normal-C6I2PK4T.woff2";
+
+// src/fonts/ida-narrow-700-normal.woff2
+var ida_narrow_700_normal_default = "./ida-narrow-700-normal-UPHPRIN6.woff2";
+
+// src/fonts/ibm-plex-sans-condensed-400-normal.woff2
+var ibm_plex_sans_condensed_400_normal_default = "./ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2";
+
+// src/fonts/ibm-plex-sans-condensed-500-normal.woff2
+var ibm_plex_sans_condensed_500_normal_default = "./ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2";
+
+// src/fonts/ibm-plex-sans-condensed-600-normal.woff2
+var ibm_plex_sans_condensed_600_normal_default = "./ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2";
+
+// src/fonts/ibm-plex-sans-condensed-700-normal.woff2
+var ibm_plex_sans_condensed_700_normal_default = "./ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2";
+
+// src/fonts/index.ts
+var BRAND_FONTS = {
+  [Brand.Butternutbox]: {
+    "IdaNarrow-Medium": ida_narrow_500_normal_default,
+    "IdaNarrow-Bold": ida_narrow_700_normal_default,
+    "IBMPlexSansCondensed-Regular": ibm_plex_sans_condensed_400_normal_default,
+    "IBMPlexSansCondensed-Medium": ibm_plex_sans_condensed_500_normal_default,
+    "IBMPlexSansCondensed-SemiBold": ibm_plex_sans_condensed_600_normal_default,
+    "IBMPlexSansCondensed-Bold": ibm_plex_sans_condensed_700_normal_default
+  }
+};
+var FONT_MAP = {
+  "IBM Plex Sans Condensed": {
+    "400": "IBMPlexSansCondensed-Regular",
+    "500": "IBMPlexSansCondensed-Medium",
+    "600": "IBMPlexSansCondensed-SemiBold",
+    "700": "IBMPlexSansCondensed-Bold"
+  },
+  "Ida Narrow": {
+    "500": "IdaNarrow-Medium",
+    "700": "IdaNarrow-Bold"
+  }
+};
+var resolveFont = (fontFamily, fontWeight) => {
+  var _a;
+  const resolved = (_a = FONT_MAP[fontFamily]) == null ? void 0 : _a[fontWeight];
+  return { fontFamily: resolved != null ? resolved : fontFamily };
+};
+var createPawprintTheme = (brand = Brand.Butternutbox, theme2 = Theme.Default) => {
+  const brandThemes = THEME_OPTIONS_MAP[brand];
+  const themeOptions = brandThemes && theme2 in brandThemes ? brandThemes[theme2] : DEFAULT_THEME_OPTIONS;
+  return themeOptions;
+};
+var ThemeContext = createContext({
+  brand: Brand.Butternutbox,
+  theme: Theme.Default,
+  setTheme: (_theme) => {
+  },
+  emotionTheme: createPawprintTheme(Brand.Butternutbox, Theme.Default)
+});
+var ThemeProvider = ({
+  children,
+  brand = Brand.Butternutbox,
+  initialTheme = Theme.Default
+}) => {
+  const [theme2, setTheme] = useState(initialTheme);
+  const emotionTheme = useMemo(
+    () => createPawprintTheme(brand, theme2),
+    [brand, theme2]
+  );
+  const contextValue = useMemo(
+    () => ({
+      brand,
+      theme: theme2,
+      setTheme,
+      emotionTheme
+    }),
+    [brand, theme2, emotionTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme: emotionTheme, children }) });
+};
+var usePawprint = () => useContext(ThemeContext);
+var PawprintProvider = ({
+  brand = Brand.Butternutbox,
+  initialTheme = Theme.Default,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { brand, initialTheme, children });
+};
+var theme = tokens;
+var parseTokenValue = (value) => parseFloat(value);
+var resolveLetterSpacing = (letterSpacing, fontSize) => {
+  if (letterSpacing.endsWith("%")) {
+    return parseFloat(letterSpacing) / 100 * fontSize;
+  }
+  return parseFloat(letterSpacing);
+};
+var semanticToStyle = (token) => {
+  const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight);
+  const fontSize = parseTokenValue(token.fontSize);
+  return __spreadValues({
+    fontFamily,
+    fontSize,
+    lineHeight: parseTokenValue(token.lineHeight)
+  }, token.letterSpacing && {
+    letterSpacing: resolveLetterSpacing(token.letterSpacing, fontSize)
+  });
+};
+var nativeTokenToStyle = (token) => {
+  const style = {};
+  if (token.fontFamily && token.fontWeight) {
+    const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight);
+    style.fontFamily = fontFamily;
+  } else if (token.fontFamily) {
+    style.fontFamily = token.fontFamily;
+  }
+  if (token.fontSize) style.fontSize = parseTokenValue(token.fontSize);
+  if (token.lineHeight) style.lineHeight = parseTokenValue(token.lineHeight);
+  if (token.letterSpacing && style.fontSize) {
+    style.letterSpacing = resolveLetterSpacing(
+      token.letterSpacing,
+      style.fontSize
+    );
+  }
+  return style;
+};
+var VARIANT_DEFAULTS = {
+  body: { size: "md" },
+  heading: { size: "md" },
+  display: { size: "lg" }
+};
+var StyledText = styled25(Text)({});
+var Typography = React26.forwardRef(
+  (props, ref) => {
+    const theme2 = useTheme();
+    const { typography, colour } = theme2.tokens.semantics;
+    const getCommonStyles = (align2, textTransform2, textDecoration2) => __spreadValues(__spreadValues(__spreadValues({}, align2 && { textAlign: align2 }), textTransform2 && { textTransform: textTransform2 }), textDecoration2 && {
+      textDecorationLine: textDecoration2
+    });
+    if ("token" in props && props.token) {
+      const _a = props, {
+        token,
+        color: color2,
+        align: align2,
+        noWrap: noWrap2,
+        textTransform: textTransform2,
+        textDecoration: textDecoration2
+      } = _a, rest2 = __objRest(_a, [
+        "token",
+        "color",
+        "align",
+        "noWrap",
+        "textTransform",
+        "textDecoration"
+      ]);
+      const style = __spreadValues(__spreadValues(__spreadValues({}, nativeTokenToStyle(token)), color2 ? { color: color2 } : {}), getCommonStyles(align2, textTransform2, textDecoration2));
+      return /* @__PURE__ */ jsx(
+        StyledText,
+        __spreadValues({
+          ref,
+          style,
+          numberOfLines: noWrap2 ? 1 : void 0,
+          ellipsizeMode: noWrap2 ? "tail" : void 0
+        }, rest2)
+      );
+    }
+    const _b = props, {
+      variant = "body",
+      size,
+      weight = "medium",
+      color = "primary",
+      align,
+      noWrap,
+      textTransform,
+      textDecoration
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "size",
+      "weight",
+      "color",
+      "align",
+      "noWrap",
+      "textTransform",
+      "textDecoration"
+    ]);
+    const resolvedSize = size != null ? size : VARIANT_DEFAULTS[variant].size;
+    const commonStyles = getCommonStyles(align, textTransform, textDecoration);
+    const getSemanticColor = (colorKey) => ({
+      color: colour.text[colorKey]
+    });
+    let textStyle = {};
+    if (variant === "body") {
+      textStyle = __spreadValues(__spreadValues(__spreadValues({}, semanticToStyle(typography.body[weight][resolvedSize])), getSemanticColor(color)), commonStyles);
+    } else if (variant === "heading") {
+      const headingSize = resolvedSize;
+      const tokenSet = typography.heading.mobile[headingSize];
+      textStyle = __spreadValues(__spreadValues(__spreadValues({}, semanticToStyle(tokenSet)), getSemanticColor(color)), commonStyles);
+    } else if (variant === "display") {
+      const displaySize = resolvedSize;
+      const tokenSet = typography.heading.display.mobile[displaySize];
+      textStyle = __spreadValues(__spreadValues(__spreadValues({}, semanticToStyle(tokenSet)), getSemanticColor(color)), commonStyles);
+    }
+    return /* @__PURE__ */ jsx(
+      StyledText,
+      __spreadValues({
+        ref,
+        style: textStyle,
+        numberOfLines: noWrap ? 1 : void 0,
+        ellipsizeMode: noWrap ? "tail" : void 0
+      }, rest)
+    );
+  }
+);
+Typography.displayName = "Typography";
+var SIZE_MAP = {
+  sm: "small",
+  md: "medium",
+  lg: "large"
+};
+var parseTokenValue2 = (value) => parseFloat(value);
+var StyledRoot = styled25(AvatarPrimitive.Root)(({ theme: theme2, size, border }) => {
+  const { avatar } = theme2.tokens.components;
+  const { borderRadius } = theme2.tokens.semantics.dimensions;
+  const tokenSize = SIZE_MAP[size];
+  const avatarSize = parseTokenValue2(avatar.size[tokenSize]);
+  return __spreadValues({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: parseTokenValue2(borderRadius.round),
+    width: avatarSize,
+    height: avatarSize
+  }, border !== "none" && {
+    borderWidth: parseTokenValue2(
+      avatar.borderWidth[border === "sm" ? "small" : "medium"]
+    ),
+    borderColor: avatar.colour.border.default,
+    borderStyle: "solid"
+  });
+});
+var StyledImage = styled25(AvatarPrimitive.Image)({
+  width: "100%",
+  height: "100%",
+  resizeMode: "cover"
+});
+var StyledFallback = styled25(AvatarPrimitive.Fallback)(({ theme: theme2 }) => {
+  const { background, text } = theme2.tokens.semantics.colour;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+    backgroundColor: background.container.disabled,
+    color: text.disabled
+  };
+});
+var AVATAR_TO_BODY_SIZE = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+};
+var AvatarRoot = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      src,
+      alt,
+      size = "md",
+      border = "none",
+      fallbackType,
+      fallbackString
+    } = _b, rest = __objRest(_b, [
+      "src",
+      "alt",
+      "size",
+      "border",
+      "fallbackType",
+      "fallbackString"
+    ]);
+    const effectiveFallbackType = fallbackType != null ? fallbackType : fallbackString ? "string" : "image";
+    const showStringFallback = effectiveFallbackType === "string" && fallbackString;
+    return /* @__PURE__ */ jsxs(StyledRoot, __spreadProps(__spreadValues({ ref, alt, size, border }, rest), { children: [
+      src && /* @__PURE__ */ jsx(StyledImage, { source: { uri: src } }),
+      /* @__PURE__ */ jsx(StyledFallback, { children: showStringFallback ? /* @__PURE__ */ jsx(
+        Typography,
+        {
+          size: AVATAR_TO_BODY_SIZE[size],
+          weight: "bold",
+          color: "disabled",
+          children: fallbackString
+        }
+      ) : (
+        // TODO: replace with the Icon when available
+        /* @__PURE__ */ jsx(Typography, { size: AVATAR_TO_BODY_SIZE[size], color: "disabled", children: "\u{1F464}" })
+      ) })
+    ] }));
+  }
+);
+AvatarRoot.displayName = "Avatar";
+var Avatar = AvatarRoot;
+var parseTokenValue3 = (value) => parseFloat(value);
+var StyledIconRoot = styled25(View)(({ iconDimension }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: iconDimension,
+  height: iconDimension
+}));
+var Icon = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      icon: IconComponent,
+      size = "md",
+      colour = "primary",
+      "aria-label": ariaLabel
+    } = _b, rest = __objRest(_b, [
+      "icon",
+      "size",
+      "colour",
+      "aria-label"
+    ]);
+    const theme2 = useTheme();
+    const category = IconComponent.category || "core";
+    const iconTokens = theme2.tokens.semantics.colour.icon;
+    let color;
+    if (colour === "action-default") {
+      color = iconTokens.action.default;
+    } else if (colour === "action-inverse") {
+      color = iconTokens.action.inverse;
+    } else {
+      color = iconTokens[colour];
+    }
+    const sizing = theme2.tokens.components.icons.sizing.icons;
+    const categorySizing = sizing[category];
+    const dimension = parseTokenValue3(categorySizing[size]);
+    return /* @__PURE__ */ jsx(
+      StyledIconRoot,
+      __spreadProps(__spreadValues({
+        ref,
+        iconDimension: dimension,
+        accessibilityRole: ariaLabel ? "image" : void 0,
+        accessibilityLabel: ariaLabel,
+        accessible: !!ariaLabel
+      }, rest), {
+        children: /* @__PURE__ */ jsx(IconComponent, { width: dimension, height: dimension, color })
+      })
+    );
+  }
+);
+Icon.displayName = "Icon";
+var parseTokenValue4 = (value) => parseFloat(value);
+var StyledBadge = styled25(View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
+  const { sizing, spacing, colour, primary, pinnedBadge } = theme2.tokens.components.badges.badge;
+  const backgroundColorMap = {
+    primary: colour.background.default,
+    promo: colour.background.promo,
+    success: colour.background.success,
+    warning: colour.background.warning,
+    error: colour.background.error
+  };
+  const borderRadiusStyles = pinned ? {
+    borderTopLeftRadius: parseTokenValue4(
+      pinnedBadge.borderRadius.leftRadius
+    ),
+    borderBottomLeftRadius: parseTokenValue4(
+      pinnedBadge.borderRadius.leftRadius
+    ),
+    borderTopRightRadius: parseTokenValue4(
+      pinnedBadge.borderRadius.rightRadius
+    ),
+    borderBottomRightRadius: parseTokenValue4(
+      pinnedBadge.borderRadius.rightRadius
+    )
+  } : {
+    borderRadius: parseTokenValue4(primary.borderRadius.default)
+  };
+  const positionStyles = pinned ? __spreadValues(__spreadValues({
+    position: "absolute",
+    left: 0
+  }, top !== void 0 && { top }), bottom !== void 0 && { bottom }) : {};
+  return __spreadValues(__spreadValues({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: parseTokenValue4(sizing[badgeSize].height),
+    minWidth: parseTokenValue4(sizing[badgeSize].minWidth),
+    paddingHorizontal: parseTokenValue4(spacing[badgeSize].horizontalPadding),
+    gap: parseTokenValue4(spacing[badgeSize].gap),
+    backgroundColor: backgroundColorMap[badgeVariant]
+  }, borderRadiusStyles), positionStyles);
+});
+var Badge = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "primary",
+      size = "medium",
+      pinned = false,
+      icon,
+      children,
+      top,
+      bottom
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "size",
+      "pinned",
+      "icon",
+      "children",
+      "top",
+      "bottom"
+    ]);
+    const theme2 = useTheme();
+    const { typography, colour } = theme2.tokens.components.badges.badge;
+    const iconSizeMap = {
+      small: "xs",
+      medium: "xs",
+      large: "sm"
+    };
+    const iconColourMap = {
+      primary: "primary",
+      promo: "promo",
+      success: "alt",
+      warning: "alt",
+      error: "alt"
+    };
+    const textColorMap = {
+      primary: colour.text.primary,
+      promo: colour.text.promo,
+      success: colour.text.default,
+      warning: colour.text.default,
+      error: colour.text.default
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledBadge,
+      __spreadProps(__spreadValues({
+        ref,
+        badgeVariant: variant,
+        badgeSize: size,
+        pinned,
+        top,
+        bottom
+      }, rest), {
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon,
+              size: iconSizeMap[size],
+              colour: iconColourMap[variant]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: typography[size].default,
+              color: textColorMap[variant],
+              children
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Badge.displayName = "Badge";
+var parseTokenValue5 = (value) => parseFloat(value);
+var StyledSpinner = styled25(View)({});
+var Spinner = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
+    const theme2 = useTheme();
+    const spinAnim = useRef(new Animated.Value(0)).current;
+    const { size: sizeTokens, colour } = theme2.tokens.components.spinner;
+    const borderWidth = parseTokenValue5(
+      theme2.tokens.semantics.dimensions.borderWidth.md
+    );
+    const baseColor = colour.background.base[variant];
+    const progressColor = colour.background.progress[variant];
+    const dimension = parseTokenValue5(sizeTokens[size]);
+    useEffect(() => {
+      const animation = Animated.loop(
+        Animated.timing(spinAnim, {
+          toValue: 1,
+          duration: 600,
+          easing: Easing.linear,
+          useNativeDriver: true
+        })
+      );
+      animation.start();
+      return () => animation.stop();
+    }, [spinAnim]);
+    const spin = spinAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0deg", "360deg"]
+    });
+    return /* @__PURE__ */ jsx(StyledSpinner, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        accessibilityRole: "progressbar",
+        accessibilityLabel: "Loading",
+        style: [
+          {
+            width: dimension,
+            height: dimension,
+            borderRadius: dimension / 2,
+            borderWidth,
+            borderColor: baseColor,
+            borderTopColor: progressColor,
+            transform: [{ rotate: spin }]
+          },
+          style
+        ]
+      }
+    ) }));
+  }
+);
+Spinner.displayName = "Spinner";
+var parseTokenValue6 = (value) => parseFloat(value);
+var sizeToTypographyKey = {
+  lg: "large",
+  md: "medium",
+  sm: "small"
+};
+var IconWrapper = styled25(View)({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var StyledButton = styled25(Pressable)(
+  ({
+    buttonHeight,
+    buttonMinWidth,
+    buttonPaddingHorizontal,
+    buttonPaddingVertical,
+    buttonGap,
+    buttonBorderRadius,
+    buttonBgColor,
+    buttonOpacity,
+    buttonBorderWidth,
+    buttonBorderColor,
+    buttonFullWidth
+  }) => __spreadValues(__spreadValues({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    height: buttonHeight,
+    minWidth: buttonMinWidth,
+    paddingHorizontal: buttonPaddingHorizontal,
+    paddingVertical: buttonPaddingVertical,
+    gap: buttonGap,
+    borderRadius: buttonBorderRadius,
+    backgroundColor: buttonBgColor,
+    opacity: buttonOpacity
+  }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
+);
+var StyledTextWrapper = styled25(View)(({ textOpacity }) => ({
+  opacity: textOpacity
+}));
+var StyledSpinnerWrapper = styled25(View)({
+  position: "absolute",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var Button = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "filled",
+      size = "md",
+      colour = "primary",
+      loading = false,
+      fullWidth = false,
+      startIcon,
+      endIcon,
+      children,
+      disabled
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "size",
+      "colour",
+      "loading",
+      "fullWidth",
+      "startIcon",
+      "endIcon",
+      "children",
+      "disabled"
+    ]);
+    const theme2 = useTheme();
+    const isDisabled = disabled || loading;
+    const buttons = theme2.tokens.components.buttons;
+    const sizeTokens = buttons.size[size];
+    const spacingTokens = buttons.spacing[size];
+    const typographyKey = sizeToTypographyKey[size];
+    const typography = buttons.text[typographyKey];
+    resolveFont(typography.fontFamily, typography.fontWeight);
+    const [pressed, setPressed] = React26.useState(false);
+    const getVariantStyles = (isPressed) => {
+      if (variant === "filled") {
+        const bgTokens = buttons.filledButton.colour.background[colour];
+        const textToken = buttons.filledButton.colour.text[colour].default;
+        return {
+          backgroundColor: isDisabled ? bgTokens.disabled : isPressed ? bgTokens.selected : bgTokens.default,
+          textColor: textToken,
+          spinnerColor: textToken
+        };
+      }
+      if (variant === "outlined") {
+        const outline = buttons.outlineButton;
+        return {
+          backgroundColor: loading || isPressed ? outline.colour.background.selected : "transparent",
+          borderWidth: parseTokenValue6(outline.border.default),
+          borderColor: outline.colour.border.default,
+          textColor: loading || isPressed ? outline.colour.text.selected : outline.colour.text.default,
+          spinnerColor: outline.colour.text.selected
+        };
+      }
+      const text = buttons.textButton;
+      return {
+        backgroundColor: loading || isPressed ? text.background.selected : "transparent",
+        textColor: loading || isPressed ? text.text.selected : text.text.default,
+        spinnerColor: text.text.selected
+      };
+    };
+    const variantStyles = getVariantStyles(pressed);
+    return /* @__PURE__ */ jsxs(
+      StyledButton,
+      __spreadProps(__spreadValues({
+        ref,
+        disabled: isDisabled,
+        accessibilityState: { disabled: isDisabled, busy: loading },
+        onPressIn: () => setPressed(true),
+        onPressOut: () => setPressed(false),
+        buttonHeight: parseTokenValue6(sizeTokens.height),
+        buttonMinWidth: parseTokenValue6(sizeTokens.minWidth),
+        buttonPaddingHorizontal: parseTokenValue6(
+          spacingTokens.horizontalPadding
+        ),
+        buttonPaddingVertical: parseTokenValue6(spacingTokens.verticalPadding),
+        buttonGap: parseTokenValue6(spacingTokens.gap),
+        buttonBorderRadius: parseTokenValue6(buttons.borderRadius.default),
+        buttonBgColor: variantStyles.backgroundColor,
+        buttonOpacity: isDisabled && !loading ? parseFloat(buttons.opacity.disabled) : 1,
+        buttonBorderWidth: variantStyles.borderWidth,
+        buttonBorderColor: variantStyles.borderColor,
+        buttonFullWidth: fullWidth
+      }, rest), {
+        children: [
+          startIcon && /* @__PURE__ */ jsx(IconWrapper, { children: startIcon }),
+          /* @__PURE__ */ jsx(StyledTextWrapper, { textOpacity: loading ? 0 : 1, children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: {
+                fontFamily: typography.fontFamily,
+                fontWeight: typography.fontWeight,
+                fontSize: typography.fontSize,
+                lineHeight: typography.fontSize,
+                letterSpacing: typography.letterSpacing
+              },
+              color: variantStyles.textColor,
+              children
+            }
+          ) }),
+          endIcon && /* @__PURE__ */ jsx(IconWrapper, { children: endIcon }),
+          loading && /* @__PURE__ */ jsx(StyledSpinnerWrapper, { children: /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              size,
+              style: {
+                borderColor: "transparent",
+                borderTopColor: variantStyles.spinnerColor
+              }
+            }
+          ) })
+        ]
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+var parseTokenValue7 = (value) => parseFloat(value);
+var StyledHint = styled25(View)(({
+  theme: theme2,
+  hintVariant
+}) => {
+  const {
+    badge,
+    hint: {
+      colour: { background }
+    }
+  } = theme2.tokens.components.badges;
+  const hintVariantMap = {
+    default: background.default,
+    success: background.success,
+    warning: background.warning,
+    error: background.error
+  };
+  const size = parseTokenValue7(badge.hint.sizing.default);
+  return {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    backgroundColor: hintVariantMap[hintVariant]
+  };
+});
+var Hint = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { variant = "default" } = _b, rest = __objRest(_b, ["variant"]);
+    return /* @__PURE__ */ jsx(StyledHint, __spreadValues({ ref, hintVariant: variant }, rest));
+  }
+);
+Hint.displayName = "Hint";
+var parseTokenValue8 = (value) => parseFloat(value);
+var sizeToIconSizeToken = {
+  lg: "xl",
+  md: "lg",
+  sm: "md"
+};
+var StyledIconButton = styled25(Pressable)(
+  ({
+    buttonDimension,
+    buttonBorderRadius,
+    buttonBgColor,
+    buttonOpacity,
+    buttonBorderWidth,
+    buttonBorderColor
+  }) => __spreadValues({
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    width: buttonDimension,
+    height: buttonDimension,
+    borderRadius: buttonBorderRadius,
+    backgroundColor: buttonBgColor,
+    opacity: buttonOpacity
+  }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {})
+);
+var StyledIconWrapper = styled25(View)(({ iconDimension, iconOpacity }) => ({
+  width: iconDimension,
+  height: iconDimension,
+  opacity: iconOpacity
+}));
+var StyledSpinnerWrapper2 = styled25(View)({
+  position: "absolute",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var IconButton = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      icon: IconComponent,
+      variant = "filled",
+      size = "md",
+      colour = "primary",
+      loading = false,
+      disabled,
+      "aria-label": ariaLabel
+    } = _b, rest = __objRest(_b, [
+      "icon",
+      "variant",
+      "size",
+      "colour",
+      "loading",
+      "disabled",
+      "aria-label"
+    ]);
+    const theme2 = useTheme();
+    const isDisabled = disabled || loading;
+    const buttons = theme2.tokens.components.buttons;
+    const sizeTokens = buttons.size[size];
+    const dimension = parseTokenValue8(sizeTokens.height);
+    const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
+    const iconDimension = parseTokenValue8(iconSizing[sizeToIconSizeToken[size]]);
+    const [pressed, setPressed] = React26.useState(false);
+    const getVariantStyles = (isPressed) => {
+      if (variant === "filled") {
+        const filled = buttons.iconButton.filledButton;
+        const bgTokens = filled.colour.background[colour];
+        const iconTokens = filled.colour.icon[colour];
+        const hasStatefulIconColor = "hover" in iconTokens;
+        return {
+          backgroundColor: isDisabled ? bgTokens.disabled : loading || isPressed ? bgTokens.selected : bgTokens.default,
+          iconColor: (loading || isPressed) && hasStatefulIconColor ? iconTokens.selected : iconTokens.default
+        };
+      }
+      if (variant === "outlined") {
+        const outline = buttons.iconButton.outlineButton;
+        return {
+          backgroundColor: loading || isPressed ? outline.colour.background.selected : "transparent",
+          borderWidth: parseTokenValue8(outline.border.default),
+          borderColor: outline.colour.border.default,
+          iconColor: loading || isPressed ? outline.colour.icon.selected : outline.colour.icon.default
+        };
+      }
+      const text = buttons.iconButton.textButton;
+      return {
+        backgroundColor: loading || isPressed ? text.background.selected : "transparent",
+        iconColor: loading || isPressed ? text.icon.selected : text.icon.default
+      };
+    };
+    const variantStyles = getVariantStyles(pressed);
+    return /* @__PURE__ */ jsxs(
+      StyledIconButton,
+      __spreadProps(__spreadValues({
+        ref,
+        disabled: isDisabled,
+        accessibilityLabel: ariaLabel,
+        accessibilityState: { disabled: isDisabled, busy: loading },
+        onPressIn: () => setPressed(true),
+        onPressOut: () => setPressed(false),
+        buttonDimension: dimension,
+        buttonBorderRadius: parseTokenValue8(buttons.borderRadius.default),
+        buttonBgColor: variantStyles.backgroundColor,
+        buttonOpacity: isDisabled && !loading ? parseFloat(buttons.opacity.disabled) : 1,
+        buttonBorderWidth: variantStyles.borderWidth,
+        buttonBorderColor: variantStyles.borderColor
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledIconWrapper,
+            {
+              iconDimension,
+              iconOpacity: loading ? 0 : 1,
+              children: /* @__PURE__ */ jsx(
+                IconComponent,
+                {
+                  width: iconDimension,
+                  height: iconDimension,
+                  color: variantStyles.iconColor
+                }
+              )
+            }
+          ),
+          loading && /* @__PURE__ */ jsx(StyledSpinnerWrapper2, { children: /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              size,
+              style: {
+                borderColor: "transparent",
+                borderTopColor: "currentColor"
+              }
+            }
+          ) })
+        ]
+      })
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var parseTokenValue9 = (value) => parseFloat(value);
+var StyledRoot2 = styled25(View)(({ illustrationHeight }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  height: illustrationHeight
+}));
+var Illustration = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      illustration: IllustrationComponent,
+      size = "sm",
+      "aria-label": ariaLabel
+    } = _b, rest = __objRest(_b, [
+      "illustration",
+      "size",
+      "aria-label"
+    ]);
+    const theme2 = useTheme();
+    const dimension = parseTokenValue9(
+      theme2.tokens.components.illustrations.sizing.illustrations[size]
+    );
+    return /* @__PURE__ */ jsx(
+      StyledRoot2,
+      __spreadProps(__spreadValues({
+        ref,
+        illustrationHeight: dimension,
+        accessibilityRole: ariaLabel ? "image" : void 0,
+        accessibilityLabel: ariaLabel,
+        accessible: !!ariaLabel
+      }, rest), {
+        children: /* @__PURE__ */ jsx(IllustrationComponent, { height: dimension })
+      })
+    );
+  }
+);
+Illustration.displayName = "Illustration";
+var parseTokenValue10 = (value) => parseFloat(value);
+var StyledLabelRow = styled25(View)(({ labelGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: labelGap
+}));
+var InputLabel = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { optionalText, state = "default", children } = _b, rest = __objRest(_b, ["optionalText", "state", "children"]);
+    const theme2 = useTheme();
+    const { colour, text, spacing } = theme2.tokens.components.inputs;
+    return /* @__PURE__ */ jsxs(
+      StyledLabelRow,
+      __spreadProps(__spreadValues({
+        ref,
+        labelGap: parseTokenValue10(spacing.label.gap)
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: text.label,
+              color: state === "error" ? colour.label.error : colour.label.default,
+              children
+            }
+          ),
+          optionalText && /* @__PURE__ */ jsx(Typography, { token: text.optional, color: colour.label.optional, children: optionalText })
+        ]
+      })
+    );
+  }
+);
+InputLabel.displayName = "Input.Label";
+var parseTokenValue11 = (value) => parseFloat(value);
+var StyledInputWrapper = styled25(View)(
+  ({
+    wrapperGap,
+    wrapperMinWidth,
+    wrapperHeight,
+    wrapperPaddingVertical,
+    wrapperPaddingHorizontal,
+    wrapperBgColor,
+    wrapperBorderWidth,
+    wrapperBorderColor,
+    wrapperBorderRadius
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: wrapperGap,
+    minWidth: wrapperMinWidth,
+    width: "100%",
+    height: wrapperHeight,
+    paddingVertical: wrapperPaddingVertical,
+    paddingHorizontal: wrapperPaddingHorizontal,
+    backgroundColor: wrapperBgColor,
+    borderWidth: wrapperBorderWidth,
+    borderColor: wrapperBorderColor,
+    borderRadius: wrapperBorderRadius
+  })
+);
+var StyledInput = styled25(TextInput)(({ inputColor }) => ({
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  padding: 0,
+  color: inputColor
+}));
+var StyledIconSlot = styled25(View)({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var InputField = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { leadingIcon, trailingIcon, state = "default", style } = _b, rest = __objRest(_b, ["leadingIcon", "trailingIcon", "state", "style"]);
+    const theme2 = useTheme();
+    const { spacing, colour, borderWidth, borderRadius, size } = theme2.tokens.components.inputs;
+    const stateBorderColorMap = {
+      error: colour.field.border.error,
+      success: colour.field.border.success,
+      default: colour.field.border.default
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledInputWrapper,
+      {
+        wrapperGap: parseTokenValue11(spacing.field.gap),
+        wrapperMinWidth: parseTokenValue11(size.field.minWidth),
+        wrapperHeight: parseTokenValue11(size.field.height),
+        wrapperPaddingVertical: parseTokenValue11(spacing.field.verticalPadding),
+        wrapperPaddingHorizontal: parseTokenValue11(
+          spacing.field.horizontalPadding
+        ),
+        wrapperBgColor: colour.field.background.default,
+        wrapperBorderWidth: parseTokenValue11(borderWidth.field.default),
+        wrapperBorderColor: stateBorderColorMap[state],
+        wrapperBorderRadius: parseTokenValue11(borderRadius.field.default),
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx(StyledIconSlot, { children: leadingIcon }),
+          /* @__PURE__ */ jsx(
+            StyledInput,
+            __spreadValues({
+              ref,
+              inputColor: colour.field.text.default,
+              style,
+              placeholderTextColor: colour.field.text.placeholder
+            }, rest)
+          ),
+          trailingIcon && /* @__PURE__ */ jsx(StyledIconSlot, { children: trailingIcon })
+        ]
+      }
+    );
+  }
+);
+InputField.displayName = "Input.Field";
+var StyledDescriptionRow = styled25(View)({
+  flexDirection: "row",
+  alignItems: "center"
+});
+var InputDescription = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { state = "default", children } = _b, rest = __objRest(_b, ["state", "children"]);
+    const theme2 = useTheme();
+    const { colour, description } = theme2.tokens.components.inputs;
+    return /* @__PURE__ */ jsx(StyledDescriptionRow, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        token: description.text.default,
+        color: state === "error" ? colour.description.error : colour.description.default,
+        children
+      }
+    ) }));
+  }
+);
+InputDescription.displayName = "Input.Description";
+var StyledErrorRow = styled25(View)({
+  flexDirection: "row",
+  alignItems: "center"
+});
+var InputError = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+    const theme2 = useTheme();
+    const { colour, description } = theme2.tokens.components.inputs;
+    return /* @__PURE__ */ jsx(StyledErrorRow, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        token: description.text.default,
+        color: colour.description.error,
+        children
+      }
+    ) }));
+  }
+);
+InputError.displayName = "Input.Error";
+var parseTokenValue12 = (value) => parseFloat(value);
+var StyledRoot3 = styled25(View)(({ theme: theme2 }) => {
+  const { spacing } = theme2.tokens.components.inputs;
+  return {
+    gap: parseTokenValue12(spacing.gap)
+  };
+});
+var InputRoot = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      children
+    } = _b, inputFieldProps = __objRest(_b, [
+      "label",
+      "description",
+      "error",
+      "state",
+      "optionalText",
+      "children"
+    ]);
+    if (children) {
+      return /* @__PURE__ */ jsx(StyledRoot3, { ref, children });
+    }
+    return /* @__PURE__ */ jsxs(StyledRoot3, { ref, children: [
+      label && /* @__PURE__ */ jsx(InputLabel, { optionalText, state, children: label }),
+      /* @__PURE__ */ jsx(InputField, __spreadValues({ state }, inputFieldProps)),
+      description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
+      error && state === "error" && /* @__PURE__ */ jsx(InputError, { children: error })
+    ] });
+  }
+);
+InputRoot.displayName = "Input";
+var Input = Object.assign(InputRoot, {
+  Root: StyledRoot3,
+  Label: InputLabel,
+  Field: InputField,
+  Description: InputDescription,
+  Error: InputError
+});
+var Link = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "md",
+      weight = "semiBold",
+      standalone = false,
+      disabled = false,
+      href,
+      children,
+      onPress,
+      style
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "weight",
+      "standalone",
+      "disabled",
+      "href",
+      "children",
+      "onPress",
+      "style"
+    ]);
+    const theme2 = useTheme();
+    const { typography, colour } = theme2.tokens.semantics;
+    const linkColour = colour.text.link;
+    const handlePress = (e) => {
+      if (onPress) {
+        onPress(e);
+      } else if (href) {
+        Linking.openURL(href);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      __spreadProps(__spreadValues({
+        ref,
+        disabled,
+        onPress: handlePress,
+        accessibilityRole: "link",
+        accessibilityState: { disabled },
+        style: ({ pressed }) => {
+          const baseStyle = __spreadProps(__spreadValues({}, standalone && {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 4
+          }), {
+            opacity: disabled ? 0.5 : 1
+          });
+          return [
+            baseStyle,
+            typeof style === "function" ? style({ pressed }) : style
+          ];
+        }
+      }, rest), {
+        children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: typography.link[weight][size],
+              color: pressed ? linkColour.hover : linkColour.default,
+              textDecoration: standalone ? "none" : "underline",
+              children
+            }
+          ),
+          standalone && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: typography.link[weight][size],
+              color: pressed ? linkColour.hover : linkColour.default,
+              children: " \u2192"
+            }
+          )
+        ] })
+      })
+    );
+  }
+);
+Link.displayName = "Link";
+
+// src/components/atoms/Logo/Logo.registry.ts
+var LOGOS = {
+  butternut: {},
+  psibufet: {},
+  bcorp: {}
+};
+function resolveLogo(brand, variant) {
+  var _a;
+  return (_a = LOGOS[brand]) == null ? void 0 : _a[variant];
+}
+function registerLogo(brand, variant, component) {
+  if (!LOGOS[brand]) {
+    LOGOS[brand] = {};
+  }
+  LOGOS[brand][variant] = component;
+}
+var StyledRoot4 = styled25(View)({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var Logo = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { brand, variant = "primary", "aria-label": ariaLabel } = _b, rest = __objRest(_b, ["brand", "variant", "aria-label"]);
+    const effectiveVariant = brand === "bcorp" ? "primary" : variant;
+    const LogoComponent = resolveLogo(brand, effectiveVariant);
+    if (!LogoComponent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      StyledRoot4,
+      __spreadProps(__spreadValues({
+        ref,
+        accessibilityRole: ariaLabel ? "image" : void 0,
+        accessibilityLabel: ariaLabel,
+        accessible: !!ariaLabel
+      }, rest), {
+        children: /* @__PURE__ */ jsx(LogoComponent, {})
+      })
+    );
+  }
+);
+Logo.displayName = "Logo";
+var parseTokenValue13 = (value) => parseFloat(value);
+var StyledContainer = styled25(View)(({ switchGap, switchOpacity }) => ({
+  flexDirection: "row",
+  alignItems: "flex-start",
+  gap: switchGap,
+  opacity: switchOpacity
+}));
+var StyledControl = styled25(SwitchPrimitive.Root)(
+  ({
+    switchChecked,
+    controlWidth,
+    controlHeight,
+    controlBorderWidth,
+    controlBorderColor,
+    controlBgChecked,
+    controlBgDefault
+  }) => ({
+    position: "relative",
+    width: controlWidth,
+    height: controlHeight,
+    minWidth: controlWidth,
+    minHeight: controlHeight,
+    borderRadius: controlHeight,
+    borderWidth: switchChecked ? 0 : controlBorderWidth,
+    borderColor: switchChecked ? "transparent" : controlBorderColor,
+    backgroundColor: switchChecked ? controlBgChecked : controlBgDefault,
+    justifyContent: "center"
+  })
+);
+var StyledThumb = styled25(Animated.View)(({ thumbSize, thumbBgColor }) => ({
+  width: thumbSize,
+  height: thumbSize,
+  borderRadius: thumbSize / 2,
+  backgroundColor: thumbBgColor,
+  position: "absolute"
+}));
+var StyledContent = styled25(View)(({ contentGap }) => ({
+  gap: contentGap
+}));
+var Switch = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      subText,
+      disabled = false,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange
+    } = _b, rest = __objRest(_b, [
+      "label",
+      "subText",
+      "disabled",
+      "checked",
+      "defaultChecked",
+      "onCheckedChange"
+    ]);
+    const theme2 = useTheme();
+    const { size, colour, opacity, borderWidth, spacing, typography } = theme2.tokens.components.switch;
+    const isControlled = controlledChecked !== void 0;
+    const [internalChecked, setInternalChecked] = React26.useState(defaultChecked);
+    const isChecked = isControlled ? controlledChecked : internalChecked;
+    const controlWidth = parseTokenValue13(size.control.width);
+    const controlHeight = parseTokenValue13(size.control.height);
+    const thumbSize = parseTokenValue13(size.thumb.default);
+    const borderWidthValue = parseTokenValue13(borderWidth.control.default);
+    const outerInset = 5;
+    const inset = outerInset - borderWidthValue;
+    const translateX = controlWidth - thumbSize - outerInset * 2;
+    const animValue = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
+    useEffect(() => {
+      Animated.timing(animValue, {
+        toValue: isChecked ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true
+      }).start();
+    }, [isChecked, animValue]);
+    const thumbTranslateX = animValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [inset, inset + translateX]
+    });
+    const handleCheckedChange = (checked) => {
+      if (!isControlled) {
+        setInternalChecked(checked);
+      }
+      onCheckedChange == null ? void 0 : onCheckedChange(checked);
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledContainer,
+      __spreadProps(__spreadValues({
+        ref,
+        switchGap: parseTokenValue13(spacing.gap),
+        switchOpacity: disabled ? parseFloat(opacity.disabled) : 1
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledControl,
+            {
+              checked: isChecked,
+              onCheckedChange: handleCheckedChange,
+              disabled,
+              switchChecked: isChecked,
+              controlWidth,
+              controlHeight,
+              controlBorderWidth: borderWidthValue,
+              controlBorderColor: colour.control.border.default,
+              controlBgChecked: colour.control.background.selected,
+              controlBgDefault: colour.control.background.default,
+              children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { asChild: true, children: /* @__PURE__ */ jsx(
+                StyledThumb,
+                {
+                  thumbSize,
+                  thumbBgColor: isChecked ? colour.thumb.background.selected : colour.thumb.background.default,
+                  style: { transform: [{ translateX: thumbTranslateX }] }
+                }
+              ) })
+            }
+          ),
+          (label || subText) && /* @__PURE__ */ jsxs(StyledContent, { contentGap: parseTokenValue13(spacing.content.gap), children: [
+            label && /* @__PURE__ */ jsx(Typography, { token: typography.label, color: colour.text.title, children: label }),
+            subText && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                token: typography.subText,
+                color: colour.text.subtext,
+                children: subText
+              }
+            )
+          ] })
+        ]
+      })
+    );
+  }
+);
+Switch.displayName = "Switch";
+var parseTokenValue14 = (value) => parseFloat(value);
+var StyledTag = styled25(View)(({ theme: theme2, tagVariant, tagSize }) => {
+  const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
+  const backgroundColorMap = {
+    primary: colour.primary.background,
+    secondary: colour.primary.secondary,
+    tertiary: colour.primary.tertiery,
+    promo: colour.primary.promo,
+    success: colour.primary.success,
+    warning: colour.primary.warning,
+    error: colour.primary.error
+  };
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: parseTokenValue14(sizing[tagSize].height),
+    minWidth: parseTokenValue14(sizing[tagSize].minWidth),
+    paddingHorizontal: parseTokenValue14(spacing.horizontalPadding),
+    gap: parseTokenValue14(spacing[tagSize].gap),
+    borderRadius: parseTokenValue14(badge.borderRadius.default),
+    backgroundColor: backgroundColorMap[tagVariant]
+  };
+});
+var Tag = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
+    const theme2 = useTheme();
+    const { typography, colour } = theme2.tokens.components.tags;
+    const iconSizeMap = {
+      small: "xs",
+      medium: "xs",
+      large: "sm"
+    };
+    const iconColourMap = {
+      primary: "primary",
+      secondary: "primary",
+      tertiary: "primary",
+      promo: "promo",
+      success: "success",
+      warning: "warning",
+      error: "error"
+    };
+    const textColorMap = {
+      primary: colour.text.default,
+      secondary: colour.text.default,
+      tertiary: colour.text.default,
+      promo: colour.text.promo,
+      success: colour.text.success,
+      warning: colour.text.warning,
+      error: colour.text.error
+    };
+    return /* @__PURE__ */ jsxs(StyledTag, __spreadProps(__spreadValues({ ref, tagVariant: variant, tagSize: size }, rest), { children: [
+      icon && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon,
+          size: iconSizeMap[size],
+          colour: iconColourMap[variant]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          token: typography[size].default,
+          color: textColorMap[variant],
+          children
+        }
+      )
+    ] }));
+  }
+);
+Tag.displayName = "Tag";
+var parseTokenValue15 = (value) => parseFloat(value);
+var StyledDockRoot = styled25(View)(
+  ({
+    dockBgColor,
+    dockBorderTopWidth,
+    dockBorderTopColor,
+    dockPaddingVertical
+  }) => ({
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    backgroundColor: dockBgColor,
+    borderTopWidth: dockBorderTopWidth,
+    borderTopColor: dockBorderTopColor,
+    paddingVertical: dockPaddingVertical
+  })
+);
+var StyledStackedInner = styled25(View)({
+  alignItems: "center",
+  gap: 16,
+  width: "100%",
+  maxWidth: 520
+});
+var StyledButtonGroup = styled25(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
+  flexDirection: groupDirection,
+  alignItems: groupAlign,
+  justifyContent: groupJustify,
+  gap: groupGap,
+  width: "100%"
+}, groupDirection === "column" ? { maxWidth: 520 } : {}));
+var ButtonDock = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
+    const theme2 = useTheme();
+    const { buttonDock, buttonGroup } = theme2.tokens.components;
+    const { dimensions } = theme2.tokens.semantics;
+    const isStacked = variant === "stacked";
+    const groupGap = parseTokenValue15(
+      isStacked ? buttonGroup.spacing.stacked.gap : buttonGroup.spacing.sideBySide.gap
+    );
+    return /* @__PURE__ */ jsx(
+      StyledDockRoot,
+      __spreadProps(__spreadValues({
+        ref,
+        dockBgColor: buttonDock.colour.background,
+        dockBorderTopWidth: parseTokenValue15(dimensions.borderWidth.sm),
+        dockBorderTopColor: buttonDock.colour.border,
+        dockPaddingVertical: parseTokenValue15(
+          buttonDock.spacing[variant].desktop.verticalPadding
+        )
+      }, rest), {
+        children: isStacked ? /* @__PURE__ */ jsxs(StyledStackedInner, { children: [
+          leadingContent,
+          /* @__PURE__ */ jsx(
+            StyledButtonGroup,
+            {
+              groupDirection: "column",
+              groupAlign: "stretch",
+              groupJustify: "center",
+              groupGap,
+              children
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body",
+              size: "md",
+              weight: "medium",
+              align: "center",
+              children: typeof description === "string" ? description : description
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          StyledButtonGroup,
+          {
+            groupDirection: "row",
+            groupAlign: "center",
+            groupJustify: "space-around",
+            groupGap,
+            children
+          }
+        )
+      })
+    );
+  }
+);
+ButtonDock.displayName = "ButtonDock";
+var parseTokenValue16 = (value) => parseFloat(value);
+var StyledGroupRoot = styled25(View)(({ rootGap }) => ({
+  gap: rootGap,
+  alignItems: "center",
+  width: "100%"
+}));
+var StyledButtonRow = styled25(View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
+  flexDirection: rowDirection,
+  width: "100%",
+  gap: rowGap
+}, rowAlign ? { alignItems: rowAlign } : {}));
+var ButtonGroup = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { layout = "stacked", description, children } = _b, rest = __objRest(_b, ["layout", "description", "children"]);
+    const theme2 = useTheme();
+    const { buttonGroup } = theme2.tokens.components;
+    const isInline = layout === "inline";
+    return /* @__PURE__ */ jsxs(
+      StyledGroupRoot,
+      __spreadProps(__spreadValues({
+        ref,
+        accessibilityRole: "none",
+        rootGap: parseTokenValue16(buttonGroup.spacing.gap)
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledButtonRow,
+            {
+              rowDirection: isInline ? "row-reverse" : "column",
+              rowAlign: isInline ? "center" : void 0,
+              rowGap: parseTokenValue16(
+                isInline ? buttonGroup.spacing.sideBySide.gap : buttonGroup.spacing.stacked.gap
+              ),
+              children
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: buttonGroup.typography.description,
+              color: buttonGroup.colour.text,
+              align: "center",
+              children: description
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+// ../pawprint-icons/dist/chunk-N3ETBM74.js
+var __defProp2 = Object.defineProperty;
+var __defProps2 = Object.defineProperties;
+var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+var Add = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
+var ForwardRef = forwardRef(Add);
+ForwardRef.category = "core";
+var AddCircle = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
+var ForwardRef2 = forwardRef(AddCircle);
+ForwardRef2.category = "core";
+var AddCircleOutline = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1m0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
+var ForwardRef3 = forwardRef(AddCircleOutline);
+ForwardRef3.category = "core";
+var ArrowBack = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1" }) }));
+var ForwardRef4 = forwardRef(ArrowBack);
+ForwardRef4.category = "core";
+var ArrowDownward = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1" }) }));
+var ForwardRef5 = forwardRef(ArrowDownward);
+ForwardRef5.category = "core";
+var ArrowDropDown = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "m8.71 11.71 2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71" }) }));
+var ForwardRef6 = forwardRef(ArrowDropDown);
+ForwardRef6.category = "core";
+var ArrowDropUp = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M8.71 12.29 11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71" }) }));
+var ForwardRef7 = forwardRef(ArrowDropUp);
+ForwardRef7.category = "core";
+var ArrowForward = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42s1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1" }) }));
+var ForwardRef8 = forwardRef(ArrowForward);
+ForwardRef8.category = "core";
+var ArrowLeft = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12.29 8.71 9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" }) }));
+var ForwardRef9 = forwardRef(ArrowLeft);
+ForwardRef9.category = "core";
+var ArrowRight = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "m11.71 15.29 2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" }) }));
+var ForwardRef10 = forwardRef(ArrowRight);
+ForwardRef10.category = "core";
+var ArrowUpward = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41l-6.59-6.59a.996.996 0 0 0-1.41 0l-6.6 6.58a.996.996 0 1 0 1.41 1.41L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1" }) }));
+var ForwardRef11 = forwardRef(ArrowUpward);
+ForwardRef11.category = "core";
+var Autorenew = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 6v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79a.5.5 0 0 0-.85.36V4c-4.42 0-8 3.58-8 8 0 1.04.2 2.04.57 2.95.27.67 1.13.85 1.64.34.27-.27.38-.68.23-1.04C6.15 13.56 6 12.79 6 12c0-3.31 2.69-6 6-6m5.79 2.71c-.27.27-.38.69-.23 1.04.28.7.44 1.46.44 2.25 0 3.31-2.69 6-6 6v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79a.5.5 0 0 0 .85-.35V20c4.42 0 8-3.58 8-8 0-1.04-.2-2.04-.57-2.95-.27-.67-1.13-.85-1.64-.34" }) }));
+var ForwardRef12 = forwardRef(Autorenew);
+ForwardRef12.category = "core";
+var Cancel = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41" }) }));
+var ForwardRef13 = forwardRef(Cancel);
+ForwardRef13.category = "core";
+var Check = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z" }) }));
+var ForwardRef14 = forwardRef(Check);
+ForwardRef14.category = "core";
+var Check_default = ForwardRef14;
+var CheckCircle = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M9.29 16.29 5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0" }) }));
+var ForwardRef15 = forwardRef(CheckCircle);
+ForwardRef15.category = "core";
+var Close = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4" }) }));
+var ForwardRef16 = forwardRef(Close);
+ForwardRef16.category = "core";
+var Delete = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1" }) }));
+var ForwardRef17 = forwardRef(Delete);
+ForwardRef17.category = "core";
+var DoDisturb = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.9 7.9 0 0 1 12 20m6.31-3.1L7.1 5.69A7.9 7.9 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9" }) }));
+var ForwardRef18 = forwardRef(DoDisturb);
+ForwardRef18.category = "core";
+var Edit = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1q-.15.15-.15.36M20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" }) }));
+var ForwardRef19 = forwardRef(Edit);
+ForwardRef19.category = "core";
+var Error2 = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1 4h-2v-2h2z" }) }));
+var ForwardRef20 = forwardRef(Error2);
+ForwardRef20.category = "core";
+var ErrorOutline = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1m-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m1-3h-2v-2h2z" }) }));
+var ForwardRef21 = forwardRef(ErrorOutline);
+ForwardRef21.category = "core";
+var Female = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 6c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6m1 8.91a5.5 5.5 0 0 0 4.5-5.41C17.5 6.46 15.04 4 12 4S6.5 6.46 6.5 9.5a5.5 5.5 0 0 0 4.5 5.41V17h-1c-.55 0-1 .45-1 1s.45 1 1 1h1v1c0 .55.45 1 1 1s1-.45 1-1v-1h1c.55 0 1-.45 1-1s-.45-1-1-1h-1z" }) }));
+var ForwardRef22 = forwardRef(Female);
+ForwardRef22.category = "core";
+var FilterAlt = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M4.25 5.61C6.57 8.59 10 13 10 13v5c0 1.1.9 2 2 2s2-.9 2-2v-5s3.43-4.41 5.75-7.39c.51-.66.04-1.61-.8-1.61H5.04c-.83 0-1.3.95-.79 1.61" }) }));
+var ForwardRef23 = forwardRef(FilterAlt);
+ForwardRef23.category = "core";
+var HelpOutline = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47" }) }));
+var ForwardRef24 = forwardRef(HelpOutline);
+ForwardRef24.category = "core";
+var HighlightOff = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M13.89 8.7 12 10.59 10.11 8.7a.996.996 0 1 0-1.41 1.41L10.59 12 8.7 13.89a.996.996 0 1 0 1.41 1.41L12 13.41l1.89 1.89a.996.996 0 1 0 1.41-1.41L13.41 12l1.89-1.89a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.38-1.41 0M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
+var ForwardRef25 = forwardRef(HighlightOff);
+ForwardRef25.category = "core";
+var Info = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z" }) }));
+var ForwardRef26 = forwardRef(Info);
+ForwardRef26.category = "core";
+var InfoOutline = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M11 7h2v2h-2zm1 10c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1m0-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
+var ForwardRef27 = forwardRef(InfoOutline);
+ForwardRef27.category = "core";
+var KeyboardArrowDown = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M8.12 9.29 12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0" }) }));
+var ForwardRef28 = forwardRef(KeyboardArrowDown);
+ForwardRef28.category = "core";
+var KeyboardArrowLeft = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M14.71 15.88 10.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42" }) }));
+var ForwardRef29 = forwardRef(KeyboardArrowLeft);
+ForwardRef29.category = "core";
+var KeyboardArrowRight = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M9.29 15.88 13.17 12 9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42" }) }));
+var ForwardRef30 = forwardRef(KeyboardArrowRight);
+ForwardRef30.category = "core";
+var KeyboardArrowUp = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M8.12 14.71 12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0" }) }));
+var ForwardRef31 = forwardRef(KeyboardArrowUp);
+ForwardRef31.category = "core";
+var KeyboardDoubleArrowDown = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M6.702 12.282a.996.996 0 0 1 1.41 0l3.88 3.88 3.88-3.87a.996.996 0 0 1 1.41 0c.39.39.39 1.02.01 1.4l-4.59 4.59a.996.996 0 0 1-1.41 0l-4.59-4.59a.996.996 0 0 1 0-1.41m-.01-6.59a.995.995 0 0 1 1.41 0l3.89 3.88 3.88-3.87a.996.996 0 0 1 1.41 0c.39.39.39 1.02 0 1.4l-4.59 4.59a.997.997 0 0 1-1.41 0l-4.59-4.59a.995.995 0 0 1 0-1.41", clipRule: "evenodd" }) }));
+var ForwardRef32 = forwardRef(KeyboardDoubleArrowDown);
+ForwardRef32.category = "core";
+var KeyboardDoubleArrowLeft = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.282 6.692a.996.996 0 1 1 1.41 1.41l-3.88 3.88 3.87 3.88c.39.39.39 1.02 0 1.41a.993.993 0 0 1-1.4.01l-4.59-4.59a.996.996 0 0 1 0-1.41zm6.59 0a.996.996 0 1 1 1.41 1.41l-3.88 3.88 3.87 3.88c.39.39.39 1.02 0 1.41a.993.993 0 0 1-1.4.01l-4.59-4.59a.996.996 0 0 1 0-1.41z", clipRule: "evenodd" }) }));
+var ForwardRef33 = forwardRef(KeyboardDoubleArrowLeft);
+ForwardRef33.category = "core";
+var KeyboardDoubleArrowRight = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M5.692 6.693a1.01 1.01 0 0 1 1.421 0l4.58 4.58c.39.39.39 1.02 0 1.41l-4.59 4.59a.996.996 0 1 1-1.41-1.41l3.88-3.88-3.88-3.88a.997.997 0 0 1 0-1.41m6.591 0c.39-.39 1.03-.39 1.41-.01l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.59a.996.996 0 1 1-1.41-1.41l3.88-3.88-3.88-3.88a.996.996 0 0 1 0-1.41", clipRule: "evenodd" }) }));
+var ForwardRef34 = forwardRef(KeyboardDoubleArrowRight);
+ForwardRef34.category = "core";
+var KeyboardDoubleArrowUp = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M11.282 12.282a.996.996 0 0 1 1.41 0l4.59 4.59a.996.996 0 1 1-1.41 1.41l-3.88-3.88-3.89 3.87a.995.995 0 0 1-1.41 0 .995.995 0 0 1 0-1.41zm0-6.59a.996.996 0 0 1 1.41 0l4.59 4.59a.996.996 0 1 1-1.41 1.41l-3.88-3.88-3.89 3.87a.996.996 0 1 1-1.41-1.41z", clipRule: "evenodd" }) }));
+var ForwardRef35 = forwardRef(KeyboardDoubleArrowUp);
+ForwardRef35.category = "core";
+var Language = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2m6.93 6h-2.95a15.7 15.7 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8M12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96M4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A8 8 0 0 1 5.08 16m2.95-8H5.08a8 8 0 0 1 4.33-3.56A15.7 15.7 0 0 0 8.03 8M12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96M14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2m.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2z" }) }));
+var ForwardRef36 = forwardRef(Language);
+ForwardRef36.category = "core";
+var Lock = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2M9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z" }) }));
+var ForwardRef37 = forwardRef(Lock);
+ForwardRef37.category = "core";
+var Male = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M19 4h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.58l-3.97 3.97C11.73 9.36 10.66 9 9.5 9 6.46 9 4 11.46 4 14.5S6.46 20 9.5 20s5.5-2.46 5.5-5.5c0-1.16-.36-2.23-.97-3.12L18 7.42V9c0 .55.45 1 1 1s1-.45 1-1V5c0-.55-.45-1-1-1M9.5 18C7.57 18 6 16.43 6 14.5S7.57 11 9.5 11s3.5 1.57 3.5 3.5S11.43 18 9.5 18" }) }));
+var ForwardRef38 = forwardRef(Male);
+ForwardRef38.category = "core";
+var Menu = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1" }) }));
+var ForwardRef39 = forwardRef(Menu);
+ForwardRef39.category = "core";
+var MoreHoriz = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" }) }));
+var ForwardRef40 = forwardRef(MoreHoriz);
+ForwardRef40.category = "core";
+var MoreVert = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" }) }));
+var ForwardRef41 = forwardRef(MoreVert);
+ForwardRef41.category = "core";
+var Pause = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2m6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2" }) }));
+var ForwardRef42 = forwardRef(Pause);
+ForwardRef42.category = "core";
+var PlayArrow = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18a1 1 0 0 0 0-1.69L9.54 5.98A.998.998 0 0 0 8 6.82" }) }));
+var ForwardRef43 = forwardRef(PlayArrow);
+ForwardRef43.category = "core";
+var Refresh = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M17.65 6.35a7.95 7.95 0 0 0-6.48-2.31c-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20a7.98 7.98 0 0 0 7.21-4.56c.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53a5.994 5.994 0 0 1-6.8 3.31c-2.22-.49-4.01-2.3-4.48-4.52A6.002 6.002 0 0 1 12 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71z" }) }));
+var ForwardRef44 = forwardRef(Refresh);
+ForwardRef44.category = "core";
+var Remove = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
+var ForwardRef45 = forwardRef(Remove);
+ForwardRef45.category = "core";
+var RemoveCircle = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m4 11H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
+var ForwardRef46 = forwardRef(RemoveCircle);
+ForwardRef46.category = "core";
+var RemoveCircleOutline = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M7 12c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1m5-10C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
+var ForwardRef47 = forwardRef(RemoveCircleOutline);
+ForwardRef47.category = "core";
+var Search = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0s.41-1.08 0-1.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" }) }));
+var ForwardRef48 = forwardRef(Search);
+ForwardRef48.category = "core";
+var Settings = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.3 7.3 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68m-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5" }) }));
+var ForwardRef49 = forwardRef(Settings);
+ForwardRef49.category = "core";
+var StarBorder = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
+var ForwardRef50 = forwardRef(StarBorder);
+ForwardRef50.category = "core";
+var StarHalf = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
+var ForwardRef51 = forwardRef(StarHalf);
+ForwardRef51.category = "core";
+var StarRate = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "m11.957 17.498 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0l-1.89 4.45-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08z" }) }));
+var ForwardRef52 = forwardRef(StarRate);
+ForwardRef52.category = "core";
+var Visibility = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3" }) }));
+var ForwardRef53 = forwardRef(Visibility);
+ForwardRef53.category = "core";
+var VisibilityOff = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24M2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.9 11.9 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0M12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z" }) }));
+var ForwardRef54 = forwardRef(VisibilityOff);
+ForwardRef54.category = "core";
+var VolumeOff = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M3.63 3.63a.996.996 0 0 0 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 1 0 1.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0M19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12m-8.71-6.29-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7M16.5 12A4.5 4.5 0 0 0 14 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24" }) }));
+var ForwardRef55 = forwardRef(VolumeOff);
+ForwardRef55.category = "core";
+var VolumeUp = (props, ref) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1m13.5 2A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02M14 4.45v.2c0 .38.25.71.6.85A7 7 0 0 1 19 12c0 2.94-1.82 5.47-4.4 6.5-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85A8.98 8.98 0 0 0 21 12c0-3.84-2.4-7.11-5.79-8.4-.58-.23-1.21.22-1.21.85" }) }));
+var ForwardRef56 = forwardRef(VolumeUp);
+ForwardRef56.category = "core";
+var parseTokenValue17 = (value) => parseFloat(value);
+var StyledRoot5 = styled25(CheckboxPrimitive.Root)(
+  ({
+    rootFlexAlign,
+    rootGap,
+    rootOpacity,
+    rootPaddingVertical,
+    rootPaddingHorizontal,
+    rootMaxWidth,
+    rootBgColor,
+    rootBorderWidth,
+    rootBorderColor,
+    rootBorderRadius
+  }) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    flexDirection: "row",
+    alignItems: rootFlexAlign,
+    gap: rootGap,
+    opacity: rootOpacity
+  }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
+);
+var StyledControl2 = styled25(View)(
+  ({
+    controlSize,
+    controlBorderWidth,
+    controlBorderColor,
+    controlBorderRadius,
+    controlBgColor
+  }) => ({
+    flexShrink: 0,
+    width: controlSize,
+    height: controlSize,
+    borderWidth: controlBorderWidth,
+    borderColor: controlBorderColor,
+    borderRadius: controlBorderRadius,
+    backgroundColor: controlBgColor,
+    alignItems: "center",
+    justifyContent: "center"
+  })
+);
+var StyledContent2 = styled25(View)(({ contentGap }) => ({
+  flexDirection: "column",
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
+}));
+var StyledIllustration = styled25(View)(({ illustrationSize }) => ({
+  flexShrink: 0,
+  width: illustrationSize,
+  height: illustrationSize,
+  overflow: "hidden"
+}));
+var Checkbox = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "standalone",
+      label,
+      subText,
+      illustration,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled = false,
+      style
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "label",
+      "subText",
+      "illustration",
+      "checked",
+      "defaultChecked",
+      "onCheckedChange",
+      "disabled",
+      "style"
+    ]);
+    const theme2 = useTheme();
+    const { checkbox } = theme2.tokens.components;
+    const { dimensions } = theme2.tokens.semantics;
+    const isControlled = controlledChecked !== void 0;
+    const [internalChecked, setInternalChecked] = React26.useState(defaultChecked);
+    const isChecked = isControlled ? controlledChecked : internalChecked;
+    const handleCheckedChange = (checked) => {
+      if (!isControlled) {
+        setInternalChecked(checked);
+      }
+      onCheckedChange == null ? void 0 : onCheckedChange(checked);
+    };
+    const isTile = variant === "tile";
+    const controlSize = parseTokenValue17(checkbox.size.control.default);
+    return /* @__PURE__ */ jsxs(
+      StyledRoot5,
+      __spreadProps(__spreadValues({
+        ref,
+        checked: isChecked,
+        onCheckedChange: handleCheckedChange,
+        disabled,
+        rootFlexAlign: isTile ? "center" : "flex-start",
+        rootGap: parseTokenValue17(
+          isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
+        ),
+        rootOpacity: disabled ? parseFloat(theme2.tokens.primitives.opacity["40"]) : 1,
+        rootPaddingVertical: isTile ? parseTokenValue17(checkbox.checkboxTile.spacing.verticalPadding) : void 0,
+        rootPaddingHorizontal: isTile ? parseTokenValue17(checkbox.checkboxTile.spacing.horizontalPadding) : void 0,
+        rootMaxWidth: isTile ? parseTokenValue17(checkbox.checkboxTile.size.maxWidth) : void 0,
+        rootBgColor: isTile ? isChecked ? checkbox.checkboxTile.colour.background.selected : checkbox.checkboxTile.colour.background.default : void 0,
+        rootBorderWidth: isTile ? parseTokenValue17(checkbox.checkboxTile.borderWidth.default) : void 0,
+        rootBorderColor: isTile ? isChecked ? checkbox.checkboxTile.colour.border.selected : checkbox.checkboxTile.colour.border.default : void 0,
+        rootBorderRadius: isTile ? parseTokenValue17(checkbox.checkboxTile.borderRadius.default) : void 0,
+        style: typeof style === "function" ? void 0 : style
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledControl2,
+            {
+              controlSize,
+              controlBorderWidth: parseTokenValue17(checkbox.control.border.default),
+              controlBorderColor: isChecked ? checkbox.colour.background.selected : checkbox.colour.border.default,
+              controlBorderRadius: parseTokenValue17(dimensions.borderRadius.xs),
+              controlBgColor: isChecked ? checkbox.colour.background.selected : "transparent",
+              children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx(Icon, { icon: Check_default, size: "xs", colour: "alt" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            StyledContent2,
+            {
+              contentGap: parseTokenValue17(checkbox.spacing.content.gap),
+              children: [
+                label && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: checkbox.typography.label,
+                    color: checkbox.colour.text.title,
+                    children: label
+                  }
+                ),
+                subText && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: checkbox.typography.subText,
+                    color: checkbox.colour.text.subtext,
+                    children: subText
+                  }
+                )
+              ]
+            }
+          ),
+          isTile && illustration && /* @__PURE__ */ jsx(
+            StyledIllustration,
+            {
+              illustrationSize: parseTokenValue17(
+                checkbox.checkboxTile.size.illustration.default
+              ),
+              children: illustration
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var parseTokenValue18 = (value) => parseFloat(value);
+var StyledGroup = styled25(View)(({ groupDirection, groupGap }) => ({
+  flexDirection: groupDirection,
+  gap: groupGap
+}));
+var CheckboxGroup = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
+    const theme2 = useTheme();
+    const { checkbox } = theme2.tokens.components;
+    return /* @__PURE__ */ jsx(
+      StyledGroup,
+      __spreadProps(__spreadValues({
+        ref,
+        groupDirection: orientation === "horizontal" ? "row" : "column",
+        groupGap: parseTokenValue18(checkbox.spacing.gap)
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+var parseTokenValue19 = (value) => parseFloat(value);
+var StyledRadioRoot = styled25(Pressable)(
+  ({
+    radioGap,
+    radioOpacity,
+    radioPaddingVertical,
+    radioPaddingHorizontal,
+    radioMaxWidth,
+    radioBgColor,
+    radioBorderWidth,
+    radioBorderColor,
+    radioBorderRadius
+  }) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    flexDirection: "row",
+    alignItems: "flex-start",
+    width: "100%",
+    gap: radioGap,
+    opacity: radioOpacity
+  }, radioPaddingVertical !== void 0 ? { paddingVertical: radioPaddingVertical } : {}), radioPaddingHorizontal !== void 0 ? { paddingHorizontal: radioPaddingHorizontal } : {}), radioMaxWidth !== void 0 ? { maxWidth: radioMaxWidth } : {}), radioBgColor ? { backgroundColor: radioBgColor } : {}), radioBorderWidth !== void 0 ? { borderWidth: radioBorderWidth, borderColor: radioBorderColor } : {}), radioBorderRadius !== void 0 ? { borderRadius: radioBorderRadius } : {})
+);
+var StyledRadioControl = styled25(View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
+  width: controlSize,
+  height: controlSize,
+  minWidth: controlSize,
+  minHeight: controlSize,
+  borderWidth: controlBorderWidth,
+  borderColor: controlBorderColor,
+  borderRadius: controlSize / 2,
+  alignItems: "center",
+  justifyContent: "center"
+}));
+var StyledIndicator = styled25(View)(({ indicatorSize, indicatorBgColor }) => ({
+  width: indicatorSize,
+  height: indicatorSize,
+  borderRadius: indicatorSize / 2,
+  backgroundColor: indicatorBgColor
+}));
+var StyledTextContent = styled25(View)(({ textContentGap }) => ({
+  flexDirection: "column",
+  gap: textContentGap,
+  marginTop: 2
+}));
+var StyledAssetWrapper = styled25(View)({
+  alignSelf: "center"
+});
+var Radio = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "standalone",
+      label,
+      subText,
+      asset,
+      disabled = false,
+      value,
+      selected = false,
+      onSelect,
+      style
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "label",
+      "subText",
+      "asset",
+      "disabled",
+      "value",
+      "selected",
+      "onSelect",
+      "style"
+    ]);
+    const theme2 = useTheme();
+    const { radio } = theme2.tokens.components;
+    const { spacing, typography, colour } = radio;
+    const handlePress = () => {
+      if (disabled) return;
+      onSelect == null ? void 0 : onSelect(value);
+    };
+    const controlSize = parseTokenValue19(radio.size.control.default);
+    const indicatorSize = parseTokenValue19(radio.size.indicator.default);
+    const borderWidthVal = parseTokenValue19(radio.borderWidth.default);
+    const isTile = variant === "tile";
+    return /* @__PURE__ */ jsxs(
+      StyledRadioRoot,
+      __spreadProps(__spreadValues({
+        ref,
+        onPress: handlePress,
+        disabled,
+        accessibilityRole: "radio",
+        accessibilityState: { selected, disabled },
+        radioGap: parseTokenValue19(
+          isTile ? radio.radioTile.spacing.gap : spacing.gap
+        ),
+        radioOpacity: disabled ? parseFloat(radio.opacity.disabled) : 1,
+        radioPaddingVertical: isTile ? parseTokenValue19(radio.radioTile.spacing.verticalPadding) : void 0,
+        radioPaddingHorizontal: isTile ? parseTokenValue19(radio.radioTile.spacing.horizontalPadding) : void 0,
+        radioMaxWidth: isTile ? parseTokenValue19(radio.radioTile.size.maxWidth) : void 0,
+        radioBgColor: isTile ? selected ? radio.radioTile.colour.background.selected : radio.radioTile.colour.background.default : void 0,
+        radioBorderWidth: isTile ? parseTokenValue19(radio.radioTile.borderWidth.default) : void 0,
+        radioBorderColor: isTile ? selected ? radio.radioTile.colour.border.selected : radio.radioTile.colour.border.default : void 0,
+        radioBorderRadius: isTile ? parseTokenValue19(radio.radioTile.borderRadius.default) : void 0,
+        style: typeof style === "function" ? void 0 : style
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledRadioControl,
+            {
+              controlSize,
+              controlBorderWidth: borderWidthVal,
+              controlBorderColor: selected ? radio.colour.control.border.selected : radio.colour.control.border.default,
+              children: selected && /* @__PURE__ */ jsx(
+                StyledIndicator,
+                {
+                  indicatorSize,
+                  indicatorBgColor: radio.colour.indicator.background.selected
+                }
+              )
+            }
+          ),
+          (label || subText) && /* @__PURE__ */ jsxs(
+            StyledTextContent,
+            {
+              textContentGap: parseTokenValue19(spacing.content.gap),
+              children: [
+                label && /* @__PURE__ */ jsx(Typography, { token: typography.label, color: colour.text.title, children: label }),
+                subText && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: typography.subText,
+                    color: colour.text.subtext,
+                    children: subText
+                  }
+                )
+              ]
+            }
+          ),
+          isTile && asset && /* @__PURE__ */ jsx(StyledAssetWrapper, { children: /* @__PURE__ */ jsx(Illustration, __spreadValues({}, asset)) })
+        ]
+      })
+    );
+  }
+);
+Radio.displayName = "Radio";
+var parseTokenValue20 = (value) => parseFloat(value);
+var StyledRadioGroup = styled25(View)(({ groupDirection, groupGap }) => ({
+  flexDirection: groupDirection,
+  gap: groupGap
+}));
+var RadioGroupRoot = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      name: _name,
+      options,
+      orientation = "vertical",
+      value,
+      defaultValue,
+      onValueChange,
+      disabled = false,
+      children
+    } = _b, rest = __objRest(_b, [
+      "name",
+      "options",
+      "orientation",
+      "value",
+      "defaultValue",
+      "onValueChange",
+      "disabled",
+      "children"
+    ]);
+    var _a2;
+    const theme2 = useTheme();
+    const { radio } = theme2.tokens.components;
+    const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
+    const derivedDefaultValue = defaultValue != null ? defaultValue : optionsFirstValue;
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React26.useState(
+      derivedDefaultValue != null ? derivedDefaultValue : ""
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const handleSelect = React26.useCallback(
+      (newValue) => {
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onValueChange == null ? void 0 : onValueChange(newValue);
+      },
+      [isControlled, onValueChange]
+    );
+    const renderChildren = () => {
+      if (options) {
+        return options.map((option) => /* @__PURE__ */ jsx(
+          Radio,
+          __spreadProps(__spreadValues({}, option), {
+            selected: currentValue === option.value,
+            onSelect: handleSelect,
+            disabled: disabled || option.disabled
+          }),
+          option.value
+        ));
+      }
+      return React26.Children.map(children, (child) => {
+        if (!React26.isValidElement(child)) return child;
+        return React26.cloneElement(child, {
+          selected: currentValue === child.props.value,
+          onSelect: handleSelect,
+          disabled: disabled || child.props.disabled
+        });
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      StyledRadioGroup,
+      __spreadProps(__spreadValues({
+        ref,
+        accessibilityRole: "radiogroup",
+        groupDirection: orientation === "horizontal" ? "row" : "column",
+        groupGap: parseTokenValue20(radio.spacing.gap)
+      }, rest), {
+        children: renderChildren()
+      })
+    );
+  }
+);
+RadioGroupRoot.displayName = "RadioGroup";
+var RadioGroup = Object.assign(RadioGroupRoot, {
+  Radio
+});
+var parseTokenValue21 = (value) => parseFloat(value);
+var StyledSegmentItem = styled25(Pressable)(
+  ({
+    itemHeight,
+    itemMinWidth,
+    itemPaddingVertical,
+    itemPaddingHorizontal,
+    itemBorderRadius,
+    itemBgColor,
+    itemOpacity,
+    itemFlex
+  }) => __spreadValues({
+    height: itemHeight,
+    minWidth: itemMinWidth,
+    paddingVertical: itemPaddingVertical,
+    paddingHorizontal: itemPaddingHorizontal,
+    borderRadius: itemBorderRadius,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: itemBgColor,
+    opacity: itemOpacity
+  }, itemFlex !== void 0 ? { flex: itemFlex } : { flexShrink: 0 })
+);
+var StyledContainer2 = styled25(View)(
+  ({
+    containerGap,
+    containerPaddingVertical,
+    containerPaddingHorizontal,
+    containerBorderRadius,
+    containerBgColor,
+    containerFullWidth
+  }) => __spreadValues({
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: containerGap,
+    paddingVertical: containerPaddingVertical,
+    paddingHorizontal: containerPaddingHorizontal,
+    borderRadius: containerBorderRadius,
+    backgroundColor: containerBgColor
+  }, containerFullWidth ? { width: "100%" } : {})
+);
+var SegmentedControlItemBase = ({
+  value,
+  disabled = false,
+  selected = false,
+  layout,
+  onSelect,
+  children,
+  theme: theme2
+}) => {
+  const { controlItem } = theme2.tokens.components.segmentedControl;
+  const { size, spacing, borderRadius, colour, opacity } = controlItem;
+  const { typography } = controlItem;
+  const handlePress = () => {
+    if (disabled) return;
+    onSelect == null ? void 0 : onSelect(value);
+  };
+  const { token, color } = selected ? {
+    token: typography.label.default,
+    color: colour.text.selected
+  } : {
+    token: typography.label.inactive,
+    color: colour.text.unselected
+  };
+  return /* @__PURE__ */ jsx(
+    StyledSegmentItem,
+    {
+      onPress: handlePress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityState: { selected, disabled },
+      itemHeight: parseTokenValue21(size.small.height),
+      itemMinWidth: parseTokenValue21(size.small.minWidth),
+      itemPaddingVertical: parseTokenValue21(spacing.verticalPadding),
+      itemPaddingHorizontal: parseTokenValue21(spacing.horizontalPadding),
+      itemBorderRadius: parseTokenValue21(borderRadius.default),
+      itemBgColor: selected ? colour.background.selected : "transparent",
+      itemOpacity: disabled ? parseFloat(opacity.disabled.default) : 1,
+      itemFlex: layout === "fixed" ? 1 : void 0,
+      children: /* @__PURE__ */ jsx(Typography, { token, color, children })
+    }
+  );
+};
+var SegmentedControlItem = React26.forwardRef(
+  (_props, _ref) => {
+    return null;
+  }
+);
+SegmentedControlItem.displayName = "SegmentedControl.Item";
+var SegmentedControlRoot = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      options,
+      value,
+      defaultValue,
+      onValueChange,
+      layout = "intrinsic",
+      disabled = false,
+      children
+    } = _b, rest = __objRest(_b, [
+      "options",
+      "value",
+      "defaultValue",
+      "onValueChange",
+      "layout",
+      "disabled",
+      "children"
+    ]);
+    var _a2, _b2;
+    const theme2 = useTheme();
+    const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
+    const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
+    const childrenArray = React26.Children.toArray(children);
+    const firstChildValue = childrenArray.map((child) => {
+      if (!React26.isValidElement(child)) return void 0;
+      return child.props.value;
+    }).find((v) => typeof v === "string");
+    const derivedDefaultValue = (_b2 = defaultValue != null ? defaultValue : optionsFirstValue) != null ? _b2 : firstChildValue;
+    const isControlled = typeof value === "string";
+    const [uncontrolledValue, setUncontrolledValue] = React26.useState(
+      () => derivedDefaultValue != null ? derivedDefaultValue : ""
+    );
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const handleSelect = React26.useCallback(
+      (newValue) => {
+        if (!isControlled) {
+          setUncontrolledValue(newValue);
+        }
+        onValueChange == null ? void 0 : onValueChange(newValue);
+      },
+      [isControlled, onValueChange]
+    );
+    const renderItems = () => {
+      if (options) {
+        return options.map((option) => /* @__PURE__ */ jsx(
+          SegmentedControlItemBase,
+          {
+            value: option.value,
+            disabled: disabled || option.disabled,
+            selected: currentValue === option.value,
+            layout,
+            onSelect: handleSelect,
+            theme: theme2,
+            children: option.label
+          },
+          option.value
+        ));
+      }
+      return childrenArray.map((child) => {
+        if (!React26.isValidElement(child)) return child;
+        const childProps = child.props;
+        return /* @__PURE__ */ jsx(
+          SegmentedControlItemBase,
+          {
+            value: childProps.value,
+            disabled: disabled || childProps.disabled,
+            selected: currentValue === childProps.value,
+            layout,
+            onSelect: handleSelect,
+            theme: theme2,
+            children: childProps.children
+          },
+          childProps.value
+        );
+      });
+    };
+    const containerProps = {
+      containerGap: parseTokenValue21(spacing.gap),
+      containerPaddingVertical: parseTokenValue21(spacing.verticalPadding),
+      containerPaddingHorizontal: parseTokenValue21(spacing.horizontalPadding),
+      containerBorderRadius: parseTokenValue21(borderRadius.default),
+      containerBgColor: colour.background.default,
+      containerFullWidth: layout === "fixed"
+    };
+    if (layout === "intrinsic") {
+      return /* @__PURE__ */ jsx(View, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          contentContainerStyle: {
+            flexDirection: "row",
+            alignItems: "stretch",
+            gap: containerProps.containerGap,
+            paddingVertical: containerProps.containerPaddingVertical,
+            paddingHorizontal: containerProps.containerPaddingHorizontal,
+            borderRadius: containerProps.containerBorderRadius,
+            backgroundColor: containerProps.containerBgColor
+          },
+          children: renderItems()
+        }
+      ) }));
+    }
+    return /* @__PURE__ */ jsx(StyledContainer2, __spreadProps(__spreadValues(__spreadValues({ ref }, containerProps), rest), { children: renderItems() }));
+  }
+);
+SegmentedControlRoot.displayName = "SegmentedControl";
+var SegmentedControl = Object.assign(SegmentedControlRoot, {
+  Item: SegmentedControlItem
+});
+var parseTokenValue22 = (value) => parseFloat(value);
+var clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+var snap = (val, step, min) => {
+  const steps = Math.round((val - min) / step);
+  return min + steps * step;
+};
+var StyledSliderRoot = styled25(SliderPrimitive.Root)(({ sliderGap, sliderMinWidth, sliderOpacity }) => ({
+  gap: sliderGap,
+  minWidth: sliderMinWidth,
+  opacity: sliderOpacity
+}));
+var StyledLabelRow2 = styled25(View)(({ labelRowGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: labelRowGap
+}));
+var StyledLabelSlot = styled25(View)(({ labelSlotGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: labelSlotGap,
+  flexShrink: 0
+}));
+var StyledTrackArea = styled25(View)(({ trackAreaHeight }) => ({
+  flex: 1,
+  height: trackAreaHeight,
+  justifyContent: "center"
+}));
+var StyledTrack = styled25(SliderPrimitive.Track)(
+  ({
+    trackHeight,
+    trackBorderRadius,
+    trackBgColor,
+    trackBorderWidth,
+    trackBorderColor
+  }) => ({
+    height: trackHeight,
+    borderRadius: trackBorderRadius,
+    backgroundColor: trackBgColor,
+    borderWidth: trackBorderWidth,
+    borderColor: trackBorderColor,
+    overflow: "hidden"
+  })
+);
+var StyledRange = styled25(SliderPrimitive.Range)(({ rangeBgColor, rangeBorderRadius }) => ({
+  height: "100%",
+  backgroundColor: rangeBgColor,
+  borderRadius: rangeBorderRadius
+}));
+var StyledThumb2 = styled25(SliderPrimitive.Thumb)(({ thumbSize, thumbBorderRadius, thumbBgColor }) => ({
+  position: "absolute",
+  width: thumbSize,
+  height: thumbSize,
+  borderRadius: thumbBorderRadius,
+  backgroundColor: thumbBgColor,
+  alignItems: "center",
+  justifyContent: "center"
+}));
+var Slider = React26.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value: controlledValue,
+      defaultValue = 0,
+      onValueChange,
+      onValueCommitted,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      leadingLabel,
+      trailingLabel,
+      leadingIcon,
+      trailingIcon,
+      description
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "defaultValue",
+      "onValueChange",
+      "onValueCommitted",
+      "min",
+      "max",
+      "step",
+      "disabled",
+      "leadingLabel",
+      "trailingLabel",
+      "leadingIcon",
+      "trailingIcon",
+      "description"
+    ]);
+    const theme2 = useTheme();
+    const { slider, buttons } = theme2.tokens.components;
+    const { dimensions } = theme2.tokens.semantics;
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React26.useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const trackWidth = useRef(0);
+    const thumbSize = parseTokenValue22(buttons.size.md.height);
+    const trackHeight = parseTokenValue22(slider.sizing.track.height);
+    const fraction = max > min ? (currentValue - min) / (max - min) : 0;
+    const handleLayout = (e) => {
+      trackWidth.current = e.nativeEvent.layout.width;
+    };
+    const updateValue = useCallback(
+      (locationX) => {
+        if (disabled || trackWidth.current === 0) return;
+        const ratio = clamp(locationX / trackWidth.current, 0, 1);
+        const raw = min + ratio * (max - min);
+        const snapped = snap(clamp(raw, min, max), step, min);
+        if (!isControlled) {
+          setInternalValue(snapped);
+        }
+        onValueChange == null ? void 0 : onValueChange(snapped);
+      },
+      [disabled, min, max, step, isControlled, onValueChange]
+    );
+    const panResponder = useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: (e) => {
+          updateValue(e.nativeEvent.locationX);
+        },
+        onPanResponderMove: (e) => {
+          updateValue(e.nativeEvent.locationX);
+        },
+        onPanResponderRelease: () => {
+          onValueCommitted == null ? void 0 : onValueCommitted(currentValue);
+        }
+      })
+    ).current;
+    const hasLeading = leadingIcon !== void 0 || leadingLabel !== void 0;
+    const hasTrailing = trailingIcon !== void 0 || trailingLabel !== void 0;
+    const labelGap = parseTokenValue22(slider.sliderField.spacing.label.gap);
+    const roundBorderRadius = parseTokenValue22(dimensions.borderRadius.round);
+    return /* @__PURE__ */ jsxs(
+      StyledSliderRoot,
+      __spreadProps(__spreadValues({
+        ref,
+        value: currentValue,
+        min,
+        max,
+        disabled,
+        sliderGap: parseTokenValue22(slider.sliderField.spacing.gap),
+        sliderMinWidth: parseTokenValue22(slider.sizing.minWidth),
+        sliderOpacity: disabled ? parseFloat(buttons.opacity.disabled) : 1
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsxs(StyledLabelRow2, { labelRowGap: labelGap, children: [
+            hasLeading && /* @__PURE__ */ jsxs(StyledLabelSlot, { labelSlotGap: labelGap, children: [
+              leadingIcon,
+              leadingLabel && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  token: slider.sliderField.typography.label,
+                  color: slider.sliderField.colour.text.label,
+                  children: leadingLabel
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              StyledTrackArea,
+              __spreadProps(__spreadValues({
+                trackAreaHeight: thumbSize,
+                onLayout: handleLayout
+              }, panResponder.panHandlers), {
+                children: [
+                  /* @__PURE__ */ jsx(
+                    StyledTrack,
+                    {
+                      trackHeight,
+                      trackBorderRadius: roundBorderRadius,
+                      trackBgColor: slider.colour.track.background.default,
+                      trackBorderWidth: parseTokenValue22(dimensions.borderWidth.sm),
+                      trackBorderColor: slider.colour.track.border.default,
+                      children: /* @__PURE__ */ jsx(
+                        StyledRange,
+                        {
+                          rangeBgColor: slider.colour.indicator.background.default,
+                          rangeBorderRadius: roundBorderRadius,
+                          style: { width: `${fraction * 100}%` }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    StyledThumb2,
+                    {
+                      thumbSize,
+                      style: {
+                        left: `${fraction * 100}%`,
+                        marginLeft: -thumbSize / 2
+                      },
+                      thumbBorderRadius: parseTokenValue22(buttons.borderRadius.default),
+                      thumbBgColor: buttons.iconButton.filledButton.colour.background.primary.default,
+                      children: /* @__PURE__ */ jsx(Typography, { size: "xs", color: "alt", children: "\u27E8\u27E9" })
+                    }
+                  )
+                ]
+              })
+            ),
+            hasTrailing && /* @__PURE__ */ jsxs(StyledLabelSlot, { labelSlotGap: labelGap, children: [
+              trailingLabel && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  token: slider.sliderField.typography.label,
+                  color: slider.sliderField.colour.text.label,
+                  children: trailingLabel
+                }
+              ),
+              trailingIcon
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: slider.sliderField.typography.description,
+              color: slider.sliderField.colour.text.description,
+              children: description
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+export { Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, Checkbox, CheckboxGroup, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, Link, Logo, PawprintProvider, Radio, RadioGroup, SegmentedControl, Slider, Spinner, Switch, Tag, ThemeProvider, Typography, createPawprintTheme, registerLogo, resolveFont, resolveLogo, theme, usePawprint };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map