@momo-webplatform/mobase 0.0.23 → 0.0.25

package/README.md

@@ -31,13 +31,18 @@ pnpm tailwindcss init -p
 Point Tailwind CSS to files you have `className=".."` in:
 
 ```javascript
-module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}" /* src folder, for example */],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+import { mobaseTW } from "@momo-webplatform/mobase";
+
+const config = {
+  content: [
+    // ...
+    "node_modules/@momo-webplatform/mobase/publish/esm/**/*.js",
+  ],
+  darkMode: ["class"],
+  plugins: [mobaseTW()],
 };
+
+export default config;
 ```
 
 Add Tailwind CSS to a CSS file:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "Mobase is the UI framework upon we build product experiences at MoMo.vn, base on Radix primitives, and Tailwind CSS.",
   "scripts": {
     "dev": "next dev",

package/publish/cjs/components/AlertDialog/AlertDialog.js

@@ -38,13 +38,13 @@ exports.AlertDialogPortal = AlertDialogPortal;
 const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Overlay, { className: (0, utils_1.cn)("fixed inset-0 z-50 bg-black/70 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props, ref: ref })));
 exports.AlertDialogOverlay = AlertDialogOverlay;
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(AlertDialogPortal, { children: [(0, jsx_runtime_1.jsx)(AlertDialogOverlay, {}), (0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed left-[50%] bg-white text-gray-700 border rounded-sm border-gray-300 top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props })] })));
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(AlertDialogPortal, { children: [(0, jsx_runtime_1.jsx)(AlertDialogOverlay, {}), (0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed left-[50%] w-[90vw] bg-white text-gray-700 border  border-gray-300 top-[50%] z-50 grid w- max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl", className), ...props })] })));
 exports.AlertDialogContent = AlertDialogContent;
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-const AlertDialogHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
+const AlertDialogHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col space-y-2 text-left", className), ...props }));
 exports.AlertDialogHeader = AlertDialogHeader;
 AlertDialogHeader.displayName = "AlertDialogHeader";
-const AlertDialogFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+const AlertDialogFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-row justify-end space-x-4", className), ...props }));
 exports.AlertDialogFooter = AlertDialogFooter;
 AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-lg text-gray-900 font-semibold", className), ...props })));
@@ -54,9 +54,9 @@ const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) =
 exports.AlertDialogDescription = AlertDialogDescription;
 AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Action, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)(), "", className), ...props })));
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Action, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: "primary" }), "", className), ...props })));
 exports.AlertDialogAction = AlertDialogAction;
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Cancel, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: "secondary" }), "mt-2 sm:mt-0", className), ...props })));
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Cancel, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: "secondary" }), className), ...props })));
 exports.AlertDialogCancel = AlertDialogCancel;
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

