@ttoss/ui 6.0.3 → 6.1.0

package/dist/esm/index.js

@@ -1,1353 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", {
-  value,
-  configurable: true
-});
-
-// src/components/Button.tsx
-import { Icon } from "@ttoss/react-icons";
-import * as React2 from "react";
-import { Button as ButtonUi } from "theme-ui";
-var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
-  const {
-    children,
-    leftIcon,
-    rightIcon,
-    loading,
-    ...restProps
-  } = props;
-  return /* @__PURE__ */React2.createElement(ButtonUi, {
-    type: "button",
-    ...restProps,
-    ref,
-    sx: {
-      cursor: "pointer",
-      paddingX: "6",
-      paddingY: "4",
-      fontFamily: "body",
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "4",
-      "&:disabled": {
-        cursor: "not-allowed"
-      },
-      ...restProps.sx
-    }
-  }, loading && /* @__PURE__ */React2.createElement(Icon, {
-    inline: true,
-    icon: "three-dots-loading"
-  }), !loading && leftIcon && /* @__PURE__ */React2.createElement(Icon, {
-    inline: true,
-    icon: leftIcon
-  }), children, rightIcon && /* @__PURE__ */React2.createElement(Icon, {
-    inline: true,
-    icon: rightIcon
-  }));
-});
-Button.displayName = "Button";
-
-// src/components/ActionButton.tsx
-var ActionButton = /* @__PURE__ */__name(({
-  icon,
-  variant = "default",
-  sx,
-  ...props
-}) => {
-  const variantStyles = {
-    default: {
-      backgroundColor: "action.background.secondary.default",
-      color: "action.text.primary.default",
-      border: "sm",
-      borderColor: "action.background.primary.default",
-      transition: "all 0.2s",
-      ":is(:focus-within, :hover):not(:disabled)": {
-        backgroundColor: "action.background.secondary.active",
-        borderColor: "action.border.secondary.active",
-        color: "action.text.secondary.active"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "action.background.muted.default",
-        borderColor: "action.border.muted.default",
-        color: "action.text.muted.default"
-      }
-    },
-    accent: {
-      backgroundColor: "action.background.accent.default",
-      color: "action.text.accent.default",
-      border: "none",
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "action.background.muted.default",
-        color: "action.text.muted.default"
-      }
-    },
-    quiet: {
-      backgroundColor: "action.background.muted.default",
-      color: "action.text.accent.default",
-      border: "none",
-      borderColor: "transparent",
-      ":disabled": {
-        cursor: "default",
-        opacity: 0.6,
-        color: "action.text.muted.default"
-      }
-    }
-  };
-  return /* @__PURE__ */React.createElement(Button, {
-    leftIcon: icon,
-    sx: {
-      paddingY: "2",
-      paddingX: "4",
-      // Apply variant-specific styles
-      ...variantStyles[variant],
-      ...sx
-    },
-    ...props
-  });
-}, "ActionButton");
-
-// src/components/Badge.tsx
-import { Icon as Icon2 } from "@ttoss/react-icons";
-import { Badge as BadgeUi } from "theme-ui";
-
-// src/components/Text.tsx
-import { Text } from "theme-ui";
-
-// src/components/Badge.tsx
-var Badge = /* @__PURE__ */__name(({
-  icon,
-  children,
-  sx,
-  chip,
-  onDelete,
-  ...props
-}) => {
-  return /* @__PURE__ */React.createElement(BadgeUi, {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      fontFamily: "body",
-      fontWeight: "normal",
-      lineHeight: "base",
-      fontSize: "sm",
-      paddingX: "2",
-      borderRadius: "informative",
-      paddingY: "1",
-      gap: "2",
-      ...sx
-    },
-    ...props
-  }, icon && /* @__PURE__ */React.createElement(Icon2, {
-    inline: true,
-    icon
-  }), children, chip && /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      cursor: "pointer",
-      lineHeight: 0,
-      color: "currentcolor",
-      alignSelf: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Icon2, {
-    onClick: onDelete,
-    inline: true,
-    icon: "close"
-  })));
-}, "Badge");
-
-// src/components/Box.tsx
-import { Box } from "theme-ui";
-
-// src/components/Card.tsx
-import * as React3 from "react";
-import { Box as Box2, Card as CardUi } from "theme-ui";
-var Card = /* @__PURE__ */__name(props => {
-  return /* @__PURE__ */React3.createElement(CardUi, {
-    ...props,
-    sx: {
-      backgroundColor: "display.background.secondary.default",
-      border: "md",
-      borderColor: "display.border.muted.default",
-      borderRadius: "lg",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "fit-content",
-      boxShadow: "2px 4px 8px #E5E7EB",
-      ...props.sx
-    }
-  });
-}, "Card");
-var CardTitle = /* @__PURE__ */__name(({
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */React3.createElement(Box2, {
-    ...props,
-    sx: {
-      paddingY: "4",
-      paddingX: "8",
-      width: "full",
-      borderBottom: "md",
-      borderBottomColor: "display.border.muted.default",
-      ...props.sx
-    }
-  }, children);
-}, "CardTitle");
-var CardBody = /* @__PURE__ */__name(({
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */React3.createElement(Box2, {
-    ...props,
-    sx: {
-      paddingY: "4",
-      paddingX: "8",
-      width: "full",
-      backgroundColor: "display.background.muted.default",
-      ...props.sx
-    }
-  }, children);
-}, "CardBody");
-var CardFooter = /* @__PURE__ */__name(({
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */React3.createElement(Box2, {
-    ...props,
-    sx: {
-      paddingY: "2",
-      paddingX: "8",
-      width: "full",
-      ...props.sx
-    }
-  }, children);
-}, "CardFooter");
-Card.Title = CardTitle;
-Card.Body = CardBody;
-Card.Footer = CardFooter;
-
-// src/components/Checkbox.tsx
-import * as React4 from "react";
-import { Checkbox as CheckBoxUi } from "theme-ui";
-var Checkbox = /* @__PURE__ */React4.forwardRef(({
-  indeterminate = false,
-  ...rest
-}, ref) => {
-  const innerRef = React4.useRef(null);
-  const setRefs = React4.useCallback(element => {
-    innerRef.current = element;
-    if (typeof ref === "function") {
-      ref(element);
-    } else if (ref) {
-      ref.current = element;
-    }
-  }, [ref]);
-  React4.useEffect(() => {
-    if (innerRef.current) {
-      innerRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-  if (indeterminate) {
-    return /* @__PURE__ */React4.createElement("input", {
-      type: "checkbox",
-      ref: setRefs,
-      ...rest
-    });
-  }
-  return /* @__PURE__ */React4.createElement(CheckBoxUi, {
-    ref: setRefs,
-    ...rest
-  });
-});
-Checkbox.displayName = "Checkbox";
-
-// src/components/CloseButton.tsx
-import { Close as CloseUI } from "theme-ui";
-var CloseButton = /* @__PURE__ */__name(props => {
-  return /* @__PURE__ */React.createElement(CloseUI, {
-    type: "button",
-    "aria-label": props.ariaLabel,
-    sx: {
-      ...props.sx
-    },
-    ...props
-  });
-}, "CloseButton");
-
-// src/components/Container.tsx
-import * as React5 from "react";
-import { Container as ContainerUi } from "theme-ui";
-var Container = /* @__PURE__ */React5.forwardRef((props, ref) => {
-  return /* @__PURE__ */React5.createElement(ContainerUi, {
-    ref,
-    ...props
-  });
-});
-Container.displayName = "Container";
-
-// src/components/Divider.tsx
-import { Divider } from "theme-ui";
-
-// src/components/Flex.tsx
-import { Flex } from "theme-ui";
-
-// src/components/Grid.tsx
-import { Grid } from "theme-ui";
-
-// src/components/Heading.tsx
-import { Heading } from "theme-ui";
-
-// src/components/HelpText.tsx
-var HelpText = /* @__PURE__ */__name(({
-  sx,
-  disabled,
-  negative,
-  ...props
-}) => {
-  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */React.createElement(Text, {
-    variant,
-    sx: {
-      fontSize: "sm",
-      fontFamily: "body",
-      lineHeight: "normal",
-      ...sx
-    },
-    "aria-disabled": disabled ? "true" : void 0,
-    ...props
-  });
-}, "HelpText");
-
-// src/components/IconButton.tsx
-import { Icon as Icon3 } from "@ttoss/react-icons";
-import { IconButton as IconButtonUi } from "theme-ui";
-var IconButton = /* @__PURE__ */__name(props => {
-  const {
-    icon,
-    children,
-    ...restProps
-  } = props;
-  return /* @__PURE__ */React.createElement(IconButtonUi, {
-    type: "button",
-    ...restProps,
-    sx: {
-      cursor: "pointer",
-      borderRadius: "sm",
-      "&:disabled": {
-        cursor: "not-allowed"
-      },
-      ...restProps.sx
-    }
-  }, icon ? /* @__PURE__ */React.createElement(Icon3, {
-    inline: true,
-    icon
-  }) : children);
-}, "IconButton");
-
-// src/components/Image.tsx
-import { Image } from "theme-ui";
-
-// src/components/InfiniteLinearProgress.tsx
-import * as React6 from "react";
-
-// src/components/LinearProgress.tsx
-import { Progress } from "theme-ui";
-
-// src/components/InfiniteLinearProgress.tsx
-var MAX_PROGRESS = 100;
-var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
-  const [progress, setProgress] = React6.useState(0);
-  React6.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress(oldProgress => {
-        if (oldProgress === MAX_PROGRESS) {
-          return 0;
-        }
-        let diff = 0;
-        if (oldProgress > 0.97 * MAX_PROGRESS) {
-          diff -= 0.75 * MAX_PROGRESS;
-        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
-          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
-        } else {
-          diff = Math.random() * (MAX_PROGRESS * 0.02);
-        }
-        return Math.min(oldProgress + diff, MAX_PROGRESS);
-      });
-    }, 100);
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-  return /* @__PURE__ */React6.createElement(Progress, {
-    max: MAX_PROGRESS,
-    value: progress,
-    role: "progressbar"
-  });
-}, "InfiniteLinearProgress");
-
-// src/components/Input.tsx
-import { Input as InputUI } from "theme-ui";
-var isInputIconConfig = /* @__PURE__ */__name(icon => {
-  return icon !== void 0 && typeof icon === "object" && "icon" in icon && (typeof icon.icon === "string" || typeof icon.icon === "object" && "body" in icon.icon);
-}, "isInputIconConfig");
-var normalizeIcon = /* @__PURE__ */__name(icon => {
-  if (!icon) {
-    return void 0;
-  }
-  if (isInputIconConfig(icon)) {
-    return icon;
-  }
-  return {
-    icon
-  };
-}, "normalizeIcon");
-var Input = /* @__PURE__ */__name(({
-  leadingIcon,
-  trailingIcon: trailingIconProp,
-  className,
-  sx,
-  ...inputProps
-}) => {
-  const normalizedLeadingIcon = normalizeIcon(leadingIcon);
-  const normalizedTrailingIconProp = normalizeIcon(trailingIconProp);
-  const ariaInvalid = inputProps["aria-invalid"];
-  const isInvalid = ariaInvalid === true || ariaInvalid === "true";
-  const trailingIcon = isInvalid ? {
-    ...normalizedTrailingIconProp,
-    icon: "warning-alt"
-  } : normalizedTrailingIconProp;
-  const isWarning = !isInvalid && trailingIcon?.icon === "warning-alt";
-  const wrapperClassName = [className, isWarning && "is-warning"].filter(Boolean).join(" ");
-  return /* @__PURE__ */React.createElement(Flex, {
-    className: wrapperClassName,
-    sx: {
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    }
-  }, normalizedLeadingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
-    ...normalizedLeadingIcon,
-    "data-testid": "input-leading-icon",
-    variant: normalizedLeadingIcon.variant ?? "info",
-    sx: {
-      position: "absolute",
-      alignSelf: "center",
-      left: "1rem",
-      ...normalizedLeadingIcon.sx
-    }
-  }), /* @__PURE__ */React.createElement(InputUI, {
-    sx: {
-      fontFamily: "body",
-      paddingY: "3",
-      paddingX: "4",
-      ...sx,
-      paddingLeft: leadingIcon ? "10" : void 0,
-      paddingRight: trailingIcon ? "10" : void 0,
-      margin: 0
-    },
-    className,
-    ...inputProps
-  }), trailingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
-    ...trailingIcon,
-    "data-testid": "input-trailing-icon",
-    variant: trailingIcon.variant ?? "info",
-    sx: {
-      position: "absolute",
-      right: "1rem",
-      alignSelf: "center",
-      color: isWarning ? "feedback.text.caution.default" : void 0,
-      fontSize: "xl",
-      ...trailingIcon.sx
-    }
-  }));
-}, "Input");
-
-// src/components/InputNumber.tsx
-import { Icon as Icon4 } from "@ttoss/react-icons";
-import * as React7 from "react";
-import { Input as Input2 } from "theme-ui";
-var InputNumber = /* @__PURE__ */React7.forwardRef(({
-  sx,
-  value,
-  infoIcon,
-  onChange,
-  onClickInfoIcon,
-  ...inputProps
-}, ref) => {
-  const sxProps = React7.useMemo(() => {
-    const size = String(typeof value === "undefined" ? 0 : value).length;
-    if (inputProps["aria-invalid"] === "true") {
-      return {
-        width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
-        textAlign: "left",
-        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
-          WebkitAppearance: "none",
-          margin: 0
-        },
-        ...sx,
-        paddingLeft: "6",
-        paddingRight: "5",
-        margin: 0
-      };
-    }
-    return {
-      width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
-      textAlign: "center",
-      "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
-        WebkitAppearance: "none",
-        margin: 0
-      },
-      fontFamily: "body",
-      paddingY: "2",
-      paddingX: "4",
-      ...sx,
-      paddingLeft: "5",
-      paddingRight: "5",
-      margin: 0
-    };
-  }, [inputProps, value, sx]);
-  const handleChangeUp = /* @__PURE__ */__name(() => {
-    if (inputProps.disabled) {
-      return;
-    }
-    if (typeof value !== "number") {
-      onChange(-1);
-      return;
-    }
-    onChange(value - 1);
-  }, "handleChangeUp");
-  const handleChangeDown = /* @__PURE__ */__name(() => {
-    if (inputProps.disabled) {
-      return;
-    }
-    if (typeof value !== "number") {
-      onChange(1);
-      return;
-    }
-    onChange(value + 1);
-  }, "handleChangeDown");
-  return /* @__PURE__ */React7.createElement(Flex, {
-    sx: {
-      width: "fit-content",
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    },
-    ref,
-    "aria-invalid": inputProps["aria-invalid"]
-  }, /* @__PURE__ */React7.createElement(Input2, {
-    ref,
-    variant: "forms.inputNumber",
-    sx: sxProps,
-    type: "number",
-    onChange: /* @__PURE__ */__name(e => {
-      onChange(Number(e.target.value));
-    }, "onChange"),
-    value,
-    ...inputProps
-  }), /* @__PURE__ */React7.createElement(Text, {
-    sx: {
-      position: "absolute",
-      alignSelf: "center",
-      left: "1rem",
-      zIndex: 1,
-      cursor: "pointer"
-    },
-    onClick: handleChangeUp
-  }, /* @__PURE__ */React7.createElement(Icon4, {
-    icon: "picker-down"
-  })), infoIcon && /* @__PURE__ */React7.createElement(Text, {
-    sx: {
-      position: "absolute",
-      alignSelf: "center",
-      right: "2.5rem",
-      zIndex: 1,
-      cursor: onClickInfoIcon ? "pointer" : "default"
-    },
-    onClick: onClickInfoIcon
-  }, /* @__PURE__ */React7.createElement(Icon4, {
-    icon: "info"
-  })), /* @__PURE__ */React7.createElement(Text, {
-    sx: {
-      position: "absolute",
-      alignSelf: "center",
-      right: "1rem",
-      zIndex: 1,
-      cursor: "pointer"
-    },
-    onClick: handleChangeDown
-  }, /* @__PURE__ */React7.createElement(Icon4, {
-    icon: "picker-up"
-  })));
-});
-InputNumber.displayName = "InputNumber";
-
-// src/components/InputPassword.tsx
-import * as React8 from "react";
-var InputPassword = /* @__PURE__ */__name(({
-  showPasswordByDefault = false,
-  ...inputPasswordProps
-}) => {
-  const [hidePass, setHidePass] = React8.useState(Boolean(!showPasswordByDefault));
-  const {
-    icon,
-    inputType
-  } = React8.useMemo(() => {
-    return {
-      icon: hidePass ? "view-off" : "view-on",
-      inputType: hidePass ? "password" : "text"
-    };
-  }, [hidePass]);
-  const handleClick = /* @__PURE__ */__name(() => {
-    setHidePass(prev => {
-      return !prev;
-    });
-  }, "handleClick");
-  return /* @__PURE__ */React8.createElement(Input, {
-    ...inputPasswordProps,
-    trailingIcon: {
-      icon,
-      onClick: handleClick
-    },
-    type: inputType
-  });
-}, "InputPassword");
-
-// src/components/Label.tsx
-import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React9 from "react";
-import { Label as LabelUi } from "theme-ui";
-
-// src/components/Tooltip.tsx
-import { Tooltip as TooltipReact } from "react-tooltip";
-var Tooltip = /* @__PURE__ */__name(({
-  variant = "info",
-  sx,
-  ...props
-}) => {
-  const className = `tooltip-component tooltip-${variant}`;
-  const getVariantStyles = /* @__PURE__ */__name(variantType => {
-    const variants = {
-      info: {
-        backgroundColor: "input.background.secondary.default",
-        color: "feedback.text.secondary.default",
-        borderColor: "feedback.border.secondary.default"
-      },
-      success: {
-        backgroundColor: "feedback.background.positive.default",
-        color: "feedback.text.positive.default",
-        borderColor: "feedback.border.positive.default"
-      },
-      warning: {
-        backgroundColor: "feedback.background.caution.default",
-        color: "feedback.text.caution.default",
-        borderColor: "feedback.border.caution.default"
-      },
-      error: {
-        backgroundColor: "feedback.background.negative.default",
-        color: "feedback.text.negative.default",
-        borderColor: "feedback.border.negative.default"
-      }
-    };
-    return variants[variantType] || variants.info;
-  }, "getVariantStyles");
-  return /* @__PURE__ */React.createElement(Box, {
-    sx: /* @__PURE__ */__name(({
-      fonts
-    }) => {
-      const variantStyles = getVariantStyles(variant);
-      return {
-        ".example-arrow": {
-          display: "none"
-        },
-        ".tooltip-component": {
-          fontFamily: fonts?.body,
-          paddingY: "2",
-          paddingX: "3",
-          border: "sm",
-          borderRadius: "xl",
-          zIndex: "tooltip",
-          opacity: "1",
-          lineHeight: "shorter",
-          letterSpacing: "wide",
-          a: {
-            color: "feedback.text.secondary.default",
-            fontFamily: "body",
-            textDecorationLine: "underline",
-            lineHeight: "normal"
-          },
-          ...variantStyles,
-          ...sx
-        },
-        [`&.tooltip-${variant}`]: variantStyles
-      };
-    }, "sx")
-  }, /* @__PURE__ */React.createElement(TooltipReact, {
-    className,
-    ...props,
-    classNameArrow: "example-arrow"
-  }, props.children));
-}, "Tooltip");
-
-// src/components/Label.tsx
-var TOOLTIP_LABEL = "tooltip";
-var Label = /* @__PURE__ */__name(({
-  children,
-  tooltip,
-  sx,
-  ...props
-}) => {
-  const id = React9.useId();
-  const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React9.createElement(LabelUi, {
-    sx: {
-      alignItems: "center",
-      fontSize: "sm",
-      lineHeight: "normal",
-      width: "fit-content",
-      color: "input.text.secondary.default",
-      ...sx
-    },
-    ...props
-  }, children, tooltip && /* @__PURE__ */React9.createElement(Text, {
-    "data-tooltip-id": tooltipId,
-    sx: {
-      color: "currentcolor",
-      cursor: "pointer",
-      marginLeft: "1"
-    },
-    "aria-label": TOOLTIP_LABEL
-  }, /* @__PURE__ */React9.createElement(Icon5, {
-    icon: "info"
-  }), /* @__PURE__ */React9.createElement(Tooltip, {
-    id: tooltipId,
-    ...tooltip
-  })));
-}, "Label");
-
-// src/components/Link.tsx
-import * as React10 from "react";
-import { Link as LinkUi } from "theme-ui";
-var Link = /* @__PURE__ */React10.forwardRef(({
-  quiet,
-  className,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */React10.createElement(LinkUi, {
-    className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
-    ...props,
-    ref
-  });
-});
-Link.displayName = "Link";
-
-// src/components/Paragraph.tsx
-import { Paragraph } from "theme-ui";
-
-// src/components/Radio.tsx
-import { Radio } from "theme-ui";
-
-// src/components/SegmentedControl.tsx
-import * as React11 from "react";
-import { Box as Box3, Flex as Flex2 } from "theme-ui";
-var SegmentedControl = /* @__PURE__ */__name(({
-  options,
-  value: propValue,
-  defaultValue,
-  onChange,
-  disabled,
-  className,
-  sx,
-  ...rest
-}) => {
-  const [internalValue, setInternalValue] = React11.useState(propValue || defaultValue);
-  React11.useEffect(() => {
-    if (propValue !== void 0) {
-      setInternalValue(propValue);
-    }
-  }, [propValue]);
-  const handleChange = /* @__PURE__ */__name(newValue => {
-    setInternalValue(newValue);
-    if (onChange) {
-      onChange(newValue);
-    }
-  }, "handleChange");
-  const normalizedOptions = options.map(option => {
-    return typeof option === "string" || typeof option === "number" ? {
-      label: option,
-      value: option
-    } : option;
-  });
-  const currentValue = propValue !== void 0 ? propValue : internalValue;
-  return /* @__PURE__ */React11.createElement(Flex2, {
-    className,
-    sx: {
-      width: "100%",
-      borderRadius: "4xl",
-      border: "sm",
-      borderColor: "display.border.primary.default",
-      overflow: "hidden",
-      position: "relative",
-      ".rc-segmented": {
-        width: "100%",
-        padding: "0",
-        backgroundColor: "display.background.primary.default",
-        position: "relative",
-        display: "flex",
-        flexGrow: 1
-      },
-      ".rc-segmented-group, .custom-segmented-group": {
-        borderRadius: "4xl",
-        gap: "0",
-        display: "flex",
-        width: "100%",
-        position: "relative"
-      },
-      ".rc-segmented-item": {
-        borderRadius: "4xl",
-        margin: 0,
-        paddingX: "5",
-        paddingY: "3",
-        fontSize: "lg",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "action.text.accent.default",
-        flex: "1 1 auto",
-        minWidth: "min-content",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        zIndex: 2,
-        transition: "background-color 0.2s ease, color 0.2s ease",
-        cursor: "pointer",
-        "&:focus": {
-          outline: "2px solid",
-          outlineColor: "action.background.accent.default",
-          outlineOffset: "2px",
-          boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)"
-        },
-        "&:focus-visible": {
-          outline: "2px solid",
-          outlineColor: "action.background.accent.default",
-          outlineOffset: "2px"
-        },
-        "&:hover:not(.rc-segmented-item-selected)": {
-          backgroundColor: "action.background.muted.default"
-        },
-        'input[type="radio"]': {
-          display: "none"
-        }
-      },
-      ".rc-segmented-item-selected": {
-        backgroundColor: "action.background.accent.default",
-        color: "action.text.accent.active"
-      },
-      ".rc-segmented-thumb": {
-        backgroundColor: "action.background.accent.default",
-        borderRadius: "4xl",
-        zIndex: -1,
-        margin: 0,
-        position: "absolute",
-        height: "100%",
-        width: "100%",
-        left: 0,
-        transition: "transform 0.2s ease, left 0.2s ease"
-      },
-      ".rc-segmented-item-disabled": {
-        opacity: 0.5,
-        cursor: "not-allowed",
-        backgroundColor: "action.background.muted.disabled"
-      },
-      ...sx
-    },
-    ...rest
-  }, /* @__PURE__ */React11.createElement("div", {
-    className: "rc-segmented"
-  }, /* @__PURE__ */React11.createElement(Flex2, {
-    className: "rc-segmented-group custom-segmented-group"
-  }, normalizedOptions.map((option, index) => {
-    const isSelected = option.value === currentValue;
-    const isLastItem = index === normalizedOptions.length - 1;
-    const isItemDisabled = disabled || option.disabled;
-    const showDivider = !isLastItem && option.value !== currentValue && normalizedOptions[index + 1].value !== currentValue;
-    return /* @__PURE__ */React11.createElement(React11.Fragment, {
-      key: `${index}-${option.value}`
-    }, /* @__PURE__ */React11.createElement(Box3, {
-      as: "label",
-      className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
-      onClick: /* @__PURE__ */__name(() => {
-        if (!disabled && !option.disabled) {
-          handleChange(option.value);
-        }
-      }, "onClick")
-    }, /* @__PURE__ */React11.createElement("input", {
-      type: "radio",
-      value: option.value,
-      checked: isSelected,
-      disabled: isItemDisabled,
-      onChange: /* @__PURE__ */__name(e => {
-        if (!disabled && !option.disabled && e.target.checked) {
-          handleChange(option.value);
-        }
-      }, "onChange")
-    }), /* @__PURE__ */React11.createElement("div", {
-      className: "rc-segmented-item-label"
-    }, option.label)), showDivider && /* @__PURE__ */React11.createElement(Box3, {
-      className: "segmented-divider",
-      sx: {
-        height: "60%",
-        width: "1px",
-        backgroundColor: "action.text.accent.default",
-        opacity: 0.4,
-        alignSelf: "center",
-        zIndex: 3
-      }
-    }));
-  }), currentValue !== void 0 && /* @__PURE__ */React11.createElement("div", {
-    className: "rc-segmented-thumb",
-    style: {
-      width: `${100 / normalizedOptions.length}%`,
-      transform: `translateX(${normalizedOptions.findIndex(option => {
-        return option.value === currentValue;
-      }) * 100}%)`
-    }
-  }))));
-}, "SegmentedControl");
-
-// src/components/Select.tsx
-import { Icon as Icon6 } from "@ttoss/react-icons";
-import * as React12 from "react";
-import ReactSelect, { components } from "react-select";
-var Control = /* @__PURE__ */__name(props => {
-  const isDisabled = props.selectProps.isDisabled;
-  const hasError = props.selectProps["aria-invalid"] === "true";
-  const borderColor = (() => {
-    if (isDisabled) {
-      return "display.border.muted.default";
-    }
-    if (hasError) {
-      return "display.border.negative.default";
-    }
-    return "display.border.muted.default";
-  })();
-  const backgroundColor = (() => {
-    if (isDisabled) {
-      return "display.background.muted.default";
-    }
-    return "display.background.secondary.default";
-  })();
-  return /* @__PURE__ */React12.createElement(Box, {
-    sx: {
-      ".react-select__control": {
-        borderColor,
-        backgroundColor,
-        paddingX: "4",
-        paddingY: "3"
-      }
-    }
-  }, /* @__PURE__ */React12.createElement(components.Control, props));
-}, "Control");
-var DropdownIndicator = /* @__PURE__ */__name(props => {
-  const isDisabled = props.selectProps.isDisabled;
-  const color = (() => {
-    if (isDisabled) {
-      return "display.text.muted.default";
-    }
-    return "text";
-  })();
-  return /* @__PURE__ */React12.createElement(Text, {
-    sx: {
-      fontSize: "md",
-      color,
-      alignSelf: "center",
-      display: "flex",
-      alignItems: "center"
-    }
-  }, /* @__PURE__ */React12.createElement(Icon6, {
-    icon: "picker-down"
-  }));
-}, "DropdownIndicator");
-var IndicatorsContainer = /* @__PURE__ */__name(({
-  children
-}) => {
-  return /* @__PURE__ */React12.createElement(Box, {
-    sx: {
-      marginLeft: "4",
-      border: "none"
-    }
-  }, children);
-}, "IndicatorsContainer");
-var Placeholder = /* @__PURE__ */__name(({
-  children
-}) => {
-  return /* @__PURE__ */React12.createElement(Text, {
-    sx: {
-      color: "onMuted",
-      alignSelf: "center"
-    }
-  }, children);
-}, "Placeholder");
-var SelectContainer = /* @__PURE__ */__name(({
-  children,
-  ...props
-}) => {
-  const {
-    sx,
-    css: css2
-  } = props.selectProps;
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */
-    React12.createElement(Box, {
-      sx,
-      css: css2
-    }, /* @__PURE__ */React12.createElement(components.SelectContainer, props, children))
-  );
-}, "SelectContainer");
-var ValueContainer = /* @__PURE__ */__name(({
-  children,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ...props
-}) => {
-  const {
-    leadingIcon,
-    trailingIcon,
-    isSearchable
-  } = props.selectProps;
-  const hasError = props.selectProps["aria-invalid"] === "true";
-  const trailingIconColor = (() => {
-    if (hasError) {
-      return "danger";
-    }
-    return "text";
-  })();
-  const finalLeadingIcon = (() => {
-    if (!isSearchable) {
-      return leadingIcon;
-    }
-    return leadingIcon || "search";
-  })();
-  return /* @__PURE__ */React12.createElement(Flex, {
-    sx: {
-      gap: "4",
-      flex: 1
-    }
-  }, finalLeadingIcon && /* @__PURE__ */React12.createElement(Text, {
-    sx: {
-      alignSelf: "center",
-      pointerEvents: "none",
-      lineHeight: 0,
-      fontSize: "md"
-    }
-  }, /* @__PURE__ */React12.createElement(Icon6, {
-    icon: finalLeadingIcon
-  })), /* @__PURE__ */React12.createElement(Flex, {
-    sx: {
-      flex: 1,
-      alignItems: "center"
-    }
-  }, children), (trailingIcon || hasError) && /* @__PURE__ */React12.createElement(Text, {
-    className: hasError ? "error-icon" : "",
-    sx: {
-      alignSelf: "center",
-      pointerEvents: "none",
-      lineHeight: 0,
-      fontSize: "md",
-      color: trailingIconColor
-    }
-  }, /* @__PURE__ */React12.createElement(Icon6, {
-    icon: hasError ? "warning-alt" : trailingIcon
-  })));
-}, "ValueContainer");
-var Select = /* @__PURE__ */React12.forwardRef(({
-  ...props
-}, ref) => {
-  const value = props.options?.find(option => {
-    if ("value" in option) {
-      return option.value === props.value;
-    }
-    return false;
-  });
-  return /* @__PURE__ */React12.createElement(ReactSelect, {
-    ref,
-    /**
-     * https://react-select.com/components
-     */
-    components: {
-      Control,
-      DropdownIndicator,
-      IndicatorsContainer,
-      Placeholder,
-      SelectContainer,
-      ValueContainer
-    },
-    isDisabled: props.disabled,
-    ...props,
-    value,
-    onChange: /* @__PURE__ */__name(value2 => {
-      props.onChange?.(value2?.value);
-    }, "onChange"),
-    styles: {
-      input: /* @__PURE__ */__name(baseStyles => {
-        return {
-          ...baseStyles,
-          position: "absolute"
-        };
-      }, "input")
-    },
-    /**
-     * https://react-select.com/styles#the-classnameprefix-prop
-     */
-    classNamePrefix: "react-select"
-  });
-});
-Select.displayName = "Select";
-
-// src/components/Slider.tsx
-import { Slider } from "theme-ui";
-
-// src/components/Spinner.tsx
-import { Spinner } from "theme-ui";
-
-// src/components/Stack.tsx
-var Stack = /* @__PURE__ */__name(props => {
-  return /* @__PURE__ */React.createElement(Flex, {
-    ...props,
-    sx: {
-      flexDirection: "column",
-      alignItems: "flex-start",
-      ...props.sx
-    }
-  });
-}, "Stack");
-
-// src/components/Switch.tsx
-import { Switch as SwitchUi } from "theme-ui";
-var Switch = /* @__PURE__ */__name(props => {
-  return /* @__PURE__ */React.createElement(SwitchUi, {
-    ...props,
-    role: "switch",
-    "aria-checked": props.checked || false,
-    sx: {
-      backgroundColor: "input.background.muted.disabled",
-      "input:checked ~ &": {
-        backgroundColor: "input.background.accent.default"
-      },
-      "input ~ & > div": {
-        backgroundColor: "input.background.primary.default"
-      },
-      "input:checked ~ & > div": {
-        backgroundColor: "input.text.primary.default"
-      },
-      "input:focus ~ &": {
-        outline: "md",
-        outlineColor: "input.border.accent.default",
-        outlineOffset: "0px"
-      },
-      ...props.sx
-    }
-  });
-}, "Switch");
-
-// src/components/Tag.tsx
-import * as React13 from "react";
-var tagVariantMap = {
-  positive: {
-    bg: "feedback.background.positive.default",
-    color: "feedback.text.positive.default"
-  },
-  accent: {
-    bg: "action.background.accent.default",
-    color: "action.text.accent.default"
-  },
-  caution: {
-    bg: "feedback.background.caution.default",
-    color: "feedback.text.caution.default"
-  },
-  muted: {
-    bg: "display.background.muted.default",
-    color: "display.text.muted.default"
-  },
-  negative: {
-    bg: "feedback.background.negative.default",
-    color: "feedback.text.negative.default"
-  },
-  primary: {
-    bg: "action.background.primary.default",
-    color: "action.text.primary.default"
-  },
-  secondary: {
-    bg: "action.background.secondary.default",
-    color: "action.text.secondary.default"
-  },
-  default: {
-    bg: "action.background.muted.default",
-    color: "action.text.muted.default"
-  }
-};
-var Tag = /* @__PURE__ */__name(({
-  children,
-  variant = "default",
-  sx
-}) => {
-  const colors = tagVariantMap[variant];
-  const baseStyles = {
-    ml: 2,
-    px: 2,
-    py: 0,
-    fontSize: "xs",
-    borderRadius: "full",
-    backgroundColor: colors.bg,
-    color: colors.color,
-    border: "1px solid",
-    borderColor: "border.default",
-    fontWeight: "medium",
-    lineHeight: 1.5,
-    display: "inline-flex",
-    alignItems: "center"
-  };
-  if (Array.isArray(children)) {
-    return /* @__PURE__ */React13.createElement(Box, {
-      as: "span",
-      sx: {
-        ml: 2,
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 1,
-        ...sx
-      }
-    }, children.map((child, i) => {
-      return /* @__PURE__ */React13.createElement(Box, {
-        key: i,
-        as: "span",
-        sx: {
-          ...baseStyles,
-          px: 2,
-          py: 0,
-          fontSize: "xs",
-          backgroundColor: colors.bg,
-          color: colors.color
-        }
-      }, child);
-    }));
-  }
-  return /* @__PURE__ */React13.createElement(Box, {
-    as: "span",
-    sx: {
-      ...baseStyles,
-      ...sx
-    }
-  }, children);
-}, "Tag");
-
-// src/components/Textarea.tsx
-import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React14 from "react";
-import { Textarea as TextareaUI } from "theme-ui";
-var Textarea = /* @__PURE__ */React14.forwardRef(({
-  trailingIcon,
-  className,
-  sx,
-  ...textareaProps
-}, ref) => {
-  return /* @__PURE__ */React14.createElement(Flex, {
-    className,
-    sx: {
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    }
-  }, /* @__PURE__ */React14.createElement(TextareaUI, {
-    ref,
-    sx: {
-      fontFamily: "body",
-      paddingY: "4",
-      paddingX: "5",
-      ...sx,
-      paddingRight: trailingIcon ? "7" : void 0,
-      margin: 0
-    },
-    className,
-    ...textareaProps
-  }), trailingIcon && /* @__PURE__ */React14.createElement(Text, {
-    sx: {
-      position: "absolute",
-      right: "1.25rem",
-      top: "0.75rem"
-    }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
-    inline: true,
-    icon: trailingIcon
-  })));
-});
-Textarea.displayName = "Textarea";
-
-// src/components/TooltipIcon.tsx
-import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React15 from "react";
-var TooltipIcon = /* @__PURE__ */__name(({
-  icon,
-  onClick,
-  tooltip,
-  "data-testid": dataTestId,
-  variant,
-  sx
-}) => {
-  const id = React15.useId();
-  const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React15.createElement(React15.Fragment, null, /* @__PURE__ */React15.createElement(Text, {
-    "data-testid": dataTestId,
-    "data-tooltip-id": tooltip ? tooltipId : void 0,
-    sx: {
-      cursor: onClick ? "pointer" : "default",
-      ...sx
-    },
-    onClick,
-    variant
-  }, /* @__PURE__ */React15.createElement(Icon8, {
-    inline: true,
-    icon
-  })), tooltip && /* @__PURE__ */React15.createElement(Tooltip, {
-    id: tooltipId,
-    ...tooltip,
-    variant
-  }));
-}, "TooltipIcon");
-
-// src/theme/ThemeProvider.tsx
-import { css, Global } from "@emotion/react";
-import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
-import * as React16 from "react";
-import { ThemeUIProvider } from "theme-ui";
-var ThemeProvider = /* @__PURE__ */__name(({
-  children,
-  theme = BruttalTheme,
-  fonts = BruttalFonts
-}) => {
-  return /* @__PURE__ */React16.createElement(React16.Fragment, null, /* @__PURE__ */React16.createElement(ThemeUIProvider, {
-    theme
-  }, /* @__PURE__ */React16.createElement(Global, {
-    styles: css`
-            ${fonts.map(url => {
-      return `@import url('${url}');`;
-    }).join("\n")}
-          `
-  }), children));
-}, "ThemeProvider");
-
-// src/theme/useTheme.ts
-import { useThemeUI } from "theme-ui";
-var useTheme = useThemeUI;
-
-// src/index.ts
-import { keyframes } from "@emotion/react";
-import { useBreakpointIndex, useResponsiveValue } from "@theme-ui/match-media";
-import { BaseStyles, Global as Global2 } from "theme-ui";
-export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, TooltipIcon, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };