@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Modal/ModalManager.js

@@ -0,0 +1,238 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var ModalManager_exports = {};
+__export(ModalManager_exports, {
+  ModalManager: () => ModalManager,
+  ariaHidden: () => ariaHidden,
+  modalManager: () => modalManager
+});
+module.exports = __toCommonJS(ModalManager_exports);
+function isOverflowing(container) {
+  if (document.body === container) {
+    return window.innerWidth > document.documentElement.clientWidth;
+  }
+  return container.scrollHeight > container.clientHeight;
+}
+function ariaHidden(element, show) {
+  if (show) {
+    element.setAttribute("aria-hidden", "true");
+  } else {
+    element.removeAttribute("aria-hidden");
+  }
+}
+function getPaddingRight(element) {
+  return parseInt(window.getComputedStyle(element).paddingRight, 10) || 0;
+}
+function isAriaHiddenForbiddenOnElement(element) {
+  const forbiddenTagNames = [
+    "TEMPLATE",
+    "SCRIPT",
+    "STYLE",
+    "LINK",
+    "MAP",
+    "META",
+    "NOSCRIPT",
+    "PICTURE",
+    "COL",
+    "COLGROUP",
+    "PARAM",
+    "SLOT",
+    "SOURCE",
+    "TRACK"
+  ];
+  const isForbiddenTagName = forbiddenTagNames.includes(element.tagName);
+  const isInputHidden = element.tagName === "INPUT" && element.getAttribute("type") === "hidden";
+  return isForbiddenTagName || isInputHidden;
+}
+function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, hide) {
+  const blacklist = [mountElement, currentElement, ...elementsToExclude];
+  [].forEach.call(container.children, (element) => {
+    const isNotExcludedElement = !blacklist.includes(element);
+    const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
+    if (isNotExcludedElement && isNotForbiddenElement) {
+      ariaHidden(element, hide);
+    }
+  });
+}
+function findIndexOf(items, callback) {
+  let idx = -1;
+  items.some((item, index) => {
+    if (callback(item)) {
+      idx = index;
+      return true;
+    }
+    return false;
+  });
+  return idx;
+}
+function handleContainer(containerInfo) {
+  const restoreStyle = [];
+  const container = containerInfo.container;
+  const { disableScrollLock } = containerInfo;
+  if (!disableScrollLock) {
+    if (isOverflowing(container)) {
+      const scrollbarSize = window.innerWidth - document.documentElement.clientWidth;
+      restoreStyle.push({
+        property: "padding-right",
+        el: container,
+        value: container.style.paddingRight
+      });
+      container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+    }
+    restoreStyle.push(
+      {
+        property: "overflow",
+        el: container,
+        value: container.style.overflow
+      },
+      {
+        property: "overflow-x",
+        el: container,
+        value: container.style.overflowX
+      },
+      {
+        property: "overflow-y",
+        el: container,
+        value: container.style.overflowY
+      }
+    );
+    container.style.overflow = "hidden";
+  }
+  const restore = () => {
+    restoreStyle.forEach(({ property, el, value }) => {
+      if (value) {
+        el.style.setProperty(property, value);
+      } else {
+        el.style.removeProperty(property);
+      }
+    });
+  };
+  return restore;
+}
+function getHiddenSiblings(container) {
+  const hiddenSiblings = [];
+  [].forEach.call(container.children, (element) => {
+    if (element.getAttribute("aria-hidden") === "true") {
+      hiddenSiblings.push(element);
+    }
+  });
+  return hiddenSiblings;
+}
+class ModalManager {
+  constructor() {
+    __publicField(this, "modals", []);
+    __publicField(this, "containers", []);
+  }
+  add(modal, container) {
+    let modalIndex = this.modals.indexOf(modal);
+    if (modalIndex !== -1) {
+      return modalIndex;
+    }
+    modalIndex = this.modals.length;
+    this.modals.push(modal);
+    if (modal.modalRef) {
+      ariaHidden(modal.modalRef, false);
+    }
+    const hiddenSiblings = getHiddenSiblings(container);
+    ariaHiddenSiblings(
+      container,
+      modal.mount,
+      modal.modalRef,
+      hiddenSiblings,
+      true
+    );
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.container === container
+    );
+    if (containerIndex !== -1) {
+      this.containers[containerIndex].modals.push(modal);
+      return modalIndex;
+    }
+    this.containers.push({
+      modals: [modal],
+      container,
+      restore: null,
+      hiddenSiblings
+    });
+    return modalIndex;
+  }
+  mount(modal, props) {
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.modals.includes(modal)
+    );
+    const containerInfo = this.containers[containerIndex];
+    if (!containerInfo.restore) {
+      containerInfo.restore = handleContainer({
+        container: document.body,
+        disableScrollLock: props.disableScrollLock
+      });
+    }
+  }
+  remove(modal, ariaHiddenState = true) {
+    const modalIndex = this.modals.indexOf(modal);
+    if (modalIndex === -1) {
+      return modalIndex;
+    }
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.modals.indexOf(modal) !== -1
+    );
+    const containerInfo = this.containers[containerIndex];
+    containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
+    this.modals.splice(modalIndex, 1);
+    if (containerInfo.modals.length === 0) {
+      if (containerInfo.restore) {
+        containerInfo.restore();
+      }
+      if (modal.modalRef) {
+        ariaHidden(modal.modalRef, ariaHiddenState);
+      }
+      ariaHiddenSiblings(
+        containerInfo.container,
+        modal.mount,
+        modal.modalRef,
+        containerInfo.hiddenSiblings,
+        false
+      );
+      this.containers.splice(containerIndex, 1);
+    } else {
+      const nextTop = containerInfo.modals[containerInfo.modals.length - 1];
+      if (nextTop.modalRef) {
+        ariaHidden(nextTop.modalRef, false);
+      }
+    }
+    return modalIndex;
+  }
+  isTopModal(modal) {
+    return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
+  }
+}
+const modalManager = new ModalManager();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalManager,
+  ariaHidden,
+  modalManager
+});

