@bifrostui/react 1.2.9-beta.0 → 1.3.1-beta.0

package/dist/Picker/utils.d.ts

@@ -11,3 +11,19 @@ export declare const formatCascade: (columns: ICascadePickerOptionItem[], values
  * 统一options数据格式
  */
 export declare const formatOptions: (internalValue: any, options?: any[]) => any[];
+/**
+ * 在格式化后的数据源中是否存在等长子项的value
+ */
+export declare const existSameLengthValue: (value: any, formatted: any) => any;
+/**
+ * 关闭选择器时，纠正value和格式化数据
+ * 取决于formatted后的options有几列，若value为格式化后数据源（formatted）的等长子集，则取value，否则执行纠正逻辑
+ */
+export declare const safeData: ({ value, formatted, options }: {
+    value: any;
+    formatted: any;
+    options: any;
+}) => {
+    safeValue: any[];
+    safeFormatted: any[];
+};

package/dist/Picker/utils.js

@@ -17,9 +17,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
+  existSameLengthValue: () => existSameLengthValue,
   formatCascade: () => formatCascade,
   formatOptions: () => formatOptions,
-  pickerPanelType: () => pickerPanelType
+  pickerPanelType: () => pickerPanelType,
+  safeData: () => safeData
 });
 module.exports = __toCommonJS(utils_exports);
 const pickerPanelType = (options = []) => {
@@ -63,9 +65,37 @@ const formatOptions = (internalValue, options = []) => {
       return options;
   }
 };
+const existSameLengthValue = (value, formatted) => {
+  const result = formatted.every(
+    (item, idx) => item.some((i) => (value == null ? void 0 : value[idx]) === (i == null ? void 0 : i.value))
+  );
+  return result;
+};
+const safeData = ({ value, formatted, options }) => {
+  let safeValue = [];
+  let safeFormatted = [];
+  const existValidChildren = existSameLengthValue(value, formatted);
+  if (existValidChildren) {
+    safeValue = value;
+    safeFormatted = formatted;
+  } else {
+    formatted.forEach((item, index) => {
+      var _a, _b;
+      const childIndex = item.findIndex((i) => i.value === value[index]);
+      safeValue[index] = ((_a = item == null ? void 0 : item[childIndex]) == null ? void 0 : _a.value) || ((_b = item == null ? void 0 : item[0]) == null ? void 0 : _b.value);
+    });
+    safeFormatted = formatOptions(safeValue, options);
+  }
+  return {
+    safeValue,
+    safeFormatted
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  existSameLengthValue,
   formatCascade,
   formatOptions,
-  pickerPanelType
+  pickerPanelType,
+  safeData
 });

package/dist/Popover/Popover.css

@@ -0,0 +1,97 @@
+.bui-popover {
+  --arrow-size: var(--bui-popover-arrow-size, 8px);
+  --localtion-position: var(--bui-popover-localtion-position, 8px);
+  --max-width: var(--bui-popover-max-width, 350px);
+  --content-min-width: var(--bui-popover-content-min-width, 30px);
+  --content-min-height: var(--bui-popover-content-min-height, 32px);
+  --content-padding: var(--bui-popover-content-padding, 6px 8px);
+  max-width: var(--max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-popover .bui-popover-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-popover .bui-popover-arrow.location-left {
+  left: var(--localtion-position);
+}
+.bui-popover .bui-popover-arrow.location-right {
+  right: var(--localtion-position);
+}
+.bui-popover .bui-popover-arrow.location-top {
+  top: var(--localtion-position);
+}
+.bui-popover .bui-popover-arrow.location-bottom {
+  bottom: var(--localtion-position);
+}
+.bui-popover.popover-top .location-center,
+.bui-popover.popover-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-popover.popover-left .location-center,
+.bui-popover.popover-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-popover.popover-top {
+  padding-bottom: var(--arrow-size);
+}
+.bui-popover.popover-top .bui-popover-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-top: var(--arrow-size) solid var(--bui-color-bg-view);
+  bottom: 0;
+}
+.bui-popover.popover-bottom {
+  padding-top: var(--arrow-size);
+}
+.bui-popover.popover-bottom .bui-popover-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid var(--bui-color-bg-view);
+  top: 0;
+}
+.bui-popover.popover-left {
+  padding-right: var(--arrow-size);
+}
+.bui-popover.popover-left .bui-popover-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-left: var(--arrow-size) solid var(--bui-color-bg-view);
+  right: 0;
+}
+.bui-popover.popover-right {
+  padding-left: var(--arrow-size);
+}
+.bui-popover.popover-right .bui-popover-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid var(--bui-color-bg-view);
+  left: 0;
+}
+.bui-popover .bui-popover-title {
+  font-weight: var(--bui-font-weight-bold);
+}
+.bui-popover .bui-popover-content {
+  min-width: var(--content-min-width);
+  min-height: var(--content-min-height);
+  padding: var(--content-padding);
+  color: var(--bui-color-fg-muted);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-popover);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.bui-popover .bui-popover-content div:nth-child(2) {
+  margin-top: var(--bui-spacing-md);
+}

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './Popover.less';
+import { PopoverProps } from './Popover.types';
+declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps<"div", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
+export default Popover;

