@modul/mbui 0.0.7-beta-pv-52960-c02a9972 → 0.0.7-beta-pv-52970-532db2dc

package/dist/Button/Button.js

@@ -7,7 +7,7 @@ const react_slot_1 = require("@radix-ui/react-slot");
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../@/lib/utils");
 // import { cn } from "@/lib/utils" порешать с алиасами
-const buttonVariants = (0, class_variance_authority_1.cva)('inline-flex items-center border-[2px] justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring ring-offset-1 disabled:pointer-events-none disabled:opacity-[.24]', {
+const buttonVariants = (0, class_variance_authority_1.cva)('inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] focus-visible:ring ring-offset-1 font-medium whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none', {
     variants: {
         variant: {
             primary: 'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
@@ -32,7 +32,7 @@ const buttonVariants = (0, class_variance_authority_1.cva)('inline-flex items-ce
     },
 });
 exports.buttonVariants = buttonVariants;
-const textVariants = (0, class_variance_authority_1.cva)('inline-flex whitespace-nowrap transition-colors focus-visible:outline-current rounded-[.25em] disabled:pointer-events-none disabled:opacity-[.24]', {
+const textVariants = (0, class_variance_authority_1.cva)('inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none', {
     variants: {
         variant: {
             primary: 'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',

package/dist/Button/index.d.ts

@@ -1 +1 @@
-export { Button } from './Button';
+export { Button, buttonVariants } from './Button';

package/dist/Button/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+exports.buttonVariants = exports.Button = void 0;
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return Button_1.buttonVariants; } });
 //# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":";;;AAAA,mCAA+B;AAAvB,gGAAA,MAAM,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":";;;AAAA,mCAA+C;AAAvC,gGAAA,MAAM,OAAA;AAAE,wGAAA,cAAc,OAAA"}

package/dist/Chip/Chip.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const chipVariants: (props?: {
+    variant?: "outline" | "success" | "primary" | "secondary" | "primary-outline" | "ghost";
+    size?: "lg" | "md" | "sm" | "xs" | "xxs";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+export interface IChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
+    asChild?: boolean;
+}
+declare const Chip: React.ForwardRefExoticComponent<IChipProps & React.RefAttributes<HTMLButtonElement>>;
+export { Chip };

package/dist/Chip/Chip.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const class_variance_authority_1 = require("class-variance-authority");
+const react_slot_1 = require("@radix-ui/react-slot");
+const utils_1 = require("../@/lib/utils");
+// import { cn } from "@/lib/utils" порешать с алиасами
+const chipVariants = (0, class_variance_authority_1.cva)('inline-flex items-center border-[2px] justify-center rounded-full whitespace-nowrap font-medium transition-colors  ring-offset-1 disabled:pointer-events-none disabled:opacity-[.24]', {
+    variants: {
+        variant: {
+            primary: 'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
+            secondary: 'text-btn-secondary bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
+            success: 'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
+            'primary-outline': 'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
+            outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
+            ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
+        },
+        size: {
+            lg: '',
+            md: '',
+            sm: 'h-[14px] px-[20px] text-[10px] leading-[1.4]',
+            xs: '',
+            xxs: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'secondary',
+        size: 'sm',
+    },
+});
+const Chip = react_1.default.forwardRef(({ children, variant, size, className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? react_slot_1.Slot : "span";
+    return (react_1.default.createElement(Comp, { className: (0, utils_1.cn)(chipVariants({ variant, size, className })), ref: ref, ...props }));
+});
+exports.Chip = Chip;
+//# sourceMappingURL=Chip.js.map

package/dist/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":";;;;AAAA,+DAAoD;AACpD,uEAAiE;AACjE,qDAA2C;AAC3C,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,YAAY,GAAG,IAAA,8BAAG,EACvB,sLAAsL,EACtL;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,sOAAsO;YACvO,SAAS,EACR,wPAAwP;YACzP,OAAO,EACN,sOAAsO;YACvO,iBAAiB,EAChB,+ZAA+Z;YACha,OAAO,EAAE,sEAAsE;YAC/E,KAAK,EAAE,6HAA6H;SACpI;QACD,IAAI,EAAE;YACL,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,8CAA8C;YAClD,EAAE,EAAE,EAAE;YACN,GAAG,EAAE,EAAE;SACP;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,IAAI;KACV;CACD,CACD,CAAA;AAMD,MAAM,IAAI,GAAG,eAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpI,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAA;IAEvC,OAAO,CACN,8BAAC,IAAI,IACC,SAAS,EAAE,IAAA,UAAE,EAAC,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EACzD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AAEO,oBAAI"}

package/dist/Chip/index.d.ts

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/dist/Chip/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+var Chip_1 = require("./Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
+//# sourceMappingURL=index.js.map

package/dist/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Chip/index.ts"],"names":[],"mappings":";;;AAAA,+BAA6B;AAApB,4FAAA,IAAI,OAAA"}

package/dist/DasboardDrawer/DashboardDrawer.d.ts

@@ -13,7 +13,8 @@ declare const DrawerList: React.FC<DrawerListProps>;
 declare type DrawerListItemProps = {
     value: string;
     label: string | JSX.Element;
-    isSelected?: boolean;
+    isActive?: boolean;
+    onClick?: () => void;
 };
 declare const DrawerListItem: React.FC<DrawerListItemProps>;
 declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/DasboardDrawer/DashboardDrawer.js

@@ -4,6 +4,7 @@ exports.DrawerListItem = exports.DrawerList = exports.DrawerClose = exports.Draw
 const tslib_1 = require("tslib");
 const React = (0, tslib_1.__importStar)(require("react"));
 const vaul_1 = require("vaul");
+const Icon_1 = require("../Icon");
 const utils_1 = require("../@/lib/utils");
 const Drawer = ({ ...props }) => React.createElement(vaul_1.Drawer.Root, { ...props });
 exports.Drawer = Drawer;
@@ -19,19 +20,21 @@ const DrawerFooter = () => (React.createElement(DrawerClose, { className: "p-[16
     React.createElement("svg", { className: "mx-auto", width: "38", height: "10", viewBox: "0 0 38 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M0 7.39774C0 8.68678 1.25226 9.60455 2.48147 9.21638L17.7955 4.38038C18.5794 4.13282 19.4206 4.13282 20.2045 4.38038L35.5185 9.21638C36.7477 9.60455 38 8.68678 38 7.39774C38 6.56568 37.4606 5.82966 36.6671 5.5791L20.2045 0.380377C19.4206 0.132817 18.5794 0.132817 17.7955 0.380377L1.33286 5.5791C0.539422 5.82966 0 6.56568 0 7.39774Z", fill: "#243036", fillOpacity: "0.24" }))));
 const DrawerList = ({ children }) => {
-    return (React.createElement("div", { role: "listbox", className: "px-[12px] py-[20px]" }, children));
+    return (React.createElement("div", { role: "list", className: "px-[20px] divide-y" }, children));
 };
 exports.DrawerList = DrawerList;
-const DrawerListItem = ({ label, value, isSelected }) => {
-    return (React.createElement("div", { role: "option", "aria-labelledby": "1", "aria-selected": isSelected, className: "flex", tabIndex: 0 },
-        React.createElement("div", { className: "shrink-0" },
-            React.createElement("p", { className: "font-medium text-[14px] text-muted leading-[1.4]", id: "1" }, label),
-            React.createElement("p", { className: "font-bold text-[20px] leading-[1.2]" }, value)),
-        isSelected && React.createElement("span", null)));
+const DrawerListItem = ({ label, value, isActive, onClick }) => {
+    return (React.createElement("button", { className: "flex py-[16px] w-full text-left", role: "listitem", "aria-selected": isActive, "aria-labelledby": "1", onClick: onClick },
+        React.createElement("span", { className: "w-[calc(100%-50px)]" },
+            React.createElement("span", { className: "flex [&+span]:mt-[4px] font-medium text-[14px] text-muted leading-[1.28]", id: "1" },
+                React.createElement("span", { className: "[&+span]:ml-[8px] truncate" }, label),
+                React.createElement("span", { className: "inline-flex bg-[#EE7C2D] px-[4px] rounded-full h-[16px] text-[#fff] text-[12px] truncate leading-[16px] shrink-0" }, "23")),
+            React.createElement("span", { className: "block font-bold text-[20px] leading-[1.2]" }, value)),
+        isActive && (React.createElement(Icon_1.Check, { width: 16, height: 16, className: "ml-auto text-primary self-center" }))));
 };
 exports.DrawerListItem = DrawerListItem;
 const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(DrawerPortal, null,
-    React.createElement(vaul_1.Drawer.Content, { ref: ref, className: (0, utils_1.cn)('fixed inset-x-0 top-0 flex h-auto flex-col bg-app bg-[#fff] shadow-sm rounded-[8px] #24303614; 0px 0px 16px 4px', className), ...props },
+    React.createElement(vaul_1.Drawer.Content, { ref: ref, className: (0, utils_1.cn)('fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px', className), ...props },
         React.createElement(DrawerTitle, { className: "sr-only" }, "\u0412\u044B\u0431\u043E\u0440 \u043A\u043E\u043C\u043F\u0430\u043D\u0438\u0438"),
         children,
         React.createElement(DrawerFooter, null)))));

package/dist/DasboardDrawer/DashboardDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardDrawer.js","sourceRoot":"","sources":["../../src/DasboardDrawer/DashboardDrawer.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,+BAAgD;AAChD,0CAAmC;AAEnC,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,KAAK,EAAqD,EAAE,EAAE,CAAC,oBAAC,aAAe,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AAqG9G,wBAAM;AApGf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AAkG5B,sCAAa;AAhG9B,MAAM,YAAY,GAAG,aAAe,CAAC,MAAM,CAAA;AAE3C,MAAM,WAAW,GAAG,aAAe,CAAC,KAAK,CAAA;AA8FM,kCAAW;AA5F1D,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,oBAAC,aAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,SAAS,CAAC,KACpB,KAAK,GACR,CACF,CAAC,CAAA;AACF,WAAW,CAAC,WAAW,GAAG,aAAe,CAAC,KAAK,CAAC,WAAW,CAAA;AAE3D,MAAM,YAAY,GAAa,GAAG,EAAE,CAAC,CACpC,oBAAC,WAAW,IAAC,SAAS,EAAC,UAAU;IAChC,6BACC,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;QAElC,8BACC,CAAC,EAAC,+UAA+U,EACjV,IAAI,EAAC,SAAS,EACd,WAAW,EAAC,MAAM,GACjB,CACG,CACO,CACd,CAAA;AAID,MAAM,UAAU,GAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9D,OAAO,CACN,6BACC,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,qBAAqB,IAE9B,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAA;AAkD2D,gCAAU;AA5CtE,MAAM,cAAc,GAAkC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IACtF,OAAO,CACN,6BACC,IAAI,EAAC,QAAQ,qBACG,GAAG,mBACJ,UAAU,EACzB,SAAS,EAAC,MAAM,EAChB,QAAQ,EAAE,CAAC;QAEX,6BAAK,SAAS,EAAC,UAAU;YACxB,2BACC,SAAS,EAAC,kDAAkD,EAC5D,EAAE,EAAC,GAAG,IAEL,KAAK,CACH;YACJ,2BAAG,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAK,CACzD;QACL,UAAU,IAAI,iCAAa,CACvB,CACN,CAAA;AACF,CAAC,CAAA;AAuBuE,wCAAc;AArBtF,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,oBAAC,YAAY;IACZ,oBAAC,aAAe,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,iHAAiH,EACjH,SAAS,CACT,KACG,KAAK;QAET,oBAAC,WAAW,IAAC,SAAS,EAAC,SAAS,sFAA6B;QAC5D,QAAQ;QACT,oBAAC,YAAY,OAAG,CACS,CACZ,CACf,CAAC,CAAA;AAG8B,sCAAa;AAF7C,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
+{"version":3,"file":"DashboardDrawer.js","sourceRoot":"","sources":["../../src/DasboardDrawer/DashboardDrawer.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,+BAAgD;AAChD,kCAA+B;AAC/B,0CAAmC;AAEnC,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,KAAK,EAAqD,EAAE,EAAE,CAAC,oBAAC,aAAe,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AAiH9G,wBAAM;AA/Gf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AA6G5B,sCAAa;AA3G9B,MAAM,YAAY,GAAG,aAAe,CAAC,MAAM,CAAA;AAE3C,MAAM,WAAW,GAAG,aAAe,CAAC,KAAK,CAAA;AAyGM,kCAAW;AAvG1D,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,oBAAC,aAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,SAAS,CAAC,KACpB,KAAK,GACR,CACF,CAAC,CAAA;AACF,WAAW,CAAC,WAAW,GAAG,aAAe,CAAC,KAAK,CAAC,WAAW,CAAA;AAE3D,MAAM,YAAY,GAAa,GAAG,EAAE,CAAC,CACpC,oBAAC,WAAW,IAAC,SAAS,EAAC,UAAU;IAChC,6BACC,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;QAElC,8BACC,CAAC,EAAC,+UAA+U,EACjV,IAAI,EAAC,SAAS,EACd,WAAW,EAAC,MAAM,GACjB,CACG,CACO,CACd,CAAA;AAID,MAAM,UAAU,GAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9D,OAAO,CACN,6BACC,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oBAAoB,IAE7B,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAA;AA6D2D,gCAAU;AAtDtE,MAAM,cAAc,GAAkC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC7F,OAAO,CACN,gCACC,SAAS,EAAC,iCAAiC,EAC3C,IAAI,EAAC,UAAU,mBACA,QAAQ,qBACP,GAAG,EACnB,OAAO,EAAE,OAAO;QAEhB,8BAAM,SAAS,EAAC,qBAAqB;YACpC,8BACC,SAAS,EAAC,0EAA0E,EACpF,EAAE,EAAC,GAAG;gBAEN,8BAAM,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAQ;gBAE3D,8BAAM,SAAS,EAAC,kHAAkH,SAE3H,CACD;YACP,8BAAM,SAAS,EAAC,2CAA2C,IAAE,KAAK,CAAQ,CACpE;QACN,QAAQ,IAAI,CACZ,oBAAC,YAAK,IACL,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAC,kCAAkC,GAC3C,CACF,CACO,CACT,CAAA;AACF,CAAC,CAAA;AAuBuE,wCAAc;AArBtF,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,oBAAC,YAAY;IACZ,oBAAC,aAAe,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,4GAA4G,EAC5G,SAAS,CACT,KACG,KAAK;QAET,oBAAC,WAAW,IAAC,SAAS,EAAC,SAAS,sFAA6B;QAC5D,QAAQ;QACT,oBAAC,YAAY,OAAG,CACS,CACZ,CACf,CAAC,CAAA;AAG8B,sCAAa;AAF7C,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}

package/dist/Page/Page.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
 const utils_1 = require("../@/lib/utils");
 const Page = ({ children, className }) => {
-    return (react_1.default.createElement("div", { className: (0, utils_1.cn)('sm:container bg-dashboard h-screen', className) }, children));
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)('sm:container bg-page h-screen', className) }, children));
 };
 exports.Page = Page;
 //# sourceMappingURL=Page.js.map

package/dist/Page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/Page/Page.tsx"],"names":[],"mappings":";;;;AAAA,+DAAgC;AAChC,0CAAoC;AAOpC,MAAM,IAAI,GAAmB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAC,EAAE,EAAE;IACtD,OAAO,CACN,uCAAK,SAAS,EAAE,IAAA,UAAE,EAAC,oCAAoC,EAAE,SAAS,CAAC,IACjE,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAA;AAEQ,oBAAI"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/Page/Page.tsx"],"names":[],"mappings":";;;;AAAA,+DAAgC;AAChC,0CAAoC;AAOpC,MAAM,IAAI,GAAmB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAC,EAAE,EAAE;IACtD,OAAO,CACN,uCAAK,SAAS,EAAE,IAAA,UAAE,EAAC,+BAA+B,EAAE,SAAS,CAAC,IAC5D,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAA;AAEQ,oBAAI"}

package/dist/Tooltip/Tooltip.js

@@ -4,10 +4,22 @@ const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
 const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
 const TooltipPrimitive = (0, tslib_1.__importStar)(require("@radix-ui/react-tooltip"));
+//
+const cssClass = `z-50 overflow-hidden 
+	rounded-md border bg-popover px-3 py-1.5 text-sm 
+	text-popover-foreground
+	shadow-md animate-in fade-in-0 zoom-in-95 
+	data-[state=closed]:animate-out
+ 	data-[state=closed]:fade-out-0 
+ 	data-[state=closed]:zoom-out-95 
+ 	data-[side=bottom]:slide-in-from-top-2 
+ 	data-[side=left]:slide-in-from-right-2 
+ 	data-[side=right]:slide-in-from-left-2 
+ 	data-[side=top]:slide-in-from-bottom-2`;
 const Tooltip = ({ ...props }) => react_1.default.createElement(TooltipPrimitive.Root, { ...props });
 const TooltipProvider = TooltipPrimitive.Provider;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = react_1.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (react_1.default.createElement(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, classnames_1.default)('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props })));
+const TooltipContent = react_1.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (react_1.default.createElement(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, classnames_1.default)(cssClass, className), ...props })));
 Tooltip.Provider = TooltipProvider;
 Tooltip.Trigger = TooltipTrigger;
 Tooltip.Content = TooltipContent;

package/dist/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;AAAA,+DAAyB;AACzB,yEAA2B;AAC3B,uFAA2D;AAkB3D,MAAM,OAAO,GAA+C,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,EAAE,CAAC,8BAAC,gBAAgB,CAAC,IAAI,OAAK,KAAK,GAAG,CAAA;AAE/G,MAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAA;AAEjD,MAAM,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAA;AAE/C,MAAM,cAAc,GAAG,eAAK,CAAC,UAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnD,8BAAC,gBAAgB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAA,oBAAE,EACZ,oYAAoY,EACpY,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,OAAO,CAAC,QAAQ,GAAG,eAAe,CAAA;AAClC,OAAO,CAAC,OAAO,GAAG,cAAc,CAAA;AAChC,OAAO,CAAC,OAAO,GAAG,cAAc,CAAA;AAChC,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,kBAAe,OAAO,CAAA"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;AAAA,+DAAyB;AACzB,yEAA2B;AAC3B,uFAA2D;AAE3D,EAAE;AACF,MAAM,QAAQ,GAAG;;;;;;;;;;yCAUwB,CAAA;AAiBzC,MAAM,OAAO,GAA+C,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,EAAE,CAAC,8BAAC,gBAAgB,CAAC,IAAI,OAAK,KAAK,GAAG,CAAA;AAE/G,MAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAA;AAEjD,MAAM,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAA;AAE/C,MAAM,cAAc,GAAG,eAAK,CAAC,UAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnD,8BAAC,gBAAgB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAA,oBAAE,EAAC,QAAQ,EAAE,SAAS,CAAC,KAC9B,KAAK,GACR,CACF,CAAC,CAAA;AAEF,OAAO,CAAC,QAAQ,GAAG,eAAe,CAAA;AAClC,OAAO,CAAC,OAAO,GAAG,cAAc,CAAA;AAChC,OAAO,CAAC,OAAO,GAAG,cAAc,CAAA;AAChC,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,kBAAe,OAAO,CAAA"}

package/dist/index.d.ts

@@ -14,4 +14,5 @@ import { Audio } from "./Audio";
 import { cn } from "./@/lib/utils";
 import { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem } from './DasboardDrawer';
 import { Page } from "./Page";
-export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, Input, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page };
+import { Chip } from "./Chip";
+export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, Input, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerListItem = exports.DrawerList = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.Input = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
+exports.Chip = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerListItem = exports.DrawerList = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.Input = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
 const tslib_1 = require("tslib");
 const Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -51,4 +51,6 @@ Object.defineProperty(exports, "DrawerList", { enumerable: true, get: function (
 Object.defineProperty(exports, "DrawerListItem", { enumerable: true, get: function () { return DasboardDrawer_1.DrawerListItem; } });
 const Page_1 = require("./Page");
 Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
+const Chip_1 = require("./Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AA4CnC,wFA5CQ,iBAAO,OA4CR;AA3CR,iCAA8B;AA4C7B,qFA5CQ,WAAI,OA4CR;AA3CL,qCAAkC;AA4CjC,uFA5CQ,eAAM,OA4CR;AA3CP,uCAAoC;AA4CnC,wFA5CQ,iBAAO,OA4CR;AA3CR,+DAA0B;AA4CzB,eA5CM,cAAI,CA4CN;AA3CL,2CAIqB;AAwCpB,yFA5CQ,oBAAQ,OA4CR;AACR,8FA5CA,yBAAa,OA4CA;AACb,6FA5CA,wBAAY,OA4CA;AACZ,kGA5CA,6BAAiB,OA4CA;AA1ClB,yDAK4B;AAyD3B,iGA7DA,mCAAgB,OA6DA;AAChB,qGA7DA,uCAAoB,OA6DA;AACpB,yGA7DA,2CAAwB,OA6DA;AACxB,qGA7DA,uCAAoB,OA6DA;AA3DrB,0DAA+B;AAiD9B,oBAAI;AAhDL,+CAIuB;AAgCtB,4FAnCA,yBAAW,OAmCA;AACX,mGAnCA,gCAAkB,OAmCA;AAClB,mGAnCA,gCAAkB,OAmCA;AAjCnB,+CAMuB;AA4BtB,mGAjCA,gCAAkB,OAiCA;AAClB,yGAjCA,sCAAwB,OAiCA;AACxB,0GAjCA,uCAAyB,OAiCA;AACzB,0GAjCA,uCAAyB,OAiCA;AACzB,8GAjCA,2CAA6B,OAiCA;AA/B9B,qCAAkC;AAgCjC,uFAhCQ,eAAM,OAgCR;AA/BP,wCAAqC;AAgCpC,sFAhCQ,aAAK,OAgCR;AA/BN,mCAAgC;AAgC/B,sFAhCQ,aAAK,OAgCR;AA/BN,yCAAmC;AAgClC,mFAhCQ,UAAE,OAgCR;AA/BH,qDAOyB;AA0BxB,uFAhCA,uBAAM,OAgCA;AACN,8FAhCA,8BAAa,OAgCA;AACb,4FAhCA,4BAAW,OAgCA;AACX,8FAhCA,8BAAa,OAgCA;AACb,2FAhCA,2BAAU,OAgCA;AACV,+FAhCA,+BAAc,OAgCA;AA9Bf,iCAA8B;AAmC7B,qFAnCQ,WAAI,OAmCR"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AA6CnC,wFA7CQ,iBAAO,OA6CR;AA5CR,iCAA8B;AA6C7B,qFA7CQ,WAAI,OA6CR;AA5CL,qCAAkC;AA6CjC,uFA7CQ,eAAM,OA6CR;AA5CP,uCAAoC;AA6CnC,wFA7CQ,iBAAO,OA6CR;AA5CR,+DAA0B;AA6CzB,eA7CM,cAAI,CA6CN;AA5CL,2CAIqB;AAyCpB,yFA7CQ,oBAAQ,OA6CR;AACR,8FA7CA,yBAAa,OA6CA;AACb,6FA7CA,wBAAY,OA6CA;AACZ,kGA7CA,6BAAiB,OA6CA;AA3ClB,yDAK4B;AA0D3B,iGA9DA,mCAAgB,OA8DA;AAChB,qGA9DA,uCAAoB,OA8DA;AACpB,yGA9DA,2CAAwB,OA8DA;AACxB,qGA9DA,uCAAoB,OA8DA;AA5DrB,0DAA+B;AAkD9B,oBAAI;AAjDL,+CAIuB;AAiCtB,4FApCA,yBAAW,OAoCA;AACX,mGApCA,gCAAkB,OAoCA;AAClB,mGApCA,gCAAkB,OAoCA;AAlCnB,+CAMuB;AA6BtB,mGAlCA,gCAAkB,OAkCA;AAClB,yGAlCA,sCAAwB,OAkCA;AACxB,0GAlCA,uCAAyB,OAkCA;AACzB,0GAlCA,uCAAyB,OAkCA;AACzB,8GAlCA,2CAA6B,OAkCA;AAhC9B,qCAAkC;AAiCjC,uFAjCQ,eAAM,OAiCR;AAhCP,wCAAqC;AAiCpC,sFAjCQ,aAAK,OAiCR;AAhCN,mCAAgC;AAiC/B,sFAjCQ,aAAK,OAiCR;AAhCN,yCAAmC;AAiClC,mFAjCQ,UAAE,OAiCR;AAhCH,qDAOyB;AA2BxB,uFAjCA,uBAAM,OAiCA;AACN,8FAjCA,8BAAa,OAiCA;AACb,4FAjCA,4BAAW,OAiCA;AACX,8FAjCA,8BAAa,OAiCA;AACb,2FAjCA,2BAAU,OAiCA;AACV,+FAjCA,+BAAc,OAiCA;AA/Bf,iCAA8B;AAoC7B,qFApCQ,WAAI,OAoCR;AAnCL,iCAA8B;AAoC7B,qFApCQ,WAAI,OAoCR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.7-beta-pv-52960-c02a9972",
+  "version": "0.0.7-beta-pv-52970-532db2dc",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,6 +24,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
@@ -47,14 +48,16 @@
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.21.5",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@chromatic-com/storybook": "^1",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-interactions": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/addon-onboarding": "^8.2.8",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/react": "^8.2.8",
+    "@storybook/react-webpack5": "^8.2.8",
+    "@storybook/test": "^8.2.8",
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "18.11.9",
     "@types/react": "^18.2.6",
@@ -81,7 +84,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.31.10",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.2.4",
     "html-webpack-plugin": "5.5.1",
     "image-minimizer-webpack-plugin": "^4.0.2",
@@ -97,7 +100,7 @@
     "prettier": "2.7.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.4.0",
+    "storybook": "^8.2.8",
     "style-loader": "^3.3.3",
     "stylus": "^0.59.0",
     "stylus-loader": "^7.1.3",

package/src/@/config/index.ts

@@ -1,4 +1,5 @@
 import button from "./button"
+import label from "./label"
 
 export default {
 		container: {
@@ -9,12 +10,14 @@ export default {
 		},
 		extend: {
 			colors: {
-				muted: 'var(--muted)',
 				primary: {
 					DEFAULT: 'var(--primary)',
 					hover: 'var(--primary-hover)',
 					focus: 'var(var(--primary-focus)',
 					active: 'var(--primary-active)',
+					light: {
+						DEFAULT: 'var(--primary-light)'
+					}
 				},
 				success: {
 					DEFAULT: 'var(--success)',
@@ -28,17 +31,28 @@ export default {
 					focus: 'var(var(--secondary-focus)',
 					active: 'var(--secondary-active)',
 				},
+				muted: 'var(--muted)',
 				transparent: 'transparent',
 				current: 'currentColor',
 			},
 			textColor: {
-				...button.textColor
+				...button.textColor,
+				...label.textColor
 			},
 			backgroundColor: {
-				primary: {
-					DEFAULT: 'var(--primary-bg)'
-				},
-				...button.backgroundColor
+				page: 'var(--page-bg)',
+				...button.backgroundColor,
+				...label.backgroundColor
+			},
+			dropShadow: {
+				'1': 'var(--shadow-1)',
+				'2': 'var(--shadow-2)',
+			},
+			borderColor: {
+				...button.borderColor
+			},
+			borderRadius: {
+				'1': 'var(--border-radius-1)',
 			},
 			keyframes: {
 				'accordion-down': {

package/src/@/config/label.ts

@@ -0,0 +1,89 @@
+export default {
+	textColor: {
+		label: {
+			primary: {
+				DEFAULT: 'var(--btn-primary)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: 'var(--btn-secondary)',
+			success: 'var(--btn-success)',
+			ghost: 'var(--btn-ghost)',
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	backgroundColor: {
+		label: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	borderColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			},
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+			}
+		}
+	}
+}

package/src/Button/Button.tsx

@@ -6,7 +6,7 @@ import { cn } from '../@/lib/utils'
 // import { cn } from "@/lib/utils" порешать с алиасами
 
 const buttonVariants = cva(
-	'inline-flex items-center border-[2px] justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring ring-offset-1 disabled:pointer-events-none disabled:opacity-[.24]',
+	'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] focus-visible:ring ring-offset-1 font-medium whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none',
 	{
 		variants: {
 			variant: {
@@ -37,7 +37,7 @@ const buttonVariants = cva(
 	}
 )
 const textVariants = cva(
-	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current rounded-[.25em] disabled:pointer-events-none disabled:opacity-[.24]',
+	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none',
 	{
 		variants: {
 			variant: {

package/src/Button/index.ts

@@ -1 +1 @@
-export {Button} from './Button'
+export {Button, buttonVariants} from './Button'

package/src/Chip/Chip.tsx

@@ -0,0 +1,54 @@
+import React, { FC, PropsWithChildren } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '../@/lib/utils'
+// import { cn } from "@/lib/utils" порешать с алиасами
+
+const chipVariants = cva(
+	'inline-flex items-center border-[2px] justify-center rounded-full whitespace-nowrap font-medium transition-colors  ring-offset-1 disabled:pointer-events-none disabled:opacity-[.24]',
+	{
+		variants: {
+			variant: {
+				primary:
+					'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
+				secondary:
+					'text-btn-secondary bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
+				success:
+					'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
+				'primary-outline':
+					'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
+				outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
+				ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
+			},
+			size: {
+				lg: '',
+				md: '',
+				sm: 'h-[14px] px-[20px] text-[10px] leading-[1.4]',
+				xs: '',
+				xxs: '',
+			},
+		},
+		defaultVariants: {
+			variant: 'secondary',
+			size: 'sm',
+		},
+	}
+)
+
+export interface IChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
+	asChild?: boolean
+}
+
+const Chip = React.forwardRef<HTMLButtonElement, IChipProps>(({ children, variant, size, className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span"
+
+	return (
+		<Comp
+        className={cn(chipVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+	)
+})
+
+export { Chip }

package/src/Chip/index.ts

@@ -0,0 +1 @@
+export { Chip } from './Chip'

package/src/DasboardDrawer/DashboardDrawer.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react'
 import { Drawer as DrawerPrimitive } from 'vaul'
+import { Check } from '../Icon'
 import { cn } from '../@/lib/utils'
 
 const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
+
 Drawer.displayName = 'Drawer'
 
 const DrawerTrigger = DrawerPrimitive.Trigger
@@ -47,8 +49,8 @@ type DrawerListProps = {
 const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
 	return (
 		<div
-			role="listbox"
-			className="px-[12px] py-[20px]"
+			role="list"
+			className="px-[20px] divide-y"
 		>
 			{children}
 		</div>
@@ -57,28 +59,39 @@ const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
 type DrawerListItemProps = {
 	value: string
 	label: string | JSX.Element
-	isSelected?: boolean,
+	isActive?: boolean
+	onClick?: () => void
 }
-const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isSelected }) => {
+const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isActive, onClick }) => {
 	return (
-		<div
-			role="option"
+		<button
+			className="flex py-[16px] w-full text-left"
+			role="listitem"
+			aria-selected={isActive}
 			aria-labelledby="1"
-			aria-selected={isSelected}
-			className="flex"
-			tabIndex={0}
+			onClick={onClick}
 		>
-			<div className="shrink-0">
-				<p
-					className="font-medium text-[14px] text-muted leading-[1.4]"
+			<span className="w-[calc(100%-50px)]">
+				<span
+					className="flex [&+span]:mt-[4px] font-medium text-[14px] text-muted leading-[1.28]"
 					id="1"
 				>
-					{label}
-				</p>
-				<p className="font-bold text-[20px] leading-[1.2]">{value}</p>
-			</div>
-			{isSelected && <span></span>}
-		</div>
+					<span className="[&+span]:ml-[8px] truncate">{label}</span>
+
+					<span className="inline-flex bg-[#EE7C2D] px-[4px] rounded-full h-[16px] text-[#fff] text-[12px] truncate leading-[16px] shrink-0">
+						23
+					</span>
+				</span>
+				<span className="block font-bold text-[20px] leading-[1.2]">{value}</span>
+			</span>
+			{isActive && (
+				<Check
+					width={16}
+					height={16}
+					className="ml-auto text-primary self-center"
+				/>
+			)}
+		</button>
 	)
 }
 
@@ -90,7 +103,7 @@ const DrawerContent = React.forwardRef<
 		<DrawerPrimitive.Content
 			ref={ref}
 			className={cn(
-				'fixed inset-x-0 top-0 flex h-auto flex-col bg-app bg-[#fff] shadow-sm rounded-[8px] #24303614; 0px 0px 16px 4px',
+				'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
 				className
 			)}
 			{...props}

package/src/Drawer/BottomDrawer.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+import { cn } from '../@/lib/utils'
+
+const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
+
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerTitle = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(className)}
+		{...props}
+	/>
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerFooter: React.FC = () => (
+	<DrawerClose className="p-[16px]">
+		<svg
+			className="mx-auto"
+			width="38"
+			height="10"
+			viewBox="0 0 38 10"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M0 7.39774C0 8.68678 1.25226 9.60455 2.48147 9.21638L17.7955 4.38038C18.5794 4.13282 19.4206 4.13282 20.2045 4.38038L35.5185 9.21638C36.7477 9.60455 38 8.68678 38 7.39774C38 6.56568 37.4606 5.82966 36.6671 5.5791L20.2045 0.380377C19.4206 0.132817 18.5794 0.132817 17.7955 0.380377L1.33286 5.5791C0.539422 5.82966 0 6.56568 0 7.39774Z"
+				fill="#243036"
+				fillOpacity="0.24"
+			/>
+		</svg>
+	</DrawerClose>
+)
+type DrawerListProps = {
+	children: React.ReactNode
+}
+const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
+	return (
+		<div
+			role="listbox"
+			className="px-[20px]"
+		>
+			{children}
+		</div>
+	)
+}
+type DrawerListItemProps = {
+	value: string
+	label: string | JSX.Element
+	isSelected?: boolean,
+}
+const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isSelected }) => {
+	return (
+		<div
+			role="option"
+			aria-labelledby="1"
+			aria-selected={isSelected}
+			className="flex"
+			tabIndex={0}
+		>
+			<div className="shrink-0">
+				<p
+					className="font-medium text-[14px] text-muted leading-[1.4]"
+					id="1"
+				>
+					{label}
+				</p>
+				<p className="font-bold text-[20px] leading-[1.2]">{value}</p>
+			</div>
+			{isSelected && <span></span>}
+		</div>
+	)
+}
+
+const DrawerContent = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DrawerPortal>
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn(
+				'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
+				className
+			)}
+
+			{...props}
+		>
+			<DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
+			{children}
+			<DrawerFooter />
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem }

package/src/Drawer/DashboardDrawer.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+import { cn } from '../@/lib/utils'
+
+const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
+
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerTitle = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(className)}
+		{...props}
+	/>
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerFooter: React.FC = () => (
+	<DrawerClose className="p-[16px]">
+		<svg
+			className="mx-auto"
+			width="38"
+			height="10"
+			viewBox="0 0 38 10"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M0 7.39774C0 8.68678 1.25226 9.60455 2.48147 9.21638L17.7955 4.38038C18.5794 4.13282 19.4206 4.13282 20.2045 4.38038L35.5185 9.21638C36.7477 9.60455 38 8.68678 38 7.39774C38 6.56568 37.4606 5.82966 36.6671 5.5791L20.2045 0.380377C19.4206 0.132817 18.5794 0.132817 17.7955 0.380377L1.33286 5.5791C0.539422 5.82966 0 6.56568 0 7.39774Z"
+				fill="#243036"
+				fillOpacity="0.24"
+			/>
+		</svg>
+	</DrawerClose>
+)
+type DrawerListProps = {
+	children: React.ReactNode
+}
+const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
+	return (
+		<div
+			role="listbox"
+			className="px-[20px]"
+		>
+			{children}
+		</div>
+	)
+}
+type DrawerListItemProps = {
+	value: string
+	label: string | JSX.Element
+	isSelected?: boolean,
+}
+const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isSelected }) => {
+	return (
+		<div
+			role="option"
+			aria-labelledby="1"
+			aria-selected={isSelected}
+			className="flex"
+			tabIndex={0}
+		>
+			<div className="shrink-0">
+				<p
+					className="font-medium text-[14px] text-muted leading-[1.4]"
+					id="1"
+				>
+					{label}
+				</p>
+				<p className="font-bold text-[20px] leading-[1.2]">{value}</p>
+			</div>
+			{isSelected && <span></span>}
+		</div>
+	)
+}
+
+const DrawerContent = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DrawerPortal>
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn(
+				'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
+				className
+			)}
+
+			{...props}
+		>
+			<DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
+			{children}
+			<DrawerFooter />
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem }

package/src/Label/Label.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../@/lib/utils'
+
+const labelVariants = cva('peer-disabled:opacity-70 font-medium text-[12px] leading-[1.33] peer-disabled:cursor-not-allowed')
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/Label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label'

package/src/Page/Page.tsx

@@ -8,7 +8,7 @@ type IPageProps = {
 
 const Page: FC<IPageProps> = ({children, className}) => {
 	return (
-		<div className={cn('sm:container bg-dashboard h-screen', className)}>
+		<div className={cn('sm:container bg-page h-screen', className)}>
 			{children}
 		</div>
 	);

package/src/Tooltip/Tooltip.tsx

@@ -2,6 +2,18 @@ import React from 'react'
 import cn from 'classnames'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import {TooltipProps} from "@radix-ui/react-tooltip";
+//
+const cssClass = `z-50 overflow-hidden 
+	rounded-md border bg-popover px-3 py-1.5 text-sm 
+	text-popover-foreground
+	shadow-md animate-in fade-in-0 zoom-in-95 
+	data-[state=closed]:animate-out
+ 	data-[state=closed]:fade-out-0 
+ 	data-[state=closed]:zoom-out-95 
+ 	data-[side=bottom]:slide-in-from-top-2 
+ 	data-[side=left]:slide-in-from-right-2 
+ 	data-[side=right]:slide-in-from-left-2 
+ 	data-[side=top]:slide-in-from-bottom-2`
 // import './ant-tooltip.styl'
 
 //  "_error": mdStyle === "error",
@@ -31,10 +43,7 @@ const TooltipContent = React.forwardRef<
 	<TooltipPrimitive.Content
 		ref={ref}
 		sideOffset={sideOffset}
-		className={cn(
-			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-			className
-		)}
+		className={cn(cssClass, className)}
 		{...props}
 	/>
 ))

package/src/assets/css/global.css

@@ -73,20 +73,20 @@
         --cl-red-6: #f9c1bd;
         --cl-red-7: #ffe9e9;
 
-        /* --text-base: var(--cl-graphite-1); */
+        --text-base: var(--cl-graphite-1);
         --primary: var(--cl-blue-2);
-        --primary-bg: var(--cl-blue-7);
-        --success: var(--cl-graphite-1);
+        --primary-light: var(--cl-blue-7);
+        --success: var(--cl-green-3);
+        --success-light: var(--cl-green-7);
         --seconady: var(--cl-graphite-2);
         --tertiary: var(--cl-graphite-3);
         --muted: var(--cl-graphite-3);
         /* --text-quaternary:; */
 
-        --app-bg: var(--cl-white);
-        --app-cl: var(--text-cl);
+        --page-bg: var(--cl-white);
 
         /* ЦВЕТ КНОПОК */
-
+        /* =========================================== */
         --btn-primary: var(--cl-white);
         --btn-primary-bg: var(--cl-blue-2);
         --btn-primary-hover-bg: var(--cl-blue-3);
@@ -120,7 +120,23 @@
         --btn-txt-primary-hover: var(--cl-blue-3);
         --btn-txt-primary-focus: var(--cl-blue-3);
         --btn-txt-primary-active: var(--cl-blue-1);
+        /* =========================================== */
+        /* ЦВЕТ КНОПОК */
+        
+        
+        /* ЦВЕТ ПОЛЯ ВВОДА */
+        /* =========================================== */
+        --input-border-color: var(--cl-graphite-5);
+        /* --input-bg: var(); */
+        /* =========================================== */
+        /* ЦВЕТ ПОЛЯ ВВОДА */
+
+        --border-radius-1: 8px;
+
+        --shadow-1: 0px 4px 16px rgba(36, 48, 54, 0.08);
+        --shadow-2: 0 2px 10px rgba(36, 48, 54, 0.12);
     }
 
+
     .dark {}
 }

package/src/index.ts

@@ -40,6 +40,7 @@ import {
 	DrawerListItem
 } from './DasboardDrawer'
 import { Page } from "./Page";
+import { Chip } from "./Chip";
 
 export {
 	Tooltip,
@@ -74,5 +75,6 @@ export {
 	BottomNavigationList,
 	BottomNavigationListItem,
 	BottomNavigationLink,
-	Page
+	Page,
+	Chip,
 };

package/src/input/Input.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { cn } from '../@/lib/utils'
+
+const InputLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+	({ className, children, ...props }) => {
+		return (
+			<label
+				className={cn('text-[12px] leading-[1.33]', className)}
+				{...props}
+			>
+				{children}
+			</label>
+		)
+	}
+)
+
+InputLabel.displayName = 'InputLabel'
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const InputField = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				'h-[44px] leading-[1.17] rounded-1 w-full border border-input bg-transparent transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
+
+InputField.displayName = 'InputField'
+
+export { InputField, InputLabel }

package/src/input/index.ts

@@ -0,0 +1 @@
+export { InputField, InputLabel } from './Input'