package/publish/cjs/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,62 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationMenuViewport = exports.NavigationMenuIndicator = exports.NavigationMenuLink = exports.NavigationMenuTrigger = exports.NavigationMenuContent = exports.NavigationMenuItem = exports.NavigationMenuList = exports.NavigationMenu = exports.navigationMenuTriggerStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const solid_1 = require("@heroicons/react/16/solid");
+const NavigationMenuPrimitive = __importStar(require("@radix-ui/react-navigation-menu"));
+const class_variance_authority_1 = require("class-variance-authority");
+const Button_1 = require("../Button/Button");
+const utils_1 = require("../../helpers/utils");
+const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(NavigationMenuPrimitive.Root, { ref: ref, className: (0, utils_1.cn)("relative z-10 flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(NavigationMenuViewport, {})] })));
+exports.NavigationMenu = NavigationMenu;
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(NavigationMenuPrimitive.List, { ref: ref, className: (0, utils_1.cn)("group flex flex-1 list-none items-center justify-center ", className), ...props })));
+exports.NavigationMenuList = NavigationMenuList;
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+exports.NavigationMenuItem = NavigationMenuItem;
+const navigationMenuTriggerStyle = (0, class_variance_authority_1.cva)((0, Button_1.buttonVariants)({
+    variant: "transparent",
+    size: "sm",
+}));
+exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
+const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(NavigationMenuPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "relative  ml-1 h-4 w-4 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] })));
+exports.NavigationMenuTrigger = NavigationMenuTrigger;
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(NavigationMenuPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ", className), ...props })));
+exports.NavigationMenuContent = NavigationMenuContent;
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+exports.NavigationMenuLink = NavigationMenuLink;
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("absolute left-0 top-full flex justify-center"), children: (0, jsx_runtime_1.jsx)(NavigationMenuPrimitive.Viewport, { className: (0, utils_1.cn)("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-white text-gray-900 shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className), ref: ref, ...props }) })));
+exports.NavigationMenuViewport = NavigationMenuViewport;
+NavigationMenuViewport.displayName =
+    NavigationMenuPrimitive.Viewport.displayName;
+const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(NavigationMenuPrimitive.Indicator, { ref: ref, className: (0, utils_1.cn)("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", className), ...props, children: (0, jsx_runtime_1.jsx)("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" }) })));
+exports.NavigationMenuIndicator = NavigationMenuIndicator;
+NavigationMenuIndicator.displayName =
+    NavigationMenuPrimitive.Indicator.displayName;

package/publish/cjs/components/NavigationMenu/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigationMenuTriggerStyle = exports.NavigationMenuViewport = exports.NavigationMenuIndicator = exports.NavigationMenuLink = exports.NavigationMenuTrigger = exports.NavigationMenuContent = exports.NavigationMenuItem = exports.NavigationMenuList = exports.NavigationMenu = void 0;
+var NavigationMenu_1 = require("./NavigationMenu");
+Object.defineProperty(exports, "NavigationMenu", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenu; } });
+Object.defineProperty(exports, "NavigationMenuList", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuList; } });
+Object.defineProperty(exports, "NavigationMenuItem", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuItem; } });
+Object.defineProperty(exports, "NavigationMenuContent", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuContent; } });
+Object.defineProperty(exports, "NavigationMenuTrigger", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuTrigger; } });
+Object.defineProperty(exports, "NavigationMenuLink", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuLink; } });
+Object.defineProperty(exports, "NavigationMenuIndicator", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuIndicator; } });
+Object.defineProperty(exports, "NavigationMenuViewport", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuViewport; } });
+Object.defineProperty(exports, "navigationMenuTriggerStyle", { enumerable: true, get: function () { return NavigationMenu_1.navigationMenuTriggerStyle; } });

package/publish/cjs/components/Pagination/Pagination.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const IconButton_1 = require("../IconButton/IconButton");
+const utils_1 = require("../../helpers/utils");
+function Pagination({ current, total, onChange, }) {
+    const getButton = (index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)((0, IconButton_1.iconButtonVariants)({
+                variant: current === index ? "outline" : "secondary",
+                size: "sm",
+            })), onClick: () => onChange(index), children: index }) }, index));
+    return ((0, jsx_runtime_1.jsx)("nav", { role: "navigation", "aria-label": "pagination", className: (0, utils_1.cn)("mx-auto flex w-full justify-center"), children: (0, jsx_runtime_1.jsxs)("ul", { className: (0, utils_1.cn)("flex flex-row flex-wrap items-center gap-2"), children: [total > 1 && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)((0, IconButton_1.iconButtonVariants)({
+                            variant: "secondary",
+                            size: "sm",
+                        })), disabled: current === 1, onClick: () => current > 1 && onChange(current - 1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-4 w-4" }) }) })), total <= 6 ? (Array(total)
+                    .fill(0)
+                    .map((_, index) => getButton(index + 1))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [getButton(1), current === 1 && [getButton(2), getButton(3)], current > 3 && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)((0, IconButton_1.iconButtonVariants)({
+                                    variant: "secondary",
+                                    size: "sm",
+                                })), disabled: current === 1, onClick: () => onChange(current - 3), children: "..." }) })), current > 2 &&
+                            current !== 1 &&
+                            current !== total &&
+                            getButton(current - 1), current > 1 && current < total && getButton(current), current < total - 1 && current !== 1 && getButton(current + 1), current === total && [getButton(total - 2), getButton(total - 1)], current < total - 2 && current !== total && ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)((0, IconButton_1.iconButtonVariants)({
+                                variant: "secondary",
+                                size: "sm",
+                            })), disabled: current === 1, onClick: () => onChange(current + 3), children: "..." })), getButton(total)] })), total > 1 && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)((0, IconButton_1.iconButtonVariants)({
+                            variant: "secondary",
+                            size: "sm",
+                        })), disabled: current === total, onClick: () => current < total && onChange(current + 1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" }) }) }))] }) }));
+}
+exports.default = Pagination;