package/dist/Modal/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,52 @@
+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 __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 A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  basicModalDemo: () => basicModalDemo,
+  keepMountedDemo: () => keepMountedDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Modal = __toESM(require("../../Modal"));
+const basicModalDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Modal.default, { open: true, disablePortal: true }, "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Modal \u7EC4\u4EF6\u793A\u4F8B");
+};
+const keepMountedDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Modal.default, { disablePortal: true, keepMounted: true }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: { padding: "20px", background: "white", borderRadius: "8px" }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 keepMounted Modal \u7EC4\u4EF6\u793A\u4F8B"
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  basicModalDemo,
+  keepMountedDemo
+});

package/dist/Modal/index.css

@@ -0,0 +1,15 @@
+.bui-modal {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  z-index: var(--bui-z-index-modal);
+  font-family: var(--bui-font-family);
+}
+.bui-modal-hidden {
+  visibility: hidden;
+}
+.bui-modal-backdrop {
+  z-index: -1;
+}

package/dist/Modal/index.js

@@ -29,14 +29,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Modal_exports = {};
 __export(Modal_exports, {
   Modal: () => import_Modal2.default,
-  default: () => import_Modal.default
+  ModalManager: () => import_ModalManager.ModalManager,
+  default: () => import_Modal.default,
+  modalManager: () => import_ModalManager.modalManager,
+  useModal: () => import_useModal.useModal
 });
 module.exports = __toCommonJS(Modal_exports);
 var import_Modal = __toESM(require("./Modal"));
 var import_Modal2 = __toESM(require("./Modal"));
 __reExport(Modal_exports, require("./Modal.types"), module.exports);
+var import_ModalManager = require("./ModalManager");
+var import_useModal = require("./useModal");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Modal,
+  ModalManager,
+  modalManager,
+  useModal,
   ...require("./Modal.types")
 });

package/dist/Modal/useModal.js

