colibri-ui 0.7.7 → 0.7.9

package/esm/Theme/themes/buenos_aires.js

@@ -13,12 +13,12 @@ var ButtonThemeBA = {
       backgroundColor: Color.PRIMARY_BA_4,
       borderColor: Color.PRIMARY_BA_4
     },
-    hover: {
+    hovered: {
       color: Color.WHITE,
       backgroundColor: Color.PRIMARY_BA_5,
       borderColor: Color.PRIMARY_BA_5
     },
-    focus: {
+    focused: {
       color: Color.WHITE,
       backgroundColor: Color.PRIMARY_BA_5,
       borderColor: Color.PRIMARY_BA_5
@@ -29,9 +29,9 @@ var ButtonThemeBA = {
       borderColor: Color.PRIMARY_BA_5
     },
     disabled: {
-      color: Color.PRIMARY_BA_3,
-      backgroundColor: Color.PRIMARY_BA_2,
-      borderColor: Color.PRIMARY_BA_2
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   secondary: {
@@ -40,12 +40,12 @@ var ButtonThemeBA = {
       backgroundColor: Color.SECONDARY_BA_4,
       borderColor: Color.SECONDARY_BA_4
     },
-    hover: {
+    hovered: {
       color: Color.WHITE,
       backgroundColor: Color.SECONDARY_BA_5,
       borderColor: Color.SECONDARY_BA_5
     },
-    focus: {
+    focused: {
       color: Color.WHITE,
       backgroundColor: Color.SECONDARY_BA_5,
       borderColor: Color.SECONDARY_BA_5
@@ -56,9 +56,9 @@ var ButtonThemeBA = {
       borderColor: Color.SECONDARY_BA_5
     },
     disabled: {
-      color: Color.SECONDARY_BA_3,
-      backgroundColor: Color.SECONDARY_BA_2,
-      borderColor: Color.SECONDARY_BA_2
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   clear: {
@@ -67,7 +67,7 @@ var ButtonThemeBA = {
       backgroundColor: Color.WHITE,
       borderColor: Color.WHITE
     },
-    hover: {
+    hovered: {
       color: Color.TRETIARY_BA_5,
       backgroundColor: Color.TRETIARY_BA_2,
       borderColor: Color.TRETIARY_BA_2
@@ -78,9 +78,46 @@ var ButtonThemeBA = {
       borderColor: Color.TRETIARY_BA_2
     },
     disabled: {
-      color: Color.TRETIARY_BA_3,
-      backgroundColor: Color.TRETIARY_BA_1,
-      borderColor: Color.TRETIARY_BA_1
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
+    }
+  }
+};
+var InputThemeBA = {
+  placeholder: {
+    color: Color.BG_2
+  },
+  primary: {
+    normal: {
+      borderColor: Color.BG_3
+    },
+    hovered: {
+      borderColor: Color.PRIMARY_BA_3,
+      boxShadow: "0px 0px 0px 2px ".concat(Color.PRIMARY_BA_2)
+    },
+    focused: {
+      borderColor: Color.PRIMARY_BA_4
+    },
+    disabled: {
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_3
+    },
+    error: {
+      normal: {
+        backgroundColor: Color.TRETIARY_2,
+        borderColor: Color.ALERT
+      },
+      hovered: {
+        backgroundColor: Color.WHITE,
+        borderColor: Color.ALERT,
+        boxShadow: "0px 0px 0px 2px ".concat(Color.TRETIARY_2)
+      },
+      focused: {
+        backgroundColor: Color.WHITE,
+        borderColor: Color.ALERT
+      }
     }
   }
 };
@@ -89,10 +126,10 @@ var CheckboxThemeBA = {
     normal: {
       backgroundColor: Color.PRIMARY_BA_4
     },
-    hover: {
+    hovered: {
       backgroundColor: Color.PRIMARY_BA_4
     },
-    focus: {
+    focused: {
       boxShadow: "0 0 0 2px ".concat(Color.PRIMARY_BA_1)
     },
     checked: {
@@ -114,6 +151,9 @@ var TypographyThemeBA = {
   },
   success: {
     color: Color.SUCCESS
+  },
+  secondary: {
+    color: Color.BG_3
   }
 };
 var SwitchThemeDefault = {
@@ -122,8 +162,8 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: Color.BG_1,
-      borderColor: Color.BG_1
+      backgroundColor: Color.BG_2,
+      borderColor: Color.BG_2
     },
     checked: {
       backgroundColor: Color.PRIMARY_BA_5,
@@ -134,10 +174,11 @@ var SwitchThemeDefault = {
 var THEME_BA = {
   breakpoints: Breakpoints,
   button: ButtonThemeBA,
+  input: InputThemeBA,
   checkbox: CheckboxThemeBA,
   typography: TypographyThemeBA,
   "switch": SwitchThemeDefault,
   palette: Color
 };
 
-export { ButtonThemeBA, CheckboxThemeBA, SwitchThemeDefault, THEME_BA, TypographyThemeBA };
+export { ButtonThemeBA, CheckboxThemeBA, InputThemeBA, SwitchThemeDefault, THEME_BA, TypographyThemeBA };

package/esm/Theme/themes/default.d.ts

@@ -1,6 +1,43 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
+export declare const InputThemeDefault: {
+    placeholder: {
+        color: string;
+    };
+    primary: {
+        normal: {
+            borderColor: string;
+        };
+        hovered: {
+            borderColor: string;
+            boxShadow: string;
+        };
+        focused: {
+            borderColor: string;
+        };
+        disabled: {
+            color: string;
+            backgroundColor: string;
+            borderColor: string;
+        };
+        error: {
+            normal: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            hovered: {
+                backgroundColor: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            focused: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+    };
+};
 export declare const CheckboxThemeDefault: CheckboxVariant;
 export declare const TypographyThemeDefault: {
     alert: {
@@ -9,6 +46,9 @@ export declare const TypographyThemeDefault: {
     success: {
         color: string;
     };
+    secondary: {
+        color: string;
+    };
 };
 export declare const SwitchThemeDefault: {
     circle: {
@@ -28,6 +68,43 @@ export declare const SwitchThemeDefault: {
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    input: {
+        placeholder: {
+            color: string;
+        };
+        primary: {
+            normal: {
+                borderColor: string;
+            };
+            hovered: {
+                borderColor: string;
+                boxShadow: string;
+            };
+            focused: {
+                borderColor: string;
+            };
+            disabled: {
+                color: string;
+                backgroundColor: string;
+                borderColor: string;
+            };
+            error: {
+                normal: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                hovered: {
+                    backgroundColor: string;
+                    borderColor: string;
+                    boxShadow: string;
+                };
+                focused: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+        };
+    };
     checkbox: CheckboxVariant;
     typography: {
         alert: {
@@ -36,6 +113,9 @@ export declare const THEME_DEFAULT: {
         success: {
             color: string;
         };
+        secondary: {
+            color: string;
+        };
     };
     switch: {
         circle: {
@@ -88,9 +168,12 @@ export declare const THEME_DEFAULT: {
         BG_3: string;
         BG_4: string;
         BG_5: string;
-        TEXT_BA_PRIMARY: string;
-        TEXT_BA_SECONDARY: string;
-        TEXT_BA_TRETIARY: string;
+        BRAND_BA_1: string;
+        BRAND_BA_2: string;
+        BRAND_BA_3: string;
+        BRAND_DEFAULT_1: string;
+        BRAND_DEFAULT_2: string;
+        BRAND_DEFAULT_3: string;
         ALERT: string;
         SUCCESS: string;
         WHITE: string;

package/esm/Theme/themes/default.js

@@ -3,7 +3,6 @@ import Breakpoints from '../breakpoints.js';
 
 var ButtonThemeDefault = {
   base: {
-    color: Color.BLACK,
     borderRadius: "26px"
   },
   primary: {
@@ -12,12 +11,12 @@ var ButtonThemeDefault = {
       backgroundColor: Color.PRIMARY_4,
       borderColor: Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       color: Color.WHITE,
       backgroundColor: Color.PRIMARY_5,
       borderColor: Color.PRIMARY_5
     },
-    focus: {
+    focused: {
       color: Color.WHITE,
       backgroundColor: Color.PRIMARY_5,
       borderColor: Color.PRIMARY_5
@@ -28,9 +27,9 @@ var ButtonThemeDefault = {
       borderColor: Color.PRIMARY_5
     },
     disabled: {
-      color: Color.PRIMARY_3,
-      backgroundColor: Color.PRIMARY_2,
-      borderColor: Color.PRIMARY_2
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   secondary: {
@@ -39,12 +38,12 @@ var ButtonThemeDefault = {
       backgroundColor: Color.SECONDARY_4,
       borderColor: Color.SECONDARY_4
     },
-    hover: {
+    hovered: {
       color: Color.WHITE,
       backgroundColor: Color.SECONDARY_5,
       borderColor: Color.SECONDARY_5
     },
-    focus: {
+    focused: {
       color: Color.WHITE,
       backgroundColor: Color.SECONDARY_5,
       borderColor: Color.SECONDARY_5
@@ -55,9 +54,9 @@ var ButtonThemeDefault = {
       borderColor: Color.SECONDARY_5
     },
     disabled: {
-      color: Color.SECONDARY_3,
-      backgroundColor: Color.SECONDARY_2,
-      borderColor: Color.SECONDARY_2
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   clear: {
@@ -66,7 +65,7 @@ var ButtonThemeDefault = {
       backgroundColor: Color.WHITE,
       borderColor: Color.WHITE
     },
-    hover: {
+    hovered: {
       color: Color.TRETIARY_5,
       backgroundColor: Color.TRETIARY_2,
       borderColor: Color.TRETIARY_2
@@ -77,9 +76,46 @@ var ButtonThemeDefault = {
       borderColor: Color.TRETIARY_2
     },
     disabled: {
-      color: Color.TRETIARY_3,
-      backgroundColor: Color.TRETIARY_1,
-      borderColor: Color.TRETIARY_1
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
+    }
+  }
+};
+var InputThemeDefault = {
+  placeholder: {
+    color: Color.BG_2
+  },
+  primary: {
+    normal: {
+      borderColor: Color.BG_3
+    },
+    hovered: {
+      borderColor: Color.PRIMARY_3,
+      boxShadow: "0px 0px 0px 2px ".concat(Color.PRIMARY_2)
+    },
+    focused: {
+      borderColor: Color.PRIMARY_4
+    },
+    disabled: {
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_3
+    },
+    error: {
+      normal: {
+        backgroundColor: Color.TRETIARY_2,
+        borderColor: Color.ALERT
+      },
+      hovered: {
+        backgroundColor: Color.WHITE,
+        borderColor: Color.ALERT,
+        boxShadow: "0px 0px 0px 2px ".concat(Color.TRETIARY_2)
+      },
+      focused: {
+        backgroundColor: Color.WHITE,
+        borderColor: Color.ALERT
+      }
     }
   }
 };
@@ -88,10 +124,10 @@ var CheckboxThemeDefault = {
     normal: {
       backgroundColor: Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       backgroundColor: Color.PRIMARY_4
     },
-    focus: {
+    focused: {
       boxShadow: "0 0 0 2px ".concat(Color.PRIMARY_1)
     },
     checked: {
@@ -113,6 +149,9 @@ var TypographyThemeDefault = {
   },
   success: {
     color: Color.SUCCESS
+  },
+  secondary: {
+    color: Color.BG_3
   }
 };
 var SwitchThemeDefault = {
@@ -121,8 +160,8 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: Color.BG_1,
-      borderColor: Color.BG_1
+      backgroundColor: Color.BG_2,
+      borderColor: Color.BG_2
     },
     checked: {
       backgroundColor: Color.PRIMARY_5,
@@ -133,10 +172,11 @@ var SwitchThemeDefault = {
 var THEME_DEFAULT = {
   breakpoints: Breakpoints,
   button: ButtonThemeDefault,
+  input: InputThemeDefault,
   checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
   "switch": SwitchThemeDefault,
   palette: Color
 };
 
-export { ButtonThemeDefault, CheckboxThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };
+export { ButtonThemeDefault, CheckboxThemeDefault, InputThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

package/esm/Typography/index.props.d.ts

@@ -1,18 +1,15 @@
 import type { CSSObject } from "@emotion/react";
-export declare enum VARIANT {
-    ALERT = "alert",
-    SUCCESS = "success"
-}
 type VariantStyles = {
     color?: CSSObject["color"];
 };
 export type TypographyVariant = {
-    [VARIANT.ALERT]: VariantStyles;
-    [VARIANT.SUCCESS]: VariantStyles;
+    alert: VariantStyles;
+    success: VariantStyles;
+    secondary: VariantStyles;
 };
 export type TypographyFontWeight = "normal" | "medium" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export type TypographyTag = "span" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
+export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
 export type TypographyProps = {
     className?: string;
     tag?: TypographyTag;

package/esm/base/FormField/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { FormFieldProps } from "./index.props";
+declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FormField;

package/esm/base/FormField/index.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import Typography from '../../Typography/index.js';
+import { BaseContainer } from './styles.js';
+
+var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    hint = _a.hint,
+    children = _a.children,
+    error = _a.error,
+    className = _a.className;
+  return jsxs(BaseContainer, {
+    className: className,
+    ref: ref,
+    children: [label && jsx(Typography, {
+      tag: "label",
+      children: label
+    }), children, hint && jsx(Typography, {
+      variant: error ? "alert" : "secondary",
+      tag: "span",
+      children: hint
+    })]
+  });
+});
+
+export { FormField as default };

package/esm/base/FormField/index.props.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type FormFieldProps = {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: boolean;
+    className?: string;
+    children: ReactNode;
+};

package/esm/base/FormField/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BaseContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/base/FormField/styles.js

@@ -0,0 +1,12 @@
+import _styled from '@emotion/styled/base';
+import { __makeTemplateObject } from 'tslib';
+
+var BaseContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "ex9vcr90"
+} : {
+  target: "ex9vcr90",
+  label: "BaseContainer"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSwgW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSkpKTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSwgW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSkpKTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")])));
+var templateObject_1;
+
+export { BaseContainer };

package/esm/base/InputRoot/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { InputProps } from "./index.props";
+declare const InputRoot: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default InputRoot;

package/esm/base/InputRoot/index.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BaseInputRoot, BaseIcon, BaseDisableWrapper } from './styles.js';
+
+var InputRoot = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    disabled = _a.disabled,
+    error = _a.error,
+    size = _a.size;
+  return jsxs(BaseInputRoot, {
+    ref: ref,
+    className: className,
+    variant: variant,
+    isError: error ? 1 : 0,
+    disabled: disabled,
+    size: size,
+    children: [startIcon && jsx(BaseIcon, {
+      children: startIcon
+    }), children, endIcon && jsx(BaseIcon, {
+      children: endIcon
+    }), disabled && jsx(BaseDisableWrapper, {})]
+  });
+});
+
+export { InputRoot as default };

package/esm/base/InputRoot/index.props.d.ts

@@ -0,0 +1,41 @@
+import type { CSSObject } from "@emotion/react";
+import type { ReactNode } from "react";
+export type InputSize = "s" | "m" | "l";
+type VariantStyles = {
+    color?: CSSObject["color"];
+    backgroundColor?: CSSObject["backgroundColor"];
+    borderColor?: CSSObject["borderColor"];
+    boxShadow?: CSSObject["boxShadow"];
+};
+type PlaceholderStyles = {
+    color?: CSSObject["color"];
+};
+type VariantStates = {
+    normal?: VariantStyles;
+    hovered?: VariantStyles;
+    focused?: VariantStyles;
+    active?: VariantStyles;
+    disabled?: VariantStyles;
+    error?: {
+        normal?: VariantStyles;
+        hovered?: VariantStyles;
+        focused?: VariantStyles;
+    };
+};
+export type InputVariant = {
+    primary: VariantStates;
+};
+export type PlaceholderProps = {
+    placeholder: PlaceholderStyles;
+};
+export type InputProps = {
+    variant?: keyof InputVariant;
+    disabled: boolean;
+    error?: boolean;
+    className?: string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    children: ReactNode;
+    size?: InputSize;
+};
+export {};

package/esm/base/InputRoot/styles.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { InputSize, InputVariant } from "./index.props";
+export declare const BaseInputRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    disabled: boolean;
+    isError?: number | undefined;
+    size?: InputSize | undefined;
+    variant: keyof InputVariant;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BaseInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BasePlaceholder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const BaseIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BaseDisableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;