pixelize-design-library 1.1.90 → 1.1.93

package/dist/App.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import './global.css';
 declare function App(): React.JSX.Element;
 export default App;

package/dist/App.js

@@ -34,6 +34,7 @@ var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/Naviga
 var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
 var Layout_1 = __importDefault(require("./Layout"));
 var lucide_react_1 = require("lucide-react");
+require("./global.css");
 function App() {
     function useWindowSize() {
         var _a = (0, react_1.useState)({

package/dist/Components/Buttons/Buttons.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonsProps } from './ButtonsProps';
+declare const Buttons: ({ onClick, label, className, disabled }: ButtonsProps) => React.JSX.Element;
+export default Buttons;

package/dist/Components/Buttons/Buttons.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Buttons = function (_a) {
+    var onClick = _a.onClick, label = _a.label, className = _a.className, disabled = _a.disabled;
+    return (react_1.default.createElement("button", { onClick: onClick, className: "bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ".concat(className, " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'), disabled: disabled }, label));
+};
+exports.default = Buttons;

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -0,0 +1,6 @@
+export type ButtonsProps = {
+    label: string;
+    onClick: () => void;
+    className?: string;
+    disabled?: boolean;
+};

package/dist/Components/Common/ErrorComponent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ErrorComponent: ({ error, errorClassName }: {
+    error: string;
+    errorClassName?: string | undefined;
+}) => React.JSX.Element;
+export default ErrorComponent;

package/dist/Components/Common/ErrorComponent.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ErrorComponent = function (_a) {
+    var error = _a.error, errorClassName = _a.errorClassName;
+    return (react_1.default.createElement("p", { className: "mt-1 text-sm text-[#F2463A] flex items-center gap-1 ".concat(errorClassName) },
+        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
+            react_1.default.createElement("circle", { cx: "50", cy: "50", r: "50", fill: "#EF4444" }),
+            react_1.default.createElement("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: "white" }),
+            react_1.default.createElement("circle", { cx: "50", cy: "28", r: "4", fill: "white" })),
+        error));
+};
+exports.default = ErrorComponent;

package/dist/Components/Common/Label.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const Label: ({ label, labelClassName, isRequired }: {
+    label: string;
+    labelClassName?: string | undefined;
+    isRequired?: boolean | undefined;
+}) => React.JSX.Element;
+export default Label;

package/dist/Components/Common/Label.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Label = function (_a) {
+    var label = _a.label, labelClassName = _a.labelClassName, isRequired = _a.isRequired;
+    return (react_1.default.createElement("label", { className: "block text-sm font-medium text-[#434853] mb-1 ".concat(labelClassName), htmlFor: label },
+        label,
+        isRequired && react_1.default.createElement("span", { className: "text-[#F2463A] ml-1" }, "*")));
+};
+exports.default = Label;

package/dist/Components/Input/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { InputProps } from "./InputProps";
+declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired }: InputProps) => React.JSX.Element>;
+export default _default;

package/dist/Components/Input/Input/Input.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var lucide_react_1 = require("lucide-react");
+var Label_1 = __importDefault(require("../../Common/Label"));
+var ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
+var Input = function (_a) {
+    var label = _a.label, type = _a.type, value = _a.value, onChange = _a.onChange, error = _a.error, placeholder = _a.placeholder, className = _a.className, inputBoxClassName = _a.inputBoxClassName, isRequired = _a.isRequired;
+    var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
+    var isPassword = type === "password";
+    var inputType = isPassword ? (showPassword ? "text" : "password") : type;
+    return (react_1.default.createElement("div", { className: "mb-4 ".concat(inputBoxClassName !== null && inputBoxClassName !== void 0 ? inputBoxClassName : "") },
+        react_1.default.createElement(Label_1.default, { label: label, isRequired: isRequired }),
+        react_1.default.createElement("div", { className: "relative w-full overflow-hidden" },
+            react_1.default.createElement("input", { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: "".concat(className && " ".concat(className), " w-full px-4 py-2 rounded-md border focus:outline-none focus:ring-purple-500\n                    ").concat(error ? "border-red-500 text-[#161B25]" : '', "\n                    ").concat(value ? "border-purple-500 text-gray-900" : "border-gray-300 text-gray-900", "\n                    ").concat(error ? "focus:ring-red-400" : '', "\n                    ").concat(value ? "focus:ring-purple-500" : "focus:ring-indigo-300", "\n                    ").concat(isPassword ? "pr-10" : "", "\n                    "), required: isRequired }),
+            isPassword && (react_1.default.createElement("button", { type: "button", className: "absolute inset-y-0 right-3 flex items-center text-gray-400", onClick: function () { return setShowPassword(function (prev) { return !prev; }); } }, showPassword ? (react_1.default.createElement(lucide_react_1.Eye, { className: "h-5 w-5" })) : (react_1.default.createElement(lucide_react_1.EyeOff, { className: "h-5 w-5" }))))),
+        error && (react_1.default.createElement(ErrorComponent_1.default, { error: error }))));
+};
+exports.default = react_1.default.memo(Input);

package/dist/Components/Input/Input/InputProps.d.ts

@@ -0,0 +1,17 @@
+export type InputProps = {
+    label: string;
+    type?: "email" | "password" | "text" | "number";
+    value: string;
+    onChange: (val: string) => void;
+    error?: string;
+    placeholder?: string;
+    className?: string;
+    inputBoxClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    disabled?: boolean;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    isRequired?: boolean;
+};

package/dist/Components/Input/Input/InputProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PinInputsProps } from './PinInputsProps';
+declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => React.JSX.Element;
+export default PinInputs;

package/dist/Components/PinInputs/PinInputs.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Label_1 = __importDefault(require("../Common/Label"));
+var ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
+var PinInputs = function (_a) {
+    var _b = _a.length, length = _b === void 0 ? 3 : _b, label = _a.label, error = _a.error, onChange = _a.onChange, onComplete = _a.onComplete, _c = _a.mask, mask = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "*" : _d;
+    var _e = (0, react_1.useState)(Array(length).fill("")), values = _e[0], setValues = _e[1];
+    var inputsRef = (0, react_1.useRef)([]);
+    var handleChange = function (index, value) {
+        var _a;
+        if (!/^[0-9]?$/.test(value))
+            return;
+        var newValues = __spreadArray([], values, true);
+        newValues[index] = value;
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
+        if (value && index < length - 1) {
+            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (newValues.every(function (v) { return v !== ""; })) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
+        }
+    };
+    var handleKeyDown = function (e, index) {
+        var _a;
+        if (e.key === "Backspace" && !values[index] && index > 0) {
+            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    return (react_1.default.createElement("div", null,
+        label && react_1.default.createElement(Label_1.default, { label: label }),
+        react_1.default.createElement("div", { className: "flex space-x-2" }, Array.from({ length: length }).map(function (_, index) { return (react_1.default.createElement("input", { key: index, ref: function (el) { return (inputsRef.current[index] = el); }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, className: "w-12 h-12 text-center border rounded-md text-lg focus:outline-none focus:ring-2 ".concat(error ? "border-red-500 focus:ring-red-300" : "border-gray-300 focus:ring-blue-500") })); })),
+        error && react_1.default.createElement(ErrorComponent_1.default, { error: error })));
+};
+exports.default = PinInputs;

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -0,0 +1,9 @@
+export type PinInputsProps = {
+    length?: number;
+    label?: string;
+    error?: string;
+    mask?: boolean;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+};

package/dist/Components/PinInputs/PinInputsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Layout.js

@@ -58,6 +58,7 @@ var toster_1 = __importDefault(require("./Pages/toster"));
 var input_1 = __importDefault(require("./Pages/input"));
 var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
 var table_1 = require("./Pages/table");
+var TInput_1 = __importDefault(require("./Pages/TInput"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -73,6 +74,9 @@ var Layout = function () {
             window.removeEventListener("popstate", handlePopState);
         };
     }, []);
+    var switchTheme = function (themeName) {
+        document.documentElement.setAttribute('data-theme', themeName);
+    };
     var renderPage = function () {
         switch (currentPath) {
             case "/alertdialog":
@@ -131,10 +135,12 @@ var Layout = function () {
                 return react_2.default.createElement(checkbox_1.default, null);
             case "/toster":
                 return react_2.default.createElement(toster_1.default, null);
-            case "/input":
+            case "/InputPage":
                 return react_2.default.createElement(input_1.default, null);
             case "/table":
                 return react_2.default.createElement(table_1.TableExample, null);
+            case "/tinput":
+                return react_2.default.createElement(TInput_1.default, null);
             case "/":
             default:
         }
@@ -170,8 +176,13 @@ var Layout = function () {
             react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); } }, "Modal"),
             react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); } }, "Checkbox"),
             react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); } }, "Toster"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/input"); } }, "Input"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); } }, "Table")),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); } }, "Input"),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); } }, "Table"),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement("br", null),
+            react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); } }, "Input"),
+            react_2.default.createElement("button", { onClick: function () { return switchTheme('theme2'); } }, "Switch to Theme 2")),
         react_2.default.createElement("br", null),
         react_2.default.createElement("br", null),
         renderPage()));

package/dist/Pages/TInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TInput: () => React.JSX.Element;
+export default TInput;

package/dist/Pages/TInput.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Input_1 = __importDefault(require("../Components/Input/Input/Input"));
+var Buttons_1 = __importDefault(require("../Components/Buttons/Buttons"));
+var PinInputs_1 = __importDefault(require("../Components/PinInputs/PinInputs"));
+var TInput = function () {
+    var _a = (0, react_1.useState)(""), email = _a[0], setEmail = _a[1];
+    var _b = (0, react_1.useState)(""), password = _b[0], setPassword = _b[1];
+    var _c = (0, react_1.useState)({ email: "ddd", password: "" }), errors = _c[0], setErrors = _c[1];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Input_1.default, { label: "Email Address", type: "email", value: email, onChange: setEmail, error: errors.email, placeholder: "Email Address", inputBoxClassName: "w-1/6" }),
+        react_1.default.createElement(Input_1.default, { label: "Password", type: "password", value: password, onChange: setPassword, error: errors.password, placeholder: "Password", inputBoxClassName: "w-1/6" }),
+        react_1.default.createElement(PinInputs_1.default, { length: 6, error: "", onComplete: function (value) { console.log(value, "value"); } }),
+        react_1.default.createElement(Buttons_1.default, { label: "Sign In", onClick: function () { } })));
+};
+exports.default = TInput;

package/dist/Theme/Default/palette.d.ts

@@ -195,6 +195,18 @@ declare const palette: {
         subtle: string;
         muted: string;
         neutral: string;
+        base: string;
+        tableHeader: string;
+    };
+    text: {
+        heading: string;
+        body: string;
+        subtle: string;
+        input: string;
+    };
+    border: {
+        default: string;
+        light: string;
     };
 };
 export default palette;

package/dist/Theme/Default/palette.js

@@ -2,68 +2,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette = {
     primary: {
-        50: "#e3f2f9",
-        100: "#c5e4f3",
-        200: "#a2d4ec",
-        300: "#7ac1e4",
-        400: "#47a9da",
-        500: "#0088cc",
-        600: "#007ab8",
-        700: "#006ba1",
-        800: "#005885",
-        900: "#003f5e",
+        50: "#ecddfb",
+        100: "#d6b7f6",
+        200: "#be8ef0",
+        300: "#aa6ae9",
+        400: "#944cde",
+        500: "#9A4FE5",
+        600: "#8b48d8",
+        700: "#7a3ccc",
+        800: "#6933b2",
+        900: "#59299a",
     },
     transparent: "transparent",
     black: "#000",
     white: "#fff",
     semantic: {
         success: {
-            50: "#e6f9f0",
-            100: "#c0f0d8",
-            200: "#8be6bb",
-            300: "#5bdb9e",
-            400: "#33d181",
-            500: "#00b768",
-            600: "#00a05a",
-            700: "#00854b",
-            800: "#006b3c",
-            900: "#004c28",
+            50: "#e9fdf1",
+            100: "#c8f7d8",
+            200: "#a5f1bd",
+            300: "#84e7a2",
+            400: "#60d987",
+            500: "#23B85C",
+            600: "#1dbb51",
+            700: "#189946",
+            800: "#14753a",
+            900: "#0f5b2f",
         },
         error: {
-            50: "#ffe6e6",
-            100: "#fbbcbc",
-            200: "#f28f8f",
-            300: "#e66060",
-            400: "#db3a3a",
-            500: "#c21e1e",
-            600: "#a01919",
-            700: "#7e1313",
-            800: "#5c0d0d",
-            900: "#3d0909",
+            50: "#fff5f2",
+            100: "#fee8e1",
+            200: "#fdd0c8",
+            300: "#fca9a0",
+            400: "#f9897c",
+            500: "#F2463A",
+            600: "#c32e23",
+            700: "#a6261d",
+            800: "#8a1f18",
+            900: "#701812",
         },
         warning: {
-            50: "#fff4e6",
-            100: "#ffe1b8",
-            200: "#ffcc85",
-            300: "#ffb653",
-            400: "#ffa31a",
-            500: "#ff8a00",
-            600: "#db7000",
-            700: "#b75800",
-            800: "#934300",
-            900: "#702f00",
+            50: "#fffaf5",
+            100: "#fff0e0",
+            200: "#fedcc0",
+            300: "#fec59e",
+            400: "#fdaf7c",
+            500: "#FB8F3D",
+            600: "#db6d1e",
+            700: "#b75d18",
+            800: "#924c13",
+            900: "#6e3b0e",
         },
         info: {
-            50: "#e3f5ff",
-            100: "#b8e4ff",
-            200: "#85d1ff",
-            300: "#52bdff",
-            400: "#1fa9ff",
-            500: "#008df5",
-            600: "#0077db",
-            700: "#005cb3",
-            800: "#004489",
-            900: "#002d5c",
+            50: "#f1fcfe",
+            100: "#dcf6fb",
+            200: "#c0ecf7",
+            300: "#9eddef",
+            400: "#7fd0e6",
+            500: "#5FC4DE",
+            600: "#3bbfd2",
+            700: "#309db0",
+            800: "#257d8d",
+            900: "#1a5d6c",
         },
     },
     gray: {
@@ -196,7 +196,19 @@ var palette = {
         accent: "#e5e5e5",
         subtle: "#f5f6f7",
         muted: "#dfe3e6",
-        neutral: "#ebedef", // Neutral grey with a balanced tone
+        neutral: "#ebedef",
+        base: "#FBFBFB",
+        tableHeader: "#F6F6F6",
+    },
+    text: {
+        heading: "#161B25",
+        body: "#555A64",
+        subtle: "#434853",
+        input: "#717680", // input default
+    },
+    border: {
+        default: "#D6D8DB",
+        light: "#E8E8E8",
     },
 };
 exports.default = palette;

package/dist/Theme/Default/theme.js

@@ -18,5 +18,5 @@ var react_1 = require("@chakra-ui/react");
 var palette_1 = __importDefault(require("./palette"));
 var common_1 = __importDefault(require("../common"));
 var fonts_1 = __importDefault(require("../fonts"));
-var skyline = __assign(__assign({ colors: palette_1.default }, fonts_1.default), common_1.default);
-exports.default = (0, react_1.extendTheme)(skyline);
+var lavender = __assign(__assign({ colors: palette_1.default }, fonts_1.default), common_1.default);
+exports.default = (0, react_1.extendTheme)(lavender);