@momo-webplatform/mobase 0.0.39 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "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/Callout/Callout.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Callout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const react_1 = require("react");
+const utils_1 = require("../../helpers/utils");
+const outline_1 = require("@heroicons/react/24/outline");
+const TextButton_1 = require("../TextButton");
+const calloutVariants = (0, class_variance_authority_1.cva)("px-3 py-2 rounded-md border flex items-center space-x-2 text-gray-700 text-sm ", {
+    variants: {
+        typeDiv: {
+            neutral: "bg-gray-50 border-gray-300 ",
+            error: "bg-red-50 border-red-300",
+            success: "bg-green-50 border-green-300",
+            warning: "bg-yellow-50 border-yellow-300",
+            info: "bg-blue-50 border-blue-300",
+        },
+        disabled: {
+            true: "text-gray-400 bg-gray-50 opacity-55 pointer-events-none border-gray-300",
+        },
+    },
+    defaultVariants: {
+        typeDiv: "neutral",
+    },
+});
+const iconVariants = (0, class_variance_authority_1.cva)("w-5 h-5 shrink-0 border-none p-0 ", {
+    variants: {
+        typeIcon: {
+            neutral: "text-gray-700",
+            error: "text-red-700",
+            success: "text-green-700",
+            warning: "text-yellow-700",
+            info: "text-blue-700",
+        },
+        disabled: {
+            true: "text-gray-400",
+        },
+    },
+    defaultVariants: {
+        typeIcon: "neutral",
+    },
+});
+exports.Callout = (0, react_1.forwardRef)(({ type = "neutral", message = "", withAction = false, onClickAction, className, disabled, actionClassName, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)("", className, calloutVariants({ typeDiv: type, disabled })), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)(outline_1.InformationCircleIcon, { className: (0, utils_1.cn)(iconVariants({ typeIcon: type, disabled })), width: 20, height: 20 }), (0, jsx_runtime_1.jsx)("div", { children: "B\u1EA1n c\u1EA7n cho ph\u00E9p website s\u1EED d\u1EE5ng th\u00F4ng tin v\u1ECB tr\u00ED \u0111\u1EC3 s\u1EED d\u1EE5ng t\u00EDnh n\u0103ng n\u00E0y" })] }), withAction && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { variant: "primary", onClick: () => onClickAction?.(), className: (0, utils_1.cn)("", actionClassName), isDisabled: disabled, children: withAction }))] }));
+});

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

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

