@monolith-forensics/monolith-ui 1.8.0 → 1.8.1-dev.1

package/dist/FileInputField/FileInputField.js

@@ -3,6 +3,7 @@ import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { useDropzone } from "react-dropzone";
 import { Pill, FieldLabel } from "..";
+import { getControlSizeTokens } from "../core";
 const FileInputField = styled(({ className, children, label, error, required, size, onChange, onFocus, dropZoneOptions = {}, colSpan, style = {}, }) => {
     const [files, setFiles] = useState([]);
     const onDrop = useCallback((acceptedFiles) => {
@@ -14,7 +15,7 @@ const FileInputField = styled(({ className, children, label, error, required, si
         setFiles((prev) => prev.filter((f) => f !== file));
     };
     const { getRootProps, getInputProps } = useDropzone(Object.assign({ onDrop }, dropZoneOptions));
-    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, children: label })), _jsxs("div", Object.assign({ className: "file-input-container" }, getRootProps(), { onFocus: onFocus, style: style, children: [_jsx("input", Object.assign({}, getInputProps())), children && children, !children && _jsx("div", { children: "Drop files here or click to select files ..." })] })), _jsx("div", { className: "file-selections", children: files.map((file, index) => (_jsx(Pill, { size: "sm", showRemoveIcon: true, onRemove: () => handleRemoveFile(file), children: file.name }, index))) })] }));
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, children: label })), _jsxs("div", Object.assign({ className: "file-input-container" }, getRootProps(), { onFocus: onFocus, style: style, children: [_jsx("input", Object.assign({}, getInputProps())), children && children, !children && _jsx("div", { children: "Drop files here or click to select files ..." })] })), _jsx("div", { className: "file-selections", children: files.map((file, index) => (_jsx(Pill, { size: size, showRemoveIcon: true, onRemove: () => handleRemoveFile(file), children: file.name }, index))) })] }));
 }) `
   display: flex;
   flex-direction: column;
@@ -33,17 +34,7 @@ const FileInputField = styled(({ className, children, label, error, required, si
 
     color: ${({ theme }) => theme.palette.text.secondary};
 
-    font-size: ${({ size }) => size === "xs"
-    ? "12px"
-    : size === "sm"
-        ? "14px"
-        : size === "md"
-            ? "16px"
-            : size === "lg"
-                ? "18px"
-                : size === "xl"
-                    ? "20px"
-                    : "12px"};
+    font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
 
     background-color: ${({ theme, variant }) => {
     switch (variant) {
@@ -77,17 +68,7 @@ const FileInputField = styled(({ className, children, label, error, required, si
     }
 }};
 
-    padding: ${({ size }) => size === "xs"
-    ? "0px 8px"
-    : size === "sm"
-        ? "0px 10px"
-        : size === "md"
-            ? "0px 12px"
-            : size === "lg"
-                ? "0px 14px"
-                : size === "xl"
-                    ? "0px 16px"
-                    : "0px 8px"};
+    padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
 
     max-width: 100%;
 

package/dist/FormSection/FormSection.js

@@ -2,21 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import { useState } from "react";
 import styled from "styled-components";
+import { getControlSizeTokens } from "../core";
 const StyledContainer = styled.div `
   display: flex;
   flex-direction: column;
 
   h3 {
     margin: 0;
-    font-size: ${({ size = "md" }) => size === "xs"
-    ? "x-small"
-    : size === "sm"
-        ? "small"
-        : size === "md"
-            ? "medium"
-            : size === "lg"
-                ? "large"
-                : "x-large"};
+    font-size: ${({ size = "md" }) => `${getControlSizeTokens(size).sectionTitleFontSize}px`};
   }
 
   .section-header {
@@ -56,21 +49,8 @@ const StyledContainer = styled.div `
     }
   }
 `;
-const resolveIconSize = (size) => {
-    switch (size) {
-        case "xs":
-            return 12;
-        case "sm":
-            return 14;
-        case "md":
-            return 18;
-        case "lg":
-            return 24;
-        case "xl":
-            return 28;
-        default:
-            return 18;
-    }
+const resolveIconSize = (size = "md") => {
+    return getControlSizeTokens(size).sectionIconSize;
 };
 export const FormSection = ({ title, children, open, defaultOpen = true, onOpenChange, allowCollapse = true, size, style, icon: Icon, iconColor, }) => {
     const [_open, setOpen] = useState(defaultOpen);
@@ -80,5 +60,5 @@ export const FormSection = ({ title, children, open, defaultOpen = true, onOpenC
                         setOpen(!openState);
                         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!openState);
                     }
-                }, children: [Icon && _jsx(Icon, { size: resolveIconSize(size), color: iconColor }), _jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: 18, className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
+                }, children: [Icon && _jsx(Icon, { size: resolveIconSize(size), color: iconColor }), _jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: resolveIconSize(size), className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
 };

package/dist/IconButton/IconButton.js

@@ -1,25 +1,11 @@
 import styled from "styled-components";
 import { Button } from "..";
+import { getControlSizeTokens } from "../core";
 const IconButton = styled(Button) `
   padding: ${({ size, variant }) => {
     if (variant === "text")
         return `0px 0px`;
-    switch (size) {
-        case "xxs":
-            return `0px 4px`;
-        case "xs":
-            return `0px 4px`;
-        case "sm":
-            return `0px 6px`;
-        case "md":
-            return `0px 8px`;
-        case "lg":
-            return `0px 10px`;
-        case "xl":
-            return `0px 12px`;
-        default:
-            return `0px 6px`;
-    }
+    return `0px ${getControlSizeTokens(size).iconButtonPaddingX}px`;
 }};
 `;
 export default IconButton;

package/dist/Input/Input.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
+import { getControlSizeTokens, } from "../core";
 import { forwardRef } from "react";
 const StyledInput = styled.input `
   font-family: ${({ theme }) => theme.typography.fontFamily};
@@ -20,41 +21,11 @@ const StyledInput = styled.input `
   box-sizing: border-box;
 
   color: ${({ theme }) => theme.palette.text.primary};
-  font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "13px"};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
 
-  height: ${({ size }) => size === "xs"
-    ? "26px"
-    : size === "sm"
-        ? "30px"
-        : size === "md"
-            ? "36px"
-            : size === "lg"
-                ? "42px"
-                : size === "xl"
-                    ? "50px"
-                    : "30px"};
+  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
 
-  min-height: ${({ size }) => size === "xs"
-    ? "26px"
-    : size === "sm"
-        ? "30px"
-        : size === "md"
-            ? "36px"
-            : size === "lg"
-                ? "42px"
-                : size === "xl"
-                    ? "50px"
-                    : "30px"};
+  min-height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
 
   transition: border 0.1s ease-in-out;
   border-radius: 4px;
@@ -74,17 +45,7 @@ const StyledInput = styled.input `
     }
 }};
 
-  padding: ${({ size }) => size === "xs"
-    ? "0px 8px"
-    : size === "sm"
-        ? "0px 10px"
-        : size === "md"
-            ? "0px 12px"
-            : size === "lg"
-                ? "0px 14px"
-                : size === "xl"
-                    ? "0px 16px"
-                    : "0px 10px"};
+  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
 
   width: ${({ width }) => {
     if (typeof width === "undefined")
@@ -113,17 +74,7 @@ const StyledInput = styled.input `
 }};
 
   ::placeholder {
-    font-size: ${({ size }) => size === "xs"
-    ? "10px"
-    : size === "sm"
-        ? "12px"
-        : size === "md"
-            ? "14px"
-            : size === "lg"
-                ? "16px"
-                : size === "xl"
-                    ? "18px"
-                    : "12px"};
+    font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
   }
 
   &:focus {
@@ -131,7 +82,7 @@ const StyledInput = styled.input `
   }
 
   &[data-button-right="true"] {
-    padding-right: 36px;
+    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
   }
 
   &[readOnly] {

package/dist/Pill/Pill.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { X } from "lucide-react";
+import { getControlSizeTokens } from "../core";
 const StyledButton = styled.button `
   background-color: transparent;
   border: none;
@@ -35,7 +36,7 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
   flex-direction: row;
   width: fit-content;
   max-width: 250px;
-  gap: 5px;
+  gap: ${({ size }) => `${getControlSizeTokens(size).pillGap}px`};
   flex: 0;
 
   font-weight: 500;
@@ -45,55 +46,12 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
     if (showRemoveIcon !== false) {
         return "0px";
     }
-    switch (size) {
-        case "xs":
-            return "8px";
-        case "sm":
-            return "10px";
-        case "md":
-            return "12px";
-        case "lg":
-            return "14px";
-        case "xl":
-            return "16px";
-        default:
-            return "10px";
-    }
+    return `${getControlSizeTokens(size).pillPaddingX}px`;
 }};
 
