@veracity/vui 3.0.0-beta.5 → 3.0.0-beta.7

package/dist/theme/components.d.ts

@@ -0,0 +1,2853 @@
+//#region src/theme/components.d.ts
+declare const _default: {
+  Accordion: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    sizes: {
+      sm: {
+        item: {
+          minH: string;
+        };
+        itemHorizontal: {
+          space: string;
+        };
+      };
+      md: {
+        item: {
+          minH: string;
+        };
+        itemHorizontal: {
+          space: string;
+        };
+      };
+      lg: {
+        item: {
+          minH: string;
+        };
+        itemHorizontal: {
+          space: string;
+        };
+      };
+    };
+    variants: {
+      light: {
+        container: {
+          bg: string;
+          borderColor: string;
+        };
+        item: {
+          borderColor: string;
+          itemTitleHoverBg: string;
+          expandedItemTitleHoverBg: string;
+        };
+        icon: {
+          color: string;
+        };
+      };
+      dark: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+        item: {
+          borderColor: string;
+          disabledBg: string;
+          itemTitleHoverBg: string;
+          expandedItemTitleHoverBg: string;
+        };
+        icon: {
+          color: string;
+        };
+      };
+    };
+  };
+  Avatar: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+      fontWeight: string;
+    };
+    sizes: {
+      sm: {
+        fontSize: string;
+        h: number;
+        iconSize: string;
+      };
+      md: {
+        fontSize: string;
+        h: number;
+        iconSize: string;
+      };
+      lg: {
+        fontSize: string;
+        h: number;
+        iconSize: string;
+      };
+      xl: {
+        fontSize: string;
+        h: number;
+        iconSize: string;
+      };
+      xxl: {
+        fontSize: string;
+        h: number;
+        iconSize: string;
+      };
+    };
+    variants: {
+      subtleGrey: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      subtleBlue: {
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+        borderColor: string;
+        color: string;
+      };
+      subtleRed: {
+        bg: string;
+        borderColor: string;
+        hoverBg: string;
+        activeBg: string;
+        color: string;
+      };
+      subtleYellow: {
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+        borderColor: string;
+        color: string;
+      };
+      subtleGreen: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      subtleLavender: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      subtleEucalyptus: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      subtleTerracotta: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      solidBlue: {
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+        borderColor: string;
+        color: string;
+      };
+      solidDarkBlue: {
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+        borderColor: string;
+        color: string;
+      };
+      solidRed: {
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+        borderColor: string;
+        color: string;
+      };
+      solidYellow: {
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+        borderColor: string;
+        color: string;
+      };
+      solidGreen: {
+        bg: string;
+        hoverBg: string;
+        activeBg: string;
+        borderColor: string;
+        color: string;
+      };
+      solidLavender: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      solidEucalyptus: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      solidTerracotta: {
+        bg: string;
+        hoverBg: string;
+        borderColor: string;
+        color: string;
+        activeBg: string;
+      };
+      primaryLight: {
+        bg: string;
+        borderColor: string;
+        color: string;
+        hoverBg: string;
+        hoverBorderColor: string;
+        hoverColor: string;
+        activeBg: string;
+        activeBorderColor: string;
+        activeColor: string;
+      };
+    };
+  };
+  Badge: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+      fontWeight: string;
+    };
+    parts: string[];
+    sizes: {
+      xxs: {
+        container: {
+          borderRadius: string;
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      xs: {
+        container: {
+          borderRadius: string;
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      sm: {
+        container: {
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      md: {
+        container: {
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      lg: {
+        container: {
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+      };
+    };
+    variants: {
+      subtleSandstone: {
+        container: {
+          bg: string;
+          color: string;
+          borderColor: string;
+        };
+      };
+      subtleEarth: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      subtleBlue: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      subtleBlue2: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      subtleRed: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      subtleYellow: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      subtleGreen: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      solidBlue: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      solidDarkBlue: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+      };
+      solidRed: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      solidYellow: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+      solidGreen: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+    };
+  };
+  Box: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Breadcrumbs: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    sizes: {
+      xs: {
+        item: {
+          fontSize: number;
+          lineHeight: string;
+        };
+        separator: {
+          size: string;
+        };
+      };
+      sm: {
+        item: {
+          fontSize: number;
+          lineHeight: string;
+        };
+        separator: {
+          size: string;
+        };
+      };
+      md: {
+        item: {
+          fontSize: number;
+          lineHeight: string;
+        };
+        separator: {
+          size: string;
+        };
+      };
+      lg: {
+        item: {
+          fontSize: number;
+          lineHeight: string;
+        };
+        separator: {
+          size: string;
+        };
+      };
+    };
+    variants: {
+      dark: {
+        item: {
+          color: string;
+        };
+        main: {
+          bg: string;
+        };
+        separator: {
+          pathFill: string;
+        };
+      };
+      white: {
+        item: {
+          color: string;
+        };
+        main: {
+          bg: string;
+        };
+        separator: {
+          pathFill: string;
+        };
+      };
+      light: {
+        item: {
+          color: string;
+        };
+        main: {
+          bg: string;
+        };
+        separator: {
+          pathFill: string;
+        };
+      };
+    };
+  };
+  Button: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+      fontWeight: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        container: {
+          fontSize: string;
+          h: number;
+          minW: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+        text: {};
+      };
+      md: {
+        container: {
+          fontSize: string;
+          h: number;
+          minW: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+        text: {};
+      };
+      lg: {
+        container: {
+          fontSize: string;
+          h: number;
+          minW: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+        text: {};
+      };
+      xl: {
+        container: {
+          fontSize: string;
+          h: number;
+          minW: number;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+        };
+        text: {};
+      };
+    };
+    variants: Record<string, Record<string, Record<string, string>>>;
+  };
+  Calendar: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Card: {
+    baseStyle: {
+      bg: string;
+      borderRadius: number;
+      ring: number;
+      ringColor: string;
+      shadow: string;
+    };
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Chat: {
+    baseStyle: {
+      chat: {
+        flexDirection: string;
+        w: string;
+        height: string;
+      };
+      messages: {
+        flexDirection: string;
+        overflowY: string;
+        position: string;
+        w: string;
+      };
+      suggestions: {
+        display: string;
+        textAlign: string;
+        width: string;
+      };
+    };
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Checkbox: {
+    baseStyle: {
+      control: {
+        color: "sandstone.60";
+        hoverColor: "seaBlue.20";
+      };
+      container: {
+        alignItems: string;
+      };
+    };
+    defaultProps: {
+      size: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        control: {
+          h: number;
+          w: number;
+        };
+        label: {
+          size: string;
+        };
+      };
+      md: {
+        control: {
+          h: number;
+          w: number;
+        };
+        label: {
+          size: string;
+        };
+      };
+      lg: {
+        control: {
+          h: number;
+          w: number;
+        };
+        label: {
+          size: string;
+        };
+      };
+    };
+    variants: {};
+  };
+  DatePicker: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Dialog: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+    };
+    parts: string[];
+    sizes: {
+      md: {
+        container: {
+          maxW: number;
+        };
+      };
+      lg: {
+        container: {
+          maxW: number;
+        };
+      };
+      fullWidth: {};
+    };
+    variants: {};
+  };
+  Divider: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  DragAndDrop: {
+    baseStyle: {
+      borderWidth: number;
+      borderStyle: string;
+      borderColor: string;
+      bg: string;
+      color: string;
+      hoverBg: string;
+    };
+    defaultProps: {
+      variant: string;
+    };
+    sizes: {};
+    variants: {
+      default: {};
+      outlined: {
+        borderColor: string;
+        borderStyle: string;
+      };
+    };
+  };
+  Drawer: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Footer: {
+    baseStyle: {};
+    defaultProps: {
+      variant: string;
+    };
+    parts: string[];
+    sizes: {};
+    variants: {
+      default: {
+        container: {
+          bg: string;
+          color: string;
+        };
+        link: {
+          color: string;
+        };
+      };
+      developer: {
+        container: {
+          bg: string;
+          color: string;
+        };
+        link: {
+          color: string;
+        };
+      };
+      light: {
+        container: {
+          bg: string;
+          color: string;
+        };
+        row: {
+          color: string;
+        };
+        link: {
+          color: string;
+        };
+        heading: {
+          color: string;
+        };
+      };
+    };
+  };
+  Grid: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Header: {
+    baseStyle: {};
+    defaultProps: {
+      variant: string;
+    };
+    parts: string[];
+    sizes: {};
+    variants: {
+      default: {
+        container: {
+          borderColor: string;
+        };
+        createAccount: {
+          link: {
+            variant: string;
+          };
+        };
+        linkItem: {
+          container: {
+            hoverBg: string;
+            activeBg: string;
+            activeBorderColor: string;
+          };
+          link: {
+            size: string;
+            color: string;
+            borderColor: string;
+            hoverColor: string;
+            activeColor: string;
+          };
+        };
+        logo: {
+          svg: {
+            pathFill: string;
+          };
+        };
+        divider: {
+          color: string;
+        };
+        mobileToggle: {
+          color: string;
+          hoverColor: string;
+          activeColor: string;
+        };
+        notifications: {
+          container: {
+            color: string;
+            hoverColor: string;
+          };
+        };
+        services: {
+          button: {
+            color: string;
+            hoverColor: string;
+            activeColor: string;
+          };
+          list: {
+            variant: string;
+          };
+        };
+        signIn: {
+          background: string;
+        };
+      };
+      dark: {
+        container: {
+          bg: string;
+          borderBottom: number;
+        };
+        createAccount: {
+          link: {
+            variant: string;
+          };
+          text: {
+            color: string;
+          };
+        };
+        account: {
+          trigger: {
+            variant: string;
+          };
+        };
+        divider: {
+          borderColor: string;
+        };
+        linkItem: {
+          container: {
+            hoverBg: string;
+            activeBg: string;
+            activeBorderColor: string;
+          };
+          link: {
+            size: string;
+            color: string;
+            borderColor: string;
+            hoverBg: string;
+            hoverColor: string;
+            activeBg: string;
+            activeColor: string;
+          };
+        };
+        logo: {
+          svg: {
+            pathFill: string;
+          };
+        };
+        mainLinks: {
+          color: {
+            md: string;
+          };
+        };
+        mobileContent: {
+          top: string;
+        };
+        mobileToggle: {
+          color: string;
+          hoverBg: string;
+          hoverColor: string;
+          activeBg: string;
+          activeColor: string;
+        };
+        notifications: {
+          container: {
+            variant: string;
+            color: string;
+            hoverBg: string;
+            hoverColor: string;
+            activeBg: string;
+            borderColor: string;
+          };
+          icon: {
+            color: string;
+          };
+        };
+        services: {
+          button: {
+            color: string;
+            hoverBg: string;
+            hoverColor: string;
+            activeBg: string;
+            activeColor: string;
+          };
+          list: {
+            variant: string;
+          };
+        };
+        signIn: {
+          button: {
+            variant: string;
+          };
+          colorScheme: string;
+        };
+      };
+    };
+  };
+  Heading: {
+    baseStyle: {
+      color: string;
+    };
+    defaultProps: {
+      size: string;
+    };
+    sizes: {
+      title: {
+        as: string;
+        fontFamily: string;
+        fontSize: {
+          desktop: string;
+          mobile: string;
+        };
+        fontWeight: string;
+        lineHeight: {
+          desktop: string;
+          mobile: string;
+        };
+      };
+      h1: {
+        as: string;
+        fontSize: {
+          desktop: string;
+          mobile: string;
+        };
+        fontWeight: string;
+        lineHeight: {
+          desktop: string;
+          mobile: string;
+        };
+      };
+      lead: {
+        as: string;
+        color: string;
+        fontSize: {
+          desktop: string;
+          mobile: string;
+        };
+        fontWeight: string;
+        lineHeight: {
+          desktop: string;
+          mobile: string;
+        };
+      };
+      h2: {
+        as: string;
+        fontSize: {
+          desktop: string;
+          mobile: string;
+        };
+        fontWeight: string;
+        lineHeight: {
+          desktop: string;
+          mobile: string;
+        };
+      };
+      h3: {
+        as: string;
+        fontSize: {
+          desktop: string;
+          mobile: string;
+        };
+        fontWeight: string;
+        lineHeight: string;
+      };
+      h4: {
+        as: string;
+        fontSize: {
+          desktop: string;
+          mobile: string;
+        };
+        fontWeight: string;
+        lineHeight: string;
+      };
+      h5: {
+        as: string;
+        fontSize: {
+          desktop: string;
+          mobile: string;
+        };
+        fontWeight: string;
+        lineHeight: {
+          desktop: string;
+          mobile: string;
+        };
+      };
+      h6: {
+        as: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+      };
+    };
+    variants: {};
+  };
+  Icon: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+    };
+    sizes: {
+      xxs: {
+        height: number;
+        width: number;
+      };
+      xs: {
+        height: number;
+        width: number;
+      };
+      sm: {
+        height: number;
+        width: number;
+      };
+      md: {
+        height: number;
+        width: number;
+      };
+      lg: {
+        height: number;
+        width: number;
+      };
+      xl: {
+        height: number;
+        width: number;
+      };
+      xxl: {
+        height: number;
+        width: number;
+      };
+    };
+    variants: {
+      static: {};
+      spinning: {
+        animation: string;
+      };
+    };
+  };
+  Image: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+  };
+  Input: {
+    baseStyle: {
+      container: {
+        focusWithinRing: number;
+        color: "sandstone.10";
+      };
+      input: {
+        placeholderTextColor: "sandstone.55";
+      };
+    };
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        container: {
+          fontSize: string;
+          h: number;
+        };
+        icon: {
+          size: string;
+        };
+        input: {};
+        label: {
+          fontSize: string;
+        };
+      };
+      md: {
+        container: {
+          fontSize: string;
+          h: number;
+        };
+        icon: {
+          size: string;
+        };
+        input: {};
+        label: {
+          fontSize: string;
+        };
+      };
+      lg: {
+        container: {
+          fontSize: string;
+          h: number;
+        };
+        icon: {
+          size: string;
+        };
+        input: {};
+        label: {
+          fontSize: string;
+        };
+      };
+      xl: {
+        container: {
+          fontSize: string;
+          h: number;
+        };
+        icon: {
+          size: string;
+        };
+        input: {};
+        label: {
+          fontSize: string;
+        };
+      };
+    };
+    variants: {
+      grey: {
+        container: {
+          borderColor: "sandstone.60";
+          focusWithinRingColor: "focusColor";
+        };
+      };
+      green: {
+        container: {
+          borderColor: "landGreen.35";
+          focusWithinRingColor: "landGreen.35";
+        };
+      };
+      red: {
+        container: {
+          borderColor: "energyRed.45";
+          focusWithinRingColor: "energyRed.45";
+        };
+      };
+    };
+  };
+  Label: {
+    baseStyle: {
+      helper: {
+        ml: string;
+        fontWeight: number;
+      };
+    };
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+  };
+  Link: {
+    baseStyle: {
+      container: {
+        dislplay: string;
+      };
+      icon: {
+        size: string;
+      };
+      text: {
+        fontSize: string;
+      };
+    };
+    defaultProps: {
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      xs: {
+        container: {
+          fontSize: string;
+          lineHeight: string;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      sm: {
+        container: {
+          fontSize: string;
+          lineHeight: string;
+        };
+      };
+      md: {
+        container: {
+          fontSize: string;
+          lineHeight: string;
+        };
+      };
+      lg: {
+        container: {
+          fontSize: string;
+          lineHeight: string;
+        };
+      };
+    };
+    variants: {
+      dark: {
+        container: {
+          color: string;
+        };
+      };
+      light: {
+        container: {
+          color: string;
+        };
+      };
+      white: {
+        container: {
+          color: string;
+        };
+      };
+      plain: {
+        container: {
+          hoverTextDecoration: string;
+        };
+      };
+    };
+  };
+  List: {
+    baseStyle: {
+      item: {
+        color: string;
+        activeBg: string;
+        hoverBg: string;
+        selectedBg: string;
+        px: number;
+      };
+      heading: {
+        color: string;
+      };
+    };
+    defaultProps: {
+      size: string;
+      button: {
+        size: string;
+      };
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        icon: {
+          size: string;
+        };
+        button: {
+          size: string;
+        };
+        item: {
+          fontSize: number;
+          h: number;
+        };
+        heading: {
+          fontSize: number;
+        };
+      };
+      md: {
+        icon: {
+          size: string;
+        };
+        button: {
+          size: string;
+        };
+        item: {
+          fontSize: number;
+          h: number;
+        };
+        heading: {
+          fontSize: number;
+        };
+      };
+      lg: {
+        icon: {
+          size: string;
+        };
+        button: {
+          size: string;
+        };
+        item: {
+          fontSize: number;
+          h: number;
+        };
+        heading: {
+          fontSize: number;
+        };
+      };
+      xl: {
+        icon: {
+          size: string;
+        };
+        button: {
+          size: string;
+        };
+        item: {
+          fontSize: number;
+          h: number;
+        };
+        heading: {
+          fontSize: number;
+        };
+      };
+      xxl: {
+        icon: {
+          size: string;
+        };
+        button: {
+          size: string;
+        };
+        item: {
+          fontSize: number;
+          h: number;
+        };
+        heading: {
+          fontSize: number;
+        };
+      };
+    };
+    variants: {
+      default: {};
+      ordered: {
+        container: {
+          as: string;
+          listStyleType: string;
+          pl: number;
+        };
+        item: {
+          display: string;
+        };
+      };
+      unordered: {
+        container: {
+          as: string;
+          listStyleType: string;
+          pl: number;
+        };
+        item: {
+          display: string;
+        };
+      };
+      blue: {
+        heading: {
+          color: string;
+        };
+      };
+    };
+  };
+  Markdown: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+  };
+  MarkdownEditor: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+  };
+  Menu: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        button: {
+          size: string;
+        };
+        list: {
+          size: string;
+        };
+      };
+      md: {
+        button: {
+          size: string;
+        };
+        list: {
+          size: string;
+        };
+      };
+      lg: {
+        button: {
+          size: string;
+        };
+        list: {
+          size: string;
+        };
+      };
+    };
+    variants: {};
+  };
+  Message: {
+    baseStyle: {
+      display: string;
+    };
+    defaultProps: {
+      variant: string;
+      size: string;
+    };
+    sizes: {
+      sm: {
+        iconSize: string;
+        fontSize: string;
+      };
+      md: {
+        iconSize: string;
+        fontSize: string;
+      };
+      lg: {
+        iconSize: string;
+        fontSize: string;
+      };
+    };
+    variants: {
+      info: {
+        color: string;
+      };
+      warning: {
+        color: string;
+      };
+      error: {
+        color: string;
+      };
+      success: {
+        color: string;
+      };
+    };
+  };
+  Modal: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+  };
+  Notification: {
+    baseStyle: {};
+    defaultProps: {
+      variant: string;
+    };
+    parts: string[];
+    sizes: {};
+    variants: {
+      subtleBlue: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          borderColor: string;
+        };
+      };
+      subtleRed: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+      };
+      subtleYellow: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+      };
+      subtleGreen: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+      };
+      bannerBlue: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          borderColor: string;
+        };
+      };
+      bannerRed: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+      };
+      bannerYellow: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+      };
+      bannerGreen: {
+        container: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+      };
+    };
+  };
+  P: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+    };
+    sizes: {
+      xs: {
+        fontSize: string;
+        lineHeight: string;
+      };
+      sm: {
+        fontSize: string;
+        lineHeight: string;
+      };
+      md: {
+        fontSize: string;
+        lineHeight: string;
+      };
+      lg: {
+        fontSize: string;
+        lineHeight: string;
+      };
+    };
+    variants: {};
+  };
+  Pagination: {
+    baseStyle: {
+      button: {
+        color: string;
+        hoverBg: string;
+        minW: number;
+        bg: string;
+        border: string;
+      };
+      ellipsis: {
+        bg: string;
+        border: string;
+        color: string;
+      };
+      goToPage: {
+        bg: string;
+        border: string;
+        color: string;
+      };
+      prevNext: {
+        bg: string;
+        border: string;
+        color: string;
+      };
+      results: {
+        color: string;
+      };
+    };
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+  };
+  Panel: {
+    baseStyle: {
+      borderRadius: number;
+    };
+    defaultProps: {
+      variant: string;
+    };
+    sizes: {};
+    variants: {
+      elevated: {
+        shadow: string;
+      };
+      outlined: {
+        border: number;
+        borderColor: string;
+      };
+    };
+  };
+  Progress: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    sizes: {
+      sm: {
+        container: {
+          minH: string;
+        };
+        percentage: {
+          fontSize: string;
+          top: string;
+        };
+      };
+      md: {
+        container: {
+          minH: string;
+        };
+        percentage: {
+          fontSize: string;
+          top: string;
+        };
+      };
+      lg: {
+        container: {
+          minH: string;
+        };
+        percentage: {
+          fontSize: string;
+          top: string;
+        };
+      };
+      xl: {
+        container: {
+          minH: string;
+        };
+        percentage: {
+          fontSize: string;
+          top: string;
+        };
+      };
+    };
+    variants: {
+      primary: {
+        bg: string;
+        color: string;
+      };
+      green: {
+        bg: string;
+        color: string;
+      };
+      red: {
+        bg: string;
+        color: string;
+      };
+    };
+  };
+  ProgressCircular: {
+    baseStyle: {
+      color: string;
+    };
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    sizes: {
+      sm: {
+        strokeWidth: number;
+        width: number;
+        top: number;
+        fontSize: number;
+      };
+      md: {
+        strokeWidth: number;
+        width: number;
+        top: number;
+        fontSize: number;
+      };
+      lg: {
+        strokeWidth: number;
+        width: number;
+        top: number;
+        fontSize: number;
+      };
+      xl: {
+        strokeWidth: number;
+        width: number;
+        top: number;
+        fontSize: number;
+      };
+    };
+    variants: {
+      primary: {
+        stroke: {
+          main: string;
+          progress: string;
+        };
+      };
+      green: {
+        stroke: {
+          main: string;
+          progress: string;
+        };
+      };
+      red: {
+        stroke: {
+          main: string;
+          progress: string;
+        };
+      };
+    };
+  };
+  Definition: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        container: {
+          fontSize: string;
+          lineHeight: string;
+        };
+        dt: {
+          fontSize: string;
+          spaceX: number;
+        };
+        dd: {
+          fontSize: string;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+          mx: number;
+          my: string;
+        };
+      };
+      md: {
+        container: {
+          fontSize: string;
+          lineHeight: string;
+        };
+        dt: {
+          fontSize: string;
+          spaceX: number;
+        };
+        dd: {
+          fontSize: string;
+          spaceX: number;
+        };
+        icon: {
+          size: string;
+          mx: number;
+          my: string;
+        };
+      };
+    };
+    variants: {
+      light: {
+        container: {
+          color: string;
+        };
+      };
+      dark: {
+        container: {
+          bg: string;
+          color: string;
+        };
+      };
+    };
+  };
+  Popover: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+  };
+  Radio: {
+    baseStyle: {
+      control: {
+        color: "sandstone.60";
+        hoverColor: "seaBlue.20";
+      };
+    };
+    defaultProps: {
+      size: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        control: {
+          h: number;
+          w: number;
+        };
+        label: {
+          size: string;
+        };
+      };
+      md: {
+        control: {
+          h: number;
+          w: number;
+        };
+        label: {
+          size: string;
+        };
+      };
+      lg: {
+        control: {
+          h: number;
+          w: number;
+        };
+        label: {
+          size: string;
+        };
+      };
+    };
+    variants: {};
+  };
+  Range: {
+    baseStyle: {
+      container: {
+        w: number;
+      };
+      thumb: {
+        bg: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        h: string;
+        lineHeight: string;
+        w: string;
+        textAlign: string;
+        top: string;
+        transitionDuration: string;
+      };
+      thumbValue: {
+        position: string;
+        top: string;
+        w: string;
+      };
+      track: {
+        bg: "seaBlue.28";
+        bottom: number;
+        borderRadius: string;
+        top: number;
+        transitionDuration: string;
+      };
+    };
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+  };
+  Rating: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        icon: {
+          size: string;
+        };
+      };
+      md: {
+        icon: {
+          size: string;
+        };
+      };
+      lg: {
+        icon: {
+          size: string;
+        };
+      };
+    };
+    variants: {
+      yellow: {
+        color: string;
+      };
+      blue: {
+        color: string;
+      };
+    };
+  };
+  Select: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        button: {
+          size: string;
+        };
+        group: {
+          size: string;
+        };
+        option: {
+          size: string;
+        };
+        label: {
+          fontSize: string;
+        };
+      };
+      md: {
+        button: {
+          size: string;
+        };
+        group: {
+          size: string;
+        };
+        option: {
+          size: string;
+        };
+        label: {
+          fontSize: string;
+        };
+      };
+      lg: {
+        button: {
+          size: string;
+        };
+        group: {
+          size: string;
+        };
+        option: {
+          size: string;
+        };
+        label: {
+          fontSize: string;
+        };
+      };
+      xl: {
+        button: {
+          size: string;
+        };
+        group: {
+          size: string;
+        };
+        option: {
+          size: string;
+        };
+        label: {
+          fontSize: string;
+        };
+      };
+    };
+    variants: {
+      outlined: {
+        button: {
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          hoverBorderColor: string;
+        };
+      };
+      text: {
+        button: {
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          hoverBorderColor: string;
+        };
+      };
+    };
+  };
+  Sidemenu: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      md: {
+        item: {
+          minH: string;
+        };
+      };
+      lg: {
+        item: {
+          minH: string;
+        };
+      };
+    };
+    variants: {
+      light: {
+        container: {
+          bg: string;
+        };
+        bottom: {
+          borderTop: string;
+        };
+        sidemenuTop: {
+          borderBottom: string;
+        };
+        item: {};
+      };
+      dark: {
+        container: {
+          bg: string;
+          color: string;
+        };
+        bottom: {
+          borderTop: string;
+        };
+        sidemenuTop: {
+          borderBottom: string;
+        };
+        item: {};
+      };
+    };
+  };
+  Skeleton: {
+    baseStyle: {
+      bg: string;
+    };
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    sizes: {
+      xs: {
+        h: number;
+      };
+      sm: {
+        h: number;
+      };
+      md: {
+        h: number;
+      };
+      lg: {
+        h: number;
+      };
+    };
+    variants: {
+      circle: {
+        borderRadius: string;
+      };
+      rect: {
+        borderRadius: string;
+        w: string;
+      };
+    };
+  };
+  StepIndicator: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    sizes: {
+      sm: {};
+      md: {};
+    };
+    variants: {
+      active: {
+        button: {
+          bg: string;
+        };
+        icon: {
+          bg: string;
+          color: string;
+        };
+      };
+      completed: {
+        button: {
+          bg: string;
+        };
+        icon: {
+          bg: string;
+          color: string;
+        };
+      };
+      optional: {
+        button: {
+          bg: string;
+          borderColor: string;
+          color: string;
+        };
+        icon: {
+          bg: string;
+          color: string;
+        };
+      };
+      pending: {
+        button: {
+          bg: string;
+          color: string;
+        };
+        icon: {
+          bg: string;
+          color: string;
+        };
+      };
+      error: {
+        button: {
+          bg: string;
+          color: string;
+        };
+        icon: {
+          bg: string;
+          color: string;
+        };
+      };
+    };
+  };
+  StepperHorizontal: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {};
+      md: {};
+    };
+    variants: {};
+  };
+  StepperVertical: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {};
+      md: {};
+    };
+    variants: {};
+  };
+  Spinner: {
+    baseStyle: {
+      container: {
+        padding: number;
+      };
+    };
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      xs: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+      sm: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+      md: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+      lg: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+      xl: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+      xxl: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+      xxxl: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+      xxxxl: {
+        circle: {
+          borderWidth: number;
+          h: number;
+          w: number;
+        };
+      };
+    };
+    variants: {
+      light: {
+        circle: {
+          borderColor: string;
+          borderTopColor: string;
+        };
+        text: {
+          color: string;
+        };
+      };
+      dark: {
+        container: {
+          bg: string;
+        };
+        circle: {
+          borderColor: string;
+          borderTopColor: string;
+        };
+        text: {
+          color: string;
+        };
+      };
+    };
+  };
+  SidemenuV2: {
+    baseStyle: {
+      container: {
+        display: string;
+        flexDirection: string;
+        overflow: string;
+        transition: string;
+      };
+      content: {
+        flex: number;
+        overflowY: string;
+        overflowX: string;
+      };
+      bottom: {
+        flexShrink: number;
+        borderTop: string;
+        display: string;
+        alignItems: string;
+      };
+      item: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        flexDirection: string;
+        w: string;
+        border: string;
+        cursor: string;
+        transition: string;
+        textDecoration: string;
+        outline: string;
+        px: number;
+        borderLeft: string;
+      };
+      sidemenuTop: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        padding: string;
+        minHeight: string;
+      };
+      toggleButton: {
+        baseHeight: number;
+        basePadding: number;
+        expandedPaddingMultiplier: number;
+        collapsedWidth: string;
+        expandedWidth: string;
+        transition: string;
+      };
+    };
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: {
+        toggleButton: {
+          baseHeight: number;
+          basePadding: number;
+        };
+      };
+      md: {
+        toggleButton: {
+          baseHeight: number;
+          basePadding: number;
+        };
+      };
+      lg: {
+        toggleButton: {
+          baseHeight: number;
+          basePadding: number;
+        };
+      };
+    };
+    variants: {
+      light: {
+        container: {
+          bg: string;
+        };
+        toggleButton: {
+          variant: string;
+          hoverBg: string;
+        };
+        item: {
+          color: string;
+        };
+      };
+      dark: {
+        container: {
+          bg: string;
+          color: string;
+          boxShadow: string;
+        };
+        bottom: {
+          borderTopColor: string;
+        };
+        sidemenuTop: {
+          borderBottom: string;
+          bg: string;
+        };
+        toggleButton: {
+          variant: string;
+        };
+        item: {
+          color: string;
+        };
+      };
+    };
+  };
+  Switch: {
+    baseStyle: {
+      button: {
+        thumb: {
+          bg: string;
+        };
+        track: {
+          ring: number;
+        };
+      };
+    };
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      sm: () => {
+        button: {
+          fontSize: string;
+          minW: number;
+          thumb: {
+            h: number;
+            w: number;
+          };
+          track: {
+            h: number;
+          };
+        };
+        label: {
+          size: string;
+        };
+      };
+      md: () => {
+        button: {
+          fontSize: string;
+          minW: number;
+          thumb: {
+            h: number;
+            w: number;
+          };
+          track: {
+            h: number;
+          };
+        };
+        label: {
+          size: string;
+        };
+      };
+      lg: () => {
+        button: {
+          fontSize: string;
+          minW: number;
+          thumb: {
+            h: number;
+            w: number;
+          };
+          track: {
+            h: number;
+          };
+        };
+        label: {
+          size: string;
+        };
+      };
+      xl: () => {
+        button: {
+          fontSize: string;
+          minW: number;
+          thumb: {
+            h: number;
+            w: number;
+          };
+          track: {
+            h: number;
+          };
+        };
+        label: {
+          size: string;
+        };
+      };
+    };
+    variants: {
+      primary: {
+        button: {
+          track: {
+            bg: string;
+          };
+        };
+      };
+      green: {
+        button: {
+          track: {
+            bg: string;
+          };
+        };
+      };
+      red: {
+        button: {
+          track: {
+            bg: string;
+          };
+        };
+      };
+    };
+  };
+  T: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+    };
+    sizes: {
+      xs: {
+        fontSize: string;
+      };
+      sm: {
+        fontSize: string;
+      };
+      md: {
+        fontSize: string;
+      };
+      lg: {
+        fontSize: string;
+      };
+    };
+    variants: {
+      label: {
+        fontSize: string;
+        fontWeight: string;
+      };
+      caption: {
+        fontSize: string;
+        fontWeight: string;
+      };
+    };
+  };
+  Table: {
+    baseStyle: {
+      th: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+      };
+    };
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      lg: {
+        tr: {
+          h: number;
+        };
+      };
+      md: {
+        tr: {
+          h: number;
+        };
+      };
+      sm: {
+        tr: {
+          h: number;
+        };
+      };
+    };
+    variants: {
+      bordered: {
+        td: {
+          borderBottom: string;
+        };
+      };
+      striped: {};
+      basic: {
+        td: {
+          borderBottom: string;
+        };
+      };
+    };
+  };
+  Tabs: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {
+      sm: {
+        tabsNavBar: {
+          borderWidth: string;
+          fontSize: string;
+          h: string;
+          py: string;
+        };
+      };
+      md: {
+        tabsNavBar: {
+          borderWidth: string;
+          fontSize: string;
+          h: string;
+          py: string;
+        };
+      };
+      lg: {
+        tabsNavBar: {
+          borderWidth: string;
+          fontSize: string;
+          h: number;
+          py: string;
+        };
+      };
+      xl: {
+        tabsNavBar: {
+          borderWidth: string;
+          fontSize: string;
+          h: number;
+          py: string;
+        };
+      };
+      xxl: {
+        tabsNavBar: {
+          borderWidth: string;
+          fontSize: string;
+          h: number;
+          py: string;
+        };
+      };
+    };
+    variants: {};
+  };
+  Tag: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+      fontWeight: string;
+    };
+    parts: string[];
+    sizes: {
+      xs: {
+        container: {
+          borderRadius: string;
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        button: {
+          size: string;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      sm: {
+        container: {
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        button: {
+          size: string;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      md: {
+        container: {
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        button: {
+          size: string;
+        };
+        icon: {
+          size: string;
+        };
+      };
+      lg: {
+        container: {
+          fontSize: string;
+          h: number;
+          spaceX: number;
+        };
+        button: {
+          size: string;
+        };
+        icon: {
+          size: string;
+        };
+      };
+    };
+    variants: {
+      subtleGrey: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          borderColor: string;
+          color: string;
+          activeBg: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          hoverBorderColor: string;
+          color: string;
+          activeBg: string;
+        };
+      };
+      subtleBlue: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          color: string;
+        };
+      };
+      subtleRed: {
+        container: {
+          bg: string;
+          borderColor: string;
+          hoverBg: string;
+          activeBg: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          color: string;
+        };
+      };
+      subtleYellow: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          color: string;
+        };
+      };
+      subtleGreen: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          borderColor: string;
+          color: string;
+          activeBg: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          color: string;
+        };
+      };
+      solidBlue: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          activeBorderColor: string;
+          color: string;
+        };
+      };
+      solidDarkBlue: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          color: string;
+        };
+      };
+      solidRed: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          activeBorderColor: string;
+          color: string;
+        };
+      };
+      solidYellow: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          color: string;
+        };
+      };
+      solidGreen: {
+        container: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          borderColor: string;
+          color: string;
+        };
+        button: {
+          bg: string;
+          hoverBg: string;
+          activeBg: string;
+          hoverBorderColor: string;
+          activeBorderColor: string;
+          color: string;
+        };
+      };
+    };
+  };
+  Textarea: {
+    baseStyle: {
+      textarea: {
+        focusWithinRing: number;
+        color: "sandstone.10";
+      };
+      input: {
+        color: {
+          placeholder: "sandstone.55";
+        };
+      };
+    };
+    defaultProps: {
+      variant: string;
+    };
+    parts: string[];
+    sizes: {};
+    variants: {
+      grey: {
+        textarea: {
+          borderColor: "sandstone.60";
+          focusWithinRingColor: "focusColor";
+        };
+      };
+      green: {
+        textarea: {
+          borderColor: "landGreen.35";
+          focusWithinRingColor: "landGreen.35";
+        };
+      };
+      red: {
+        textarea: {
+          borderColor: "energyRed.45";
+          focusWithinRingColor: "energyRed.45";
+        };
+      };
+    };
+  };
+  Tree: {
+    baseStyle: {};
+    defaultProps: {
+      size: string;
+      variant: string;
+    };
+    parts: string[];
+    sizes: {
+      xl: {
+        item: {
+          fontSize: string;
+          height: number;
+          lineHeight: string;
+          py: string;
+        };
+        icon: {
+          height: number;
+          width: number;
+        };
+      };
+    };
+    variants: {
+      default: {
+        container: {
+          bg: string;
+        };
+        firstLevelItem: {
+          bg: string;
+          color: string;
+          activeColor: string;
+          activeBg: string;
+          hoverBg: string;
+        };
+        item: {
+          bg: string;
+          color: string;
+          activeColor: string;
+          activeBg: string;
+          hoverBg: string;
+          selectedBg: string;
+          px: number;
+        };
+      };
+      dark: {
+        container: {
+          bg: string;
+          color: string;
+        };
+        firstLevelItem: {
+          bg: string;
+          color: string;
+          activeBg: string;
+          activeColor: string;
+          hoverBg: string;
+          hoverColor: string;
+        };
+        item: {
+          bg: string;
+          color: string;
+          activeBg: string;
+          activeColor: string;
+          hoverBg: string;
+          hoverColor: string;
+        };
+      };
+    };
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=components.d.ts.map