colibri-ui 0.7.7 → 0.7.9

package/Grid/Item/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { GridItemProps } from "./index.props";
+declare const GridItem: FC<GridItemProps>;
+export default GridItem;

package/Grid/Item/index.props.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export type GridItemProps = {
+    children: ReactNode;
+    fullWidth?: boolean;
+    className?: string;
+};

package/Grid/Item/styles.d.ts

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

package/Grid/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { GridProps } from "./index.props";
+declare const Grid: React.FC<GridProps>;
+export default Grid;

package/Grid/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('./styles.js');
+
+var Grid = function Grid(_a) {
+  var children = _a.children,
+    className = _a.className;
+  return jsxRuntime.jsx(styles.GridWrapper, {
+    className: className,
+    children: jsxRuntime.jsx(styles.GridItems, {
+      children: children
+    })
+  });
+};
+
+exports.default = Grid;

package/Grid/index.props.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export type GridProps = {
+    children: ReactNode;
+    className?: string;
+};

package/Grid/package.json

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

package/Grid/styles.d.ts

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

@@ -0,0 +1,25 @@
+'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 GridWrapper = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wwgvwc1"
+} : {
+  target: "e1wwgvwc1",
+  label: "GridWrapper"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  width: 100%;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBHcmlkV3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgd2lkdGg6IDEwMCU7XFxuXCJdLCBbXCJcXG4gIHdpZHRoOiAxMDAlO1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgR3JpZEl0ZW1zID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBncmlkO1xcblxcbiAgcm93LWdhcDogMjRweDtcXG4gIGNvbHVtbi1nYXA6IDE2cHg7XFxuXFxuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpdCwgbWlubWF4KDEzNnB4LCAxZnIpKTtcXG4gIGdyaWQtYXV0by1mbG93OiByb3cgZGVuc2U7XFxuXCJdLCBbXCJcXG4gIGRpc3BsYXk6IGdyaWQ7XFxuXFxuICByb3ctZ2FwOiAyNHB4O1xcbiAgY29sdW1uLWdhcDogMTZweDtcXG5cXG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZml0LCBtaW5tYXgoMTM2cHgsIDFmcikpO1xcbiAgZ3JpZC1hdXRvLWZsb3c6IHJvdyBkZW5zZTtcXG5cIl0pKSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  width: 100%;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBHcmlkV3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgd2lkdGg6IDEwMCU7XFxuXCJdLCBbXCJcXG4gIHdpZHRoOiAxMDAlO1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgR3JpZEl0ZW1zID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBncmlkO1xcblxcbiAgcm93LWdhcDogMjRweDtcXG4gIGNvbHVtbi1nYXA6IDE2cHg7XFxuXFxuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpdCwgbWlubWF4KDEzNnB4LCAxZnIpKTtcXG4gIGdyaWQtYXV0by1mbG93OiByb3cgZGVuc2U7XFxuXCJdLCBbXCJcXG4gIGRpc3BsYXk6IGdyaWQ7XFxuXFxuICByb3ctZ2FwOiAyNHB4O1xcbiAgY29sdW1uLWdhcDogMTZweDtcXG5cXG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZml0LCBtaW5tYXgoMTM2cHgsIDFmcikpO1xcbiAgZ3JpZC1hdXRvLWZsb3c6IHJvdyBkZW5zZTtcXG5cIl0pKSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])));
+var GridItems = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e1wwgvwc0"
+} : {
+  target: "e1wwgvwc0",
+  label: "GridItems"
+})(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  display: grid;\n\n  row-gap: 24px;\n  column-gap: 16px;\n\n  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));\n  grid-auto-flow: row dense;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBHcmlkV3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgd2lkdGg6IDEwMCU7XFxuXCJdLCBbXCJcXG4gIHdpZHRoOiAxMDAlO1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgR3JpZEl0ZW1zID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBncmlkO1xcblxcbiAgcm93LWdhcDogMjRweDtcXG4gIGNvbHVtbi1nYXA6IDE2cHg7XFxuXFxuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpdCwgbWlubWF4KDEzNnB4LCAxZnIpKTtcXG4gIGdyaWQtYXV0by1mbG93OiByb3cgZGVuc2U7XFxuXCJdLCBbXCJcXG4gIGRpc3BsYXk6IGdyaWQ7XFxuXFxuICByb3ctZ2FwOiAyNHB4O1xcbiAgY29sdW1uLWdhcDogMTZweDtcXG5cXG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZml0LCBtaW5tYXgoMTM2cHgsIDFmcikpO1xcbiAgZ3JpZC1hdXRvLWZsb3c6IHJvdyBkZW5zZTtcXG5cIl0pKSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  display: grid;\n\n  row-gap: 24px;\n  column-gap: 16px;\n\n  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));\n  grid-auto-flow: row dense;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBHcmlkV3JhcHBlciA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgd2lkdGg6IDEwMCU7XFxuXCJdLCBbXCJcXG4gIHdpZHRoOiAxMDAlO1xcblwiXSkpKTtcbmV4cG9ydCB2YXIgR3JpZEl0ZW1zID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBncmlkO1xcblxcbiAgcm93LWdhcDogMjRweDtcXG4gIGNvbHVtbi1nYXA6IDE2cHg7XFxuXFxuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpdCwgbWlubWF4KDEzNnB4LCAxZnIpKTtcXG4gIGdyaWQtYXV0by1mbG93OiByb3cgZGVuc2U7XFxuXCJdLCBbXCJcXG4gIGRpc3BsYXk6IGdyaWQ7XFxuXFxuICByb3ctZ2FwOiAyNHB4O1xcbiAgY29sdW1uLWdhcDogMTZweDtcXG5cXG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZml0LCBtaW5tYXgoMTM2cHgsIDFmcikpO1xcbiAgZ3JpZC1hdXRvLWZsb3c6IHJvdyBkZW5zZTtcXG5cIl0pKSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])));
+var templateObject_1, templateObject_2;
+
+exports.GridItems = GridItems;
+exports.GridWrapper = GridWrapper;

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,10 +1,12 @@
 # Colibri UI
 