-  padding-inline-start: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "8px";
-        case "sm":
-            return "10px";
-        case "md":
-            return "12px";
-        case "lg":
-            return "14px";
-        case "xl":
-            return "16px";
-        default:
-            return "10px";
-    }
-}};
+  padding-inline-start: ${({ size }) => `${getControlSizeTokens(size).pillPaddingX}px`};
 
-  height: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "20px";
-        case "sm":
-            return "22px";
-        case "md":
-            return "24px";
-        case "lg":
-            return "26px";
-        case "xl":
-            return "28px";
-        default:
-            return "22px";
-    }
-}};
+  height: ${({ size }) => `${getControlSizeTokens(size).pillHeight}px`};
 
   border: 1px solid ${({ theme }) => theme.palette.divider};
   border-radius: 1000px;
@@ -105,43 +63,14 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
     overflow: hidden;
     text-overflow: ellipsis;
 
-    font-size: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "10px";
-        case "sm":
-            return "12px";
-        case "md":
-            return "14px";
-        case "lg":
-            return "16px";
-        case "xl":
-            return "18px";
-        default:
-            return "12px";
-    }
-}};
+    font-size: ${({ size }) => `${getControlSizeTokens(size).pillFontSize}px`};
   }
 
   svg {
     color: ${({ theme }) => theme.palette.text.primary};
 
-    width: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "12px";
-        case "sm":
-            return "14px";
-        case "md":
-            return "16px";
-        case "lg":
-            return "18px";
-        case "xl":
-            return "20px";
-        default:
-            return "14px";
-    }
-}};
+    width: ${({ size }) => `${getControlSizeTokens(size).pillIconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).pillIconSize}px`};
   }
 `;
 export default Pill;

package/dist/Popover/Popover.context.d.ts

@@ -10,12 +10,13 @@ export interface PopoverContextValue {
     withArrow: boolean;
     arrowSize: number;
     arrowRadius: number;
-    arrowRef: React.MutableRefObject<HTMLDivElement | null>;
+    arrowRef: React.MutableRefObject<SVGSVGElement | null>;
     withinPortal: boolean;
     trapFocus: boolean;
     returnFocus: boolean;
     keepMounted: boolean;
     zIndex: number;
+    role: "dialog" | "menu" | "tooltip";
     dropdownId: string;
     transitionProps: PopoverTransitionProps;
 }

package/dist/Popover/Popover.js

@@ -23,8 +23,9 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
             }
         },
         placement: position,
+        transform: false,
         middleware: [
-            offset(offsetValue + (withArrow ? resolvedArrowSize / 2 : 0)),
+            offset(offsetValue + (withArrow ? resolvedArrowSize : 0)),
             flip({ padding: flipPadding }),
             shift({ padding: shiftPadding }),
             size({
@@ -42,7 +43,7 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
                 ? [
                     arrow({
                         element: arrowRef,
-                        padding: 8,
+                        padding: Math.max(8, resolvedArrowSize),
                     }),
                 ]
                 : []),
@@ -92,6 +93,7 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
         returnFocus,
         keepMounted,
         zIndex,
+        role,
         dropdownId,
         transitionProps,
     }), [
@@ -109,6 +111,7 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
         returnFocus,
         keepMounted,
         zIndex,
+        role,
         dropdownId,
         transitionProps,
     ]);

package/dist/Popover/Popover.styles.d.ts

@@ -1,7 +1,2 @@
 export declare const StyledDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ARROW_STYLES: Record<"top" | "right" | "bottom" | "left", {
-    clipPath: string;
-    borderTransparent: string[];
-    radiusCorner: string;
-    staticProp: string;
-}>;
+export declare const StyledArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/Popover/Popover.styles.js

@@ -1,10 +1,14 @@
+import { FloatingArrow } from "@floating-ui/react";
 import styled from "styled-components";
 export const StyledDropdown = styled.div `
