bako-ui 0.2.0

package/dist/index.js

@@ -0,0 +1,1164 @@
+'use strict';
+
+var react = require('@chakra-ui/react');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('react');
+var reactDom = require('react-dom');
+var reactHookForm = require('react-hook-form');
+var useMaskInput = require('use-mask-input');
+var anatomy = require('@chakra-ui/react/anatomy');
+
+// src/components/Stack/stack.tsx
+var Stack = react.Stack;
+var HStack = react.HStack;
+var VStack = react.VStack;
+var flex_default = react.Flex;
+function Grid(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Grid, { ...props });
+}
+function GridItem(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { ...props });
+}
+var text_default = react.Text;
+var heading_default = react.Heading;
+var box_default = react.Box;
+var Badge = react.Badge;
+function Button({
+  colorPalette = "primary",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { colorPalette, ...props });
+}
+var Card = react.Card;
+var card_default = Card;
+var Clipboard = react.Clipboard;
+var close_button_default = react$1.forwardRef(
+  function CloseButton(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.CloseButton, { ref, ...props });
+  }
+);
+function Container(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Container, { ...props });
+}
+var icon_button_default = react$1.forwardRef(
+  function IconButton(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.IconButton, { ref, ...props });
+  }
+);
+var QrCode = react.QrCode;
+var separator_default = react.Separator;
+var image_default = react.Image;
+var Icon = react$1.forwardRef(function Icon2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ref, ...props });
+});
+var icon_default = Icon;
+var link_default = react$1.forwardRef(
+  function Link(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { ref, ...props });
+  }
+);
+var link_overlay_default = react$1.forwardRef(
+  function LinkOverlay(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LinkOverlay, { ref, ...props });
+  }
+);
+var loader_default = react.Spinner;
+var Skeleton = react.Skeleton;
+var SkeletonCircle = react.SkeletonCircle;
+var SkeletonText = react.SkeletonText;
+var Checkbox = react$1.forwardRef(
+  function Checkbox2(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Control, { children: icon || /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Indicator, {}) }),
+      children != null && /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Label, { children })
+    ] });
+  }
+);
+var checkbox_default = Checkbox;
+var Combobox = {
+  ...react.Combobox,
+  Portal: react.Portal
+};
+var input_default = react$1.forwardRef(
+  function Input(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Input, { ref, ...props });
+  }
+);
+function MoneyField({
+  value,
+  onChange,
+  thousandSeparator = ",",
+  decimalSeparator = ".",
+  decimalScale = 2,
+  ...props
+}) {
+  const inputRef = react$1.useRef(null);
+  const config2 = react$1.useMemo(
+    () => ({
+      thousandSeparator,
+      decimalSeparator,
+      decimalScale
+    }),
+    [thousandSeparator, decimalSeparator, decimalScale]
+  );
+  const formatNumber = react$1.useCallback(
+    (num) => {
+      const numStr = String(num).replace(/[^\d.-]/g, "");
+      if (!numStr || numStr === "-") return "";
+      const [integerPart, decimalPart] = numStr.split(".");
+      const formattedInteger = integerPart.replace(
+        /\B(?=(\d{3})+(?!\d))/g,
+        config2.thousandSeparator
+      );
+      let result = formattedInteger;
+      if (decimalPart !== void 0) {
+        const limitedDecimal = decimalPart.slice(0, config2.decimalScale);
+        result = `${formattedInteger}${config2.decimalSeparator}${limitedDecimal}`;
+      }
+      return result;
+    },
+    [config2]
+  );
+  const unformatNumber = react$1.useCallback(
+    (formatted) => {
+      return formatted.replace(new RegExp(`\\${config2.thousandSeparator}`, "g"), "").replace(new RegExp(`\\${config2.decimalSeparator}`, "g"), ".");
+    },
+    [config2]
+  );
+  const displayValue = react$1.useMemo(() => {
+    if (!value && value !== 0) return "";
+    return formatNumber(value);
+  }, [value, formatNumber]);
+  const handleChange = react$1.useCallback(
+    (event) => {
+      const inputValue = event.target.value;
+      const cursorPosition = event.target.selectionStart || 0;
+      const rawValue = unformatNumber(inputValue);
+      if (rawValue === "" || rawValue === "-" || !Number.isNaN(Number(rawValue))) {
+        onChange(rawValue);
+        setTimeout(() => {
+          if (inputRef.current) {
+            const newFormattedValue = formatNumber(rawValue);
+            const diff = newFormattedValue.length - inputValue.length;
+            inputRef.current.setSelectionRange(
+              cursorPosition + diff,
+              cursorPosition + diff
+            );
+          }
+        }, 0);
+      }
+    },
+    [formatNumber, unformatNumber, onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Input,
+    {
+      ref: inputRef,
+      value: displayValue,
+      type: "text",
+      onChange: handleChange,
+      color: "fg.inverted",
+      ...props
+    }
+  );
+}
+var RadioGroup = react$1.forwardRef(
+  function RadioGroup2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.Root, { ref, spaceX: 2, ...props });
+  }
+);
+var Radio = react$1.forwardRef(
+  function Radio2(props, ref) {
+    const { children, inputProps, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioGroup.Item, { ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemControl, {}),
+      children != null && /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemText, { children })
+    ] });
+  }
+);
+var radio_default = Radio;
+var floatingStyles = ({
+  hasValue,
+  withStartIcon
+}) => react.defineStyle({
+  pos: "absolute",
+  px: "1",
+  top: hasValue ? "0" : "50%",
+  transform: hasValue ? "none" : "translateY(-50%)",
+  insetStart: withStartIcon ? "9" : "2.5",
+  color: "bg.emphasized",
+  fontWeight: "normal",
+  pointerEvents: "none",
+  transition: "all 0.2s",
+  fontSize: hasValue ? "2xs" : "sm",
+  _peerPlaceholderShown: {
+    insetStart: withStartIcon ? "9" : "2.5"
+  },
+  _peerFocusVisible: {
+    top: "0",
+    transform: "none",
+    insetStart: withStartIcon ? "9" : "2.5",
+    fontSize: "2xs"
+  }
+});
+function ComboboxHiddenInput(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", ...props });
+}
+function RhfCombobox({
+  control,
+  name,
+  defaultValue,
+  label,
+  error,
+  options,
+  disabled = false,
+  helperText,
+  isLoadingOptions = false,
+  noOptionsText = "No items found",
+  openOnFocus = true,
+  slotProps,
+  variant,
+  clearTriggerIcon,
+  showTrigger = false,
+  allowCustomValue = true
+}) {
+  const {
+    field: { value, onChange, ref, ...rest }
+  } = reactHookForm.useController({ defaultValue, control, name });
+  const { contains } = react.useFilter({ sensitivity: "base" });
+  const { collection, filter } = react.useListCollection({
+    initialItems: options,
+    filter: contains
+  });
+  const [inputValue, setInputValue] = react$1.useState(value || "");
+  const handleValueChange = react$1.useCallback(
+    (details) => {
+      const newValue = details.value[0] || "";
+      onChange(newValue);
+      setInputValue(newValue);
+    },
+    [onChange]
+  );
+  const handleInputValueChange = react$1.useCallback(
+    (details) => {
+      setInputValue(details.inputValue);
+      reactDom.flushSync(() => {
+        filter(details.inputValue);
+      });
+      if (allowCustomValue) {
+        onChange(details.inputValue);
+      }
+    },
+    [filter, allowCustomValue, onChange]
+  );
+  const handleOpenChange = react$1.useCallback(
+    (details) => {
+      var _a, _b;
+      if (allowCustomValue && details.open && inputValue.trim() !== "") {
+        const hasMatchingOptions = collection.items.length > 0;
+        if (!hasMatchingOptions) {
+          return;
+        }
+      }
+      (_b = (_a = slotProps == null ? void 0 : slotProps.root) == null ? void 0 : _a.onOpenChange) == null ? void 0 : _b.call(_a, details);
+    },
+    [slotProps == null ? void 0 : slotProps.root, allowCustomValue, inputValue, collection.items.length]
+  );
+  const hasValue = react$1.useMemo(() => {
+    if (!value) {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    const stringValue = typeof value === "string" ? value : String(value);
+    return !!stringValue || stringValue.length > 0;
+  }, [value]);
+  const inputProps = label ? {
+    pt: 2,
+    px: 3,
+    placeholder: ""
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Field.Root, { invalid: !!error, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      react.Field.Label,
+      {
+        color: "bg.emphasized",
+        htmlFor: rest.name,
+        ...slotProps == null ? void 0 : slotProps.label,
+        css: floatingStyles({
+          hasValue,
+          withStartIcon: false
+        }),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      react.Combobox.Root,
+      {
+        collection,
+        width: "full",
+        variant,
+        inputValue,
+        value: value ? [value] : [],
+        borderRadius: "lg",
+        onValueChange: handleValueChange,
+        onOpenChange: handleOpenChange,
+        onInputValueChange: handleInputValueChange,
+        disabled,
+        openOnClick: openOnFocus,
+        multiple: false,
+        invalid: !!error,
+        allowCustomValue,
+        selectionBehavior: "preserve",
+        ...slotProps == null ? void 0 : slotProps.root,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Control, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Combobox.Input,
+              {
+                color: "fg",
+                ref,
+                ...inputProps,
+                ...slotProps == null ? void 0 : slotProps.input
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.IndicatorGroup, { children: [
+              clearTriggerIcon ? /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { hidden: !hasValue, color: "unset", asChild: true, children: clearTriggerIcon }) : /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { hidden: !hasValue, color: "unset" }),
+              showTrigger && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Trigger, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ComboboxHiddenInput, { name: rest.name, value: value || "" }),
+          helperText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.HelperText, { children: helperText }),
+          error && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { children: error.message }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
+            !allowCustomValue && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: noOptionsText }),
+            isLoadingOptions && /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { p: "2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Spinner, { size: "xs", borderWidth: "1px" }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: "Loading..." })
+            ] }),
+            !isLoadingOptions && collection.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Item, { item, children: [
+              !item.imageUrl && item.label,
+              item.imageUrl && /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { gap: 2, align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Image,
+                  {
+                    src: item.imageUrl,
+                    boxSize: "5",
+                    alt: `${item.label} image`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: item.label })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ItemIndicator, {})
+            ] }, item.value))
+          ] }) }) })
+        ]
+      }
+    )
+  ] });
+}
+function RhfInput({
+  control,
+  defaultValue,
+  name,
+  label,
+  error,
+  type = "text",
+  helperText,
+  slotProps,
+  ...props
+}) {
+  var _a;
+  const {
+    field: { value, onChange, ref, ...rest }
+  } = reactHookForm.useController({ control, defaultValue, name });
+  const { inputGroup } = slotProps || {};
+  const hasValue = react$1.useMemo(
+    () => value != null && value !== "" && value.toString().length > 0,
+    [value]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Field.Root, { invalid: !!error, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.InputGroup, { borderRadius: "sm", ...inputGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", w: "full", ...slotProps == null ? void 0 : slotProps.root, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Input,
+        {
+          value,
+          ref,
+          borderTopLeftRadius: (inputGroup == null ? void 0 : inputGroup.startAddon) ? "none" : "sm",
+          borderBottomLeftRadius: (inputGroup == null ? void 0 : inputGroup.startAddon) ? "none" : "sm",
+          borderTopRightRadius: (inputGroup == null ? void 0 : inputGroup.endAddon) ? "none" : "sm",
+          borderBottomRightRadius: (inputGroup == null ? void 0 : inputGroup.endAddon) ? "none" : "sm",
+          type,
+          onChange,
+          className: `peer ${((_a = slotProps == null ? void 0 : slotProps.input) == null ? void 0 : _a.className) || ""}`,
+          pt: 2,
+          pl: (inputGroup == null ? void 0 : inputGroup.startElement) ? "10" : "3",
+          pr: (inputGroup == null ? void 0 : inputGroup.endElement) ? "10" : "3",
+          color: "fg.inverted",
+          ...rest,
+          ...slotProps == null ? void 0 : slotProps.input,
+          ...props,
+          placeholder: " "
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Field.Label,
+        {
+          css: floatingStyles({
+            hasValue,
+            withStartIcon: !!(inputGroup == null ? void 0 : inputGroup.startElement)
+          }),
+          htmlFor: name,
+          ...slotProps == null ? void 0 : slotProps.label,
+          children: label
+        }
+      )
+    ] }) }),
+    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { children: error == null ? void 0 : error.message }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.HelperText, { color: "bg.emphasized", children: helperText })
+  ] });
+}
+function RhfMoneyField({
+  control,
+  defaultValue,
+  name,
+  label,
+  error,
+  thousandSeparator,
+  decimalSeparator,
+  decimalScale,
+  helperText,
+  slotProps,
+  disabled = false,
+  ...props
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    field: { value, onChange, ...rest }
+  } = reactHookForm.useController({ control, defaultValue, name });
+  const hasValue = react$1.useMemo(() => {
+    return String(value).length > 0;
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Field.Root, { invalid: !!error, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.InputGroup, { borderRadius: "sm", ...slotProps == null ? void 0 : slotProps.inputGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", w: "full", ...slotProps == null ? void 0 : slotProps.root, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MoneyField,
+        {
+          value,
+          onChange,
+          thousandSeparator,
+          decimalSeparator,
+          decimalScale,
+          disabled,
+          className: `peer ${(props == null ? void 0 : props.className) || ""}`,
+          pt: 2,
+          pl: ((_a = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _a.startElement) ? "10" : "3",
+          pr: ((_b = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _b.endElement) ? "10" : "3",
+          color: "fg.inverted",
+          borderTopLeftRadius: ((_c = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _c.startAddon) ? "none" : "sm",
+          borderBottomLeftRadius: ((_d = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _d.startAddon) ? "none" : "sm",
+          borderTopRightRadius: ((_e = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _e.endAddon) ? "none" : "sm",
+          borderBottomRightRadius: ((_f = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _f.endAddon) ? "none" : "sm",
+          placeholder: " ",
+          ...rest,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Field.Label,
+        {
+          css: floatingStyles({
+            hasValue,
+            withStartIcon: !!((_g = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _g.startElement)
+          }),
+          htmlFor: rest.name,
+          ...slotProps == null ? void 0 : slotProps.label,
+          children: label
+        }
+      )
+    ] }) }),
+    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { children: error.message }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.HelperText, { color: "bg.emphasized", children: helperText })
+  ] });
+}
+var Select = {
+  ...react.Select,
+  Portal: react.Portal
+};
+var Switch = react$1.forwardRef(
+  function Switch2(props, ref) {
+    const { children, inputProps, thumbLabel, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Switch.Root, { ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Switch.Control, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}),
+        thumbLabel && /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Indicator, { fallback: thumbLabel.off, children: thumbLabel.on })
+      ] }),
+      children != null && /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children })
+    ] });
+  }
+);
+var switch_default = Switch;
+function TextArea(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Textarea, { ...props });
+}
+var defaultMaskOptions = {
+  placeholder: "",
+  showMaskOnFocus: false,
+  showMaskOnHover: false
+};
+var TextMask = react$1.forwardRef(
+  ({ mask, maskOptions, ...props }, ref) => {
+    const mergedMaskOptions = {
+      ...defaultMaskOptions,
+      ...maskOptions
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.Input,
+      {
+        ref: react.mergeRefs(ref, useMaskInput.withMask(mask, mergedMaskOptions)),
+        ...props
+      }
+    );
+  }
+);
+var text_mask_default = TextMask;
+function Avatar(props) {
+  const { name, src, fallback, slotProps, ...rest } = props;
+  const { image: imageProps = {}, fallback: fallbackProps = {} } = slotProps || {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Avatar.Root, { ...rest, children: [
+    src && /* @__PURE__ */ jsxRuntime.jsx(react.Avatar.Image, { src, alt: name, ...imageProps }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Avatar.Fallback, { name, ...fallbackProps, children: fallback || (name ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(react.Avatar.Icon, {})) })
+  ] });
+}
+function AvatarGroup(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Group, { ...props });
+}
+var EmptyState = react.EmptyState;
+function Tooltip(props) {
+  const { children, content, showArrow = true, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip.Root, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip.Content, { children: [
+      showArrow && /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Arrow, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.ArrowTip, {}) }),
+      content
+    ] }) }) })
+  ] });
+}
+var Dialog = {
+  ...react.Dialog,
+  Portal: react.Portal
+};
+var Drawer = {
+  ...react.Drawer,
+  Portal: react.Portal
+};
+var Popover = {
+  ...react.Popover,
+  Portal: react.Portal
+};
+var toaster = react.createToaster({
+  placement: "bottom-end",
+  overlap: false
+});
+var Toast = { ...react.Toast, Toaster: react.Toaster };
+var Accordion = {
+  ...react.Accordion
+};
+var Breadcrumb = {
+  ...react.Breadcrumb
+};
+var List = react.List;
+var Steps = {
+  ...react.Steps
+};
+var Tabs = react.Tabs;
+var Menu = {
+  ...react.Menu,
+  Portal: react.Portal
+};
+var CheckIcon = react.createIcon({
+  displayName: "CheckIcon",
+  viewBox: "0 0 24 24",
+  path: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      fill: "currentColor",
+      width: "24px",
+      height: "24px",
+      viewBox: "0 0 0.72 0.72",
+      xmlns: "http://www.w3.org/2000/svg",
+      "enable-background": "new 0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: "check" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.561 0.216c-0.012 -0.012 -0.03 -0.012 -0.042 0l-0.225 0.225 -0.093 -0.093c-0.012 -0.012 -0.03 -0.012 -0.042 0s-0.012 0.03 0 0.042l0.114 0.114c0.006 0.006 0.012 0.009 0.021 0.009s0.015 -0.003 0.021 -0.009l0.246 -0.246c0.012 -0.012 0.012 -0.03 0 -0.042" })
+      ]
+    }
+  )
+});
+var CloseIcon = react.createIcon({
+  displayName: "CloseIcon",
+  viewBox: "0 0 24 24",
+  path: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "24px",
+      height: "24px",
+      viewBox: "0 0 0.48 0.48",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: "close" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "m0.24 0.261 0.109 0.109 0.021 -0.021L0.261 0.24l0.109 -0.109 -0.021 -0.021L0.24 0.219 0.131 0.109l-0.021 0.021L0.219 0.24l-0.109 0.109 0.021 0.021z"
+          }
+        )
+      ]
+    }
+  )
+});
+var WalletIcon = react.createIcon({
+  displayName: "WalletIcon",
+  viewBox: "0 0 21 18",
+  path: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M20 4H21V14H20V17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H1C0.734784 18 0.48043 17.8946 0.292893 17.7071C0.105357 17.5196 0 17.2652 0 17V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H19C19.2652 0 19.5196 0.105357 19.7071 0.292893C19.8946 0.48043 20 0.734784 20 1V4ZM18 14H12C10.6739 14 9.40215 13.4732 8.46447 12.5355C7.52678 11.5979 7 10.3261 7 9C7 7.67392 7.52678 6.40215 8.46447 5.46447C9.40215 4.52678 10.6739 4 12 4H18V2H2V16H18V14ZM19 12V6H12C11.2044 6 10.4413 6.31607 9.87868 6.87868C9.31607 7.44129 9 8.20435 9 9C9 9.79565 9.31607 10.5587 9.87868 11.1213C10.4413 11.6839 11.2044 12 12 12H19ZM12 8H15V10H12V8Z",
+      fill: "currentColor"
+    }
+  )
+});
+var ThemeProvider = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { ...props });
+};
+var badgeRecipe = react.defineRecipe({
+  base: {
+    borderRadius: "xl"
+  },
+  variants: {
+    variant: {
+      outline: {
+        border: "1px solid",
+        borderColor: "colorPalette.subtle/25",
+        bg: "colorPalette.subtle/10",
+        color: "colorPalette.solid"
+      }
+    }
+  }
+});
+var buttonRecipe = react.defineRecipe({
+  base: {
+    borderRadius: "lg"
+  },
+  variants: {
+    variant: {}
+  },
+  defaultVariants: { colorPalette: "primary" }
+});
+var cardRecipe = react.defineRecipe({
+  variants: {
+    variant: {
+      subtle: {}
+    }
+  },
+  defaultVariants: {
+    variant: "subtle"
+  }
+});
+var iconRecipe = react.defineRecipe({
+  variants: {
+    size: {
+      inherit: {},
+      xs: { boxSize: "3" },
+      sm: { boxSize: "4" },
+      md: { boxSize: "5" },
+      lg: { boxSize: "6" },
+      xl: { boxSize: "7" },
+      "2xl": { boxSize: "8" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var inputRecipe = react.defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        bg: "transparent",
+        borderWidth: "1px",
+        borderColor: "gray.450",
+        focusVisibleRing: "inside",
+        outlineWidth: "3px",
+        focusRingColor: "var(--focus-color)",
+        _focusVisible: {
+          borderColor: "border"
+        }
+      }
+    }
+  }
+});
+var linkRecipe = react.defineRecipe({
+  variants: {
+    variant: {
+      underline: {
+        color: "textPrimary"
+      },
+      plain: {
+        color: "textPrimary"
+      }
+    }
+  }
+});
+
+// src/theme/recipes/index.ts
+var recipes = {
+  button: buttonRecipe,
+  card: cardRecipe,
+  input: inputRecipe,
+  badge: badgeRecipe,
+  icon: iconRecipe,
+  link: linkRecipe
+};
+var semanticColors = react.defineSemanticTokens.colors({
+  bg: {
+    DEFAULT: {
+      value: {
+        _light: "{colors.background}",
+        _dark: "{colors.background}"
+      }
+    },
+    panel: {
+      value: { _light: "{colors.gray.600}", _dark: "{colors.gray.600}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" }
+    }
+  },
+  fg: {
+    DEFAULT: {
+      value: { _light: "{colors.gray.50}", _dark: "{colors.gray.50}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.200}", _dark: "{colors.gray.200}" }
+    }
+  },
+  red: {
+    solid: {
+      value: {
+        _light: "{colors.red.100}",
+        _dark: "{colors.red.100}"
+      }
+    },
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.red.700}", _dark: "{colors.red.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.red.100}", _dark: "{colors.red.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.red.200}", _dark: "{colors.red.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.red.300}", _dark: "{colors.red.700}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.500}" }
+    }
+  },
+  primary: {
+    DEFAULT: {
+      value: { _light: "{colors.primary}", _dark: "{colors.primary}" }
+    },
+    solid: {
+      value: {
+        _light: "{colors.primary.default}",
+        _dark: "{colors.primary.default}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.gray.300/40}",
+        _dark: "{colors.gray.300/40}"
+      }
+    },
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.100}" }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.gray.300/20}",
+        _dark: "{colors.gray.300/20}"
+      }
+    },
+    emphasized: {
+      value: { _light: "{colors.gray.400}", _dark: "{colors.gray.400}" }
+    },
+    border: {
+      value: {
+        _light: "{colors.gray.600}",
+        _dark: "{colors.gray.600}"
+      }
+    }
+  },
+  green: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.green.100}", _dark: "{colors.green.100}" }
+    },
+    muted: {
+      value: { _light: "{colors.green.100}", _dark: "{colors.green.100}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    },
+    solid: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    }
+  },
+  yellow: {
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.yellow.800}", _dark: "{colors.yellow.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.yellow.150}", _dark: "{colors.yellow.150}" }
+    },
+    muted: {
+      value: { _light: "{colors.yellow.200}", _dark: "{colors.yellow.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.yellow.300}", _dark: "{colors.yellow.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.yellow.100}", _dark: "{colors.yellow.100}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.yellow.500}", _dark: "{colors.yellow.500}" }
+    }
+  }
+});
+
+// src/theme/semantic-tokens/index.ts
+var semanticTokens = {
+  colors: semanticColors
+};
+var menuSlotRecipe = react.defineSlotRecipe({
+  slots: anatomy.menuAnatomy.keys(),
+  base: {
+    content: {
+      color: "primary.fg"
+    },
+    item: {
+      color: "primary.fg"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: {
+          _highlighted: {
+            bg: "primary.emphasized"
+          }
+        }
+      }
+    }
+  }
+});
+var tabsSlotRecipe = react.defineSlotRecipe({
+  slots: anatomy.tabsAnatomy.keys(),
+  variants: {
+    variant: {
+      enclosed: {
+        trigger: {
+          _selected: {
+            color: "fg"
+          }
+        }
+      },
+      outline: {
+        trigger: {
+          _selected: {
+            color: "fg"
+          }
+        }
+      },
+      plain: {
+        trigger: {
+          _selected: {
+            color: "fg"
+          }
+        }
+      }
+    }
+  }
+});
+
+// src/theme/slot-recipes/index.ts
+var slotRecipes = {
+  menu: menuSlotRecipe,
+  tabs: tabsSlotRecipe
+};
+var colorsTokens = react.defineTokens.colors({
+  primary: {
+    contrast: { value: "{colors.gray.500}" },
+    default: { value: "{colors.yellow.100}" }
+  },
+  secondary: {
+    default: { value: "{colors.gray.500}" },
+    contrast: { value: "{colors.gray.300}" }
+  },
+  textPrimary: { value: "{colors.gray.50}" },
+  textSecondary: { value: "{colors.gray.300}" },
+  background: { value: "#0D0D0C" },
+  // ------------------------------------------
+  gray: {
+    "50": { value: "#F5F5F5" },
+    "100": { value: "#CFCCC9" },
+    "200": { value: "#AAA6A1" },
+    "300": { value: "#868079" },
+    "400": { value: "#5E5955" },
+    "500": { value: "#201F1D" },
+    "600": { value: "#151413" }
+  },
+  yellow: {
+    "50": { value: "#EED07C" },
+    "100": { value: "#FFC010" },
+    "150": { value: "#E3AF13" },
+    "200": { value: "#B68F40" },
+    "300": { value: "#F16517" },
+    "400": { value: "#B24F18" },
+    "500": { value: "#54372D" }
+  },
+  red: {
+    50: { value: "#EF9B8F" },
+    100: { value: "#F05D48" },
+    200: { value: "#F2290D" }
+  },
+  green: {
+    50: { value: "#8CEEB3" },
+    100: { value: "#00F48B" },
+    200: { value: "#00E55C" },
+    300: { value: "#00943B" }
+  },
+  blue: {
+    50: { value: "#90CDFA" },
+    100: { value: "#008EF4" },
+    200: { value: "#005DA0" }
+  }
+});
+var fontsTokens = react.defineTokens.fonts({
+  heading: { value: "Inter, sans-serif" },
+  body: { value: "Inter, sans-serif" }
+});
+
+// src/theme/tokens/index.ts
+var tokens = {
+  colors: colorsTokens,
+  fonts: fontsTokens
+};
+
+// src/theme/index.ts
+var config = react.defineConfig({
+  theme: {
+    tokens,
+    semanticTokens,
+    breakpoints: {
+      xs: "25em",
+      // 400px
+      sm: "48em",
+      // 768px
+      md: "64em",
+      // 1024px
+      lg: "80em",
+      // 1280px
+      xl: "90em"
+      // 1440px
+    },
+    recipes,
+    slotRecipes
+  },
+  globalCss: {
+    body: {
+      color: "textPrimary",
+      bg: "background",
+      minH: "100vh"
+    }
+  }
+});
+var theme = react.createSystem(react.defaultConfig, config);
+var theme_default = theme;
+
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function () { return react.Alert; }
+});
+Object.defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function () { return react.ButtonGroup; }
+});
+Object.defineProperty(exports, "Center", {
+  enumerable: true,
+  get: function () { return react.Center; }
+});
+Object.defineProperty(exports, "ChakraIcon", {
+  enumerable: true,
+  get: function () { return react.Icon; }
+});
+Object.defineProperty(exports, "ClientOnly", {
+  enumerable: true,
+  get: function () { return react.ClientOnly; }
+});
+Object.defineProperty(exports, "Field", {
+  enumerable: true,
+  get: function () { return react.Field; }
+});
+Object.defineProperty(exports, "FormatNumber", {
+  enumerable: true,
+  get: function () { return react.FormatNumber; }
+});
+Object.defineProperty(exports, "InputGroup", {
+  enumerable: true,
+  get: function () { return react.InputGroup; }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () { return react.Portal; }
+});
+Object.defineProperty(exports, "Spacer", {
+  enumerable: true,
+  get: function () { return react.Spacer; }
+});
+Object.defineProperty(exports, "Span", {
+  enumerable: true,
+  get: function () { return react.Span; }
+});
+Object.defineProperty(exports, "createIcon", {
+  enumerable: true,
+  get: function () { return react.createIcon; }
+});
+Object.defineProperty(exports, "createListCollection", {
+  enumerable: true,
+  get: function () { return react.createListCollection; }
+});
+Object.defineProperty(exports, "createToaster", {
+  enumerable: true,
+  get: function () { return react.createToaster; }
+});
+Object.defineProperty(exports, "useAccordion", {
+  enumerable: true,
+  get: function () { return react.useAccordion; }
+});
+Object.defineProperty(exports, "useAccordionContext", {
+  enumerable: true,
+  get: function () { return react.useAccordionContext; }
+});
+Object.defineProperty(exports, "useAccordionItemContext", {
+  enumerable: true,
+  get: function () { return react.useAccordionItemContext; }
+});
+Object.defineProperty(exports, "useClipboard", {
+  enumerable: true,
+  get: function () { return react.useClipboard; }
+});
+Object.defineProperty(exports, "useMediaQuery", {
+  enumerable: true,
+  get: function () { return react.useMediaQuery; }
+});
+Object.defineProperty(exports, "useSteps", {
+  enumerable: true,
+  get: function () { return react.useSteps; }
+});
+Object.defineProperty(exports, "useStepsContext", {
+  enumerable: true,
+  get: function () { return react.useStepsContext; }
+});
+Object.defineProperty(exports, "useStepsItemContext", {
+  enumerable: true,
+  get: function () { return react.useStepsItemContext; }
+});
+exports.Accordion = Accordion;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
+exports.Badge = Badge;
+exports.Box = box_default;
+exports.Breadcrumb = Breadcrumb;
+exports.Button = Button;
+exports.Card = card_default;
+exports.CheckIcon = CheckIcon;
+exports.Checkbox = checkbox_default;
+exports.Clipboard = Clipboard;
+exports.CloseButton = close_button_default;
+exports.CloseIcon = CloseIcon;
+exports.Combobox = Combobox;
+exports.Container = Container;
+exports.Dialog = Dialog;
+exports.Drawer = Drawer;
+exports.EmptyState = EmptyState;
+exports.Flex = flex_default;
+exports.Grid = Grid;
+exports.GridItem = GridItem;
+exports.HStack = HStack;
+exports.Heading = heading_default;
+exports.Icon = icon_default;
+exports.IconButton = icon_button_default;
+exports.Image = image_default;
+exports.Input = input_default;
+exports.Link = link_default;
+exports.LinkOverlay = link_overlay_default;
+exports.List = List;
+exports.Loader = loader_default;
+exports.Menu = Menu;
+exports.MoneyField = MoneyField;
+exports.Popover = Popover;
+exports.QrCode = QrCode;
+exports.Radio = radio_default;
+exports.RadioGroup = RadioGroup;
+exports.RhfCombobox = RhfCombobox;
+exports.RhfInput = RhfInput;
+exports.RhfMoneyField = RhfMoneyField;
+exports.Select = Select;
+exports.Separator = separator_default;
+exports.Skeleton = Skeleton;
+exports.SkeletonCircle = SkeletonCircle;
+exports.SkeletonText = SkeletonText;
+exports.Stack = Stack;
+exports.Steps = Steps;
+exports.Switch = switch_default;
+exports.Tabs = Tabs;
+exports.Text = text_default;
+exports.TextArea = TextArea;
+exports.TextMask = text_mask_default;
+exports.ThemeProvider = ThemeProvider;
+exports.Toast = Toast;
+exports.Tooltip = Tooltip;
+exports.VStack = VStack;
+exports.WalletIcon = WalletIcon;
+exports.theme = theme_default;
+exports.toaster = toaster;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map