colibri-ui 0.7.8 → 0.7.9

package/Icons/index.d.ts

@@ -1,5 +1,3 @@
-export { default as Burger } from "./Burger";
-export { default as Check } from "./Check";
 export { default as Chevron } from "./Chevron";
 export { default as Close } from "./Close";
 export { default as EyeOpen } from "./EyeOpen";

package/Icons/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var Burger = require('./Burger.js');
-var Check = require('./Check.js');
 var Chevron = require('./Chevron.js');
 var Close = require('./Close.js');
 var EyeOpen = require('./EyeOpen.js');
@@ -13,8 +11,6 @@ var User = require('./User.js');
 
 
 
-exports.Burger = Burger.default;
-exports.Check = Check.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
 exports.EyeOpen = EyeOpen.default;

package/Input/index.d.ts

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

package/Input/index.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var index = require('../base/FormField/index.js');
+var index$1 = require('../base/InputRoot/index.js');
+var styles = require('../base/InputRoot/styles.js');
+
+var Input = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    label = _a.label,
+    hint = _a.hint,
+    error = _a.error,
+    onChange = _a.onChange,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "m" : _c,
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
+  var onChangeHandler = function onChangeHandler(e) {
+    if (onChange) onChange(e, e.target.value);
+  };
+  return jsxRuntime.jsx(index.default, {
+    className: className,
+    label: label,
+    hint: hint,
+    error: error,
+    children: jsxRuntime.jsx(index$1.default, {
+      ref: ref,
+      startIcon: startIcon,
+      endIcon: endIcon,
+      variant: variant,
+      size: size,
+      disabled: !!props.disabled,
+      error: error,
+      children: jsxRuntime.jsx(styles.BaseInput, tslib.__assign({
+        as: "input",
+        onChange: onChangeHandler,
+        type: "text"
+      }, props))
+    })
+  });
+});
+
+exports.default = Input;

package/Input/index.props.d.ts

@@ -0,0 +1,13 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import type { FormFieldProps } from "../base/FormField/index.props";
+import type { InputSize, InputVariant } from "../base/InputRoot/index.props";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+    variant?: keyof InputVariant;
+    size?: InputSize;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: boolean;
+}

package/Input/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Input/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -1,5 +1,7 @@
 # Colibri UI
 
+![npm version](https://img.shields.io/npm/v/colibri-ui.svg?style=flat)
+
 React UI components library.
 
 ## Demo

package/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { RectProps, TextProps } from "./index.props";
+export declare const SkeletonRect: FC<RectProps>;
+export declare const SkeletonText: FC<TextProps>;

package/Skeleton/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('./styles.js');
+
+var SkeletonRect = function SkeletonRect(_a) {
+  var className = _a.className,
+    width = _a.width,
+    height = _a.height,
+    borderRadius = _a.borderRadius;
+  return jsxRuntime.jsx(styles.StyledRect, {
+    className: className,
+    style: {
+      width: width,
+      height: height,
+      borderRadius: borderRadius
+    }
+  });
+};
+var SkeletonText = function SkeletonText(_a) {
+  var className = _a.className,
+    width = _a.width,
+    size = _a.size;
+  return jsxRuntime.jsx(styles.StyledText, {
+    className: className,
+    style: {
+      width: width,
+      height: size
+    }
+  });
+};
+
+exports.SkeletonRect = SkeletonRect;
+exports.SkeletonText = SkeletonText;

package/Skeleton/index.props.d.ts

@@ -0,0 +1,11 @@
+export type TextProps = {
+    className?: string;
+    width?: number | string;
+    size?: number;
+};
+export type RectProps = {
+    className?: string;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+};

package/Skeleton/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Skeleton/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Skeleton/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledRect: 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 StyledText: 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/Skeleton/styles.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var StyledRect = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e1v889w61"
+} : {
+  target: "e1v889w61",
+  label: "StyledRect"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  background-color: ", ";\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  background-color: ", ";\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])), function (_a) {
+  var theme = _a.theme;
+  return theme.palette.BG_2;
+});
+var StyledText = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e1v889w60"
+} : {
+  target: "e1v889w60",
+  label: "StyledText"
+})(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  height: 12px;\n\n  border-radius: 6px;\n  background-color: ", ";\n\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  height: 12px;\n\n  border-radius: 6px;\n  background-color: ", ";\n\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])), function (_a) {
+  var theme = _a.theme;
+  return theme.palette.BG_2;
+});
+var templateObject_1, templateObject_2;
+
+exports.StyledRect = StyledRect;
+exports.StyledText = StyledText;

package/Theme/index.d.ts