+  --mf-popover-arrow-fill: ${({ theme }) => theme.palette.background.default};
+  --mf-popover-arrow-border: ${({ theme }) => theme.palette.divider};
+
   position: relative;
   min-width: 180px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  background-color: ${({ theme }) => theme.palette.background.default};
+  border: 1px solid var(--mf-popover-arrow-border);
+  background-color: var(--mf-popover-arrow-fill);
   color: ${({ theme }) => theme.palette.text.primary};
   box-shadow:
     rgba(15, 23, 42, 0.1) 0px 10px 15px -3px,
@@ -12,29 +16,8 @@ export const StyledDropdown = styled.div `
   padding: 10px 12px;
   outline: none;
 `;
-export const ARROW_STYLES = {
-    bottom: {
-        clipPath: "polygon(0 100%, 0 0, 100% 0)",
-        borderTransparent: ["borderBottomColor", "borderRightColor"],
-        radiusCorner: "borderTopLeftRadius",
-        staticProp: "top",
-    },
-    top: {
-        clipPath: "polygon(0 100%, 100% 100%, 100% 0)",
-        borderTransparent: ["borderTopColor", "borderLeftColor"],
-        radiusCorner: "borderBottomRightRadius",
-        staticProp: "bottom",
-    },
-    left: {
-        clipPath: "polygon(100% 0, 0 0, 100% 100%)",
-        borderTransparent: ["borderLeftColor", "borderBottomColor"],
-        radiusCorner: "borderTopRightRadius",
-        staticProp: "right",
-    },
-    right: {
-        clipPath: "polygon(0 100%, 0 0, 100% 100%)",
-        borderTransparent: ["borderRightColor", "borderTopColor"],
-        radiusCorner: "borderBottomLeftRadius",
-        staticProp: "left",
-    },
-};
+export const StyledArrow = styled(FloatingArrow) `
+  display: block;
+  overflow: visible;
+  z-index: 1;
+`;

