@ttoss/ui 4.1.17 → 5.0.0

package/README.md

@@ -2,6 +2,10 @@
 
 **@ttoss/ui** is a library of React low level components for building user interfaces and defining the design system of your application. It is built on top of [Theme UI: The Design Graph Framework](https://theme-ui.com/), so that you'll be able to consult the [Theme UI documentation](https://theme-ui.com/getting-started) to learn more about the design system and the components.
 
+## ESM Only
+
+This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
 ## Installation
 
 ```shell

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "4.1.17",
+  "version": "5.0.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -11,6 +11,7 @@
     "url": "https://github.com/ttoss/ttoss.git",
     "directory": "packages/ui"
   },
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -26,12 +27,12 @@
     "@theme-ui/match-media": "^0.16.2",
     "react-select": "^5.8.0",
     "theme-ui": "^0.16.2",
-    "@ttoss/theme": "^1.7.14"
+    "@ttoss/theme": "^1.7.15"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.3.13"
+    "@ttoss/react-icons": "^0.4.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.4",
@@ -43,7 +44,7 @@
     "tsup": "^8.2.4",
     "@ttoss/config": "^1.32.9",
     "@ttoss/test-utils": "^2.1.13",
-    "@ttoss/react-icons": "^0.3.13"
+    "@ttoss/react-icons": "^0.4.0"
   },
   "keywords": [
     "React",

package/dist/index.d.mts

@@ -1,143 +0,0 @@
-import * as theme_ui from 'theme-ui';
-import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, IconButtonProps, CheckboxProps as CheckboxProps$1, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
-export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
-export { Keyframes, keyframes } from '@emotion/react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { IconType } from '@ttoss/react-icons';
-import { Props } from 'react-select';
-
-type ThemeProviderProps = {
-    children?: React.ReactNode;
-    theme?: Theme;
-    /**
-     * Fonts URLs.
-     */
-    fonts?: string[];
-};
-declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
-
-declare const useTheme: () => theme_ui.ThemeUIContextValue;
-
-type BadgeProps = BadgeProps$1 & {
-    icon?: IconType;
-    chip?: boolean;
-    onDelete?: () => void;
-};
-declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
-
-type ButtonProps = ButtonProps$1 & {
-    leftIcon?: IconType;
-    rightIcon?: IconType;
-    loading?: boolean;
-};
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-
-interface InputProps extends InputProps$1 {
-    leadingIcon?: IconType;
-    onLeadingIconClick?: () => void;
-    trailingIcon?: IconType;
-    onTrailingIconClick?: () => void;
-}
-declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-
-type LabelProps = LabelProps$1 & {
-    tooltip?: boolean;
-    onTooltipClick?: () => void;
-};
-declare const Label: ({ children, onTooltipClick, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
-
-type LinkProps = LinkProps$1 & {
-    quiet?: boolean;
-};
-declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-
-/**
- * We're using React Select component to build ttoss Select.
- * More info about React Select: https://react-select.com/home
- * ttoss Figma: https://www.figma.com/file/VrB76VkH4hKCDUe9iYhpYu/_Component-%2F-Forms-%2F-Select?type=design&mode=design&t=ZBIeOpqcvQn3yq2t-0
- */
-
-type SelectOptionValue = string | number | boolean;
-type SelectOption = {
-    label: string;
-    value: SelectOptionValue;
-};
-type SelectOptions = SelectOption[];
-/**
- * TODO: remove this when we accept multi select.
- */
-type IsMulti = false;
-type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onChange' | 'components'> & SxProp & {
-    value?: SelectOptionValue;
-    onChange?: (value: SelectOptionValue | undefined) => void;
-    disabled?: boolean;
-    leadingIcon?: IconType;
-    trailingIcon?: IconType;
-};
-/**
- * https://react-select.com/home
- */
-declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "onChange" | "styles" | "components"> & SxProp & {
-    value?: SelectOptionValue;
-    onChange?: (value: SelectOptionValue | undefined) => void;
-    disabled?: boolean;
-    leadingIcon?: IconType;
-    trailingIcon?: IconType;
-} & React.RefAttributes<any>>;
-
-declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-
-interface CheckboxProps extends CheckboxProps$1 {
-    indeterminate?: boolean;
-}
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-
-declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
-
-interface TextareaProps extends TextareaProps$1 {
-    trailingIcon?: IconType;
-}
-declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
-
-declare const Container: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLDivElement>>;
-
-type HelpTextProps = Omit<TextProps, 'variant'> & {
-    disabled?: boolean;
-    negative?: boolean;
-};
-declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
-
-type CloseButtonProps = ButtonProps & {
-    label?: string;
-    onlyText?: boolean;
-};
-declare const CloseButton: React.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-
-type InputNumberProps = Omit<InputProps$1, 'type' | 'variant' | 'onChange'> & {
-    onChange: (value: number) => void;
-    value?: number;
-    infoIcon?: boolean;
-    onClickInfoIcon?: () => void;
-};
-declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-
-type StackProps = FlexProps;
-/**
- * A component that renders its children in a column.
- */
-declare const Stack: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLElement>>;
-
-type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'onTrailingIconClick' | 'type'> & {
-    showPasswordByDefault?: boolean;
-};
-declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-
-type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'> & {
-    icon: ButtonProps['leftIcon'];
-    variant?: 'default' | 'accent' | 'quiet';
-};
-declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
-
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/dist/index.js

@@ -1,1017 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-"use strict";
-
-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);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  ActionButton: () => ActionButton,
-  Badge: () => Badge,
-  BaseStyles: () => import_theme_ui26.BaseStyles,
-  Box: () => import_theme_ui5.Box,
-  Button: () => Button,
-  Card: () => import_theme_ui7.Card,
-  Checkbox: () => Checkbox,
-  CloseButton: () => CloseButton,
-  Container: () => Container,
-  Divider: () => import_theme_ui8.Divider,
-  Flex: () => import_theme_ui9.Flex,
-  Global: () => import_theme_ui26.Global,
-  Grid: () => import_theme_ui10.Grid,
-  Heading: () => import_theme_ui11.Heading,
-  HelpText: () => HelpText,
-  IconButton: () => IconButton,
-  Image: () => import_theme_ui12.Image,
-  InfiniteLinearProgress: () => InfiniteLinearProgress,
-  Input: () => Input,
-  InputNumber: () => InputNumber,
-  InputPassword: () => InputPassword,
-  Label: () => Label,
-  LinearProgress: () => import_theme_ui16.Progress,
-  Link: () => Link,
-  Paragraph: () => import_theme_ui25.Paragraph,
-  Radio: () => import_theme_ui18.Radio,
-  Select: () => Select,
-  Slider: () => import_theme_ui20.Slider,
-  Spinner: () => import_theme_ui17.Spinner,
-  Stack: () => Stack,
-  Text: () => import_theme_ui3.Text,
-  Textarea: () => Textarea,
-  ThemeProvider: () => ThemeProvider,
-  keyframes: () => import_react2.keyframes,
-  useBreakpointIndex: () => import_match_media.useBreakpointIndex,
-  useResponsiveValue: () => import_match_media.useResponsiveValue,
-  useTheme: () => useTheme
-});
-module.exports = __toCommonJS(src_exports);
-var import_theme_ui26 = require("theme-ui");
-var import_match_media = require("@theme-ui/match-media");
-var import_react2 = require("@emotion/react");
-
-// src/theme/ThemeProvider.tsx
-var import_Bruttal = require("@ttoss/theme/Bruttal");
-var import_react = require("@emotion/react");
-var import_theme_ui = require("theme-ui");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ThemeProvider = ({
-  children,
-  theme = import_Bruttal.BruttalTheme,
-  fonts = import_Bruttal.BruttalFonts
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeUIProvider, {
-      theme,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Global, {
-        styles: import_react.css`
-            ${fonts.map(url => {
-          return `@import url('${url}');`;
-        }).join("\n")}
-          `
-      }), children]
-    })
-  });
-};
-
-// src/theme/useTheme.ts
-var import_theme_ui2 = require("theme-ui");
-var useTheme = import_theme_ui2.useThemeUI;
-
-// src/components/Badge.tsx
-var import_theme_ui4 = require("theme-ui");
-var import_react_icons = require("@ttoss/react-icons");
-
-// src/components/Text.tsx
-var import_theme_ui3 = require("theme-ui");
-
-// src/components/Badge.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Badge = ({
-  icon,
-  children,
-  sx,
-  chip,
-  onDelete,
-  ...props
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_theme_ui4.Badge, {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      fontFamily: "caption",
-      fontWeight: "normal",
-      lineHeight: "base",
-      fontSize: "sm",
-      paddingX: "xs",
-      borderRadius: "informative",
-      paddingY: "2xs",
-      gap: "xs",
-      ...sx
-    },
-    ...props,
-    children: [icon && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
-      inline: true,
-      icon
-    }), children, chip && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_theme_ui3.Text, {
-      sx: {
-        cursor: "pointer",
-        lineHeight: 0,
-        color: "currentcolor",
-        alignSelf: "center"
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
-        onClick: onDelete,
-        inline: true,
-        icon: "close"
-      })
-    })]
-  });
-};
-
-// src/components/Box.tsx
-var import_theme_ui5 = require("theme-ui");
-
-// src/components/Button.tsx
-var React = __toESM(require("react"));
-var import_theme_ui6 = require("theme-ui");
-var import_react_icons2 = require("@ttoss/react-icons");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button = React.forwardRef((props, ref) => {
-  const {
-    children,
-    leftIcon,
-    rightIcon,
-    loading,
-    ...restProps
-  } = props;
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui6.Button, {
-    type: "button",
-    ...restProps,
-    ref,
-    sx: {
-      cursor: "pointer",
-      paddingX: "xl",
-      paddingY: "lg",
-      fontFamily: "body",
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "lg",
-      ...restProps.sx
-    },
-    children: [loading && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_icons2.Icon, {
-      inline: true,
-      icon: "three-dots-loading"
-    }), !loading && leftIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_icons2.Icon, {
-      inline: true,
-      icon: leftIcon
-    }), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_icons2.Icon, {
-      inline: true,
-      icon: rightIcon
-    })]
-  });
-});
-Button.displayName = "Button";
-
-// src/components/Card.tsx
-var import_theme_ui7 = require("theme-ui");
-
-// src/components/Divider.tsx
-var import_theme_ui8 = require("theme-ui");
-
-// src/components/Flex.tsx
-var import_theme_ui9 = require("theme-ui");
-
-// src/components/Grid.tsx
-var import_theme_ui10 = require("theme-ui");
-
-// src/components/Heading.tsx
-var import_theme_ui11 = require("theme-ui");
-
-// src/components/Image.tsx
-var import_theme_ui12 = require("theme-ui");
-
-// src/components/Input.tsx
-var React2 = __toESM(require("react"));
-var import_react_icons3 = require("@ttoss/react-icons");
-var import_theme_ui13 = require("theme-ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Input = React2.forwardRef(({
-  leadingIcon,
-  trailingIcon: trailingIconProp,
-  onLeadingIconClick,
-  onTrailingIconClick,
-  className,
-  sx,
-  ...inputProps
-}, ref) => {
-  const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui9.Flex, {
-    className,
-    sx: {
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    },
-    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui3.Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        left: "1rem",
-        cursor: onLeadingIconClick ? "pointer" : "default"
-      },
-      onClick: onLeadingIconClick,
-      variant: "leading-icon",
-      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_icons3.Icon, {
-        inline: true,
-        icon: leadingIcon
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui13.Input, {
-      ref,
-      sx: {
-        fontFamily: "body",
-        paddingY: "lg",
-        paddingX: "xl",
-        ...sx,
-        paddingLeft: leadingIcon ? "3xl" : void 0,
-        paddingRight: trailingIcon ? "3xl" : void 0,
-        margin: 0
-      },
-      className,
-      ...inputProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui3.Text, {
-      sx: {
-        position: "absolute",
-        right: "1rem",
-        alignSelf: "center",
-        cursor: onTrailingIconClick ? "pointer" : "default"
-      },
-      variant: "trailing-icon",
-      onClick: onTrailingIconClick,
-      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_icons3.Icon, {
-        inline: true,
-        icon: trailingIcon
-      })
-    })]
-  });
-});
-Input.displayName = "Input";
-
-// src/components/Label.tsx
-var import_react_icons4 = require("@ttoss/react-icons");
-var import_theme_ui14 = require("theme-ui");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var TOOLTIP_LABEL = "tooltip";
-var Label = ({
-  children,
-  onTooltipClick,
-  tooltip,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui14.Label, {
-    sx: {
-      fontFamily: "caption",
-      alignItems: "center",
-      fontSize: "sm",
-      lineHeight: "base",
-      ...sx
-    },
-    ...props,
-    children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui3.Text, {
-      sx: {
-        color: "currentcolor",
-        cursor: onTooltipClick ? "pointer" : void 0
-      },
-      onClick: onTooltipClick,
-      "aria-label": TOOLTIP_LABEL,
-      children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_icons4.Icon, {
-        inline: true,
-        icon: "info"
-      })
-    })]
-  });
-};
-
-// src/components/Link.tsx
-var React3 = __toESM(require("react"));
-var import_theme_ui15 = require("theme-ui");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Link = React3.forwardRef(({
-  quiet,
-  className,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui15.Link, {
-    className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
-    ...props,
-    ref
-  });
-});
-Link.displayName = "Link";
-
-// src/components/LinearProgress.tsx
-var import_theme_ui16 = require("theme-ui");
-
-// src/components/Select.tsx
-var React4 = __toESM(require("react"));
-var import_react_icons5 = require("@ttoss/react-icons");
-var import_react_select = __toESM(require("react-select"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Control = props => {
-  const isDisabled = props.selectProps.isDisabled;
-  const hasError = props.selectProps["aria-invalid"] === "true";
-  const border = (() => {
-    if (isDisabled) {
-      return "muted";
-    }
-    if (hasError) {
-      return "danger";
-    }
-    return "interaction";
-  })();
-  const backgroundColor = (() => {
-    if (isDisabled) {
-      return "muted";
-    }
-    return "surface";
-  })();
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
-    sx: {
-      ".react-select__control": {
-        border,
-        backgroundColor,
-        paddingX: "xl",
-        paddingY: "lg",
-        borderRadius: "action"
-      }
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.components.Control, {
-      ...props
-    })
-  });
-};
-var DropdownIndicator = props => {
-  const isDisabled = props.selectProps.isDisabled;
-  const color = (() => {
-    if (isDisabled) {
-      return "onMuted";
-    }
-    return "text";
-  })();
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
-    sx: {
-      fontSize: "base",
-      color,
-      alignSelf: "center",
-      display: "flex",
-      alignItems: "center"
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-      icon: "picker-down"
-    })
-  });
-};
-var IndicatorsContainer = ({
-  children
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
-    sx: {
-      marginLeft: "lg",
-      border: "none"
-    },
-    children
-  });
-};
-var Placeholder = ({
-  children
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
-    sx: {
-      color: "onMuted",
-      alignSelf: "center"
-    },
-    children
-  });
-};
-var SelectContainer = ({
-  children,
-  ...props
-}) => {
-  const {
-    sx,
-    css: css2
-  } = props.selectProps;
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */
-    (0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
-      sx,
-      css: css2,
-      children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.components.SelectContainer, {
-        ...props,
-        children
-      })
-    })
-  );
-};
-var ValueContainer = ({
-  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__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui9.Flex, {
-    sx: {
-      gap: "lg",
-      flex: 1
-    },
-    children: [finalLeadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
-      sx: {
-        alignSelf: "center",
-        pointerEvents: "none",
-        lineHeight: 0,
-        fontSize: "base"
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-        icon: finalLeadingIcon
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui9.Flex, {
-      sx: {
-        flex: 1,
-        alignItems: "center"
-      },
-      children
-    }), (trailingIcon || hasError) && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
-      className: hasError ? "error-icon" : "",
-      sx: {
-        alignSelf: "center",
-        pointerEvents: "none",
-        lineHeight: 0,
-        fontSize: "base",
-        color: trailingIconColor
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-        icon: hasError ? "warning-alt" : trailingIcon
-      })
-    })]
-  });
-};
-var Select = React4.forwardRef(({
-  ...props
-}, ref) => {
-  const value = props.options?.find(option => {
-    if ("value" in option) {
-      return option.value === props.value;
-    }
-    return false;
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.default, {
-    ref,
-    components: {
-      Control,
-      DropdownIndicator,
-      IndicatorsContainer,
-      Placeholder,
-      SelectContainer,
-      ValueContainer
-    },
-    isDisabled: props.disabled,
-    ...props,
-    value,
-    onChange: value2 => {
-      props.onChange?.(value2?.value);
-    },
-    styles: {
-      input: baseStyles => {
-        return {
-          ...baseStyles,
-          position: "absolute"
-        };
-      }
-    },
-    classNamePrefix: "react-select"
-  });
-});
-Select.displayName = "Select";
-
-// src/components/Spinner.tsx
-var import_theme_ui17 = require("theme-ui");
-
-// src/components/Radio.tsx
-var import_theme_ui18 = require("theme-ui");
-
-// src/components/IconButton.tsx
-var React5 = __toESM(require("react"));
-var import_theme_ui19 = require("theme-ui");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var IconButton = React5.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui19.IconButton, {
-    type: "button",
-    ...props,
-    ref
-  });
-});
-IconButton.displayName = "IconButton";
-
-// src/components/Slider.tsx
-var import_theme_ui20 = require("theme-ui");
-
-// src/components/Checkbox.tsx
-var React6 = __toESM(require("react"));
-var import_theme_ui21 = require("theme-ui");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Checkbox = React6.forwardRef(({
-  indeterminate = false,
-  ...rest
-}, ref) => {
-  const innerRef = React6.useRef(null);
-  React6.useImperativeHandle(ref, () => {
-    return innerRef.current;
-  });
-  React6.useEffect(() => {
-    if (innerRef.current) {
-      innerRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-  if (indeterminate) {
-    return /* @__PURE__ */(0, import_jsx_runtime9.jsx)("input", {
-      type: "checkbox",
-      ref: innerRef,
-      ...rest
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui21.Checkbox, {
-    ref: innerRef,
-    ...rest
-  });
-});
-Checkbox.displayName = "Checkbox";
-
-// src/components/InfiniteLinearProgress.tsx
-var React7 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var MAX_PROGRESS = 100;
-var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React7.useState(0);
-  React7.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__ */(0, import_jsx_runtime10.jsx)(import_theme_ui16.Progress, {
-    max: MAX_PROGRESS,
-    value: progress,
-    role: "progressbar"
-  });
-};
-
-// src/components/Textarea.tsx
-var React8 = __toESM(require("react"));
-var import_react_icons6 = require("@ttoss/react-icons");
-var import_theme_ui22 = require("theme-ui");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Textarea = React8.forwardRef(({
-  trailingIcon,
-  className,
-  sx,
-  ...textareaProps
-}, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_theme_ui9.Flex, {
-    className,
-    sx: {
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    },
-    children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui22.Textarea, {
-      ref,
-      sx: {
-        fontFamily: "body",
-        paddingY: "lg",
-        paddingX: "xl",
-        ...sx,
-        paddingRight: trailingIcon ? "3xl" : void 0,
-        margin: 0
-      },
-      className,
-      ...textareaProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui3.Text, {
-      sx: {
-        position: "absolute",
-        right: "1.25rem",
-        top: "0.75rem"
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_react_icons6.Icon, {
-        inline: true,
-        icon: trailingIcon
-      })
-    })]
-  });
-});
-Textarea.displayName = "Textarea";
-
-// src/components/Container.tsx
-var React9 = __toESM(require("react"));
-var import_theme_ui23 = require("theme-ui");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Container = React9.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui23.Container, {
-    ref,
-    ...props
-  });
-});
-Container.displayName = "Container";
-
-// src/components/HelpText.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var HelpText = ({
-  sx,
-  disabled,
-  negative,
-  ...props
-}) => {
-  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui3.Text, {
-    variant,
-    sx: {
-      fontSize: "sm",
-      fontFamily: "caption",
-      lineHeight: "base",
-      ...sx
-    },
-    "aria-disabled": disabled ? "true" : void 0,
-    ...props
-  });
-};
-
-// src/components/CloseButton.tsx
-var React10 = __toESM(require("react"));
-var import_react_icons7 = require("@ttoss/react-icons");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CloseButton = React10.forwardRef(({
-  label,
-  sx,
-  onlyText,
-  ...props
-}, ref) => {
-  if (onlyText && !label) {
-    return null;
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(Button, {
-    variant: "buttons.closeButton",
-    type: "button",
-    "aria-label": label,
-    sx: {
-      fontFamily: "caption",
-      fontSize: "xs",
-      display: "inline-flex",
-      alignItems: "center",
-      cursor: "pointer",
-      lineHeight: "normal",
-      gap: "sm",
-      padding: "sm",
-      width: "fit-content",
-      transition: "all 0.2s",
-      "& > iconify-icon": {
-        fontSize: "base"
-      },
-      ...sx
-    },
-    ...props,
-    ref,
-    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons7.Icon, {
-      icon: "close"
-    })]
-  });
-});
-CloseButton.displayName = "CloseButton";
-
-// src/components/InputNumber.tsx
-var React11 = __toESM(require("react"));
-var import_react_icons8 = require("@ttoss/react-icons");
-var import_theme_ui24 = require("theme-ui");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var InputNumber = React11.forwardRef(({
-  sx,
-  value,
-  infoIcon,
-  onChange,
-  onClickInfoIcon,
-  ...inputProps
-}, ref) => {
-  const sxProps = React11.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: "3xl",
-        paddingRight: "2xl",
-        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: "lg",
-      paddingX: "xl",
-      ...sx,
-      paddingLeft: "2xl",
-      paddingRight: "2xl",
-      margin: 0
-    };
-  }, [inputProps, value, sx]);
-  const handleChangeUp = () => {
-    if (inputProps.disabled) {
-      return;
-    }
-    if (typeof value !== "number") {
-      onChange(-1);
-      return;
-    }
-    onChange(value - 1);
-  };
-  const handleChangeDown = () => {
-    if (inputProps.disabled) {
-      return;
-    }
-    if (typeof value !== "number") {
-      onChange(1);
-      return;
-    }
-    onChange(value + 1);
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime15.jsxs)(import_theme_ui9.Flex, {
-    sx: {
-      width: "fit-content",
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    },
-    ref,
-    "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui24.Input, {
-      ref,
-      variant: "forms.inputNumber",
-      sx: sxProps,
-      type: "number",
-      onChange: e => {
-        onChange(Number(e.target.value));
-      },
-      value,
-      ...inputProps
-    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui3.Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        left: "1rem",
-        zIndex: 1,
-        cursor: "pointer"
-      },
-      onClick: handleChangeUp,
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_icons8.Icon, {
-        icon: "picker-down"
-      })
-    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui3.Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        right: "2.5rem",
-        zIndex: 1,
-        cursor: onClickInfoIcon ? "pointer" : "default"
-      },
-      onClick: onClickInfoIcon,
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_icons8.Icon, {
-        icon: "info"
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui3.Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        right: "1rem",
-        zIndex: 1,
-        cursor: "pointer"
-      },
-      onClick: handleChangeDown,
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_icons8.Icon, {
-        icon: "picker-up"
-      })
-    })]
-  });
-});
-InputNumber.displayName = "InputNumber";
-
-// src/components/Stack.tsx
-var React12 = __toESM(require("react"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Stack = React12.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_theme_ui9.Flex, {
-    ref,
-    ...props,
-    sx: {
-      flexDirection: "column",
-      ...props.sx
-    }
-  });
-});
-Stack.displayName = "Stack";
-
-// src/components/Paragraph.tsx
-var import_theme_ui25 = require("theme-ui");
-
-// src/components/InputPassword/InputPassword.tsx
-var React14 = __toESM(require("react"));
-
-// src/components/InputPassword/useHidePassInput.ts
-var React13 = __toESM(require("react"));
-var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
-  const {
-    icon,
-    inputType
-  } = React13.useMemo(() => {
-    return {
-      icon: hidePass ? "view-off" : "view-on",
-      inputType: hidePass ? "password" : "text"
-    };
-  }, [hidePass]);
-  const handleClick = () => {
-    setHidePass(prev => {
-      return !prev;
-    });
-  };
-  return {
-    handleClick,
-    icon,
-    inputType
-  };
-};
-
-// src/components/InputPassword/InputPassword.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var InputPassword = React14.forwardRef(({
-  showPasswordByDefault,
-  ...inputPasswordProps
-}, ref) => {
-  const {
-    handleClick,
-    icon,
-    inputType
-  } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(Input, {
-    ref,
-    ...inputPasswordProps,
-    trailingIcon: icon,
-    onTrailingIconClick: handleClick,
-    type: inputType
-  });
-});
-InputPassword.displayName = "InputPassword";
-
-// src/components/ActionButton.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ActionButton = ({
-  icon,
-  variant = "default",
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime18.jsx)(Button, {
-    variant: `buttons.actionButton.${variant}`,
-    leftIcon: icon,
-    sx: {
-      padding: "sm",
-      gap: "xs",
-      fontFamily: "caption",
-      borderRadius: "action",
-      outlineColor: "transparent",
-      ":disabled": props.disabled ? {
-        backgroundColor: "muted",
-        color: "onMuted",
-        cursor: "not-allowed",
-        border: "muted",
-        borderColor: "onMuted"
-      } : void 0,
-      ...sx
-    },
-    ...props
-  });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ActionButton,
-  Badge,
-  BaseStyles,
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  CloseButton,
-  Container,
-  Divider,
-  Flex,
-  Global,
-  Grid,
-  Heading,
-  HelpText,
-  IconButton,
-  Image,
-  InfiniteLinearProgress,
-  Input,
-  InputNumber,
-  InputPassword,
-  Label,
-  LinearProgress,
-  Link,
-  Paragraph,
-  Radio,
-  Select,
-  Slider,
-  Spinner,
-  Stack,
-  Text,
-  Textarea,
-  ThemeProvider,
-  keyframes,
-  useBreakpointIndex,
-  useResponsiveValue,
-  useTheme
-});