package/publish/cjs/components/SearchBar/SearchBar.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const solid_1 = require("@heroicons/react/20/solid");
+const outline_1 = require("@heroicons/react/24/outline");
+const utils_1 = require("../../helpers/utils");
+exports.SearchBar = (0, react_1.forwardRef)(({ disabled, className, inputClassName, size, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
+    const [clearable, setClearable] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const handleShowClearButton = (inputValue) => {
+        if (inputValue && !clearable) {
+            setClearable(true);
+        }
+        if (!inputValue && clearable) {
+            setClearable(false);
+        }
+    };
+    const onChangeFactory = (event) => {
+        handleShowClearButton(event.target.value);
+        onChange?.(event);
+    };
+    const onFocusFactory = (event) => {
+        handleShowClearButton(event.target.value);
+        onFocus?.(event);
+    };
+    const handleClear = () => {
+        const inputTarget = rootRef.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        onClickClear?.(inputTarget.value);
+        inputTarget.value = "";
+        inputTarget.focus();
+        setClearable(false);
+    };
+    (0, react_1.useEffect)(() => {
+        handleShowClearButton(defaultValue || value);
+    }, [value, defaultValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(className), ref: rootRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 shrink-0 text-gray-500 duration-200 ", children: (0, jsx_runtime_1.jsx)(solid_1.MagnifyingGlassIcon, { className: "w-4 h-4 text-gray-500" }) }), (0, jsx_runtime_1.jsx)("input", { disabled: disabled, type: type, ref: ref, className: (0, utils_1.cn)("mobase-text-input-box text-gray-900 h-10 bg-white w-full transition-all text-sm rounded-md border border-gray-400  placeholder:text-gray-500 px-9  focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block disabled:opacity-50", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), 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 }) }))] }), (0, jsx_runtime_1.jsx)("style", { children: `
+            .mobase-text-input-box:hover {
+                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(--mobase-pink-500) / 1) inset;
+            }
+          ` })] }));
+});

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

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

package/publish/cjs/components/TextButton/TextButton.js

@@ -0,0 +1,63 @@
+"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.textButtonVariants = exports.TextButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_slot_1 = require("@radix-ui/react-slot");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../helpers/utils");
+// /dwd
+const textButtonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed border border-transparent flex-nowrap", {
+    variants: {
+        /**
+         * Determines style variation of Button component.
+         */
+        variant: {
+            default: "text-blue-700 hover:underline hover:bg-blue-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+            primary: "text-pink-500 hover:underline hover:bg-pink-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+            secondary: "text-gray-700 hover:underline hover:text-blue-700 hover:bg-blue-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+        },
+        /**
+         * Determines size variation of Button component.
+         */
+        size: {
+            default: "text-sm",
+            lg: "text-base",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+exports.textButtonVariants = textButtonVariants;
+const TextButton = React.forwardRef(({ className, variant = "default", size = "default", asChild = false, isDisabled = false, ...props }, ref) => {
+    const Comp = asChild ? react_slot_1.Slot : "button";
+    const buttonClassName = (0, utils_1.cn)(textButtonVariants({ variant, size, className }));
+    return ((0, jsx_runtime_1.jsx)(Comp, { className: buttonClassName, disabled: isDisabled, ref: ref, ...props, children: props.children }));
+});
+exports.TextButton = TextButton;
+TextButton.displayName = "TextButton";

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

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

package/publish/cjs/components/Toast/Toast.js

@@ -28,36 +28,37 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const ToastPrimitives = __importStar(require("@radix-ui/react-toast"));
 const class_variance_authority_1 = require("class-variance-authority");
-const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../helpers/utils");
+const solid_1 = require("@heroicons/react/20/solid");
 const ToastProvider = ToastPrimitives.Provider;
 exports.ToastProvider = ToastProvider;
-const ToastViewport = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Viewport, { ref: ref, className: (0, utils_1.cn)("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", className), ...props })));
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Viewport, { ref: ref, className: (0, utils_1.cn)("fixed bottom-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 left-0 sm:right-0 sm:left-auto sm:top-0 sm:bottom-auto sm:flex-col md:max-w-[420px]", className), ...props })));
 exports.ToastViewport = ToastViewport;
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-const toastVariants = (0, class_variance_authority_1.cva)("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", {
+const toastVariants = (0, class_variance_authority_1.cva)("group pointer-events-auto relative w-full overflow-hidden rounded-md border py-4 pr-10 pl-10 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full bg-white text-gray-900 border border-gray-200 border-l-4", {
     variants: {
         variant: {
-            default: "border bg-background text-foreground",
-            destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+            sucess: "border-l-green-500",
+            warning: "border-l-yellow-500",
+            error: "border-l-red-500",
         },
     },
     defaultVariants: {
-        variant: "default",
+        variant: "sucess",
     },
 });
-const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(ToastPrimitives.Root, { ref: ref, className: (0, utils_1.cn)(toastVariants({ variant }), className), ...props }));
+const Toast = React.forwardRef(({ className, variant = "sucess", children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(ToastPrimitives.Root, { ref: ref, className: (0, utils_1.cn)(toastVariants({ variant }), className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-5 h-5 flex items-center justify-center absolute top-4 left-3", children: [variant === "sucess" && ((0, jsx_runtime_1.jsx)(solid_1.CheckCircleIcon, { className: "w-5 h-5 text-green-500" })), variant === "warning" && ((0, jsx_runtime_1.jsx)(solid_1.ExclamationTriangleIcon, { className: "w-5 h-5 text-yellow-500" })), variant === "error" && ((0, jsx_runtime_1.jsx)(solid_1.InformationCircleIcon, { className: "w-5 h-5 text-red-500" }))] }), children] }));
 });
 exports.Toast = Toast;
 Toast.displayName = ToastPrimitives.Root.displayName;
-const ToastAction = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Action, { ref: ref, className: (0, utils_1.cn)("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className), ...props })));
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Action, { ref: ref, className: (0, utils_1.cn)("inline-flex shrink-0 items-center justify-center bg-transparent text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-0 focus:ring-ring focus:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-blue-600 hover:underline mt-2", className), ...props })));
 exports.ToastAction = ToastAction;
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-const ToastClose = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Close, { ref: ref, className: (0, utils_1.cn)("absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className), "toast-close": "", ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })));
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Close, { ref: ref, className: (0, utils_1.cn)("absolute right-2 top-2 rounded-md  transition-opacity hover:opacity-70 focus:opacity-100 focus:outline-none focus:ring-2 text-gray-800 w-8 h-8 flex items-center justify-center", className), "toast-close": "", ...props, children: (0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "h-5 w-5" }) })));
 exports.ToastClose = ToastClose;
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-const ToastTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Title, { ref: ref, className: (0, utils_1.cn)("text-sm font-semibold", className), ...props })));
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Title, { ref: ref, className: (0, utils_1.cn)("text-base font-semibold leading-tight", className), ...props })));
 exports.ToastTitle = ToastTitle;
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Description, { ref: ref, className: (0, utils_1.cn)("text-sm opacity-90", className), ...props })));

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

@@ -1,16 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toaster = exports.toast = exports.useToast = exports.ToastAction = exports.ToastClose = exports.ToastDescription = exports.ToastTitle = exports.Toast = exports.ToastViewport = exports.ToastProvider = void 0;
-var Toast_1 = require("./Toast");
-Object.defineProperty(exports, "ToastProvider", { enumerable: true, get: function () { return Toast_1.ToastProvider; } });
-Object.defineProperty(exports, "ToastViewport", { enumerable: true, get: function () { return Toast_1.ToastViewport; } });
-Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
-Object.defineProperty(exports, "ToastTitle", { enumerable: true, get: function () { return Toast_1.ToastTitle; } });
-Object.defineProperty(exports, "ToastDescription", { enumerable: true, get: function () { return Toast_1.ToastDescription; } });
-Object.defineProperty(exports, "ToastClose", { enumerable: true, get: function () { return Toast_1.ToastClose; } });
-Object.defineProperty(exports, "ToastAction", { enumerable: true, get: function () { return Toast_1.ToastAction; } });
-var use_toast_1 = require("./use-toast");
-Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return use_toast_1.useToast; } });
-Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return use_toast_1.toast; } });
+exports.Toaster = exports.toast = exports.useToast = void 0;
+var useToast_1 = require("./useToast");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return useToast_1.toast; } });
 var toaster_1 = require("./toaster");
 Object.defineProperty(exports, "Toaster", { enumerable: true, get: function () { return toaster_1.Toaster; } });

package/publish/cjs/components/Toast/toaster.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toaster = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Toast_1 = require("../..//components/Toast/Toast");
-const use_toast_1 = require("../../components/Toast/use-toast");
+const Toast_1 = require("./Toast");
+const useToast_1 = require("./useToast");
 function Toaster() {
-    const { toasts } = (0, use_toast_1.useToast)();
+    const { toasts } = (0, useToast_1.useToast)();
     return ((0, jsx_runtime_1.jsxs)(Toast_1.ToastProvider, { children: [toasts.map(function ({ id, title, description, action, ...props }) {
-                return ((0, jsx_runtime_1.jsxs)(Toast_1.Toast, { ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid gap-1", children: [title && (0, jsx_runtime_1.jsx)(Toast_1.ToastTitle, { children: title }), description && ((0, jsx_runtime_1.jsx)(Toast_1.ToastDescription, { children: description }))] }), action, (0, jsx_runtime_1.jsx)(Toast_1.ToastClose, {})] }, id));
+                return ((0, jsx_runtime_1.jsxs)(Toast_1.Toast, { ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid gap-2", children: [title && (0, jsx_runtime_1.jsx)(Toast_1.ToastTitle, { children: title }), description && ((0, jsx_runtime_1.jsx)(Toast_1.ToastDescription, { children: description }))] }), action, (0, jsx_runtime_1.jsx)(Toast_1.ToastClose, {})] }, id));
             }), (0, jsx_runtime_1.jsx)(Toast_1.ToastViewport, {})] }));
 }
 exports.Toaster = Toaster;

package/publish/cjs/components/Toast/{use-toast.js → useToast.js}

@@ -48,7 +48,7 @@ const addToRemoveQueue = (toastId) => {
         toastTimeouts.delete(toastId);
         dispatch({
             type: "REMOVE_TOAST",
-            toastId: toastId,
+            toastId,
         });
     }, TOAST_REMOVE_DELAY);
     toastTimeouts.set(toastId, timeout);
@@ -98,6 +98,8 @@ const reducer = (state, action) => {
                 ...state,
                 toasts: state.toasts.filter((t) => t.id !== action.toastId),
             };
+        default:
+            return state;
     }
 };
 exports.reducer = reducer;
@@ -129,7 +131,7 @@ function toast({ ...props }) {
         },
     });
     return {
-        id: id,
+        id,
         dismiss,
         update,
     };

package/publish/cjs/index.js

@@ -26,6 +26,8 @@ __exportStar(require("./components/Pagination"), exports);
 __exportStar(require("./components/Popover"), exports);
 __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/TextArea"), exports);
+__exportStar(require("./components/Toast"), exports);
+__exportStar(require("./components/TextButton"), exports);
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/TextInput"), exports);
 __exportStar(require("./components/Stepper"), exports);
@@ -38,5 +40,7 @@ __exportStar(require("./components/Footer"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Command"), exports);
 __exportStar(require("./components/Combobox"), exports);
+__exportStar(require("./components/Callout"), exports);
+__exportStar(require("./components/SearchBar"), exports);
 __exportStar(require("./mobase-tw-plugin"), exports);
 __exportStar(require("./site"), exports);