package/publish/cjs/components/Pagination/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+var Pagination_1 = require("./Pagination");
+Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return __importDefault(Pagination_1).default; } });

package/publish/cjs/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,53 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupItem = exports.RadioGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const RadioGroupPrimitive = __importStar(require("@radix-ui/react-radio-group"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../helpers/utils");
+const class_variance_authority_1 = require("class-variance-authority");
+const radioGroupVariants = (0, class_variance_authority_1.cva)("grid cursor-pointer gap-2 text-gray-900 text-sm", {
+    variants: {
+        orientation: {
+            horizontal: "grid-cols-2",
+            vertical: "grid-cols-1",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+const RadioGroup = React.forwardRef(({ disabled, orientation, className, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Root, { className: (0, utils_1.cn)("", radioGroupVariants({ orientation }), className), ...props, ref: ref }));
+});
+exports.RadioGroup = RadioGroup;
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("aspect-square h-4 w-4 rounded-full border  border-gray-700 disabled:bg-gray-300 disabled:data-[state=checked]:text-gray-500 data-[state=checked]:text-white disabled:data-[state=checked]:bg-gray-300 data-[state=checked]:bg-pink-500  disabled:border-none data-[state=checked]:border-none text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-40", className), ...props, children: (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center w-full h-full rounded-full ", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "h-2 w-2 fill-current text-current" }) }) }));
+});
+exports.RadioGroupItem = RadioGroupItem;
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

package/publish/cjs/components/RadioGroup/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupItem = exports.RadioGroup = void 0;
+var RadioGroup_1 = require("./RadioGroup");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });
+Object.defineProperty(exports, "RadioGroupItem", { enumerable: true, get: function () { return RadioGroup_1.RadioGroupItem; } });

package/publish/cjs/components/Select/Select.js

@@ -27,35 +27,57 @@ exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSe
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const solid_1 = require("@heroicons/react/16/solid");
+const outline_1 = require("@heroicons/react/24/outline");
+const solid_2 = require("@heroicons/react/24/solid");
 const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
 const utils_1 = require("../../helpers/utils");
-const Select = SelectPrimitive.Root;
+const Select = React.forwardRef(({ className, children, label, message, size, isError, disabled, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("select-mobase relative", className, disabled ? "disabled" : "", isError ? "is-error" : "", size === "lg" ? "select-size-lg" : ""), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-select-label absolute bg-white -top-2 px-1.5 left-2 text-xs", size === "lg" && "text-sm -top-2.5", isError ? "text-red-500" : "text-gray-500"), children: label })), (0, jsx_runtime_1.jsx)(SelectPrimitive.Root, { disabled: disabled, ...props, children: children }), message && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mobase-select-message flex space-x-1 items-center mt-1", isError ? "text-red-500" : "text-gray-500"), children: [isError ? ((0, jsx_runtime_1.jsx)(solid_2.XCircleIcon, { width: 16, height: 16 })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16 })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(size === "lg" ? "text-sm" : "text-xs"), children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
+        .select-mobase.disabled{
+          .mobase-select-label,.mobase-select-message {
+            color: rgb(var(--mobase-gray-400) / var(--tw-text-opacity));
+          }
+        }
+        .select-mobase.select-size-lg {
+          .select-mobase-button {
+            font-size: var(--mobase-font-size-base);
+            line-height: 1.25rem;
+            height: var(--mobase-spacing-unit-12);
+          }
+        }
+        .select-mobase.is-error {
+          .select-mobase-button {
+            box-shadow: 0px 0px 0px 1px rgb(var(--mobase-red-500) / 1) inset;
+            border-color: rgb(var(--mobase-red-500) / 1);
+          }
+        }
+      ` })] })));
 exports.Select = Select;
-const SelectGroup = SelectPrimitive.Group;
-exports.SelectGroup = SelectGroup;
 const SelectValue = SelectPrimitive.Value;
 exports.SelectValue = SelectValue;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-pink-200 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 text-gray-900", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("select-mobase-button bg-white w-full ring-0 transition-all focus-visible:ring-offset-0 focus-visible:ring-offset-transparent focus-visible:ring-0 rounded border border-gray-400 data-[placeholder]:text-gray-500 p-3 disabled:bg-gray-50 disabled:border-gray-300 disabled:text-gray-500 disabled:pointer-events-none flex items-center justify-between data-[state=open]:border-pink-500 data-[state=open]:ring-1 hover:ring-1 hover:ring-gray-400 data-[state=open]:ring-pink-500 text-gray-900 h-11 ring-inset text-sm", className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "line-clamp-1 text-left", children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-4 w-4 text-gray-700 flex-none" }) })] })));
 exports.SelectTrigger = SelectTrigger;
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { ref: ref, className: (0, utils_1.cn)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronUpIcon, {}) })));
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { ref: ref, className: (0, utils_1.cn)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronUpIcon, { className: "h-5 w-5" }) })));
 exports.SelectScrollUpButton = SelectScrollUpButton;
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { ref: ref, className: (0, utils_1.cn)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, {}) })));
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { ref: ref, className: (0, utils_1.cn)("flex cursor-default items-center justify-center py-1 bg-gradient-to-t from-white to-transparent", className), ...props, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-5 w-5" }) })));
 exports.SelectScrollDownButton = SelectScrollDownButton;
 SelectScrollDownButton.displayName =
     SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-300 bg-white text-gray-900 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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", position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [(0, jsx_runtime_1.jsx)(SelectScrollUpButton, {}), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, utils_1.cn)("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), (0, jsx_runtime_1.jsx)(SelectScrollDownButton, {})] }) })));
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(SelectPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-300 bg-white text-gray-900 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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", position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [(0, jsx_runtime_1.jsx)(SelectScrollUpButton, {}), (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, utils_1.cn)("p-0", position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-trigger-width)]"), children: children }), (0, jsx_runtime_1.jsx)(SelectScrollDownButton, {})] }) })));
 exports.SelectContent = SelectContent;
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { ref: ref, className: (0, utils_1.cn)("px-2 py-1.5 text-sm font-semibold", className), ...props })));
+const SelectGroup = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.Group, { ref: ref, className: (0, utils_1.cn)("relative p-1 after:w-full border-b border-gray-200 last:border-0", className), ...props, children: children })));
+exports.SelectGroup = SelectGroup;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { ref: ref, className: (0, utils_1.cn)("pr-2 pl-8 py-1.5 text-sm font-semibold", className), ...props })));
 exports.SelectLabel = SelectLabel;
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-gray-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(solid_1.CheckIcon, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-gray-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(solid_1.CheckIcon, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] }));
+});
 exports.SelectItem = SelectItem;
-SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { ref: ref, className: (0, utils_1.cn)("-mx-1 my-1 h-px bg-muted", className), ...props })));
 exports.SelectSeparator = SelectSeparator;
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/publish/cjs/components/Switch/Switch.js

@@ -0,0 +1,33 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const SwitchPrimitives = __importStar(require("@radix-ui/react-switch"));
+const utils_1 = require("../../helpers/utils");
+const Switch = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SwitchPrimitives.Root, { className: (0, utils_1.cn)("peer inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-default disabled:opacity-20 data-[state=checked]:bg-pink-500   data-[state=unchecked]:bg-gray-400", className), ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(SwitchPrimitives.Thumb, { className: (0, utils_1.cn)("pointer-events-none relative cik  before:content-[''] before:absolute before:w-1.5 before:h-1.5 before:rounded-full before:bg-pink-600 before:-translate-x-1/2 before:translate-y-1 disabled:opacity-20 before:data-[state=unchecked]:bg-gray-400 block h-3.5 w-3.5 bg-white rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5") }) })));
+exports.Switch = Switch;
+Switch.displayName = SwitchPrimitives.Root.displayName;

package/publish/cjs/components/Switch/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });

package/publish/cjs/components/TextArea/TextArea.js

@@ -9,11 +9,11 @@ const utils_1 = require("../../helpers/utils");
 exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label, className, inputClassName, rows = 3, ...restProps }, ref) => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative", className, isError && "mobase-text-area-error"), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-area-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), (0, jsx_runtime_1.jsx)("textarea", { disabled: disabled, ref: ref, className: (0, utils_1.cn)("mobase-text-area-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 outline-none block", inputClassName), rows: rows, ...restProps }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-area-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 text-sm", children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
             .mobase-text-area-box:hover {
-              box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }
 
             .mobase-text-area-box:focus {
-              box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
             }
 
             .mobase-text-area-box:disabled {
@@ -22,16 +22,16 @@ exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label,
 
             .mobase-text-area-error {
               .mobase-text-area-label {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-area-box {
-                box-shadow: 0px 0px 0px 1px hsl(var(--red-500) / 1) inset;
-                border-color: rgb(var(--red-500) / 1);
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-red-500) / 1) inset;
+                border-color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-area-message span {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
             }
           ` })] }));

