colibri-ui 0.7.6 → 0.7.8

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/README.md

@@ -4,7 +4,7 @@ React UI components library.
 
 ## Demo
 
-[Demo](https://66463ad45ac665db2620044b-sztbxghpch.chromatic.com/)
+[Demo](https://godfreyd.github.io/colibri-ui)
 
 ## Installation
 

package/Theme/color.d.ts

@@ -1,122 +1,117 @@
-export declare const Blue: {
-    BLUE_1: string;
-    BLUE_2: string;
-    BLUE_3: string;
-    BLUE_4: string;
-    BLUE_5: string;
-    BLUE_6: string;
-    BLUE_7: string;
-    BLUE_8: string;
-    BLUE_9: string;
-    BLUE_10: string;
-    BLUE_11: string;
-    BLUE_12: string;
+export declare const Primary: {
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_3: string;
+    PRIMARY_4: string;
+    PRIMARY_5: string;
 };
-export declare const Graphite: {
-    GRAPHITE_1: string;
-    GRAPHITE_2: string;
-    GRAPHITE_3: string;
-    GRAPHITE_4: string;
-    GRAPHITE_5: string;
-    GRAPHITE_6: string;
-    GRAPHITE_7: string;
-    GRAPHITE_8: string;
-    GRAPHITE_9: string;
-    GRAPHITE_10: string;
-    GRAPHITE_11: string;
-    GRAPHITE_12: string;
+export declare const Secondary: {
+    SECONDARY_1: string;
+    SECONDARY_2: string;
+    SECONDARY_3: string;
+    SECONDARY_4: string;
+    SECONDARY_5: string;
 };
-export declare const Gray: {
-    GRAY_1: string;
-    GRAY_2: string;
-    GRAY_3: string;
-    GRAY_4: string;
-    GRAY_5: string;
-    GRAY_6: string;
-    GRAY_7: string;
-    GRAY_8: string;
-    GRAY_9: string;
-    GRAY_10: string;
-    GRAY_11: string;
-    GRAY_12: string;
+export declare const Tretiary: {
+    TRETIARY_1: string;
+    TRETIARY_2: string;
+    TRETIARY_3: string;
+    TRETIARY_4: string;
+    TRETIARY_5: string;
 };
-export declare const Purple: {
-    PURPLE_1: string;
-    PURPLE_2: string;
-    PURPLE_3: string;
-    PURPLE_4: string;
-    PURPLE_5: string;
-    PURPLE_6: string;
-    PURPLE_7: string;
+export declare const PrimaryBA: {
+    PRIMARY_BA_1: string;
+    PRIMARY_BA_2: string;
+    PRIMARY_BA_3: string;
+    PRIMARY_BA_4: string;
+    PRIMARY_BA_5: string;
 };
-export declare const Neutral: {
-    NEUTRAL_1: string;
-    NEUTRAL_2: string;
-    NEUTRAL_3: string;
+export declare const SecondaryBA: {
+    SECONDARY_BA_1: string;
+    SECONDARY_BA_2: string;
+    SECONDARY_BA_3: string;
+    SECONDARY_BA_4: string;
+    SECONDARY_BA_5: string;
+};
+export declare const TretiaryBA: {
+    TRETIARY_BA_1: string;
+    TRETIARY_BA_2: string;
+    TRETIARY_BA_3: string;
+    TRETIARY_BA_4: string;
+    TRETIARY_BA_5: 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;
     BLACK: string;
 };
-export declare const Text: {
-    TYPOGRAPHY_PRIMARY: string;
-    TYPOGRAPHY_SECONDARY: string;
-    TYPOGRAPHY_ALERT: string;
-    TYPOGRAPHY_SUCCESS: string;
-    TYPOGRAPHY_LINK: string;
+export declare const Backgrounds: {
+    BG_1: string;
+    BG_2: string;
+    BG_3: string;
+    BG_4: string;
+    BG_5: string;
+};
+export declare const Accents: {
+    ALERT: string;
+    SUCCESS: string;
+};
+export type ColorsTheme = {
+    [key: string]: string;
 };
 export declare const Color: {
-    TYPOGRAPHY_PRIMARY: string;
-    TYPOGRAPHY_SECONDARY: string;
-    TYPOGRAPHY_ALERT: string;
-    TYPOGRAPHY_SUCCESS: string;
-    TYPOGRAPHY_LINK: string;
-    NEUTRAL_1: string;
-    NEUTRAL_2: string;
-    NEUTRAL_3: string;
-    PURPLE_1: string;
-    PURPLE_2: string;
-    PURPLE_3: string;
-    PURPLE_4: string;
-    PURPLE_5: string;
-    PURPLE_6: string;
-    PURPLE_7: string;
-    GRAY_1: string;
-    GRAY_2: string;
-    GRAY_3: string;
-    GRAY_4: string;
-    GRAY_5: string;
-    GRAY_6: string;
-    GRAY_7: string;
-    GRAY_8: string;
-    GRAY_9: string;
-    GRAY_10: string;
-    GRAY_11: string;
-    GRAY_12: string;
-    GRAPHITE_1: string;
-    GRAPHITE_2: string;
-    GRAPHITE_3: string;
-    GRAPHITE_4: string;
-    GRAPHITE_5: string;
-    GRAPHITE_6: string;
-    GRAPHITE_7: string;
-    GRAPHITE_8: string;
-    GRAPHITE_9: string;
-    GRAPHITE_10: string;
-    GRAPHITE_11: string;
-    GRAPHITE_12: string;
-    BLUE_1: string;
-    BLUE_2: string;
-    BLUE_3: string;
-    BLUE_4: string;
-    BLUE_5: string;
-    BLUE_6: string;
-    BLUE_7: string;
-    BLUE_8: string;
-    BLUE_9: string;
-    BLUE_10: string;
-    BLUE_11: string;
-    BLUE_12: string;
+    TRETIARY_BA_1: string;
+    TRETIARY_BA_2: string;
+    TRETIARY_BA_3: string;
+    TRETIARY_BA_4: string;
+    TRETIARY_BA_5: string;
+    SECONDARY_BA_1: string;
+    SECONDARY_BA_2: string;
+    SECONDARY_BA_3: string;
+    SECONDARY_BA_4: string;
+    SECONDARY_BA_5: string;
+    PRIMARY_BA_1: string;
+    PRIMARY_BA_2: string;
+    PRIMARY_BA_3: string;
+    PRIMARY_BA_4: string;
+    PRIMARY_BA_5: string;
+    TRETIARY_1: string;
+    TRETIARY_2: string;
+    TRETIARY_3: string;
+    TRETIARY_4: string;
+    TRETIARY_5: string;
+    SECONDARY_1: string;
+    SECONDARY_2: string;
+    SECONDARY_3: string;
+    SECONDARY_4: string;
+    SECONDARY_5: string;
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_3: string;
+    PRIMARY_4: string;
+    PRIMARY_5: string;
+    BG_1: string;
+    BG_2: string;
+    BG_3: string;
+    BG_4: string;
+    BG_5: 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;
     BLACK: string;
 };

package/Theme/color.js

@@ -4,81 +4,85 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 
-var Blue = {
-  BLUE_1: "#FBFDFF",
-  BLUE_2: "#F5F9FF",
-  BLUE_3: "#E9F3FF",
-  BLUE_4: "#DAECFF",
-  BLUE_5: "#C9E2FF",
-  BLUE_6: "#B4D5FF",
-  BLUE_7: "#9AC3FD",
-  BLUE_8: "#73ABF8",
-  BLUE_9: "#0974EB",
-  BLUE_10: "#0066DC",
-  BLUE_11: "#006DE3",
-  BLUE_12: "#093266"
+var Primary = {
+  PRIMARY_1: "#E8F0FE",
+  PRIMARY_2: "#B8D2FF",
+  PRIMARY_3: "#73ABF8",
+  PRIMARY_4: "#067AFF",
+  PRIMARY_5: "#0066DC"
 };
-var Graphite = {
-  GRAPHITE_1: "#FCFDFE",
-  GRAPHITE_2: "#F8FAFB",
-  GRAPHITE_3: "#EDF0F4",
-  GRAPHITE_4: "#E4E8ED",
-  GRAPHITE_5: "#DBE1E6",
-  GRAPHITE_6: "#D1D8DF",
-  GRAPHITE_7: "#C4CDD6",
-  GRAPHITE_8: "#AFB9C3",
-  GRAPHITE_9: "#24292E",
-  GRAPHITE_10: "#383D42",
-  GRAPHITE_11: "#5E666F",
-  GRAPHITE_12: "#22272B"
+var Secondary = {
+  SECONDARY_1: "#fff1db",
+  SECONDARY_2: "#ffdaa3",
+  SECONDARY_3: "#ffca79",
+  SECONDARY_4: "#f4b968",
+  SECONDARY_5: "#ffab0f"
 };
-var Gray = {
-  GRAY_1: "#FCFCFD",
-  GRAY_2: "#F9F9FB",
-  GRAY_3: "#EFF0F3",
-  GRAY_4: "#E7E8EC",
-  GRAY_5: "#E0E1E6",
-  GRAY_6: "#D8D9E0",
-  GRAY_7: "#CDCED7",
-  GRAY_8: "#B9BBC6",
-  GRAY_9: "#8B8D98",
-  GRAY_10: "#80828D",
-  GRAY_11: "#62636C",
-  GRAY_12: "#1E1F24"
+var Tretiary = {
+  TRETIARY_1: "#FFF5F0",
+  TRETIARY_2: "#FFEAE2",
+  TRETIARY_3: "#FFD8CA",
+  TRETIARY_4: "#FFA384 ",
+  TRETIARY_5: "#fc5200"
 };
-var Purple = {
-  PURPLE_1: "rgba(38, 49, 129, .07)",
-  PURPLE_2: "rgba(38, 49, 129, .15)",
-  PURPLE_3: "rgba(38, 49, 129, .3)",
-  PURPLE_4: "rgba(38, 49, 129, .4)",
-  PURPLE_5: "rgba(38, 49, 129, .5)",
-  PURPLE_6: "rgba(38, 49, 129, .6)",
-  PURPLE_7: "rgba(38, 49, 129, .7)"
+var PrimaryBA = {
+  PRIMARY_BA_1: "rgba(38, 49, 129, .07)",
+  PRIMARY_BA_2: "rgba(38, 49, 129, .3)",
+  PRIMARY_BA_3: "rgba(38, 49, 129, .4)",
+  PRIMARY_BA_4: "rgba(38, 49, 129, .6)",
+  PRIMARY_BA_5: "rgba(38, 49, 129, .8)"
 };
-var Neutral = {
-  NEUTRAL_1: "rgba(22,51,0,.05)",
-  NEUTRAL_2: "rgba(22,51,0,.078)",
-  NEUTRAL_3: "rgba(22,51,0,.129)"
+var SecondaryBA = {
+  SECONDARY_BA_1: "#d9d9d9",
+  SECONDARY_BA_2: "#bbb",
+  SECONDARY_BA_3: "#636363",
+  SECONDARY_BA_4: "#313131",
+  SECONDARY_BA_5: "#1a1a1a"
+};
+var TretiaryBA = {
+  TRETIARY_BA_1: "#EDF1F5",
+  TRETIARY_BA_2: "#d3dbe3",
+  TRETIARY_BA_3: "#c5cfda",
+  TRETIARY_BA_4: "#b1bcc8",
+  TRETIARY_BA_5: "#87929d"
+};
+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",
   BLACK: "#000"
 };
-var Text = {
-  TYPOGRAPHY_PRIMARY: "#000",
-  TYPOGRAPHY_SECONDARY: "#667799",
-  TYPOGRAPHY_ALERT: "#E6481F",
-  TYPOGRAPHY_SUCCESS: "#23943E",
-  TYPOGRAPHY_LINK: "#0062D1"
+var Backgrounds = {
+  BG_1: "#f2f2f2",
+  BG_2: "#e6e6e6",
+  BG_3: "#dbdbdb",
+  BG_4: "#b3b3b3",
+  BG_5: "#999"
+};
+var Accents = {
+  ALERT: "#ff564e",
+  SUCCESS: "#28bc00"
 };
-var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Blue), Graphite), Gray), Purple), Neutral), Text);
+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.Blue = Blue;
+exports.Accents = Accents;
+exports.Backgrounds = Backgrounds;
+exports.BrandBA = BrandBA;
+exports.BrandDefault = BrandDefault;
 exports.Color = Color;
 exports.Common = Common;
-exports.Graphite = Graphite;
-exports.Gray = Gray;
-exports.Neutral = Neutral;
-exports.Purple = Purple;
-exports.Text = Text;
+exports.Primary = Primary;
+exports.PrimaryBA = PrimaryBA;
+exports.Secondary = Secondary;
+exports.SecondaryBA = SecondaryBA;
+exports.Tretiary = Tretiary;
+exports.TretiaryBA = TretiaryBA;
 exports.default = Color;

package/Theme/index.d.ts

@@ -4,22 +4,14 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
-            primary: {
-                color: string;
-            };
-            secondary: {
-                color: string;
-            };
             alert: {
                 color: string;
             };
             success: {
                 color: string;
             };
-            link: {
-                color: string;
-            };
         };
         switch: {
             circle: {
@@ -36,26 +28,65 @@ export declare const THEMES: {
                 };
             };
         };
+        palette: {
+            TRETIARY_BA_1: string;
+            TRETIARY_BA_2: string;
+            TRETIARY_BA_3: string;
+            TRETIARY_BA_4: string;
+            TRETIARY_BA_5: string;
+            SECONDARY_BA_1: string;
+            SECONDARY_BA_2: string;
+            SECONDARY_BA_3: string;
+            SECONDARY_BA_4: string;
+            SECONDARY_BA_5: string;
+            PRIMARY_BA_1: string;
+            PRIMARY_BA_2: string;
+            PRIMARY_BA_3: string;
+            PRIMARY_BA_4: string;
+            PRIMARY_BA_5: string;
+            TRETIARY_1: string;
+            TRETIARY_2: string;
+            TRETIARY_3: string;
+            TRETIARY_4: string;
+            TRETIARY_5: string;
+            SECONDARY_1: string;
+            SECONDARY_2: string;
+            SECONDARY_3: string;
+            SECONDARY_4: string;
+            SECONDARY_5: string;
+            PRIMARY_1: string;
+            PRIMARY_2: string;
+            PRIMARY_3: string;
+            PRIMARY_4: string;
+            PRIMARY_5: string;
+            BG_1: string;
+            BG_2: string;
+            BG_3: string;
+            BG_4: string;
+            BG_5: 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;
+            BLACK: string;
+        };
     };
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
-            primary: {
-                color: string;
-            };
-            secondary: {
-                color: string;
-            };
             alert: {
                 color: string;
             };
             success: {
                 color: string;
             };
-            link: {
-                color: string;
-            };
         };
         switch: {
             circle: {
@@ -72,6 +103,53 @@ export declare const THEMES: {
                 };
             };
         };
+        palette: {
+            TRETIARY_BA_1: string;
+            TRETIARY_BA_2: string;
+            TRETIARY_BA_3: string;
+            TRETIARY_BA_4: string;
+            TRETIARY_BA_5: string;
+            SECONDARY_BA_1: string;
+            SECONDARY_BA_2: string;
+            SECONDARY_BA_3: string;
+            SECONDARY_BA_4: string;
+            SECONDARY_BA_5: string;
+            PRIMARY_BA_1: string;
+            PRIMARY_BA_2: string;
+            PRIMARY_BA_3: string;
+            PRIMARY_BA_4: string;
+            PRIMARY_BA_5: string;
+            TRETIARY_1: string;
+            TRETIARY_2: string;
+            TRETIARY_3: string;
+            TRETIARY_4: string;
+            TRETIARY_5: string;
+            SECONDARY_1: string;
+            SECONDARY_2: string;
+            SECONDARY_3: string;
+            SECONDARY_4: string;
+            SECONDARY_5: string;
+            PRIMARY_1: string;
+            PRIMARY_2: string;
+            PRIMARY_3: string;
+            PRIMARY_4: string;
+            PRIMARY_5: string;
+            BG_1: string;
+            BG_2: string;
+            BG_3: string;
+            BG_4: string;
+            BG_5: 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;
+            BLACK: string;
+        };
     };
 };
 export declare const ThemeProvider: FC<{

package/Theme/index.props.d.ts

@@ -1,10 +1,14 @@
+import type { CheckboxVariant } from "../Checkbox/index.props";
+import type { ColorsTheme } from "./color";
 import type { BreakpointsTheme } from "./breakpoints";
 import type { ButtonBase, ButtonVariant } from "../Button/index.props";
 import type { TypographyVariant } from "../Typography/index.props";
 import type { SwitchStates } from "../Switch/index.props";
 export type ThemeProps = {
     button: ButtonVariant & ButtonBase;
+    checkbox: CheckboxVariant;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;
     switch: SwitchStates;
+    palette: ColorsTheme;
 };