@kivid/native-components 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/typescript/components/ListButton/types.d.ts

@@ -1,13 +1,14 @@
 import type { VariantProps } from "class-variance-authority";
 import type { buttonVariants } from "./assets/class-variants";
-import type { ListButtonIconColorEnum, ListButtonVariantEnum } from "./enums";
+import type { ListButtonVariantEnum } from "./enums";
 import { PressableProps } from "react-native";
 import { SizeEnum, CornersEnum } from "../../enums";
 export interface ListButtonProps extends PressableProps, VariantProps<typeof buttonVariants> {
-    icon?: React.ReactNode;
-    iconColor?: ListButtonIconColorEnum;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    iconLeftContainerClassName?: React.ReactNode;
+    iconRightContainerClassName?: React.ReactNode;
     children: React.ReactNode;
-    showChevronIcon?: boolean;
     variant?: ListButtonVariantEnum;
     size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
     corners?: CornersEnum.SMALL | CornersEnum.MEDIUM;

package/dist/typescript/components/OtpInput/components/InformationStatus/types.d.ts

@@ -1,6 +1,6 @@
-import type { InformationStatusEnum } from "../../enums";
+import type { OTPInputInformationStatusEnum } from "../../enums";
 export interface InformationStatusProps {
-    status: InformationStatusEnum;
+    status: OTPInputInformationStatusEnum;
     disabled?: boolean;
     onPress?: () => void;
 }

package/dist/typescript/components/OtpInput/enums/index.d.ts

@@ -1,7 +1,6 @@
-export declare enum InformationStatusEnum {
+export declare enum OTPInputInformationStatusEnum {
     DEFAULT = "default",
     ERROR = "error",
     SUCCESS = "success",
-    LOADING = "loading",
-    COOLDOWN = "cooldown"
+    LOADING = "loading"
 }

package/dist/typescript/components/OtpInput/index.d.ts

@@ -1,3 +1,3 @@
-import type { OtpInputProps } from "./types";
+import { OtpInputProps } from "./types";
 export declare function OtpInput(props: OtpInputProps): import("react").JSX.Element;
 export default OtpInput;

package/dist/typescript/components/OtpInput/types.d.ts

@@ -1,12 +1,12 @@
 import type React from "react";
-import type { InformationStatusEnum } from "./enums";
+import { OTPInputInformationStatusEnum } from "./enums";
 export interface OtpInputProps {
-    OTPInputsQuantity?: number;
+    length?: number;
     rounded?: boolean;
     disabled?: boolean;
-    status?: InformationStatusEnum;
+    status?: OTPInputInformationStatusEnum;
     customInformation?: React.ReactNode;
-    onChange: (value: string) => void;
+    onChange: (value?: string) => void;
     onPressRetryToken?: (value: string) => void;
     inputClassName?: string;
 }

package/dist/typescript/components/Tooltip/components/Content/types.d.ts

@@ -10,4 +10,5 @@ export interface ContentProps {
     onLayout?: (event: LayoutChangeEvent) => void;
     translateX?: number;
     pointerOffset?: TooltipPointerOffsetEnum;
+    onChangeVisibility?: (isVisible: boolean) => void;
 }

package/dist/typescript/components/Tooltip/types.d.ts

@@ -7,6 +7,8 @@ export interface TooltipProps {
     className?: string;
     pointerClassName?: string;
     containerClassName?: string;
-    isVisible: boolean;
+    triggerButtonClassName?: string;
     style?: ViewStyle;
+    onChangeVisibility?: (isVisible: boolean) => void;
+    isOpenedByVariantError?: boolean;
 }

package/dist/typescript/components/index.d.ts

@@ -3,6 +3,7 @@ export * from "./Button";
 export type * from "./Button/types";
 export * from "./ChatBubble";
 export type * from "./ChatBubble/types";
+export type * from "./ChatBubble/contexts/ChatBubbleContext/types";
 export * from "./Chip";
 export * from "./Chip/types";
 export * from "./Chip/enums";
@@ -46,3 +47,6 @@ export * from "./SelectButton/enums";
 export * from "./RadioInput";
 export type * from "./RadioInput/types";
 export * from "./RadioInput/enums";
+export * from "./IconButton";
+export type * from "./IconButton/types";
+export * from "./IconButton/enums";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -78,8 +78,8 @@
     "react": "19.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "~5.8.3",
-    "@kivid/tailwind-preset": "1.0.0-alpha.6",
-    "@kivid/icons": "1.0.0-alpha.6"
+    "@kivid/tailwind-preset": "1.0.0-alpha.7",
+    "@kivid/icons": "1.0.0-alpha.7"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
@@ -89,8 +89,8 @@
     "react-native-svg": "^15.12.0",
     "react-native": "0.79.5",
     "react": "19.0.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.6",
-    "@kivid/icons": "1.0.0-alpha.6"
+    "@kivid/tailwind-preset": "1.0.0-alpha.7",
+    "@kivid/icons": "1.0.0-alpha.7"
   },
   "eslintIgnore": [
     "node_modules/",

package/src/components/ChatBubble/components/ChatBubbleSeal/index.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { merge } from "@kivid/tailwind-preset";
 import { Seal } from "../../../Seal";
-import { useChatBubbleContext } from "../../context";
+
 import type { ChatBubbleSealProps } from "./types";
 import { SealVariantEnum } from "../../../Seal/enums";
 import { SizeEnum } from "../../../../enums";
+import { useChatBubbleContext } from "../../contexts";
 
 export const ChatBubbleSeal: React.FC<ChatBubbleSealProps> = ({
   className,

package/src/components/ChatBubble/components/ChatBubbleSeal/types.ts

@@ -1,4 +1,4 @@
-import { SealProps } from "../../..";
+import { SealProps } from "../../../Seal/types";
 
 export interface ChatBubbleSealProps extends Omit<SealProps, "variant"> {
   className?: string;

package/src/components/ChatBubble/components/ChatBubbleText/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { merge } from "@kivid/tailwind-preset";
 import { Typography } from "../../../Typography";
-import { useChatBubbleContext } from "../../context";
+
 import type { ChatBubbleTextProps } from "./types";
+import { useChatBubbleContext } from "../../contexts";
 
 /**
  * Typography component for bubble text content

package/src/components/ChatBubble/components/ChatBubbleText/types.ts

@@ -1,4 +1,4 @@
-import { TypographyProps } from "../../..";
+import { TypographyProps } from "../../../Typography/types";
 
 export interface ChatBubbleTextProps
   extends Omit<TypographyProps, "variant" | "weight"> {

package/src/components/ChatBubble/{context.tsx → contexts/ChatBubbleContext/index.tsx}

@@ -1,15 +1,6 @@
 import { createContext, useContext } from "react";
-import type {
-  ChatBubbleType,
-  ChatBubbleColorState,
-  ChatBubbleMessageType,
-} from "./types";
 
-export interface ChatBubbleContextValue {
-  contentType?: ChatBubbleType;
-  colorState: ChatBubbleColorState;
-  messageType: ChatBubbleMessageType;
-}
+import type { ChatBubbleContextValue } from "./types";
 
 export const ChatBubbleContext = createContext<ChatBubbleContextValue | null>(
   null

package/src/components/ChatBubble/contexts/ChatBubbleContext/types.ts

@@ -0,0 +1,11 @@
+import {
+  ChatBubbleColorState,
+  ChatBubbleMessageType,
+  ChatBubbleType,
+} from "../../types";
+
+export interface ChatBubbleContextValue {
+  contentType?: ChatBubbleType;
+  colorState: ChatBubbleColorState;
+  messageType: ChatBubbleMessageType;
+}

package/src/components/ChatBubble/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./ChatBubbleContext";

package/src/components/ChatBubble/index.tsx

@@ -7,11 +7,14 @@ import {
   ChatBubbleTime,
   ChatBubbleLoading,
 } from "./components";
-import { ChatBubbleContext } from "./context";
+
 import { chatBubbleBoxVariants } from "./assets/class-variants";
-import type { ChatBubbleProps, ChatBubbleContextValue } from "./types";
+import type { ChatBubbleProps } from "./types";
 import { elevationDown100 } from "../../styles/mixins/shadows";
 import { merge } from "@kivid/tailwind-preset";
+import { ChatBubbleContext } from "./contexts";
+import type { ChatBubbleContextValue } from "./contexts/ChatBubbleContext/types";
+
 
 export function ChatBubble(props: ChatBubbleProps) {
   const {

package/src/components/ChatBubble/types.ts

@@ -1,7 +1,5 @@
 import type { ViewProps } from "react-native";
 
-export type { ChatBubbleContextValue } from "./context";
-
 export type ChatBubbleType = "check" | "alert" | "error" | "custom";
 export type ChatBubbleColorState = "fill" | "outline";
 export type ChatBubbleMessageType = "initial" | "followUp";

package/src/components/IconButton/assets/class-variants.ts

@@ -0,0 +1,126 @@
+import { cva } from "class-variance-authority";
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "../enums";
+
+const buttonVariants = cva(
+  [
+    "flex flex-row items-center justify-center max-w-fit",
+    "disabled:cursor-not-allowed",
+    "relative overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        [IconButtonVariantEnum.GRAPE]: [
+          "bg-grape-500",
+          "disabled:bg-grape-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.JAVA]: [
+          "bg-java-500",
+          "disabled:bg-java-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.PEAR]: [
+          "bg-pear-500",
+          "disabled:bg-pear-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.TANGERINE]: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.PITAYA]: [
+          "bg-pitaya-500 border border-pitaya-500",
+          "disabled:bg-pitaya-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.BLACKBERRY]: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.CHIA]: [
+          "bg-chia-700",
+          "disabled:bg-chia-700 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.OUTLINE]: [
+          "bg-chia-100 border-100 border-chia-400",
+          "disabled:bg-chia-200 disabled:opacity-50",
+        ],
+        [IconButtonVariantEnum.GHOST]: [
+          "bg-transparent",
+          "disabled:opacity-30",
+        ],
+      },
+      size: {
+        [IconButtonSizeEnum.SMALL]: "px-400 py-300",
+        [IconButtonSizeEnum.MEDIUM]: "px-500 py-400",
+        [IconButtonSizeEnum.LARGE]: "px-600 py-400",
+        [IconButtonSizeEnum.XLARGE]: "px-700 py-500",
+        [IconButtonSizeEnum.XXLARGE]: "px-800 py-600",
+      },
+      corners: {
+        [IconButtonCornersEnum.SMALL]: "rounded-500",
+        [IconButtonCornersEnum.MEDIUM]: "rounded-700",
+      },
+      selected: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: IconButtonVariantEnum.GRAPE,
+        selected: true,
+        className: "bg-grape-600",
+      },
+      {
+        variant: IconButtonVariantEnum.JAVA,
+        selected: true,
+        className: "bg-java-600",
+      },
+      {
+        variant: IconButtonVariantEnum.PEAR,
+        selected: true,
+        className: "bg-pear-600",
+      },
+      {
+        variant: IconButtonVariantEnum.TANGERINE,
+        selected: true,
+        className: "bg-tangerine-600",
+      },
+      {
+        variant: IconButtonVariantEnum.BLACKBERRY,
+        selected: true,
+        className: "bg-blackberry-600",
+      },
+      {
+        variant: IconButtonVariantEnum.CHIA,
+        selected: true,
+        className: "bg-chia-600",
+      },
+      {
+        variant: IconButtonVariantEnum.OUTLINE,
+        selected: true,
+        className: "bg-outline-600",
+      },
+      {
+        variant: IconButtonVariantEnum.PITAYA,
+        selected: true,
+        className: "bg-pitaya-600",
+      },
+      {
+        variant: IconButtonVariantEnum.GHOST,
+        selected: true,
+        className: "bg-grape-100 border-100 border-grape-300",
+      },
+    ],
+    defaultVariants: {
+      variant: IconButtonVariantEnum.GRAPE,
+      size: IconButtonSizeEnum.MEDIUM,
+      corners: IconButtonCornersEnum.MEDIUM,
+      selected: false,
+    },
+  }
+);
+
+export { buttonVariants };

package/src/components/IconButton/assets/design-system-showcase.ts

@@ -0,0 +1,246 @@
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "../enums";
+
+interface DesignSystemShowcaseItem {
+  size: IconButtonSizeEnum;
+  variant: IconButtonVariantEnum;
+  corners: IconButtonCornersEnum;
+  disabled?: boolean;
+  selected?: boolean;
+  loading?: boolean;
+}
+
+interface DesignSystemShowcaseButtonProps {
+  title: string;
+  buttons: {
+    [key: string]: DesignSystemShowcaseItem[];
+  };
+}
+
+const makeVariantSet = (
+  size: IconButtonSizeEnum,
+  variant: IconButtonVariantEnum
+): DesignSystemShowcaseItem[] => [
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, selected: true },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, disabled: true },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, loading: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, selected: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, disabled: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, loading: true },
+];
+
+export const designSystemShowcase: Record<
+  IconButtonSizeEnum,
+  DesignSystemShowcaseButtonProps
+> = {
+  [IconButtonSizeEnum.SMALL]: {
+    title: "Small Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.MEDIUM]: {
+    title: "Medium Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.LARGE]: {
+    title: "Large Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.XLARGE]: {
+    title: "XLarge Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.XXLARGE]: {
+    title: "2x Large Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+} as const;

package/src/components/IconButton/enums.ts

@@ -0,0 +1,26 @@
+import { CornersEnum, SizeEnum } from "../../enums";
+
+export enum IconButtonVariantEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  PITAYA = "pitaya",
+  BLACKBERRY = "blackberry",
+  CHIA = "chia",
+  OUTLINE = "outline",
+  GHOST = "ghost",
+}
+
+export enum IconButtonSizeEnum {
+  SMALL = SizeEnum.SMALL,
+  MEDIUM = SizeEnum.MEDIUM,
+  LARGE = SizeEnum.LARGE,
+  XLARGE = SizeEnum.XLARGE,
+  XXLARGE = SizeEnum.XXLARGE,
+}
+
+export enum IconButtonCornersEnum {
+  SMALL = CornersEnum.SMALL,
+  MEDIUM = CornersEnum.MEDIUM,
+}