package/publish/cjs/components/TextInput/TextInput.js

@@ -41,25 +41,25 @@ exports.TextInput = (0, react_1.forwardRef)(({ disabled, isError, message, label
     }, [value, defaultValue]);
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(className, isError && "mobase-text-input-error"), ref: rootRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-input-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), (0, jsx_runtime_1.jsx)("input", { disabled: disabled, type: type, ref: ref, className: (0, utils_1.cn)("mobase-text-input-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 h-12 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), withClearButton && clearable && ((0, jsx_runtime_1.jsx)("button", { "aria-label": "button", type: "button", className: "absolute right-3 top-1/2 -translate-y-1/2 shrink-0 cursor-pointer text-gray-500 duration-200 hover:opacity-70 disabled:pointer-events-none", disabled: disabled, onClick: handleClear, children: (0, jsx_runtime_1.jsx)(outline_1.XCircleIcon, { strokeWidth: 2, width: 20, height: 20 }) }))] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-input-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 text-sm", children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
             .mobase-text-input-box:hover {
-                box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }
 
             .mobase-text-input-box:focus {
-                box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
             }
 
             .mobase-text-input-error {
               .mobase-text-input-label {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-input-box {
-                box-shadow: 0px 0px 0px 1px rgb(var(--red-500) / 1) inset;
-                border-color: rgb(var(--red-500) / 1);
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-red-500) / 1) inset;
+                border-color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-input-message span {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
             }
           ` })] }));

package/publish/cjs/index.js

@@ -20,9 +20,14 @@ __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/AlertDialog"), exports);
 __exportStar(require("./components/IconButton"), exports);
+__exportStar(require("./components/Pagination"), exports);
 __exportStar(require("./components/Popover"), exports);
 __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/TextArea"), exports);
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/TextInput"), exports);
+__exportStar(require("./components/Select"), exports);
+__exportStar(require("./components/NavigationMenu"), exports);
+__exportStar(require("./components/Switch"), exports);
+__exportStar(require("./components/RadioGroup"), exports);
 __exportStar(require("./mobase-tw-plugin"), exports);

package/publish/cjs/mobase-tw-plugin/colors/blue.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blue = void 0;
 exports.blue = {
-    50: "#F2F8FF",
-    100: "#E5F1FF",
-    200: "#CCE4FF",
-    300: "#99caff",
-    400: "#3395ff",
-    500: "#1987FF",
-    600: "#007aff",
-    700: "#006ee6",
-    800: "#0062cc",
-    900: "#004794",
-    DEFAULT: "#1987FF",
+    50: "#eef8ff",
+    100: "#d9eeff",
+    200: "#bce1ff",
+    300: "#8ed0ff",
+    400: "#59b4ff",
+    500: "#429cff",
+    600: "#1b74f5",
+    700: "#145ee1",
+    800: "#174bb6",
+    900: "#19428f",
+    DEFAULT: "#429cff",
 };

package/publish/cjs/mobase-tw-plugin/colors/green.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.green = void 0;
 exports.green = {
-    50: "#eaf9ee",
-    100: "#d6f4de",
-    200: "#aee9bd",
-    300: "#85DD9B",
-    400: "#5dd27a",
-    500: "#48cc69",
-    600: "#34c759",
-    700: "#2fb350",
-    800: "#2a9f47",
-    900: "#117A2B",
-    DEFAULT: "#48cc69",
+    50: "#f1fcf3",
+    100: "#dff9e5",
+    200: "#c0f2cc",
+    300: "#8fe6a4",
+    400: "#57d175",
+    500: "#34c759",
+    600: "#22973f",
+    700: "#1e7735",
+    800: "#1d5e2e",
+    900: "#194e28",
+    DEFAULT: "#34c759",
 };

package/publish/cjs/mobase-tw-plugin/colors/orange.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.orange = void 0;
 exports.orange = {
-    50: "#fff6f3",
-    100: "#feede8",
-    200: "#feddd2",
-    300: "#fdbba4",
-    400: "#fc9877",
-    500: "#fb7649",
-    600: "#fa6532",
-    700: "#fa541c",
-    800: "#e14c19",
-    900: "#c84316",
-    DEFAULT: "#fb7649",
+    50: "#fff4ed",
+    100: "#ffe6d5",
+    200: "#fecaaa",
+    300: "#fea473",
+    400: "#fc743b",
+    500: "#fa541c",
+    600: "#eb350b",
+    700: "#c3240b",
+    800: "#9b1e11",
+    900: "#7c1c12",
+    DEFAULT: "#fa541c",
 };

package/publish/cjs/mobase-tw-plugin/colors/pink.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pink = void 0;
 exports.pink = {
-    50: "#FEF8FC",
-    100: "#FDEAF4",
-    200: "#FBD5EA",
-    300: "#F382C0",
-    400: "#EF59AB",
+    50: "#fef1f9",
+    100: "#fee5f6",
+    200: "#fecced",
+    300: "#ffa2df",
+    400: "#fe68c6",
     500: "#EB2F96",
     600: "#D42A87",
-    700: "#BC2678",
-    800: "#A50064",
-    900: "#780650",
+    700: "#CB0B6F",
+    800: "#A70D5B",
+    900: "#8B104E",
     DEFAULT: "#EB2F96",
 };

package/publish/cjs/mobase-tw-plugin/colors/purple.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.purple = void 0;
 exports.purple = {
-    50: "#faf4fe",
-    100: "#f4e9fd",
-    200: "#ead4fc",
-    300: "#d5aaf9",
-    400: "#c07ff6",
+    50: "#faf5ff",
+    100: "#f4e9fe",
+    200: "#ead6fe",
+    300: "#dab6fc",
+    400: "#c487f9",
     500: "#ab55f3",
-    600: "#a03ff1",
-    700: "#962af0",
-    800: "#8726d8",
-    900: "#6A15B2",
+    600: "#9937e6",
+    700: "#8326ca",
+    800: "#6f24a5",
+    900: "#5b1e85",
     DEFAULT: "#ab55f3",
 };