@fibery/ui-kit 1.37.0 → 1.38.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fibery/ui-kit
 
+## 1.38.0
+
+### Minor Changes
+
+- ab88ef9: add ToggleButtonGroupXComponent
+
+### Patch Changes
+
+- ece31af: Move expression-utils to typescript
+- d5b2a71: add RoundTogleButton
+- 0d0530a: add ToggleButton component
+- Updated dependencies [586c255]
+  - @fibery/emoji-data@2.7.0
+
 ## 1.37.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -12,6 +12,8 @@
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-navigation-menu": "1.2.1",
     "@radix-ui/react-toast": "1.2.2",
+    "@radix-ui/react-toggle": "1.1.10",
+    "@radix-ui/react-toggle-group": "1.1.11",
     "@radix-ui/react-tooltip": "1.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react-select-country-list": "^2.2.3",
@@ -36,6 +38,7 @@
     "react-color": "2.19.3",
     "react-day-picker": "8.1.4",
     "react-intersection-observer": "9.3.5",
+    "react-medium-image-zoom": "5.2.10",
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
@@ -43,7 +46,7 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/emoji-data": "2.6.1",
+    "@fibery/emoji-data": "2.7.0",
     "@fibery/helpers": "1.3.3",
     "@fibery/react": "1.4.4"
   },
@@ -54,7 +57,6 @@
   "devDependencies": {
     "@babel/core": "7.23.9",
     "@babel/runtime": "7.23.9",
-    "@wyw-in-js/babel-preset": "0.5.5",
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
@@ -68,6 +70,7 @@
     "@types/prop-types": "15.7.5",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
+    "@wyw-in-js/babel-preset": "0.5.5",
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
     "glob": "7.1.7",
@@ -79,8 +82,8 @@
     "svgo": "2.8.0",
     "typescript": "5.8.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.6.1"
+    "@fibery/eslint-config": "8.6.1",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/actions-menu/actions-menu-item.tsx

@@ -2,12 +2,14 @@ import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {css, cx} from "@linaria/core";
 import {FunctionComponent, memo, ReactNode, useId} from "react";
-import {border, colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {border, colors, layout, layoutVars, lineHeight, space, textStyles, themeVars} from "../design-system";
 import CheckedIcon from "../icons/react/Checked";
 import {IconBaseProps} from "../icons/types";
 import {Spinner} from "../loaders";
+import {mobileRootSelector} from "../mobile-styles";
 import {ShortcutBadge} from "../shortcut-badge";
 import {useTheme} from "../theme-provider";
+import {useIsPhone} from "../use-is-phone";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 import {useActiveDangerousRow, useSetActiveDangerousRow} from "./contexts/actions-menu-dangerous-rows";
 
@@ -31,8 +33,11 @@ const descriptionCss = css`
 const rowCss = css`
   display: flex;
   align-items: center;
-  min-height: ${layout.menuItemHeight}px;
+  min-height: ${layoutVars.menuItemHeight};
   gap: ${space.s6}px;
+  ${mobileRootSelector} & {
+    gap: ${space.s8}px;
+  }
 `;
 
 const dangerousItemCss = css`
@@ -87,20 +92,25 @@ const firstLetterToLowerCase = (str: string) => {
 
 const RightCorner = ({shortcut, loading, checked}: {shortcut?: string; loading?: boolean; checked?: boolean}) => {
   const theme = useTheme();
+  const isPhone = useIsPhone();
 
   return loading || shortcut || checked ? (
     <div className={cornerCss}>
       {loading ? <Spinner color={theme.primary} iconSize={16} containerSize={16} /> : null}
       {shortcut ? <ShortcutBadge shortcut={shortcut} /> : null}
-      {checked ? <CheckedIcon iconSize={18} color={themeVars.textColor} /> : null}
+      {checked ? <CheckedIcon iconSize={isPhone ? 20 : 18} color={themeVars.textColor} /> : null}
     </div>
   ) : null;
 };
 
-const LeftCorner = ({Icon}: {Icon: FunctionComponent<IconBaseProps> | void}) => {
+const LeftCorner = ({Icon, iconColor}: {Icon: FunctionComponent<IconBaseProps> | void; iconColor?: string}) => {
+  const isPhone = useIsPhone();
   return Icon ? (
     <div className={cornerCss}>
-      <Icon color={`var(--actions-menu-item-icon-color, ${themeVars.iconColor})`} iconSize={18} />
+      <Icon
+        color={`var(--actions-menu-item-icon-color, ${iconColor ?? themeVars.iconColor})`}
+        iconSize={isPhone ? 20 : 18}
+      />
     </div>
   ) : null;
 };
@@ -115,6 +125,7 @@ export type ActionsMenuItemProps = {
   description?: string;
   /** Icon's component */
   Icon?: FunctionComponent<IconBaseProps>;
+  iconColor?: string;
   /** Hint for keyboard shortcut for this action */
   shortcut?: string;
   disabled?: boolean;
@@ -135,6 +146,7 @@ const ActionsMenuItemComponent: React.FC<
   onSelect,
   description,
   Icon,
+  iconColor,
   shortcut,
   disabled,
   dangerous,
@@ -180,7 +192,7 @@ const ActionsMenuItemComponent: React.FC<
       )}
       disabled={disabled}
     >
-      <LeftCorner Icon={Icon} />
+      <LeftCorner Icon={Icon} iconColor={iconColor} />
       <div className={rowContentCss}>
         {dangerous && (
           <div className={cx(hiddenTextCss, showWarning && visibleTextCss)}>

package/src/actions-menu/actions-menu-props.tsx

@@ -22,6 +22,10 @@ export type ActionsMenuProps = {
   sideOffset?: number;
   collisionPadding?: number;
   autoFocusOnClose?: boolean;
+  /** Show menu in a modal on mobile */
+  supportsMobile?: boolean;
+  mobileTitle?: string;
+  height?: string;
   onEscapeKeyDown?: (event: KeyboardEvent) => void;
   sticky?: DropdownMenuContentProps["sticky"];
 };

package/src/actions-menu/actions-menu-sub-command-menu.tsx

@@ -16,6 +16,7 @@ import {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 // eslint-disable-next-line no-restricted-imports
 import {IconBaseProps} from "@fibery/ui-kit/src/icons/types";
+import {useIsPhone} from "../use-is-phone";
 
 const [ActionsMenuSubCommandMenuProvider, useActionsMenuSubCommandMenuCtx] = createContext<{
   subMenuOpenRef: RefObject<boolean>;
@@ -113,18 +114,20 @@ export const ActionsMenuSubCommandMenuRoot: React.FC<React.ComponentPropsWithout
 
 type ActionsMenuSubCommandMenuInputProps = React.ComponentPropsWithoutRef<typeof CommandMenuInput>;
 export const ActionsMenuSubCommandMenuInput: React.FC<ActionsMenuSubCommandMenuInputProps> = ({
-  autoFocus = true,
+  autoFocus,
   onKeyDown,
   ...otherProps
 }) => {
+  const isPhone = useIsPhone();
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const shouldFocus = autoFocus ?? (isPhone ? false : true);
 
   useEffect(() => {
     // html autofocus doesn't work reliably in Context Menu
-    if (autoFocus) {
+    if (shouldFocus) {
       setTimeout(() => inputRef.current?.focus(), 0);
     }
-  }, [autoFocus]);
+  }, [shouldFocus]);
 
   return (
     <CommandMenuInput
@@ -136,7 +139,7 @@ export const ActionsMenuSubCommandMenuInput: React.FC<ActionsMenuSubCommandMenuI
         }
         onKeyDown?.(e);
       }}
-      autoFocus={autoFocus}
+      autoFocus={shouldFocus}
       {...otherProps}
     />
   );

package/src/actions-menu/actions-menu-sub-menu.tsx

@@ -6,6 +6,7 @@ import ArrowRight from "../icons/react/ArrowRight";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 // eslint-disable-next-line no-restricted-imports
 import {IconBaseProps} from "@fibery/ui-kit/src/icons/types";
+import {useIsPhone} from "../use-is-phone";
 
 const subTriggerClass = css`
   display: flex;
@@ -24,6 +25,7 @@ type Props = React.PropsWithChildren<{
   open?: boolean;
   onOpenChange?: (v: boolean) => void;
   disabled?: boolean;
+  mobileTitle?: string;
   contentClassName?: string;
   container?: HTMLElement | null;
   Icon?: FunctionComponent<IconBaseProps>;
@@ -37,9 +39,11 @@ const cornerCss = css`
 `;
 
 const LeftCorner = ({Icon}: {Icon: FunctionComponent<IconBaseProps> | void}) => {
+  const isPhone = useIsPhone();
+
   return Icon ? (
     <div className={cornerCss}>
-      <Icon color={`var(--actions-menu-item-icon-color, ${themeVars.iconColor})`} iconSize={18} />
+      <Icon color={`var(--actions-menu-item-icon-color, ${themeVars.iconColor})`} iconSize={isPhone ? 20 : 18} />
     </div>
   ) : null;
 };
@@ -55,14 +59,16 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
   triggerRef,
   children,
   disabled = false,
+  mobileTitle = trigger,
   contentClassName,
   Icon,
   onMouseEnter,
 }) => {
+  const isPhone = useIsPhone();
   const {MenuPrimitive, container} = useActionsMenuContext();
 
   return (
-    <MenuPrimitive.Sub open={open} onOpenChange={onOpenChange}>
+    <MenuPrimitive.Sub title={mobileTitle} open={open} onOpenChange={onOpenChange}>
       <MenuPrimitive.SubTrigger
         ref={triggerRef}
         className={subTriggerClass}
@@ -75,7 +81,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
         <div className={arrowClass}>
           <ArrowRight
             color={disabled ? themeVars.disabledTextColor : themeVars.iconColor}
-            containerSize={10}
+            containerSize={isPhone ? 20 : 10}
             aria-hidden
           />
         </div>

package/src/actions-menu/actions-menu.tsx

@@ -1,11 +1,14 @@
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
+import {useIsPhone} from "../use-is-phone";
 import * as DropdownMenu from "../dropdown-menu";
+import * as ModalMenu from "../modal-menu";
 import {ActionsMenuContextProvider} from "./contexts/actions-menu-context";
 import {ActionsMenuDangerousRowsProvider} from "./contexts/actions-menu-dangerous-rows";
 import {ActionsMenuProps} from "./actions-menu-props";
 import {preventDefault} from "@fibery/react/src/prevent-default";
 import {useState} from "react";
+import {useFeatures} from "../features";
 import {ActionsMenuConfirmation, ActionsMenuConfirmationProps} from "./actions-menu-confirmation";
 import {useActionsMenuOpenStateTracker} from "./actions-menu-open-state-tracker";
 
@@ -36,8 +39,12 @@ export const ActionsMenu = ({
   contentStyles,
   modal,
   autoFocusOnClose,
+  supportsMobile,
+  mobileTitle,
   sticky,
+  height,
 }: ActionsMenuProps): JSX.Element => {
+  const features = useFeatures<{enableMobileMenus: boolean}>();
   const {onMenuOpenChange} = useActionsMenuOpenStateTracker();
   const [isOpen = false, setOpen] = useControllableState({
     value: open,
@@ -48,26 +55,35 @@ export const ActionsMenu = ({
       onMenuOpenChange(value);
     },
   });
+  const isPhone = useIsPhone();
   const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
+  const MenuPrimitive = isPhone && features.enableMobileMenus && supportsMobile ? ModalMenu : DropdownMenu;
+
   return (
     <ActionsMenuContextProvider
       setOpen={setOpen}
       showConfirmation={setConfirmation}
-      MenuPrimitive={DropdownMenu}
+      MenuPrimitive={MenuPrimitive}
       container={container}
     >
-      <DropdownMenu.Root open={isOpen} onOpenChange={setOpen} modal={modal || false}>
-        <DropdownMenu.Trigger
+      <MenuPrimitive.Root
+        open={isOpen}
+        height={height}
+        onOpenChange={setOpen}
+        modal={modal || false}
+        title={mobileTitle}
+      >
+        <MenuPrimitive.Trigger
           // backward compatibility for dropdown styles
-          className={isOpen ? "actions-visible" : "actions-hidden"}
+          className={isOpen ? "actions-visible" : "actions-hidden actions-visible-on-mobile"}
           onClick={preventDefaultAndStopPropagation}
           disabled={disabled}
           asChild
         >
           {trigger}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
+        </MenuPrimitive.Trigger>
+        <MenuPrimitive.Content
           align={align}
           sticky={sticky}
           alignOffset={alignOffset}
@@ -81,8 +97,8 @@ export const ActionsMenu = ({
           onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}
         >
           <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+        </MenuPrimitive.Content>
+      </MenuPrimitive.Root>
 
       {confirmation ? <ActionsMenuConfirmation {...confirmation} /> : null}
     </ActionsMenuContextProvider>

package/src/actions-panel.tsx

@@ -1,6 +1,7 @@
 import {Children, forwardRef, ReactElement, ReactNode} from "react";
 import {css} from "@linaria/core";
 import {space} from "./design-system";
+import {useIsPhone} from "./use-is-phone";
 
 const gridStyle = css`
   align-items: center;
@@ -12,10 +13,19 @@ type Props = {
   inline?: boolean;
   gap?: number;
 };
+
+const getGap = (gap: number | undefined, isPhone: boolean) => {
+  if (gap !== undefined) {
+    return gap;
+  }
+  return isPhone ? 0 : space.s4;
+};
+
 export const ActionsPanel = forwardRef<HTMLDivElement, Props>(function ActionsPanelComponent(
-  {children, inline, gap = space.s4},
+  {children, inline, gap},
   ref
 ) {
+  const isPhone = useIsPhone();
   const childrenArray = Children.toArray(children);
   if (childrenArray.length === 0) {
     return null;
@@ -27,7 +37,7 @@ export const ActionsPanel = forwardRef<HTMLDivElement, Props>(function ActionsPa
       className={gridStyle}
       style={{
         display: inline ? "inline-grid" : "grid",
-        gridGap: gap,
+        gridGap: getGap(gap, isPhone),
         gridAutoFlow: "column",
       }}
     >

package/src/axis-header.tsx

@@ -1,24 +1,8 @@
 import {css} from "@linaria/core";
-import {styled} from "@linaria/react";
-import cn from "classnames";
+import {default as cn, default as cx} from "classnames";
 import {FC, ReactNode} from "react";
-import {getThemeValue, layout, opacity, border, space, textStyles, themeVars} from "./design-system";
-import {useTheme} from "./theme-provider";
-
-const axisItemStyle = css`
-  ${{
-    display: "grid",
-    gridGap: space.s6,
-    minHeight: layout.itemHeight,
-    alignItems: "center",
-    paddingLeft: space.s8,
-    paddingRight: space.s8,
-    borderRadius: border.radius6,
-    width: "100%",
-    ...textStyles.heading5,
-  }}
-`;
-
+import {CountBadge} from "./count-badge";
+import {border, opacity, space, textStyles, themeVars} from "./design-system";
 const axisItemStyleX = css`
   grid-template-columns: auto 1fr auto;
 `;
@@ -31,11 +15,23 @@ const axisItemHighlightedStyle = css`
 
 const dimensionToItemStyle = {x: axisItemStyleX, y: axisItemStyleY};
 
+const wrapperStyle = css`
+  ${textStyles.regular};
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr auto;
+  gap: ${space.s6}px;
+  padding: ${space.s6}px;
+`;
+
 const axisItemStyleCollapsed = css`
-  ${{
-    paddingRight: 0,
-    width: `${layout.itemHeight + space.s8 * 2}px`,
-  }}
+  writing-mode: vertical-rl;
+  display: flex;
+  position: sticky;
+  top: 0;
+  &.${wrapperStyle} {
+    padding-block: 0;
+  }
 `;
 
 function getAdditionalClassName({
@@ -56,33 +52,61 @@ function getAdditionalClassName({
   return dimensionToItemStyle[dimension];
 }
 
-const mainContainerWrapperStyle = {
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  cursor: "pointer",
-  textOverflow: "ellipsis",
-  opacity: 1,
-};
-const mainContainerWrapperClassName = css`
-  ${mainContainerWrapperStyle}
+const mainContainerWrapperStyle = css`
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  opacity: 1;
 `;
 
-const mainContainerWrapperCollapsedClassName = css`
-  ${{
-    ...mainContainerWrapperStyle,
-    textOverflow: "ellipsis",
-    opacity: opacity.opacity40,
-  }}
+const mainContainerWrapperCollapsedClassName = cx(
+  mainContainerWrapperStyle,
+  css`
+    opacity: ${opacity.opacity40};
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: ${space.s12}px;
+  `
+);
+
+const collapsedTextStyle = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex-shrink: 1;
 `;
 
 const leftContainerWrapperStyle = css`
   cursor: pointer;
 `;
 
-const StyledDiv = styled.div<{backgroundColor?: string}>`
+export const leftMainContainerWrapperStyle = css``;
+
+export const axisHeaderClassName = css`
+  cursor: pointer;
+  min-height: ${space.s36}px;
   display: flex;
+  justify-content: center;
   flex-direction: column;
-  background-color: ${({backgroundColor = "transparent"}) => backgroundColor};
+  border-radius: ${border.radius6}px;
+  .right-container {
+    opacity: 0;
+  }
+  background-color: var(--board-bg, ${themeVars.boardBg});
+  &:hover {
+    background-color: ${themeVars.boardAxisBgHover};
+    z-index: 20;
+    & .${leftMainContainerWrapperStyle} {
+      background-color: transparent;
+    }
+    .right-container {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 `;
 
 interface AxisHeaderProps {
@@ -90,12 +114,12 @@ interface AxisHeaderProps {
   dimension: "x" | "y";
   collapsed?: boolean;
   highlighted?: boolean;
-  showLeftContainerWhenCollapsed?: boolean;
   bottomContainer?: ReactNode;
   leftContainer?: ReactNode;
   rightContainer?: ReactNode;
   children: ReactNode;
   onCollapse?: () => void;
+  count?: number;
 }
 
 export const AxisHeader: FC<AxisHeaderProps> = ({
@@ -107,54 +131,90 @@ export const AxisHeader: FC<AxisHeaderProps> = ({
   bottomContainer,
   collapsed,
   highlighted,
-  showLeftContainerWhenCollapsed,
   onCollapse,
+  count,
 }) => {
-  const theme = useTheme();
-  const backgroundColor = getThemeValue(theme.mode, {
-    dark: themeVars.panelContentBg,
-    light: themeVars.panelContentBg,
-  });
+  const leftContainerWrapper = <div className={leftContainerWrapperStyle}>{leftContainer}</div>;
 
-  const leftContainerWrapper = (
-    <div onClick={onCollapse} className={leftContainerWrapperStyle}>
-      {leftContainer}
+  const rightContainerWrapper = (
+    <div
+      className={cn(
+        "right-container",
+        css`
+          display: flex;
+          align-items: center;
+        `
+      )}
+    >
+      {rightContainer}
     </div>
   );
 
-  const rightContainerWrapper = <div>{rightContainer}</div>;
-
   const mainContainerWrapper = (
-    <div
-      onClick={onCollapse}
-      className={collapsed ? mainContainerWrapperCollapsedClassName : mainContainerWrapperClassName}
-    >
-      {children}
+    <div className={collapsed ? mainContainerWrapperCollapsedClassName : mainContainerWrapperStyle}>
+      {collapsed ? <div className={collapsedTextStyle}>{children}</div> : children}
+      {count !== undefined && collapsed && (
+        <CountBadge
+          count={count}
+          className={css`
+            writing-mode: horizontal-tb;
+          `}
+        />
+      )}
     </div>
   );
   return (
-    <StyledDiv data-testid={`axis-header-${dimension}`} backgroundColor={backgroundColor} className={cn(className)}>
-      <div
-        className={cn(axisItemStyle, getAdditionalClassName({dimension, highlighted, collapsed}))}
-        style={{
-          background: highlighted ? themeVars.actionMenuHover : backgroundColor,
-        }}
-      >
-        {collapsed ? (
-          showLeftContainerWhenCollapsed ? (
-            leftContainerWrapper
-          ) : (
-            mainContainerWrapper
-          )
-        ) : (
-          <>
+    <div
+      data-testid={`axis-header-${dimension}`}
+      onClick={onCollapse}
+      className={cn(
+        className,
+        axisHeaderClassName,
+        dimension === "y" &&
+          css`
+            position: sticky;
+            left: 0;
+            display: inline-flex;
+            z-index: 3;
+            background-color: transparent;
+          `,
+        dimension === "y" &&
+          highlighted &&
+          css`
+            display: flex;
+            width: 100%;
+          `,
+        collapsed &&
+          dimension === "x" &&
+          css`
+            position: sticky;
+            top: 0;
+            z-index: 2;
+            background-color: transparent;
+          `
+      )}
+    >
+      <div className={cn(wrapperStyle, getAdditionalClassName({dimension, highlighted, collapsed}))}>
+        <>
+          <div
+            className={cn(
+              leftMainContainerWrapperStyle,
+              css`
+                display: grid;
+                grid-template-columns: auto 1fr;
+                gap: ${space.s8}px;
+                padding-inline: ${space.s4}px;
+                align-items: center;
+              `
+            )}
+          >
             {leftContainerWrapper}
             {mainContainerWrapper}
-            {rightContainerWrapper}
-          </>
-        )}
+          </div>
+          {rightContainerWrapper}
+        </>
       </div>
       {bottomContainer}
-    </StyledDiv>
+    </div>
   );
 };

package/src/box.tsx

@@ -3,7 +3,7 @@ import {styled} from "@linaria/react";
 import cx from "classnames";
 import {CSSProperties, forwardRef, HTMLProps, ReactNode, Ref, useCallback, useMemo, useState} from "react";
 import {border, getLinearGradient, getOpacities, space, textStyles, themeVars, transition} from "./design-system";
-import {useClickOutside} from "./popup/use-click-outside";
+import {useClickOutside} from "./popover/use-click-outside";
 
 export const getBg = (backgroundColors: string[]) => {
   if (backgroundColors) {