package/dist/Popover/Popover.transitions.d.ts

@@ -1,5 +1,7 @@
+import { FloatingContext } from "@floating-ui/react";
+import { CSSProperties } from "react";
 import { PopoverTransitionProps } from "./Popover.types";
-export declare function usePopoverTransition(opened: boolean, { transition, duration, timingFunction }: PopoverTransitionProps): {
+export declare function usePopoverTransition(context: FloatingContext, { transition, duration, timingFunction, }: PopoverTransitionProps): {
     mounted: boolean;
-    styles: React.CSSProperties;
+    styles: CSSProperties;
 };

package/dist/Popover/Popover.transitions.js

@@ -1,63 +1,37 @@
-import { useEffect, useRef, useState } from "react";
+import { useTransitionStyles } from "@floating-ui/react";
 const TRANSITION_PRESETS = {
     fade: {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
+        initial: { opacity: 0 },
+        open: { opacity: 1 },
     },
     scale: {
-        from: { opacity: 0, scale: "0.85" },
-        to: { opacity: 1, scale: "1" },
+        initial: { opacity: 0, transform: "scale(0.85)" },
+        open: { opacity: 1, transform: "scale(1)" },
     },
     "scale-y": {
-        from: { opacity: 0, scale: "1 0.7" },
-        to: { opacity: 1, scale: "1 1" },
+        initial: { opacity: 0, transform: "scaleY(0.7)" },
+        open: { opacity: 1, transform: "scaleY(1)" },
     },
     pop: {
-        from: { opacity: 0, scale: "0.6" },
-        to: { opacity: 1, scale: "1" },
+        initial: { opacity: 0, transform: "scale(0.6)" },
+        open: { opacity: 1, transform: "scale(1)" },
     },
 };
-export function usePopoverTransition(opened, { transition = "fade", duration = 150, timingFunction = "ease" }) {
-    const [mounted, setMounted] = useState(opened);
-    const [transitionEnabled, setTransitionEnabled] = useState(false);
-    const [phase, setPhase] = useState(opened ? "enter" : "exit");
-    const frameRef = useRef(0);
-    useEffect(() => {
-        cancelAnimationFrame(frameRef.current);
-        if (opened) {
-            setMounted(true);
-            setTransitionEnabled(false);
-            setPhase("exit");
-            frameRef.current = requestAnimationFrame(() => {
-                frameRef.current = requestAnimationFrame(() => {
-                    setTransitionEnabled(true);
-                    setPhase("enter");
-                });
-            });
-        }
-        else {
-            setTransitionEnabled(true);
-            setPhase("exit");
-            const timer = setTimeout(() => {
-                setMounted(false);
-                setTransitionEnabled(false);
-            }, duration);
-            return () => clearTimeout(timer);
-        }
-    }, [opened, duration]);
-    useEffect(() => {
-        return () => cancelAnimationFrame(frameRef.current);
-    }, []);
+export function usePopoverTransition(context, { transition = "fade", duration = 150, timingFunction = "ease", }) {
+    var _a;
     const preset = TRANSITION_PRESETS[transition];
-    const transitionStyles = phase === "enter" ? preset.to : preset.from;
-    const properties = [
-        ...new Set([...Object.keys(preset.from), ...Object.keys(preset.to)]),
-    ];
-    const transitionValue = properties
-        .map((prop) => `${prop} ${duration}ms ${timingFunction}`)
-        .join(", ");
+    const { isMounted, styles } = useTransitionStyles(context, {
+        duration,
+        initial: preset.initial,
+        open: preset.open,
+        close: (_a = preset.close) !== null && _a !== void 0 ? _a : preset.initial,
+        common: {
+            transitionTimingFunction: timingFunction,
+            willChange: transition === "fade" ? "opacity" : "opacity, transform",
+        },
+    });
     return {
-        mounted: mounted || opened,
-        styles: Object.assign(Object.assign({}, transitionStyles), (transitionEnabled ? { transition: transitionValue } : {})),
+        mounted: isMounted,
+        styles,
     };
 }

package/dist/Popover/PopoverDropdown.js

@@ -12,17 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { usePopoverContext } from "./Popover.context";
-import { ARROW_STYLES, StyledDropdown } from "./Popover.styles";
+import { StyledArrow, StyledDropdown } from "./Popover.styles";
 import { usePopoverTransition } from "./Popover.transitions";
 export const PopoverDropdown = (_a) => {
-    var _b, _c;
     var { children, className, style } = _a, props = __rest(_a, ["children", "className", "style"]);
-    const { opened, refs, context, floatingStyles, getFloatingProps, withArrow, arrowSize, arrowRadius, arrowRef, withinPortal, trapFocus, returnFocus, keepMounted, zIndex, dropdownId, transitionProps: ctxTransitionProps, } = usePopoverContext();
-    const { mounted, styles: transitionStyles } = usePopoverTransition(opened, ctxTransitionProps);
-    const arrowX = (_b = context.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
-    const arrowY = (_c = context.middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
+    const { refs, context, floatingStyles, getFloatingProps, withArrow, arrowSize, arrowRadius, arrowRef, withinPortal, trapFocus, returnFocus, keepMounted, zIndex, dropdownId, transitionProps: ctxTransitionProps, } = usePopoverContext();
+    const { mounted, styles: transitionStyles } = usePopoverTransition(context, ctxTransitionProps);
+    const resolvedArrowSize = Math.max(arrowSize, 6);
+    const resolvedArrowRadius = Math.min(Math.max(arrowRadius, 0), resolvedArrowSize / 2);
     const [placementSide, placementAlignment] = context.placement.split("-");
-    const arrowConfig = ARROW_STYLES[placementSide];
     const originSide = {
         top: "bottom",
         bottom: "top",
@@ -44,7 +42,7 @@ export const PopoverDropdown = (_a) => {
     }
     const dropdown = (_jsx(FloatingFocusManager, { context: context, modal: trapFocus, returnFocus: returnFocus, children: _jsxs(StyledDropdown, Object.assign({}, getFloatingProps(props), { id: dropdownId, ref: refs.setFloating, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), { transformOrigin }), style), { zIndex }), (keepMounted && !mounted
                 ? { visibility: "hidden", pointerEvents: "none" }
-                : {})), children: [children, withArrow && (_jsx("div", { ref: arrowRef, style: Object.assign(Object.assign(Object.assign({ position: "absolute", width: Math.max(arrowSize, 6), height: Math.max(arrowSize, 6), transform: "rotate(45deg)", background: "inherit", border: "1px solid", borderColor: "inherit", pointerEvents: "none", zIndex: 1 }, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), { [arrowConfig.staticProp]: -Math.max(arrowSize, 6) / 2, [arrowConfig.radiusCorner]: arrowRadius, [arrowConfig.borderTransparent[0]]: "transparent", [arrowConfig.borderTransparent[1]]: "transparent", clipPath: arrowConfig.clipPath }) }))] })) }));
+                : {})), children: [children, withArrow && (_jsx(StyledArrow, { ref: arrowRef, context: context, width: resolvedArrowSize * 2, height: resolvedArrowSize, tipRadius: resolvedArrowRadius, strokeWidth: 1, fill: "var(--mf-popover-arrow-fill)", stroke: "var(--mf-popover-arrow-border)" }))] })) }));
     if (!withinPortal) {
         return dropdown;
     }

package/dist/Popover/PopoverTarget.js

@@ -2,10 +2,13 @@ import { useMergeRefs } from "@floating-ui/react";
 import { cloneElement, isValidElement } from "react";
 import { usePopoverContext } from "./Popover.context";
 export const PopoverTarget = ({ children }) => {
-    const { refs, getReferenceProps, opened, dropdownId } = usePopoverContext();
+    const { refs, getReferenceProps, opened, dropdownId, role } = usePopoverContext();
     if (!isValidElement(children)) {
         return null;
     }
-    const mergedRef = useMergeRefs([refs.setReference, children.ref]);
-    return cloneElement(children, getReferenceProps(Object.assign({ ref: mergedRef, "aria-expanded": opened, "aria-controls": dropdownId, "aria-haspopup": "dialog" }, children.props)));
+    const mergedRef = useMergeRefs([
+        refs.setReference,
+        children.ref,
+    ]);
+    return cloneElement(children, getReferenceProps(Object.assign({ ref: mergedRef, "aria-expanded": opened, "aria-controls": dropdownId, "aria-haspopup": role === "tooltip" ? undefined : role }, children.props)));
 };

package/dist/SegmentedControl/SegmentedControl.utils.d.ts

@@ -4,8 +4,8 @@ export declare const resolveActiveColor: (theme: any, activeColor?: string) => {
     main: any;
     contrastText: any;
 };
-export declare const getSegmentHeight: (size?: Size) => 32 | 38 | 22 | 26 | 46 | 56;
-export declare const getSegmentFontSize: (size?: Size) => "11px" | "12px" | "14px" | "16px" | "18px" | "20px";
+export declare const getSegmentHeight: (size?: Size) => number;
+export declare const getSegmentFontSize: (size?: Size) => string;
 export declare const normalizeSegmentedData: (data: SegmentedControlDataItem[]) => NormalizedSegmentedItem[];
 export declare const getFirstEnabledIndex: (data: NormalizedSegmentedItem[]) => number;
 export declare const getNextEnabledIndex: (data: NormalizedSegmentedItem[], startIndex: number, direction: 1 | -1) => number;