@@ -0,0 +1,190 @@
+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 __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 __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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useModal_exports = {};
+__export(useModal_exports, {
+  useModal: () => useModal
+});
+module.exports = __toCommonJS(useModal_exports);
+var import_react = require("react");
+var import_utils = require("@bifrostui/utils");
+var import_ModalManager = require("./ModalManager");
+function getContainer(container) {
+  if (typeof container === "function") {
+    return container();
+  }
+  return container || null;
+}
+function getHasTransition(children) {
+  return Object.prototype.hasOwnProperty.call((children == null ? void 0 : children.props) || {}, "in");
+}
+function useModal(parameters) {
+  const {
+    container,
+    disableScrollLock = false,
+    onClose,
+    open,
+    rootRef,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    children
+  } = parameters;
+  const modal = (0, import_react.useRef)({
+    modalRef: null,
+    mount: null
+  });
+  const modalRef = (0, import_react.useRef)(null);
+  const mountNodeRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(modalRef, rootRef);
+  const [exited, setExited] = (0, import_react.useState)(!open);
+  const hasTransition = getHasTransition(children);
+  let ariaHiddenProp = true;
+  if (parameters["aria-hidden"] === "false" || parameters["aria-hidden"] === false) {
+    ariaHiddenProp = false;
+  }
+  const getModal = () => {
+    if (modalRef.current && mountNodeRef.current) {
+      modal.current.modalRef = modalRef.current;
+      modal.current.mount = mountNodeRef.current;
+    }
+    return modal.current;
+  };
+  const isTopModal = () => import_ModalManager.modalManager.isTopModal(getModal());
+  const handleMounted = () => {
+    import_ModalManager.modalManager.mount(getModal(), {
+      disableScrollLock
+    });
+  };
+  const handleOpen = (0, import_utils.useEventCallback)(() => {
+    const resolvedContainer = getContainer(container) || document.body;
+    import_ModalManager.modalManager.add(getModal(), resolvedContainer);
+    if (modalRef.current) {
+      handleMounted();
+    }
+  });
+  const handlePortalRef = (0, import_utils.useEventCallback)((node) => {
+    mountNodeRef.current = node;
+    if (!node) {
+      return;
+    }
+    if (open && isTopModal()) {
+      handleMounted();
+    } else if (modalRef.current) {
+      (0, import_ModalManager.ariaHidden)(modalRef.current, ariaHiddenProp);
+    }
+  });
+  const handleClose = (0, import_react.useCallback)(() => {
+    import_ModalManager.modalManager.remove(getModal(), ariaHiddenProp);
+  }, [ariaHiddenProp]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      handleClose();
+    };
+  }, [handleClose]);
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [open, handleClose, hasTransition, handleOpen]);
+  const createHandleBackdropClick = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (backdropHandlers = {}) => (event) => {
+      var _a;
+      (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (onClose) {
+        onClose(event, { from: "backdropClick" });
+      }
+    }
+  );
+  const getRootProps = (0, import_react.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (rootHandlers) => {
+      return __spreadProps(__spreadValues({
+        role: "presentation"
+      }, rootHandlers), {
+        ref: handleRef
+      });
+    },
+    [handleRef]
+  );
+  const getBackdropProps = (0, import_react.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (backdropHandlers = {}) => {
+      const propsEventHandlers = {
+        onClick: createHandleBackdropClick(backdropHandlers)
+      };
+      const cleanedHandlers = __spreadValues({}, backdropHandlers);
+      delete cleanedHandlers.onClick;
+      return __spreadProps(__spreadValues(__spreadValues({
+        "aria-hidden": true
+      }, cleanedHandlers), propsEventHandlers), {
+        open
+      });
+    },
+    [createHandleBackdropClick, open]
+  );
+  const getTransitionProps = (0, import_react.useCallback)(() => {
+    const handleEnter = () => {
+      var _a, _b;
+      setExited(false);
+      (_b = (_a = children == null ? void 0 : children.props) == null ? void 0 : _a.onEnter) == null ? void 0 : _b.call(_a);
+    };
+    const handleExited = () => {
+      var _a, _b;
+      setExited(true);
+      (_b = (_a = children == null ? void 0 : children.props) == null ? void 0 : _a.onExited) == null ? void 0 : _b.call(_a);
+    };
+    return {
+      onEnter: handleEnter,
+      onExited: handleExited
+    };
+  }, [children]);
+  return {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    rootRef: handleRef,
+    portalRef: handlePortalRef,
+    exited,
+    hasTransition
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useModal
+});

package/dist/NavBar/NavBar.js

@@ -60,7 +60,7 @@ var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
 var import_icons = require("@bifrostui/icons");
-var import_NavBar2 = require("./NavBar.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-navbar";
 const NavBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
@@ -133,5 +133,4 @@ const NavBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderNavBar(), renderPlaceholder());
 });
 NavBar.displayName = "BuiNavBar";
