@bifrostui/react 1.3.2 → 1.4.0-beta.1

package/es/CollapsePanel/CollapsePanel.types.d.ts

@@ -0,0 +1,64 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type CollapsePanelItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 唯一标识，对应 activeKey
+         */
+        key?: string | number;
+        /**
+         * 面板标题
+         */
+        label?: React.ReactNode;
+        /**
+         * 自定义 icon
+         */
+        icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
+        /**
+         * 是否展开
+         * @default false
+         */
+        active?: boolean;
+        /**
+         * body 区域内容
+         */
+        children?: React.ReactNode;
+    };
+    defaultComponent: D;
+}, D>;
+export type CollapsePanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 是否开启手风琴模式
+         * @default false
+         */
+        accordion?: boolean;
+        /**
+         * 当前激活面板的 key
+         */
+        activeKeys?: (number | string)[];
+        /**
+         * 默认展开面板的 key
+         */
+        defaultActiveKeys?: (number | string)[];
+        /**
+         * 折叠项目内容
+         */
+        items?: Array<CollapsePanelItemProps>;
+        /**
+         * body 区域内容，使用 CollapseItem 进行渲染
+         */
+        children?: React.ReactNode;
+        /**
+         * 自定义箭头图标
+         */
+        arrowIcon?: React.ReactNode | ((active: boolean) => React.ReactNode);
+        /**
+         * 切换面板时触发
+         */
+        onChange?: (e: React.SyntheticEvent, params: {
+            activeKeys: (number | string)[];
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/es/CollapsePanel/CollapsePanel.types.js

@@ -0,0 +1 @@
+export {};

package/es/CollapsePanel/CollapsePanelItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CollapsePanelItemProps } from './CollapsePanel.types';
+declare const CollapsePanelItem: React.ForwardRefExoticComponent<Omit<CollapsePanelItemProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CollapsePanelItem;

package/es/CollapsePanel/CollapsePanelItem.js

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React from "react";
+import clsx from "clsx";
+import { Collapse } from "../Collapse";
+const prefixCls = "bui-collapse-panel-item";
+const CollapsePanelItem = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    label,
+    children,
+    icon,
+    active,
+    onClick
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "label",
+    "children",
+    "icon",
+    "active",
+    "onClick"
+  ]);
+  const isControlledIcon = typeof icon === "function";
+  const getIcon = () => {
+    return typeof icon === "function" ? icon(active) : icon;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      className: clsx(prefixCls, active && `${prefixCls}-active`, className),
+      style,
+      ref
+    }, others),
+    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          `${prefixCls}-header-icon`,
+          `${prefixCls}-header-icon-arrow`,
+          {
+            [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
+          }
+        )
+      },
+      getIcon()
+    )),
+    /* @__PURE__ */ React.createElement(Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-content` }, children))
+  );
+});
+CollapsePanelItem.displayName = "BuiCollapsePanelItem";
+CollapsePanelItem.defaultProps = {
+  active: false
+};
+var CollapsePanelItem_default = CollapsePanelItem;
+export {
+  CollapsePanelItem_default as default
+};

package/es/CollapsePanel/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './CollapsePanel';
+export { default as CollapsePanel } from './CollapsePanel';
+export { default as CollapsePanelItem } from './CollapsePanelItem';
+export * from './CollapsePanel.types';

package/es/CollapsePanel/index.js

@@ -0,0 +1,9 @@
+import { default as default2 } from "./CollapsePanel";
+import { default as default3 } from "./CollapsePanel";
+import { default as default4 } from "./CollapsePanelItem";
+export * from "./CollapsePanel.types";
+export {
+  default3 as CollapsePanel,
+  default4 as CollapsePanelItem,
+  default2 as default
+};

package/es/Countdown/Countdown.css

@@ -2,6 +2,7 @@
   --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
   --color: var(--bui-countdown-color, var(--bui-color-fg-default));
   --font-weight: var(--bui-countdown-font-weight, var(--bui-font-weight-normal));
+  --slice-unit-margin: var(--bui-countdown-slice-unit-margin, 0 2px);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -34,5 +35,5 @@
     sans-serif;
 }
 .bui-countdown-slice-unit {
-  margin: 0 2px;
+  margin: var(--slice-unit-margin);
 }

package/es/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DialogProps } from './Dialog.types';
+import { DialogProps, DialogRef } from './Dialog.types';
 import './index.less';
-declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<DialogRef>>;
 export default Dialog;

package/es/Dialog/Dialog.js

@@ -29,11 +29,13 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, { useRef } from "react";
 import clsx from "clsx";
+import React, { useImperativeHandle, useRef } from "react";
 import { Input } from "../Input";
 import { Button } from "../Button";
+import { useLocaleText } from "../locales";
 import Modal from "../Modal";
+import { useTheme } from "../ThemeProvider";
 import "./index.css";
 const prefixCls = "bui-dialog";
 const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -48,7 +50,8 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     cancelText,
     placeholder,
     InputProps,
-    className
+    className,
+    theme
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
@@ -60,9 +63,19 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "cancelText",
     "placeholder",
     "InputProps",
-    "className"
+    "className",
+    "theme"
   ]);
   const InputRef = useRef(null);
+  const themeConfig = useTheme(theme);
+  const {
+    cancel,
+    confirm,
+    placeholder: placeholderLocaleName
+  } = useLocaleText("dialog", themeConfig);
+  useImperativeHandle(ref, () => {
+    return { theme: themeConfig };
+  });
   const footerNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -70,7 +83,7 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
       onClick: onClose,
       className: `${prefixCls}-body-button`
     },
-    cancelText || "\u53D6\u6D88"
+    cancelText || cancel
   ), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -82,14 +95,14 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
       },
       className: `${prefixCls}-body-button`
     },
-    confirmText || "\u786E\u5B9A"
+    confirmText || confirm
   ));
   const inputNode = type === "prompt" && /* @__PURE__ */ React.createElement(
     Input,
     __spreadProps(__spreadValues({}, InputProps), {
       inputRef: InputRef,
       className: `${prefixCls}-body-input`,
-      placeholder: `${placeholder || "\u8BF7\u5728\u6B64\u5904\u8F93\u5165"}`
+      placeholder: `${placeholder || placeholderLocaleName}`
     })
   );
   if (!open)
@@ -100,8 +113,7 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
       open: true,
       className: clsx(prefixCls, className),
       disablePortal: true,
-      onClose,
-      ref
+      onClose
     }),
     /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ React.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
   );

package/es/Dialog/Dialog.types.d.ts

@@ -1,11 +1,15 @@
 import React, { ReactNode } from 'react';
 import { ModalProps } from '../Modal/Modal.types';
 import { InputProps } from '../Input/Input.types';
+import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
 /**
  * 对话框类型
  */
 export type DialogType = 'confirm' | 'prompt';
 export type Dispatch = (action: boolean, val?: string) => void;
+export type DialogRef = {
+    theme?: ThemeProps;
+};
 export interface DialogProps extends ModalProps {
     /**
      * 对话框类型
@@ -36,6 +40,10 @@ export interface DialogProps extends ModalProps {
      * 取消文本内容
      */
     cancelText?: ReactNode;
+    /**
+     * theme 主题定制
+     */
+    theme?: ThemeProps;
     /**
      * 确认回调
      */
@@ -82,7 +90,7 @@ export type DialogPromise = Promise<boolean | string>;
 /**
  * Dialog Instance
  */
-export interface DialogInstance {
+export interface DialogFunction {
     /**
      * 直接调用显示确认框 Dialog
      */
@@ -96,3 +104,6 @@ export interface DialogInstance {
      */
     prompt?: (options: PromptOptions, val?: string) => DialogPromise;
 }
+export interface DialogInstance extends DialogFunction {
+    useDialog: () => [DialogFunction, React.JSX.Element];
+}

package/es/Dialog/FunctionalDialog.js

@@ -64,7 +64,7 @@ const DialogGenerator = (options) => {
   const rootElement = getRootElement();
   rootElement.appendChild(rootWrapper);
   const DialogComponent = () => {
-    const _a = options, { onConfirm, onCancel } = _a, others = __objRest(_a, ["onConfirm", "onCancel"]);
+    const _a = options, { onConfirm, onCancel, ref } = _a, others = __objRest(_a, ["onConfirm", "onCancel", "ref"]);
     const [visible, setVisible] = useState(false);
     const close = useCallback(() => {
       setVisible(false);
@@ -94,7 +94,9 @@ const DialogGenerator = (options) => {
     });
     return /* @__PURE__ */ React.createElement(
       Popup,
-      __spreadProps(__spreadValues({}, others), {
+      __spreadProps(__spreadValues({
+        ref
+      }, others), {
         open: visible,
         onOk: (val) => dispatch(true, val),
         onClose: () => dispatch(false)
@@ -133,8 +135,42 @@ const prompt = (options) => {
     type: "prompt"
   }, formatProps(options)));
 };
+const useDialog = () => {
+  const holderRef = React.useRef(null);
+  const wrapAPI = (props) => {
+    const options = __spreadValues({ theme: holderRef.current.theme }, formatProps(props));
+    const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
+    return new Promise((resolve) => {
+      DialogGenerator(__spreadProps(__spreadValues({}, rest), {
+        onConfirm: (val) => __async(void 0, null, function* () {
+          yield onConfirm == null ? void 0 : onConfirm(val);
+          if (rest.type === "prompt")
+            resolve(val);
+          else
+            resolve(true);
+        }),
+        onCancel: () => __async(void 0, null, function* () {
+          yield onCancel == null ? void 0 : onCancel();
+          resolve(false);
+        })
+      }));
+    });
+  };
+  wrapAPI.confirm = (options) => Dialog(__spreadProps(__spreadValues({
+    type: "confirm"
+  }, formatProps(options)), {
+    theme: holderRef.current.theme
+  }));
+  wrapAPI.prompt = (options) => Dialog(__spreadProps(__spreadValues({
+    type: "prompt"
+  }, formatProps(options)), {
+    theme: holderRef.current.theme
+  }));
+  return [wrapAPI, /* @__PURE__ */ React.createElement(Popup, { key: "dialog-holder", ref: holderRef })];
+};
 Dialog.confirm = confirm;
 Dialog.prompt = prompt;
+Dialog.useDialog = useDialog;
 var FunctionalDialog_default = Dialog;
 export {
   FunctionalDialog_default as default

package/es/Dialog/index.css

@@ -1,8 +1,15 @@
 .bui-dialog {
-  --max-width: 300px;
-  --border-radius: var(--bui-shape-radius-drawer);
-  --header-font-size: var(--bui-title-size-2);
-  --message-font-size: var(--bui-title-size-4);
+  --max-width: var(--bui-dialog-max-width, 300px);
+  --border-radius: var(--bui-dialog-border-radius, var(--bui-shape-radius-drawer));
+  --title-padding: var(--bui-dialog-title-padding, 0 40px 9px);
+  --desc-padding: var(--bui-dialog-desc-padding, 0 24px);
+  --footer-margin-top: var(--bui-dialog-footer-margin-top, 15px);
+  --button-height: var(--bui-dialog-button-height, 53px);
+  --button-line-height: var(--bui-dialog-button-line-height, 25px);
+  --button-padding: var(--bui-dialog-button-padding, 12px 0 13px);
+  --button-font-size: var(--bui-dialog-button-font-size, 17px);
+  --button-border-left: var(--bui-dialog-button-border-left, 1px solid rgba(0, 0, 0, 0.05));
+  --button-active-background-color: var(--bui-dialog-button-active-background-color, rgba(54, 57, 64, 0.05));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,26 +24,26 @@
   line-height: 21px;
 }
 .bui-dialog-body-title {
-  padding: 0 40px 9px;
-  font-size: var(--header-font-size);
+  padding: var(--title-padding);
+  font-size: var(--bui-title-size-2);
   text-align: center;
   color: var(--bui-color-fg-default);
-  font-weight: 500;
+  font-weight: var(--bui-font-weight-medium);
 }
 .bui-dialog-body-title + .bui-dialog-body-footer {
-  margin-top: 6px;
+  margin-top: var(--bui-spacing-sm);
 }
 .bui-dialog-body-desc {
-  padding: 0 24px;
+  padding: var(--desc-padding);
   color: var(--bui-color-fg-muted);
-  font-size: var(--message-font-size);
+  font-size: var(--bui-title-size-4);
   text-align: center;
 }
 .bui-dialog-body-desc:first-child {
   padding-top: 0;
 }
 .bui-dialog-body-footer {
-  margin-top: 15px;
+  margin-top: var(--footer-margin-top);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: -webkit-box;
   display: flex;
@@ -49,18 +56,20 @@
   flex: 1;
   display: block;
   width: 100%;
-  height: 53px;
-  line-height: 25px;
-  padding: 12px 0 13px;
-  font-size: 17px;
-  background: 0 0;
+  height: var(--button-height);
+  line-height: var(--button-line-height);
+  padding: var(--button-padding);
+  font-size: var(--button-font-size);
   border: 0;
   outline: 0;
-  border-left: 1px solid rgba(0, 0, 0, 0.05);
+  border-left: var(--button-border-left);
   border-radius: 0;
   text-align: center;
   box-sizing: border-box;
 }
+.bui-dialog-body-button:first-child {
+  border: none;
+}
 .bui-dialog-body-button:active {
-  background-color: rgba(54, 57, 64, 0.05);
+  background-color: var(--button-active-background-color);
 }

package/es/Divider/Divider.css

@@ -1,18 +1,20 @@
 .bui-divider {
   --height: var(--bui-divider-height, 100%);
   --width: var(--bui-divider-width, 100%);
+  --border-width: var(--bui-divider-border-width, 1px);
+  --line-width: var(--bui-divider-line-width, 40px);
   border-color: var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
 .bui-divider-vertical {
   height: var(--height);
   display: inline-block;
-  border-right-width: 1px;
+  border-right-width: var(--border-width);
   border-right-style: solid;
 }
 .bui-divider-horizontal {
   width: var(--width);
-  border-bottom-width: 1px;
+  border-bottom-width: var(--border-width);
   border-bottom-style: solid;
 }
 .bui-divider-vertical-dashed {
@@ -29,8 +31,8 @@
   justify-content: center;
 }
 .bui-divider-line {
-  width: 40px;
-  border-bottom-width: 1px;
+  width: var(--line-width);
+  border-bottom-width: var(--border-width);
   border-bottom-style: solid;
   border-color: var(--bui-color-border-default);
 }

package/es/IconButton/IconButton.css

@@ -1,8 +1,10 @@
 .bui-icon-btn {
-  --bg-color: var(--bui-color-neutral-5);
-  --color: var(--bui-color-fg-muted);
-  --icon-size: 17px;
-  --user-area: 5px;
+  --bg-color: var(--bui-icon-btn-bg-color, var(--bui-color-neutral-5));
+  --color: var(--bui-icon-btn-color, var(--bui-color-fg-muted));
+  --icon-size: var(--bui-icon-btn-font-size, 17px);
+  --user-area: var(--bui-icon-btn-padding, 5px);
+  --large-font-size: var(--bui-icon-btn-large-font-size, 23px);
+  --disabled-opacity: var(--bui-icon-btn-disabled-opacity, 0.5);
   position: relative;
   display: inline-flex;
   height: auto;
@@ -47,10 +49,10 @@
 }
 .bui-icon-btn-medium.bui-icon-btn-outlined,
 .bui-icon-btn-medium.bui-icon-btn-contained {
-  padding: 5px;
+  padding: var(--user-area);
 }
 .bui-icon-btn-large {
-  font-size: 23px;
+  font-size: var(--large-font-size);
   padding: var(--bui-spacing-sm);
 }
 .bui-icon-btn-large.bui-icon-btn-outlined,
@@ -59,7 +61,7 @@
 }
 .bui-icon-btn-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 .bui-icon-btn-circular {
   border-radius: 100%;

package/es/Image/index.css

@@ -1,4 +1,5 @@
 .bui-image {
+  --default-background-color: var(--bui-image-default-background-color, rgba(127, 127, 127, 0.2));
   width: auto;
   height: auto;
   display: inline-block;
@@ -31,5 +32,5 @@
 .bui-image-default-icon-item {
   width: 100%;
   height: 100%;
-  background-color: rgba(127, 127, 127, 0.2);
+  background-color: var(--default-background-color);
 }

package/es/Input/Input.css

@@ -1,11 +1,18 @@
 .bui-input {
+  --height: var(--bui-input-height, 32px);
+  --padding: var(--bui-input-padding, 4px 10px);
+  --border-radius: var(--bui-input-border-radius, var(--bui-shape-radius-default));
+  --icon-start-margin-right: var(--bui-input-icon-start-margin-right, 3px);
+  --icon-end-margin-left: var(--bui-input-icon-end-margin-left, 3px);
+  --background-color: var(--bui-input-background-color, transparent);
+  --disabled-background-color: var(--bui-input-disabled-background-color, rgba(0, 0, 0, 0.04));
   position: relative;
   display: flex;
   align-items: center;
-  height: 32px;
-  padding: 4px 10px;
+  height: var(--height);
+  padding: var(--padding);
   box-sizing: border-box;
-  border-radius: var(--bui-shape-radius-default);
+  border-radius: var(--border-radius);
   border: 1px solid var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
@@ -16,10 +23,10 @@
   font-size: var(--bui-title-size-3);
 }
 .bui-input-icon-start {
-  margin-right: 3px;
+  margin-right: var(--icon-start-margin-right);
 }
 .bui-input-icon-end {
-  margin-left: 3px;
+  margin-left: var(--icon-end-margin-left);
 }
 .bui-input-input {
   flex: 1;
@@ -30,7 +37,7 @@
   color: var(--bui-color-fg-default);
   border: none;
   outline: none;
-  background-color: transparent;
+  background-color: var(--background-color);
   font-size: var(--bui-text-size-2);
 }
 .bui-input-input::placeholder {
@@ -38,7 +45,7 @@
 }
 .bui-input-disabled {
   pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: var(--disabled-background-color);
 }
 .bui-input-disabled .bui-input-input {
   color: var(--bui-color-fg-disabled);

package/es/List/List.css

@@ -1,4 +1,7 @@
 .bui-list {
+  --small-item-padding: var(--bui-list-small-item-padding, 5px 12px);
+  --medium-item-padding: var(--bui-list-medium-item-padding, 18px 12px);
+  --large-item-padding: var(--bui-list-large-item-padding, 20px 12px);
   background: var(--bui-color-bg-view);
   font-size: var(--bui-title-size-3);
   font-family: var(--bui-font-family);

package/es/List/ListItem.css

@@ -10,13 +10,13 @@
   color: var(--bui-color-fg-subtle);
 }
 .bui-list-small .bui-list-item {
-  padding: 5px 12px;
+  padding: var(--small-item-padding);
 }
 .bui-list-medium .bui-list-item {
-  padding: 18px 12px;
+  padding: var(--medium-item-padding);
 }
 .bui-list-large .bui-list-item {
-  padding: 20px 12px;
+  padding: var(--large-item-padding);
 }
 .bui-list-item-divider:not(:last-child) {
   border-bottom: 1px solid var(--bui-color-border-default);

package/es/List/ListItemContent.css

@@ -13,6 +13,6 @@
   flex: 1 1 auto;
 }
 .bui-list-item-content-secondary {
-  font-size: 13px;
+  font-size: var(--bui-text-size-2);
   color: var(--bui-color-fg-muted);
 }

package/es/Loading/Loading.css

@@ -1,4 +1,6 @@
 .bui-loading {
+  --icon-font-size: var(--bui-loading-icon-font-size, 30px);
+  --text-padding: var(--bui-loading-text-padding, 10px);
   --animation-duration: var(--bui-loading-animation-duration, 1.6s);
   width: fit-content;
   display: flex;
@@ -8,11 +10,11 @@
   font-family: var(--bui-font-family);
 }
 .bui-loading-icon {
-  font-size: 30px;
+  font-size: var(--icon-font-size);
   animation: loading var(--animation-duration) linear infinite;
 }
 .bui-loading-text {
-  padding: 10px;
+  padding: var(--text-padding);
   font-size: var(--bui-title-size-3);
 }
 .bui-loading-vertical {

package/es/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | keyof import("@bifrostui/types").ICommonProps | "onClose" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;