+![npm version](https://img.shields.io/npm/v/colibri-ui.svg?style=flat)
+
 React UI components library.
 
 ## Demo
 
-[Demo](https://66463ad45ac665db2620044b-jravylsyiw.chromatic.com)
+[Demo](https://godfreyd.github.io/colibri-ui)
 
 ## Installation
 

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/color.d.ts

@@ -40,10 +40,15 @@ export declare const TretiaryBA: {
     TRETIARY_BA_4: string;
     TRETIARY_BA_5: string;
 };
-export declare const TextBA: {
-    TEXT_BA_PRIMARY: string;
-    TEXT_BA_SECONDARY: string;
-    TEXT_BA_TRETIARY: string;
+export declare const BrandDefault: {
+    BRAND_DEFAULT_1: string;
+    BRAND_DEFAULT_2: string;
+    BRAND_DEFAULT_3: string;
+};
+export declare const BrandBA: {
+    BRAND_BA_1: string;
+    BRAND_BA_2: string;
+    BRAND_BA_3: string;
 };
 export declare const Common: {
     WHITE: string;
@@ -99,9 +104,12 @@ export declare const Color: {
     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/Theme/color.js

@@ -46,10 +46,15 @@ var TretiaryBA = {
   TRETIARY_BA_4: "#b1bcc8",
   TRETIARY_BA_5: "#87929d"
 };
-var TextBA = {
-  TEXT_BA_PRIMARY: "#000",
-  TEXT_BA_SECONDARY: "#fffbe9",
-  TEXT_BA_TRETIARY: "#D5D500"
+var BrandDefault = {
+  BRAND_DEFAULT_1: "#F393D2",
+  BRAND_DEFAULT_2: "#4BDCF8",
+  BRAND_DEFAULT_3: "#D5D500"
+};
+var BrandBA = {
+  BRAND_BA_1: "#B54141",
+  BRAND_BA_2: "#fffbe9",
+  BRAND_BA_3: "#D5D500"
 };
 var Common = {
   WHITE: "#fff",
@@ -66,17 +71,18 @@ var Accents = {
   ALERT: "#ff564e",
   SUCCESS: "#28bc00"
 };
-var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), TextBA), Backgrounds), Primary), Secondary), Tretiary), PrimaryBA), SecondaryBA), TretiaryBA);
+var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), BrandDefault), BrandBA), Backgrounds), Primary), Secondary), Tretiary), PrimaryBA), SecondaryBA), TretiaryBA);
 
 exports.Accents = Accents;
 exports.Backgrounds = Backgrounds;
+exports.BrandBA = BrandBA;
+exports.BrandDefault = BrandDefault;
 exports.Color = Color;
 exports.Common = Common;
 exports.Primary = Primary;
 exports.PrimaryBA = PrimaryBA;
 exports.Secondary = Secondary;
 exports.SecondaryBA = SecondaryBA;
-exports.TextBA = TextBA;
 exports.Tretiary = Tretiary;
 exports.TretiaryBA = TretiaryBA;
 exports.default = Color;

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: {
@@ -64,9 +104,12 @@ export declare const THEMES: {
             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;
@@ -76,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: {
@@ -84,6 +164,9 @@ export declare const THEMES: {
             success: {
                 color: string;
             };
+            secondary: {
+                color: string;
+            };
         };
         switch: {
             circle: {
@@ -136,9 +219,12 @@ export declare const THEMES: {
             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/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;
 };