@@ -4,6 +4,43 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").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: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
             alert: {
@@ -12,6 +49,9 @@ export declare const THEMES: {
             success: {
                 color: string;
             };
+            secondary: {
+                color: string;
+            };
         };
         switch: {
             circle: {
@@ -79,6 +119,43 @@ export declare const THEMES: {
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").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: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
             alert: {
@@ -87,6 +164,9 @@ export declare const THEMES: {
             success: {
                 color: string;
             };
+            secondary: {
+                color: string;
+            };
         };
         switch: {
             circle: {

package/Theme/index.props.d.ts

@@ -1,3 +1,4 @@
+import type { InputVariant, PlaceholderProps } from "../base/InputRoot/index.props";
 import type { CheckboxVariant } from "../Checkbox/index.props";
 import type { ColorsTheme } from "./color";
 import type { BreakpointsTheme } from "./breakpoints";
@@ -9,6 +10,7 @@ export type ThemeProps = {
     checkbox: CheckboxVariant;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;
+    input: InputVariant & PlaceholderProps;
     switch: SwitchStates;
     palette: ColorsTheme;
 };

package/Theme/themes/buenos_aires.d.ts

@@ -1,6 +1,43 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
+export declare const InputThemeBA: {
+    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 CheckboxThemeBA: CheckboxVariant;
 export declare const TypographyThemeBA: {
     alert: {
@@ -9,6 +46,9 @@ export declare const TypographyThemeBA: {
     success: {
         color: string;
     };
+    secondary: {
+        color: string;
+    };
 };
 export declare const SwitchThemeDefault: {
     circle: {
@@ -28,6 +68,43 @@ export declare const SwitchThemeDefault: {
 export declare const THEME_BA: {
     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_BA: {
         success: {
             color: string;
         };
+        secondary: {
+            color: string;
+        };
     };
     switch: {
         circle: {

package/Theme/themes/buenos_aires.js

@@ -15,12 +15,12 @@ var ButtonThemeBA = {
       backgroundColor: color.Color.PRIMARY_BA_4,
       borderColor: color.Color.PRIMARY_BA_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_BA_5,
       borderColor: color.Color.PRIMARY_BA_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_BA_5,
       borderColor: color.Color.PRIMARY_BA_5
@@ -42,12 +42,12 @@ var ButtonThemeBA = {
       backgroundColor: color.Color.SECONDARY_BA_4,
       borderColor: color.Color.SECONDARY_BA_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_BA_5,
       borderColor: color.Color.SECONDARY_BA_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_BA_5,
       borderColor: color.Color.SECONDARY_BA_5
@@ -69,7 +69,7 @@ var ButtonThemeBA = {
       backgroundColor: color.Color.WHITE,
       borderColor: color.Color.WHITE
     },
-    hover: {
+    hovered: {
       color: color.Color.TRETIARY_BA_5,
       backgroundColor: color.Color.TRETIARY_BA_2,
       borderColor: color.Color.TRETIARY_BA_2
@@ -86,15 +86,52 @@ var ButtonThemeBA = {
     }
   }
 };
+var InputThemeBA = {
+  placeholder: {
+    color: color.Color.BG_2
+  },
+  primary: {
+    normal: {
+      borderColor: color.Color.BG_3
+    },
+    hovered: {
+      borderColor: color.Color.PRIMARY_BA_3,
+      boxShadow: "0px 0px 0px 2px ".concat(color.Color.PRIMARY_BA_2)
+    },
+    focused: {
+      borderColor: color.Color.PRIMARY_BA_4
+    },
+    disabled: {
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_3
+    },
+    error: {
+      normal: {
+        backgroundColor: color.Color.TRETIARY_2,
+        borderColor: color.Color.ALERT
+      },
+      hovered: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT,
+        boxShadow: "0px 0px 0px 2px ".concat(color.Color.TRETIARY_2)
+      },
+      focused: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT
+      }
+    }
+  }
+};
 var CheckboxThemeBA = {
   primary: {
     normal: {
       backgroundColor: color.Color.PRIMARY_BA_4
     },
-    hover: {
+    hovered: {
       backgroundColor: color.Color.PRIMARY_BA_4
     },
-    focus: {
+    focused: {
       boxShadow: "0 0 0 2px ".concat(color.Color.PRIMARY_BA_1)
     },
     checked: {
@@ -116,6 +153,9 @@ var TypographyThemeBA = {
   },
   success: {
     color: color.Color.SUCCESS
+  },
+  secondary: {
+    color: color.Color.BG_3
   }
 };
 var SwitchThemeDefault = {
@@ -136,6 +176,7 @@ var SwitchThemeDefault = {
 var THEME_BA = {
   breakpoints: breakpoints.default,
   button: ButtonThemeBA,
+  input: InputThemeBA,
   checkbox: CheckboxThemeBA,
   typography: TypographyThemeBA,
   "switch": SwitchThemeDefault,
@@ -144,6 +185,7 @@ var THEME_BA = {
 
 exports.ButtonThemeBA = ButtonThemeBA;
 exports.CheckboxThemeBA = CheckboxThemeBA;
+exports.InputThemeBA = InputThemeBA;
 exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_BA = THEME_BA;
 exports.TypographyThemeBA = TypographyThemeBA;