package/dist/Popover/Popover.js

@@ -0,0 +1,186 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Popover_exports = {};
+__export(Popover_exports, {
+  default: () => Popover_default
+});
+module.exports = __toCommonJS(Popover_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_Portal = __toESM(require("../Portal"));
+var import_Popover = require("./Popover.css");
+const prefixCls = "bui-popover";
+const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    children,
+    title,
+    content,
+    defaultOpen,
+    placement = "top",
+    trigger,
+    onOpenChange,
+    open,
+    hideArrow,
+    PortalProps
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "children",
+    "title",
+    "content",
+    "defaultOpen",
+    "placement",
+    "trigger",
+    "onOpenChange",
+    "open",
+    "hideArrow",
+    "PortalProps"
+  ]);
+  const positionArr = placement.split(/([A-Z])/);
+  const direction = positionArr[0];
+  let location;
+  if (positionArr.length > 1) {
+    positionArr.splice(0, 1);
+    location = positionArr.join("").toLowerCase();
+  } else {
+    location = "center";
+  }
+  const childrenRef = (0, import_react.useRef)();
+  const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
+  const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
+  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
+  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
+  const ttId = (0, import_react.useId)();
+  const onRootElementMouted = () => {
+    const result = (0, import_utils.getStylesAndLocation)({
+      childrenRef,
+      arrowDirection,
+      arrowLocation,
+      selector: `[data-id="tt_${ttId}"]`
+    });
+    if (!result)
+      return;
+    const { styles, newArrowDirection, newArrowLocation } = result;
+    if (newArrowDirection !== arrowDirection) {
+      setArrowDirection(newArrowDirection);
+    }
+    if (newArrowLocation !== arrowLocation) {
+      setArrowLocation(newArrowLocation);
+    }
+    setTooltyles(styles);
+  };
+  const changeOpenStatus = (event, status) => {
+    if (open)
+      return;
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  const triggerClick = (event) => {
+    const targetStatus = !openStatus;
+    changeOpenStatus(event, targetStatus);
+  };
+  const hidePopover = (event) => {
+    changeOpenStatus(event, false);
+  };
+  const showPopover = (event) => {
+    changeOpenStatus(event, true);
+  };
+  if (!children || !(title || content))
+    return null;
+  const triggerEventOption = (0, import_utils.triggerEventTransform)({
+    trigger,
+    click: triggerClick,
+    show: showPopover,
+    hide: hidePopover
+  });
+  const childrenOptions = __spreadValues({
+    ref: childrenRef
+  }, triggerEventOption);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ import_react.default.createElement(
+    import_Portal.default,
+    __spreadProps(__spreadValues({
+      onRootElementMouted
+    }, PortalProps), {
+      ref
+    }),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues({
+        className: (0, import_clsx.default)(prefixCls, className, `popover-${arrowDirection}`, {
+          "bui-popover-arrow-hide": hideArrow
+        }),
+        "data-id": `tt_${ttId}`,
+        style: __spreadValues(__spreadValues({}, style), tooltyles)
+      }, others),
+      !hideArrow ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(
+            "bui-popover-arrow",
+            `location-${arrowLocation}`
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
+    )
+  ) : null, import_react.default.cloneElement(children, childrenOptions));
+});
+Popover.displayName = "BuiPopover";
+var Popover_default = Popover;