-NavBar.defaultProps = {};
 var NavBar_default = NavBar;

package/dist/NavBar/index.css

@@ -0,0 +1,65 @@
+:root,
+page,
+xhs-page {
+  --bui-navbar-width: 100%;
+  --bui-navbar-height: 45px;
+  --bui-navbar-padding: 0 8px;
+  --bui-navbar-title-padding: 0 8px;
+  --bui-navbar-icon-font-size: 24px;
+  --bui-navbar-bg-color: var(--bui-color-white);
+  --bui-navbar-border-bottom: none;
+  --bui-navbar-z-index: auto;
+  --bui-navbar-title-max-width: 60%;
+}
+.bui-navbar {
+  position: relative;
+  width: var(--bui-navbar-width);
+  height: var(--bui-navbar-height);
+  box-sizing: border-box;
+  padding: var(--bui-navbar-padding);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bui-navbar-bg-color);
+  border-bottom: var(--bui-navbar-border-bottom);
+  user-select: none;
+  z-index: var(--bui-navbar-z-index);
+  font-family: var(--bui-font-family);
+}
+.bui-navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.bui-navbar-title {
+  max-width: var(--bui-navbar-title-max-width);
+  padding: var(--bui-navbar-title-padding);
+  font-size: var(--bui-title-size-2);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bui-navbar-left,
+.bui-navbar-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-title-size-3);
+}
+.bui-navbar-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+.bui-navbar-right {
+  justify-content: flex-end;
+  text-align: right;
+  align-self: stretch;
+}
+.bui-navbar-icon {
+  font-size: var(--bui-navbar-icon-font-size);
+}
+.bui-navbar-placeholder {
+  width: 100%;
+}

package/dist/Picker/Picker.css

@@ -1,32 +1,36 @@
+:root,
+page,
+xhs-page {
+  --bui-picker-header-height: 50px;
+  --bui-picker-header-padding: 0 var(--bui-spacing-lg);
+  --bui-picker-cancel-height: 100%;
+  --bui-picker-cancel-line-height: 50px;
+  --bui-picker-confirm-height: 100%;
+  --bui-picker-confirm-line-height: 50px;
+  --bui-picker-panel-height: 260px;
+  --bui-picker-indicator-top: 108px;
+  --bui-picker-option-height: 36px;
+  --bui-picker-option-font-size: var(--bui-title-size-4);
+}
 .bui-picker {
-  --header-height: var(--bui-picker-header-height, 50px);
-  --header-padding: var(--bui-picker-header-padding, 0 var(--bui-spacing-lg));
-  --cancel-height: var(--bui-picker-cancel-height, 100%);
-  --cancel-line-height: var(--bui-picker-cancel-line-height, 50px);
-  --confirm-height: var(--bui-picker-confirm-height, 100%);
-  --confirm-line-height: var(--bui-picker-confirm-line-height, 50px);
-  --panel-container-height: var(--bui-picker-panel-height, 260px);
-  --indicator-top: var(--bui-picker-indicator-top, 108px);
-  --option-height: var(--bui-picker-option-height, 36px);
-  --bui-picker-confirm-disabled-opacity: 0.38;
   font-family: var(--bui-font-family);
 }
 .bui-picker .bui-drawer-content {
   border-radius: var(--bui-shape-radius-drawer) var(--bui-shape-radius-drawer) 0 0;
 }
 .bui-picker-header {
-  height: var(--header-height);
+  height: var(--bui-picker-header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--header-padding);
+  padding: var(--bui-picker-header-padding);
 }
 .bui-picker-cancel {
   cursor: pointer;
-  height: var(--cancel-height);
+  height: var(--bui-picker-cancel-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--cancel-line-height);
+  line-height: var(--bui-picker-cancel-line-height);
   color: var(--bui-color-fg-default);
 }
 .bui-picker-title {
@@ -36,10 +40,10 @@
 }
 .bui-picker-confirm {
   cursor: pointer;
-  height: var(--confirm-height);
+  height: var(--bui-picker-confirm-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--confirm-line-height);
+  line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
 .bui-picker-confirm-disabled {
@@ -48,7 +52,7 @@
 }
 .bui-picker-container {
   width: 100%;
-  height: var(--panel-container-height);
+  height: var(--bui-picker-panel-height);
   display: flex;
   overflow: hidden;
 }