package/dist/Popover/Popover.types.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { PortalCoreProps } from '../Portal/Portal.types';
+type triggerType = 'click' | 'hover';
+export type PopoverProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        children: React.ReactElement;
+        /**
+         * 默认是否显隐
+         * @default false
+         */
+        defaultOpen?: boolean;
+        /**
+         * 用于手动控制浮层显隐
+         * @default false
+         */
+        open?: boolean;
+        /**
+         * 浮层的标题
+         */
+        title?: React.ReactNode;
+        /**
+         * 浮层的内容
+         */
+        content?: React.ReactNode;
+        /**
+         * 是否展示箭头
+         * @default false
+         */
+        hideArrow?: boolean;
+        /**
+         * 气泡框位置
+         * @default 'top'
+         */
+        placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+        /**
+         * 触发行为
+         * - click: 点击触发
+         * - hover: hover触发
+         * - 或者是他们的数组
+         * @default 'click'
+         */
+        trigger?: triggerType | triggerType[];
+        /**
+         * Portal组件的属性
+         */
+        PortalProps?: PortalCoreProps;
+        /**
+         * 点击事件回调方法
+         * - event 触发事件
+         * - data.open 浮层显隐状态
+         * @returns
+         */
+        onOpenChange?: (event: React.SyntheticEvent, data: {
+            open: boolean;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export {};

package/dist/Popover/Popover.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Popover_types_exports = {};
+module.exports = __toCommonJS(Popover_types_exports);

package/dist/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover, default } from './Popover';
+export * from './Popover.types';

package/dist/Popover/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Popover_exports = {};
+__export(Popover_exports, {
+  Popover: () => import_Popover.default,
+  default: () => import_Popover.default
+});
+module.exports = __toCommonJS(Popover_exports);
+var import_Popover = __toESM(require("./Popover"));
+__reExport(Popover_exports, require("./Popover.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popover,
+  ...require("./Popover.types")
+});

package/dist/Portal/Portal.types.d.ts

@@ -18,5 +18,9 @@ export interface PortalCoreProps {
      * 页面跟节点
      */
     rootElement?: Element;
+    /**
+     * 挂载成功的回调方法
+     */
+    onRootElementMouted?: (e: Element) => void;
 }
 export type PortalProps = Omit<PortalCoreProps, 'rootElement'>;

package/dist/Portal/PortalCore.js

@@ -38,7 +38,13 @@ function getContainer(container) {
 }
 const PortalCore = /* @__PURE__ */ import_react.default.forwardRef(
   function Portal(props, ref) {
-    const { children, container, disablePortal = false, rootElement } = props;
+    const {
+      children,
+      container,
+      disablePortal = false,
+      rootElement,
+      onRootElementMouted
+    } = props;
     const [mountNode, setMountNode] = import_react.default.useState(null);
     const handleRef = (0, import_utils.useForkRef)(
       // @ts-expect-error will upstream fix
@@ -53,6 +59,7 @@ const PortalCore = /* @__PURE__ */ import_react.default.forwardRef(
     (0, import_react.useLayoutEffect)(() => {
       if (mountNode && !disablePortal) {
         (0, import_utils.setRef)(ref, mountNode);
+        onRootElementMouted == null ? void 0 : onRootElementMouted(mountNode);
         return () => {
           (0, import_utils.setRef)(ref, null);
         };

package/dist/Progress/Progress.css

@@ -1,22 +1,24 @@
 .bui-progress {
   --fill-color: var(--bui-color-primary);
-  --trail-color: rgba(156, 156, 165, 0.2);
-  --stroke-width: 8px;
-  width: 100%;
+  --trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
+  --stroke-width: var(--bui-progress-stroke-width, 8px);
+  --width: var(--bui-progress-width, 100%);
+  --border-radius: var(--bui-progress-border-radius, 100px);
+  width: var(--width);
   font-family: var(--bui-font-family);
 }
 .bui-progress-inner {
   position: relative;
   display: inline-block;
-  width: 100%;
+  width: var(--width);
   overflow: hidden;
   vertical-align: middle;
   background-color: var(--trail-color);
-  border-radius: 100px;
+  border-radius: var(--border-radius);
 }
 .bui-progress-bg {
   position: relative;
-  border-radius: 100px;
+  border-radius: var(--border-radius);
   background-color: var(--fill-color);
   height: var(--stroke-width);
 }

package/dist/Radio/Radio.css

@@ -2,6 +2,7 @@
   --label-color: var(--bui-color-fg-default);
   --label-font-size: var(--bui-text-size-1);
   --icon-font-size: var(--bui-title-size-2);
+  --icon-padding: var(--bui-radio-icon-padding, 5px);
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -35,7 +36,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding: 5px;
+  padding: var(--icon-padding);
   box-sizing: border-box;
 }
 .bui-radio-label {

package/dist/Radio/Radio.js

@@ -115,7 +115,7 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
     console.error("RadioGroup\u6A21\u5F0F\u4E0BRadio\u987B\u4F20\u5165value\u5C5E\u6027");
   }
   const radioCheckIcon = checkedIcon || /* @__PURE__ */ import_react.default.createElement(import_RadioButtonIcon.default, { checked: true });
-  const radioUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_RadioButtonIcon.default, null);
+  const radioUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_RadioButtonIcon.default, { checked: false });
   const radioDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
   const changeAction = (e, isChecked) => {
     var _a2;

package/dist/Radio/RadioButtonIcon.d.ts

@@ -1,12 +1,7 @@
 import { ISvgIconProps } from '@bifrostui/icons';
 import React from 'react';
 export interface IRadioButtonIconProps extends ISvgIconProps {
-    checked?: boolean;
+    checked: boolean;
 }
 declare function RadioButtonIcon(props: IRadioButtonIconProps): React.JSX.Element;
-declare namespace RadioButtonIcon {
-    var defaultProps: {
-        checked: boolean;
-    };
-}
 export default RadioButtonIcon;

package/dist/Radio/RadioButtonIcon.js

@@ -63,7 +63,4 @@ function RadioButtonIcon(props) {
     )
   );
 }
-RadioButtonIcon.defaultProps = {
-  checked: false
-};
 var RadioButtonIcon_default = RadioButtonIcon;

package/dist/Rating/Rating.css

@@ -1,4 +1,8 @@
 .bui-rating {
+  --small-margin-right: var(--bui-rating-small-margin-right, 0.5px);
+  --medium-margin-right: var(--bui-rating-medium-margin-right, 1px);
+  --large-margin-right: var(--bui-rating-large-margin-right, 2px);
+  --large-font-size: var(--bui-rating-large-font-size, 22px);
   display: flex;
   flex-wrap: wrap;
   font-family: var(--bui-font-family);
@@ -19,15 +23,15 @@
 }
 .bui-rating-container-small {
   font-size: var(--bui-text-size-1);
-  margin-right: 0.5px;
+  margin-right: var(--small-margin-right);
 }
 .bui-rating-container-medium {
   font-size: var(--bui-title-size-3);
-  margin-right: 1px;
+  margin-right: var(--small-medium-right);
 }
 .bui-rating-container-large {
-  font-size: 22px;
-  margin-right: 2px;
+  font-size: var(--large-font-size);
+  margin-right: var(--large-margin-right);
 }
 .bui-rating-item {
   display: flex;