// src/components/Root.tsx
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { Type } from "@sinclair/typebox";
import { implementRuntimeComponent } from "@subscan/widget-runtime";
import { jsx } from "react/jsx-runtime";
var Root_default = implementRuntimeComponent({
  version: "chakra_ui/v1",
  metadata: {
    name: "root",
    displayName: "Root",
    description: "chakra-ui provider",
    exampleProperties: {},
    annotations: {
      category: "Advance"
    }
  },
  spec: {
    properties: Type.Object({}),
    state: Type.Object({}),
    methods: {},
    slots: {
      root: {
        slotProps: Type.Object({})
      }
    },
    styleSlots: [],
    events: []
  }
})(({ slotsElements, elementRef }) => {
  return /* @__PURE__ */ jsx("div", {
    children: /* @__PURE__ */ jsx(ChakraProvider, {
      resetCSS: false,
      theme: extendTheme({
        initialColorMode: "dark",
        useSystemColorMode: false
      }),
      children: /* @__PURE__ */ jsx("div", {
        className: "chakraCSSReset",
        ref: elementRef,
        children: slotsElements.root ? slotsElements.root({}) : null
      })
    })
  });
});

// src/components/Button.tsx
import { useEffect, useRef } from "react";
import { css } from "@emotion/css";
import { Type as Type3 } from "@sinclair/typebox";
import { Button as BaseButton } from "@chakra-ui/react";
import {
  Text,
  TextPropertySpec,
  implementRuntimeComponent as implementRuntimeComponent2
} from "@subscan/widget-runtime";

// src/components/Types/ColorScheme.ts
import { Type as Type2 } from "@sinclair/typebox";
var getColorSchemePropertySpec = (options) => Type2.KeyOf(
  Type2.Object({
    whiteAlpha: Type2.String(),
    blackAlpha: Type2.String(),
    gray: Type2.String(),
    red: Type2.String(),
    orange: Type2.String(),
    yellow: Type2.String(),
    green: Type2.String(),
    teal: Type2.String(),
    blue: Type2.String(),
    cyan: Type2.String(),
    purple: Type2.String(),
    pink: Type2.String(),
    linkedin: Type2.String(),
    facebook: Type2.String(),
    messenger: Type2.String(),
    whatsapp: Type2.String(),
    twitter: Type2.String(),
    telegram: Type2.String()
  }),
  options
);

// src/components/constants/category.ts
var BASIC = "Basic";
var LAYOUT = "Layout";
var BACKGROUND = "Background";
var BORDER = "Border";
var APPEARANCE = "Appearance";
var BEHAVIOR = "Behavior";

// src/components/Button.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var StateSpec = Type3.Object({
  value: Type3.String()
});
var PropsSpec = Type3.Object({
  text: TextPropertySpec,
  isLoading: Type3.Boolean({
    title: "Loading",
    description: "Whether the button is in a loading state",
    category: BEHAVIOR
  }),
  colorScheme: getColorSchemePropertySpec({
    title: "Color Scheme",
    category: APPEARANCE
  })
});
var Button_default = implementRuntimeComponent2({
  version: "chakra_ui/v1",
  metadata: {
    name: "button",
    displayName: "Button",
    description: "chakra-ui button",
    exampleProperties: {
      text: {
        raw: "text",
        format: "plain"
      },
      isLoading: false,
      colorScheme: "blue"
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec,
    state: StateSpec,
    methods: {
      click: void 0
    },
    slots: {},
    styleSlots: ["content"],
    events: ["onClick"]
  }
})(
  ({
    text,
    mergeState,
    subscribeMethods,
    callbackMap: callbacks,
    colorScheme,
    isLoading,
    customStyle,
    getElement
  }) => {
    useEffect(() => {
      mergeState({ value: text.raw });
    }, [mergeState, text.raw]);
    const ref = useRef(null);
    useEffect(() => {
      subscribeMethods({
        click() {
          ref.current?.click();
        }
      });
    }, [subscribeMethods]);
    useEffect(() => {
      if (getElement && ref.current) {
        getElement(ref.current);
      }
    }, [getElement]);
    return /* @__PURE__ */ jsx2(BaseButton, {
      className: css`
          ${customStyle?.content}
        `,
      ...{ colorScheme, isLoading },
      ref,
      onClick: callbacks?.onClick,
      children: /* @__PURE__ */ jsx2(Text, {
        value: text
      })
    });
  }
);

// src/components/Tabs.tsx
import { useEffect as useEffect2, useState } from "react";
import { css as css2 } from "@emotion/css";
import {
  Tabs as BaseTabs,
  TabList,
  Tab,
  TabPanels,
  TabPanel,
  Text as Text2
} from "@chakra-ui/react";
import { Type as Type4 } from "@sinclair/typebox";
import { implementRuntimeComponent as implementRuntimeComponent3 } from "@subscan/widget-runtime";
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var StateSpec2 = Type4.Object({
  selectedTabIndex: Type4.Number()
});
var PropsSpec2 = Type4.Object({
  tabNames: Type4.Array(Type4.String(), {
    title: "Tab Names",
    category: BASIC
  }),
  initialSelectedTabIndex: Type4.Number({
    title: "Default Selected Tab Index",
    category: BASIC
  })
});
var Tabs_default = implementRuntimeComponent3({
  version: "chakra_ui/v1",
  metadata: {
    name: "tabs",
    displayName: "Tabs",
    description: "chakra-ui tabs",
    exampleProperties: {
      tabNames: [],
      initialSelectedTabIndex: 0
    },
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: PropsSpec2,
    state: StateSpec2,
    methods: {},
    slots: {
      content: {
        slotProps: Type4.Object({
          tabIndex: Type4.Number()
        })
      }
    },
    styleSlots: ["tabItem", "tabContent"],
    events: []
  }
})((props) => {
  const {
    tabNames,
    mergeState,
    initialSelectedTabIndex,
    customStyle,
    slotsElements,
    elementRef
  } = props;
  const [selectedTabIndex, setSelectedTabIndex] = useState(initialSelectedTabIndex ?? 0);
  useEffect2(() => {
    mergeState({ selectedTabIndex });
  }, [mergeState, selectedTabIndex]);
  const placeholder = /* @__PURE__ */ jsx3(Text2, {
    color: "gray",
    children: "Slot content is empty.Please drag component to this slot."
  });
  return /* @__PURE__ */ jsxs(BaseTabs, {
    defaultIndex: initialSelectedTabIndex,
    onChange: (idx) => setSelectedTabIndex(idx),
    ref: elementRef,
    children: [
      /* @__PURE__ */ jsx3(TabList, {
        children: tabNames.map((name, idx) => /* @__PURE__ */ jsx3(Tab, {
          className: css2`
              ${customStyle?.tabItem}
            `,
          children: name
        }, idx))
      }),
      /* @__PURE__ */ jsx3(TabPanels, {
        children: tabNames.map((_, idx) => {
          return /* @__PURE__ */ jsx3(TabPanel, {
            className: css2`
                ${customStyle?.tabContent}
              `,
            children: slotsElements?.content?.({ tabIndex: idx }, placeholder, `content_${idx}`)
          }, idx);
        })
      })
    ]
  });
});

// src/components/Table/Table.tsx
import { useCallback, useEffect as useEffect3, useMemo, useState as useState2 } from "react";
import { isArray, sortBy } from "lodash";
import {
  Table as BaseTable,
  Thead,
  Tr,
  Th,
  Tbody,
  Checkbox,
  Td as Td2,
  Box as Box2,
  Spinner
} from "@chakra-ui/react";

// src/components/Table/Pagination.tsx
import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
import { Box, Button, IconButton } from "@chakra-ui/react";
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
var TablePagination = (props) => {
  const { pageNumber, currentPage, onChange } = props;
  const pageEles = Array(pageNumber).fill(1).map((_, i) => {
    const onClick = () => onChange(i);
    return /* @__PURE__ */ jsx4(Button, {
      margin: "1",
      disabled: currentPage === i,
      onClick,
      children: i + 1
    }, i);
  });
  return /* @__PURE__ */ jsxs2(Box, {
    margin: "4",
    children: [
      /* @__PURE__ */ jsx4(IconButton, {
        "aria-label": "prev",
        icon: /* @__PURE__ */ jsx4(ChevronLeftIcon, {}),
        disabled: currentPage === 0,
        onClick: () => onChange(Math.max(0, currentPage - 1))
      }),
      pageEles,
      /* @__PURE__ */ jsx4(IconButton, {
        "aria-label": "next",
        icon: /* @__PURE__ */ jsx4(ChevronRightIcon, {}),
        disabled: currentPage === pageNumber - 1,
        onClick: () => onChange(Math.min(pageNumber - 1, currentPage + 1))
      })
    ]
  });
};

// src/components/Table/TableTd.tsx
import { Button as Button2, Link, Td, Text as Text3 } from "@chakra-ui/react";
import {
  LIST_ITEM_EXP,
  LIST_ITEM_INDEX_EXP,
  ModuleRenderer,
  ExpressionError,
  ImplWrapper,
  formatSlotKey
} from "@subscan/widget-runtime";
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
var TableTd = (props) => {
  const {
    item,
    index,
    component,
    column,
    rawColumns,
    onClickItem,
    services,
    app,
    slotsElements
  } = props;
  const evalOptions = {
    evalListItem: true,
    scopeObject: {
      [LIST_ITEM_EXP]: item
    }
  };
  let value = item[column.key];
  let buttonConfig = column.buttonConfig;
  if (column.displayValue) {
    const result = services.stateManager.deepEval(column.displayValue, evalOptions);
    value = result instanceof ExpressionError ? "" : result;
  }
  if (column.buttonConfig) {
    buttonConfig = services.stateManager.deepEval(column.buttonConfig, evalOptions);
  }
  let content = value;
  switch (column.type) {
    case "text":
      content = /* @__PURE__ */ jsx5(Text3, {
        whiteSpace: "pre-wrap",
        children: value
      });
      break;
    case "image":
      content = /* @__PURE__ */ jsx5("img", {
        src: value
      });
      break;
    case "link":
      content = /* @__PURE__ */ jsx5(Link, {
        href: value,
        color: "blue.600",
        children: value
      });
      break;
    case "button":
      const onClick = () => {
        onClickItem();
        const evaledColumns = services.stateManager.deepEval(
          rawColumns,
          evalOptions
        );
        evaledColumns[index].buttonConfig.handlers.forEach((evaledHandler) => {
          services.apiService.send("uiMethod", {
            componentId: evaledHandler.componentId,
            name: evaledHandler.method.name,
            parameters: evaledHandler.method.parameters
          });
        });
      };
      content = /* @__PURE__ */ jsx5(Button2, {
        onClick,
        children: buttonConfig.text
      });
      break;
    case "module":
      content = /* @__PURE__ */ jsx5(ModuleRenderer, {
        id: column.module.id,
        type: column.module.type,
        properties: column.module.properties,
        handlers: column.module.handlers,
        services,
        evalScope: {
          [LIST_ITEM_EXP]: item,
          [LIST_ITEM_INDEX_EXP]: index
        },
        app
      });
      break;
    case "component":
      const childrenSchema = app.spec.components.filter((c) => {
        return c.traits.find(
          (t) => t.type === "core/v1/slot" && t.properties.container.id === component.id
        );
      });
      const childSchema = childrenSchema[column.componentSlotIndex];
      if (!childSchema) {
        return /* @__PURE__ */ jsxs3("div", {
          children: [
            "Cannot find child with index ",
            column.componentSlotIndex,
            " in slot."
          ]
        });
      }
      const _childrenSchema = {
        ...childSchema,
        id: `${component.id}_${childSchema.id}_${index}`
      };
      slotsElements.content?.({
        [LIST_ITEM_EXP]: item,
        [LIST_ITEM_INDEX_EXP]: index
      });
      content = /* @__PURE__ */ jsx5(ImplWrapper, {
        component: _childrenSchema,
        app,
        services,
        childrenMap: {},
        isInModule: true,
        evalListItem: true,
        slotContext: {
          renderSet: /* @__PURE__ */ new Set(),
          slotKey: formatSlotKey(_childrenSchema.id, "td", `td_${index}`)
        }
      }, _childrenSchema.id);
      break;
  }
  return /* @__PURE__ */ jsx5(Td, {
    paddingX: "4",
    paddingY: "2",
    children: content
  });
};

// src/components/Table/spec.ts
import { Type as Type6 } from "@sinclair/typebox";
import { implementRuntimeComponent as implementRuntimeComponent4 } from "@subscan/widget-runtime";

// src/components/Table/TableTypes.ts
import { Type as Type5 } from "@sinclair/typebox";
import {
  ModuleRenderSpec,
  EventCallBackHandlerSpec,
  LIST_ITEM_EXP as LIST_ITEM_EXP2,
  LIST_ITEM_INDEX_EXP as LIST_ITEM_INDEX_EXP2
} from "@subscan/widget-shared";
var MajorKeyPropertySpec = Type5.String({
  title: "Major key",
  description: "The key of the data item object to use as the major key",
  category: BASIC
});
var RowsPerPagePropertySpec = Type5.Number({
  title: "Per Page Number",
  category: BEHAVIOR
});
var DataPropertySpec = Type5.Array(Type5.Any(), {
  title: "Data",
  category: BASIC
});
var TableSizePropertySpec = Type5.KeyOf(
  Type5.Object({
    sm: Type5.String(),
    md: Type5.String(),
    lg: Type5.String()
  }),
  {
    title: "Size",
    category: APPEARANCE
  }
);
var TdTypeSpec = Type5.KeyOf(
  Type5.Object({
    text: Type5.String(),
    component: Type5.String(),
    image: Type5.String(),
    link: Type5.String(),
    button: Type5.String(),
    module: Type5.String()
  }),
  {
    title: "TD Type",
    category: APPEARANCE
  }
);
var ColumnSpec = Type5.Object(
  {
    key: Type5.String({
      title: "Key"
    }),
    title: Type5.String({
      title: "Title"
    }),
    displayValue: Type5.String({
      title: "Display value"
    }),
    type: TdTypeSpec,
    componentSlotIndex: Type5.Number({
      title: "Component Slot Index",
      conditions: [
        {
          key: "type",
          value: "component"
        }
      ]
    }),
    buttonConfig: Type5.Object(
      {
        text: Type5.String({
          title: "Button Text"
        }),
        handlers: Type5.Array(EventCallBackHandlerSpec, {
          title: "Button Handlers"
        })
      },
      {
        title: "Button Config",
        conditions: [
          {
            key: "type",
            value: "button"
          }
        ]
      }
    ),
    module: { ...ModuleRenderSpec, conditions: [{ key: "type", value: "module" }] }
  },
  {
    title: "Column"
  }
);
var ColumnsPropertySpec = Type5.Array(ColumnSpec, {
  title: "Columns",
  category: BASIC,
  widget: "core/v1/array",
  widgetOptions: {
    displayedKeys: ["title"]
  }
});
var IsMultiSelectPropertySpec = Type5.Boolean({
  title: "Enable Multiple Select",
  category: BEHAVIOR
});
var TableStateSpec = Type5.Object({
  selectedItem: Type5.Optional(Type5.Object({})),
  selectedItems: Type5.Array(Type5.Object({}))
});
var ContentSlotPropsSpec = Type5.Object({
  [LIST_ITEM_EXP2]: Type5.Any(),
  [LIST_ITEM_INDEX_EXP2]: Type5.Number()
});

// src/components/Table/spec.ts
var PropsSpec3 = Type6.Object({
  data: DataPropertySpec,
  majorKey: MajorKeyPropertySpec,
  columns: ColumnsPropertySpec,
  isMultiSelect: IsMultiSelectPropertySpec,
  rowsPerPage: RowsPerPagePropertySpec,
  size: TableSizePropertySpec
});
var implementTable = implementRuntimeComponent4({
  version: "chakra_ui/v1",
  metadata: {
    name: "table",
    displayName: "Table",
    description: "chakra-ui table",
    exampleProperties: {
      data: [
        {
          id: "1",
          name: "Bowen Tan"
        }
      ],
      columns: [
        {
          key: "name",
          title: "Name",
          type: "text",
          displayValue: "",
          buttonConfig: {
            handlers: []
          }
        }
      ],
      majorKey: "id",
      rowsPerPage: 5,
      isMultiSelect: false,
      size: "md"
    },
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: PropsSpec3,
    state: TableStateSpec,
    methods: {},
    slots: {
      content: {
        slotProps: ContentSlotPropsSpec
      }
    },
    styleSlots: [],
    events: []
  }
});

// src/components/Table/Table.tsx
import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var TableImpl = implementTable(
  ({
    component,
    data,
    majorKey,
    rowsPerPage,
    size,
    columns,
    isMultiSelect,
    mergeState,
    services,
    app,
    elementRef,
    slotsElements
  }) => {
    const [selectedItem, setSelectedItem] = useState2();
    const [selectedItems, setSelectedItems] = useState2([]);
    const [currentPage, setCurrentPage] = useState2(0);
    const [sortRule, setSortRule] = useState2();
    const pageNumber = Math.ceil((data?.length || 0) / rowsPerPage);
    const updateSelectedItems = useCallback(
      (items) => {
        setSelectedItems(items);
        mergeState({ selectedItems: items });
      },
      [mergeState]
    );
    const updateSelectedItem = useCallback(
      (item) => {
        setSelectedItem(item);
        mergeState({ selectedItem: item });
      },
      [mergeState]
    );
    useEffect3(() => {
      updateSelectedItems([]);
      updateSelectedItem(void 0);
      setCurrentPage(0);
      setSortRule(void 0);
    }, [data, updateSelectedItem, updateSelectedItems]);
    const sortedData = useMemo(() => {
      if (!isArray(data))
        return [];
      if (!sortRule)
        return data;
      const sorted = sortBy(data, sortRule.key);
      return sortRule.desc ? sorted.reverse() : sorted;
    }, [sortRule, data]);
    const currentPageData = sortedData?.slice(
      currentPage * rowsPerPage,
      currentPage * rowsPerPage + rowsPerPage
    );
    function isItemSelected(target) {
      if (isMultiSelect) {
        return selectedItems.findIndex((item) => item[majorKey] === target[majorKey]) > -1;
      }
      return selectedItem && selectedItem[majorKey] === target[majorKey];
    }
    function selectItem(item) {
      if (isMultiSelect) {
        let newSelectedItems;
        if (isItemSelected(item)) {
          newSelectedItems = selectedItems.filter(
            (selectedItem2) => selectedItem2[majorKey] !== item[majorKey]
          );
        } else {
          newSelectedItems = selectedItems.concat(item);
        }
        updateSelectedItems(newSelectedItems);
      }
      updateSelectedItem(item);
    }
    const allCheckbox = useMemo(() => {
      if (!data)
        return null;
      const isAllChecked = isMultiSelect && selectedItems.length === data.length;
      const isIndeterminate = selectedItems.length > 0 && selectedItems.length < data.length;
      const onChange = (e) => {
        if (e.target.checked) {
          updateSelectedItems(data);
        } else {
          updateSelectedItems([]);
        }
      };
      return /* @__PURE__ */ jsx6(Th, {
        paddingX: "4",
        paddingY: "2",
        width: "10",
        children: /* @__PURE__ */ jsx6(Checkbox, {
          size: "lg",
          isIndeterminate,
          checked: isAllChecked,
          onChange
        })
      }, "allCheckbox");
    }, [data, isMultiSelect, selectedItems.length, updateSelectedItems]);
    const tableContent = /* @__PURE__ */ jsxs4(Fragment, {
      children: [
        /* @__PURE__ */ jsxs4(BaseTable, {
          size: size || "md",
          children: [
            /* @__PURE__ */ jsx6(Thead, {
              children: /* @__PURE__ */ jsxs4(Tr, {
                height: "10",
                children: [
                  isMultiSelect ? allCheckbox : void 0,
                  columns.map(({ title, key }) => {
                    let sortArrow;
                    if (sortRule && sortRule.key === key) {
                      sortArrow = sortRule.desc ? "\u2B07\uFE0F" : "\u2B06\uFE0F";
                    }
                    const onClick = () => {
                      if (sortRule && sortRule.key === key) {
                        setSortRule({ key, desc: !sortRule.desc });
                      } else {
                        setSortRule({ key, desc: true });
                      }
                    };
                    return /* @__PURE__ */ jsxs4(Th, {
                      paddingX: "4",
                      paddingY: "2",
                      onClick,
                      children: [
                        title,
                        sortArrow
                      ]
                    }, key);
                  })
                ]
              })
            }),
            /* @__PURE__ */ jsx6(Tbody, {
              children: currentPageData?.map((item, i) => {
                const isSelected = isItemSelected(item);
                let onClickToggle = true;
                const onClickCheckbox = (e) => {
                  if (onClickToggle) {
                    e.stopPropagation();
                  }
                  onClickToggle = !onClickToggle;
                };
                const checkbox = /* @__PURE__ */ jsx6(Td2, {
                  paddingX: "4",
                  paddingY: "2",
                  width: "10",
                  onClick: onClickCheckbox,
                  children: /* @__PURE__ */ jsx6(Checkbox, {
                    size: "lg",
                    isChecked: isSelected
                  })
                }, "$checkbox");
                return /* @__PURE__ */ jsxs4(Tr, {
                  height: "10",
                  bgColor: isSelected ? "yellow.100" : void 0,
                  onClick: () => {
                    selectItem(item);
                  },
                  children: [
                    isMultiSelect ? checkbox : void 0,
                    columns.map((column) => /* @__PURE__ */ jsx6(TableTd, {
                      index: i,
                      component,
                      item,
                      onClickItem: () => selectItem(item),
                      rawColumns: component.properties.columns,
                      column,
                      services,
                      app,
                      slotsElements
                    }, column.key))
                  ]
                }, item[majorKey]);
              })
            })
          ]
        }),
        /* @__PURE__ */ jsx6(TablePagination, {
          pageNumber,
          currentPage,
          onChange: (v) => setCurrentPage(v)
        })
      ]
    });
    const loadingSpinner = /* @__PURE__ */ jsx6(Box2, {
      display: "flex",
      height: "full",
      children: /* @__PURE__ */ jsx6(Spinner, {
        size: "xl",
        margin: "auto"
      })
    });
    return /* @__PURE__ */ jsx6(Box2, {
      width: "full",
      height: "full",
      background: "white",
      border: "1px solid",
      borderColor: "gray.200",
      borderRadius: "base",
      overflow: "auto",
      ref: elementRef,
      children: !data ? loadingSpinner : tableContent
    });
  }
);

// src/components/Table/index.ts
var Table_default = TableImpl;

// src/components/Input.tsx
import React2, { useEffect as useEffect4 } from "react";
import {
  Input as BaseInput,
  InputGroup,
  InputLeftAddon,
  InputLeftElement,
  InputRightAddon,
  InputRightElement
} from "@chakra-ui/react";
import { Type as Type7 } from "@sinclair/typebox";
import { implementRuntimeComponent as implementRuntimeComponent5 } from "@subscan/widget-runtime";
import { css as css3 } from "@emotion/css";
import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
var getAppendElementPropertySpec = (options) => Type7.Optional(
  Type7.Union(
    [
      Type7.Object({
        type: Type7.KeyOf(Type7.Object({ addon: Type7.String() }), {
          title: "Type"
        }),
        children: Type7.String({
          title: "Content"
        })
      }),
      Type7.Object({
        type: Type7.KeyOf(Type7.Object({ element: Type7.String() }), {
          title: "Type"
        }),
        children: Type7.String({
          title: "Content"
        }),
        fontSize: Type7.String({
          title: "Font Size"
        }),
        color: Type7.String({
          title: "Color"
        })
      })
    ],
    options
  )
);
var StateSpec3 = Type7.Object({
  value: Type7.String()
});
var PropsSpec4 = Type7.Object({
  defaultValue: Type7.String({
    title: "Default Value",
    category: BASIC
  }),
  placeholder: Type7.String({
    title: "Placeholder",
    category: BASIC
  }),
  isDisabled: Type7.Boolean({
    title: "Disabled",
    category: BEHAVIOR
  }),
  isRequired: Type7.Boolean({
    title: "Required",
    category: BEHAVIOR
  }),
  variant: Type7.KeyOf(
    Type7.Object({
      outline: Type7.String(),
      unstyled: Type7.String(),
      filled: Type7.String(),
      flushed: Type7.String()
    }),
    {
      title: "Variant",
      category: APPEARANCE
    }
  ),
  size: Type7.KeyOf(
    Type7.Object({
      sm: Type7.String(),
      md: Type7.String(),
      lg: Type7.String(),
      xs: Type7.String()
    }),
    {
      title: "Size",
      category: APPEARANCE
    }
  ),
  left: getAppendElementPropertySpec({
    title: "Left Append",
    category: APPEARANCE
  }),
  right: getAppendElementPropertySpec({
    title: "Right Append",
    category: APPEARANCE
  }),
  focusBorderColor: Type7.String({
    title: "Border Color Of Focusing",
    category: APPEARANCE
  })
});
var Input_default = implementRuntimeComponent5({
  version: "chakra_ui/v1",
  metadata: {
    name: "input",
    displayName: "Input",
    description: "chakra_ui input",
    exampleProperties: {
      variant: "outline",
      placeholder: "Please input value",
      size: "md",
      focusBorderColor: "",
      isDisabled: false,
      isRequired: false,
      defaultValue: ""
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec4,
    state: StateSpec3,
    methods: {
      setInputValue: Type7.Object({
        value: Type7.String()
      }),
      resetInputValue: void 0
    },
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(
  ({
    variant,
    placeholder,
    size,
    focusBorderColor,
    isDisabled,
    isRequired,
    left,
    right,
    mergeState,
    subscribeMethods,
    defaultValue,
    customStyle,
    elementRef
  }) => {
    const [value, setValue] = React2.useState(defaultValue || "");
    const onChange = (event) => setValue(event.target.value);
    useEffect4(() => {
      mergeState({ value });
    }, [mergeState, value]);
    useEffect4(() => {
      setValue(defaultValue || "");
    }, [defaultValue]);
    useEffect4(() => {
      subscribeMethods({
        setInputValue({ value: value2 }) {
          setValue(value2);
        },
        resetInputValue() {
          setValue(defaultValue || "");
        }
      });
    }, [defaultValue, subscribeMethods]);
    return /* @__PURE__ */ jsxs5(InputGroup, {
      size,
      background: "white",
      ref: elementRef,
      children: [
        left ? left.type === "addon" ? /* @__PURE__ */ jsx7(InputLeftAddon, {
          children: left.children
        }) : /* @__PURE__ */ jsx7(InputLeftElement, {
          fontSize: left.fontSize,
          color: left.color,
          children: left.children
        }) : /* @__PURE__ */ jsx7(Fragment2, {}),
        /* @__PURE__ */ jsx7(BaseInput, {
          value,
          variant,
          placeholder,
          focusBorderColor,
          isDisabled,
          isRequired,
          onChange,
          className: css3`
            ${customStyle?.content}
          `
        }),
        right ? right.type === "addon" ? /* @__PURE__ */ jsx7(InputRightAddon, {
          children: right.children
        }) : /* @__PURE__ */ jsx7(InputRightElement, {
          fontSize: right.fontSize,
          color: right.color,
          children: right.children
        }) : /* @__PURE__ */ jsx7(Fragment2, {})
      ]
    });
  }
);

// src/components/Box.tsx
import { Type as Type8 } from "@sinclair/typebox";
import { Box as BaseBox } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent6 } from "@subscan/widget-runtime";
import { pick } from "lodash";
import { css as css4 } from "@emotion/css";
import { jsx as jsx8 } from "react/jsx-runtime";
var StyleSpec = Type8.Partial(
  Type8.Object({
    w: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Width",
      category: LAYOUT
    }),
    h: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Height",
      category: LAYOUT
    }),
    minW: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Min Width",
      category: LAYOUT
    }),
    maxW: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Max Width",
      category: LAYOUT
    }),
    minH: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Min Height",
      category: LAYOUT
    }),
    maxH: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Max Height",
      category: LAYOUT
    }),
    m: Type8.Union([Type8.String(), Type8.Number(), Type8.Array(Type8.Number())], {
      title: "Margin",
      category: LAYOUT
    }),
    p: Type8.Union([Type8.String(), Type8.Number(), Type8.Array(Type8.Number())], {
      title: "Padding",
      category: LAYOUT
    }),
    overflow: Type8.String({
      title: "Overflow",
      category: LAYOUT
    }),
    bg: Type8.String({
      title: "Background",
      category: BACKGROUND
    }),
    bgColor: Type8.String({
      title: "Background Color",
      category: BACKGROUND
    }),
    opacity: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Opacity",
      category: BACKGROUND
    }),
    bgGradient: Type8.String({
      title: "Background Gradient",
      category: BACKGROUND
    }),
    bgClip: Type8.String({
      title: "Background Clip",
      category: BACKGROUND
    }),
    bgImage: Type8.String({
      title: "Background Image",
      category: BACKGROUND
    }),
    bgSize: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Background Size",
      category: BACKGROUND
    }),
    bgPosition: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Background Position",
      category: BACKGROUND
    }),
    bgRepeat: Type8.String({
      title: "Background Repeat",
      category: BACKGROUND
    }),
    bgAttachment: Type8.String({
      title: "Background Attachment",
      category: BACKGROUND
    }),
    boxShadow: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Box Shadow",
      category: BACKGROUND
    }),
    border: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Border",
      category: BORDER
    }),
    borderRadius: Type8.Union([Type8.String(), Type8.Number()], {
      title: "Border Radius",
      category: BORDER
    })
  })
);
var StyleProps = Object.keys(StyleSpec.properties);
var Box_default = implementRuntimeComponent6({
  version: "chakra_ui/v1",
  metadata: {
    name: "box",
    displayName: "Box",
    description: "chakra-ui box",
    exampleProperties: {
      w: 0,
      h: 0,
      minW: "",
      maxW: "",
      minH: "",
      maxH: "",
      m: "",
      p: "",
      overflow: "",
      bg: "",
      bgColor: "",
      opacity: "",
      bgGradient: "",
      bgClip: "",
      bgImage: "",
      bgSize: "",
      bgPosition: "",
      bgRepeat: "",
      bgAttachment: "",
      boxShadow: "",
      border: "1px solid black",
      borderRadius: ""
    },
    annotations: {
      category: LAYOUT
    }
  },
  spec: {
    properties: StyleSpec,
    state: Type8.Object({}),
    methods: {},
    slots: {
      content: { slotProps: Type8.Object({}) }
    },
    styleSlots: ["content"],
    events: []
  }
})(({ customStyle, slotsElements, elementRef, ...restProps }) => {
  const styleProps = pick(restProps, StyleProps);
  return /* @__PURE__ */ jsx8(BaseBox, {
    width: "full",
    height: "full",
    background: "white",
    border: "1px solid",
    borderColor: "gray.200",
    borderRadius: "base",
    ...styleProps,
    className: css4`
        ${customStyle?.content}
      `,
    ref: elementRef,
    children: slotsElements.content ? slotsElements.content({}) : null
  });
});

// src/components/Divider.tsx
import { Divider } from "@chakra-ui/react";
import { css as css5 } from "@emotion/css";
import { Type as Type9 } from "@sinclair/typebox";
import { implementRuntimeComponent as implementRuntimeComponent7 } from "@subscan/widget-runtime";
import { jsx as jsx9 } from "react/jsx-runtime";
var Divider_default = implementRuntimeComponent7({
  version: "chakra_ui/v1",
  metadata: {
    name: "divider",
    displayName: "Divider",
    description: "chakra-ui divider",
    exampleProperties: {},
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: Type9.Object({}),
    state: Type9.Object({}),
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(({ customStyle, elementRef }) => {
  return /* @__PURE__ */ jsx9(Divider, {
    className: css5`
        ${customStyle?.content}
      `,
    ref: elementRef
  });
});

// src/components/Form/FormControl.tsx
import { useEffect as useEffect5, useMemo as useMemo2, useState as useState3 } from "react";
import { first } from "lodash";
import { Type as Type10 } from "@sinclair/typebox";
import {
  FormControl,
  FormErrorMessage,
  FormHelperText,
  FormLabel,
  HStack,
  Text as Text4
} from "@chakra-ui/react";
import { css as css6 } from "@emotion/css";
import { implementRuntimeComponent as implementRuntimeComponent8, watch } from "@subscan/widget-runtime";
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
var FormItemCSS = {
  flex: "0 0 auto",
  width: "66%"
};
var PropsSpec5 = Type10.Object({
  label: Type10.String({
    title: "Label",
    category: BASIC
  }),
  fieldName: Type10.String({
    title: "Field Name",
    category: BASIC
  }),
  helperText: Type10.String({
    title: "Helper Text",
    category: BASIC
  }),
  isRequired: Type10.Boolean({
    title: "Required",
    category: BEHAVIOR
  })
});
var FormControl_default = implementRuntimeComponent8({
  version: "chakra_ui/v1",
  metadata: {
    name: "formControl",
    displayName: "Form Control",
    description: "chakra-ui formControl",
    exampleProperties: {
      label: "name",
      fieldName: "name",
      isRequired: false,
      helperText: ""
    },
    annotations: {
      category: "Layout"
    }
  },
  spec: {
    properties: PropsSpec5,
    state: Type10.Object({
      inputId: Type10.String(),
      fieldName: Type10.String(),
      isInvalid: Type10.Boolean(),
      value: Type10.Any()
    }),
    methods: {},
    slots: {
      content: { slotProps: Type10.Object({}) }
    },
    styleSlots: ["content"],
    events: []
  }
})(
  ({
    label,
    fieldName,
    isRequired,
    helperText,
    mergeState,
    services,
    customStyle,
    slotsElements,
    childrenMap,
    component,
    elementRef
  }) => {
    const [inputValue, setInputValue] = useState3("");
    const [hideInvalid, setHideInvalid] = useState3(true);
    const inputId = useMemo2(
      () => first(childrenMap[component.id]?.content)?.id || "",
      [component.id, childrenMap]
    );
    const [validResult, setValidResult] = useState3({
      isInvalid: false,
      errorMsg: ""
    });
    const { isInvalid, errorMsg } = validResult;
    useEffect5(() => {
      if (!inputId)
        return;
      const stop = watch(
        () => {
          const inputState = services.stateManager.store[inputId];
          if (!inputState)
            return "";
          if (inputState.checked !== void 0) {
            return inputState.checked;
          } else {
            return inputState.value;
          }
        },
        (newV) => {
          setInputValue(newV);
        }
      );
      setInputValue(services.stateManager.store[inputId].value);
      return stop;
    }, [inputId, services.stateManager.store, setInputValue]);
    useEffect5(() => {
      if (!inputId)
        return;
      const stop = watch(
        () => {
          return services.stateManager.store[inputId]?.validResult;
        },
        (newV) => {
          setValidResult(newV);
        }
      );
      if (services.stateManager.store[inputId]?.validResult) {
        setValidResult(services.stateManager.store[inputId].validResult);
      }
      return stop;
    }, [inputId, services.stateManager.store, setValidResult]);
    useEffect5(() => {
      if (!inputId)
        return;
      if (inputValue) {
        setHideInvalid(false);
      }
      mergeState({
        inputId,
        fieldName,
        isInvalid: !!(isInvalid || !inputValue && isRequired),
        value: inputValue
      });
    }, [inputId, fieldName, isInvalid, isRequired, inputValue, mergeState]);
    const placeholder = /* @__PURE__ */ jsx10(Text4, {
      color: "gray.200",
      children: "Please Add Input Here"
    });
    const slotView = slotsElements.content ? slotsElements.content({}) : null;
    return /* @__PURE__ */ jsxs6(FormControl, {
      isRequired,
      isInvalid: !hideInvalid && (isInvalid || !inputValue && isRequired),
      display: "flex",
      flexDirection: "column",
      alignItems: "end",
      className: css6`
          ${customStyle?.content}
        `,
      ref: elementRef,
      children: [
        /* @__PURE__ */ jsxs6(HStack, {
          width: "full",
          children: [
            /* @__PURE__ */ jsx10(FormLabel, {
              flex: "0 0 auto",
              width: "33%",
              margin: "auto 0",
              children: label
            }),
            inputId ? slotView : placeholder
          ]
        }),
        errorMsg ? /* @__PURE__ */ jsx10(FormErrorMessage, {
          ...FormItemCSS,
          children: errorMsg
        }) : void 0,
        helperText ? /* @__PURE__ */ jsx10(FormHelperText, {
          ...FormItemCSS,
          children: helperText
        }) : void 0
      ]
    });
  }
);

// src/components/Form/Form.tsx
import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
import { css as css7 } from "@emotion/css";
import { Type as Type11 } from "@sinclair/typebox";
import { Button as Button3, VStack } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent9, watch as watch2 } from "@subscan/widget-runtime";
import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
var PropsSpec6 = Type11.Object({
  hideSubmit: Type11.Boolean({
    title: "Hide Submit",
    category: BEHAVIOR
  })
});
var Form_default = implementRuntimeComponent9({
  version: "chakra_ui/v1",
  metadata: {
    name: "form",
    displayName: "Form",
    description: "chakra-ui form",
    exampleProperties: {
      hideSubmit: false
    },
    annotations: {
      category: "Layout"
    }
  },
  spec: {
    properties: PropsSpec6,
    state: Type11.Object({
      data: Type11.Any(),
      disableSubmit: Type11.Boolean()
    }),
    methods: {
      resetForm: void 0
    },
    slots: {
      content: { slotProps: Type11.Object({}) }
    },
    styleSlots: ["content"],
    events: ["onSubmit"]
  }
})(
  ({
    mergeState,
    subscribeMethods,
    hideSubmit,
    callbackMap,
    services,
    customStyle,
    slotsElements,
    childrenMap,
    component,
    elementRef
  }) => {
    const [invalidArray, setInvalidArray] = useState4([]);
    const [isFormInvalid, setIsFormInvalid] = useState4(false);
    const formDataRef = useRef2({});
    const formControlIds = useMemo3(() => {
      return childrenMap[component.id]?.content.map((slot) => {
        return slot.id;
      }) || [];
    }, [component.id, childrenMap]);
    useEffect6(() => {
      setInvalidArray(
        formControlIds.map((fcid) => {
          return services.stateManager.store[fcid].isInvalid;
        })
      );
    }, [formControlIds, services.stateManager.store]);
    useEffect6(() => {
      const disable = invalidArray.some((v) => v);
      setIsFormInvalid(disable);
      mergeState({
        disableSubmit: disable
      });
    }, [invalidArray, mergeState]);
    useEffect6(() => {
      subscribeMethods({
        resetForm() {
          formControlIds.forEach((fcId) => {
            const inputId = services.stateManager.store[fcId].inputId;
            services.apiService.send("uiMethod", {
              componentId: inputId,
              name: "resetInputValue"
            });
          });
        }
      });
    }, [
      formControlIds,
      services.apiService,
      services.stateManager.store,
      subscribeMethods
    ]);
    useEffect6(() => {
      const stops = [];
      formControlIds.forEach((fcId, i) => {
        let stop = watch2(
          () => {
            return services.stateManager.store[fcId].isInvalid;
          },
          (newV) => {
            setInvalidArray((oldValidArray) => {
              const newValidArray = [...oldValidArray];
              newValidArray[i] = newV;
              return newValidArray;
            });
          }
        );
        stops.push(stop);
        stop = watch2(
          () => {
            return services.stateManager.store[fcId].value;
          },
          (newV) => {
            const fcState = services.stateManager.store[fcId];
            formDataRef.current[fcState.fieldName] = newV;
            mergeState({ data: { ...formDataRef.current } });
          }
        );
        stops.push(stop);
      });
      return () => {
        stops.forEach((s) => {
          s();
        });
      };
    }, [formControlIds, mergeState, services.stateManager.store]);
    const onSubmit = () => {
      callbackMap?.onSubmit();
    };
    return /* @__PURE__ */ jsxs7(VStack, {
      width: "full",
      height: "full",
      padding: "4",
      background: "white",
      border: "1px solid",
      borderColor: "gray.200",
      borderRadius: "4",
      spacing: "5",
      className: css7`
          ${customStyle?.content}
        `,
      ref: elementRef,
      children: [
        slotsElements.content ? slotsElements.content({}) : null,
        hideSubmit ? void 0 : /* @__PURE__ */ jsx11(Button3, {
          marginInlineStart: "auto !important",
          disabled: isFormInvalid,
          onClick: onSubmit,
          children: "Submit"
        })
      ]
    });
  }
);

// src/components/Kbd.tsx
import { useEffect as useEffect7 } from "react";
import { Kbd as BaseKbd } from "@chakra-ui/react";
import { Type as Type12 } from "@sinclair/typebox";
import {
  implementRuntimeComponent as implementRuntimeComponent10,
  Text as Text5,
  TextPropertySpec as TextPropertySpec2
} from "@subscan/widget-runtime";
import { css as css8 } from "@emotion/css";
import { jsx as jsx12 } from "react/jsx-runtime";
var StateSpec4 = Type12.Object({
  value: Type12.String()
});
var PropsSpec7 = Type12.Object({
  text: TextPropertySpec2
});
var Kbd_default = implementRuntimeComponent10({
  version: "chakra_ui/v1",
  metadata: {
    name: "kbd",
    displayName: "Kbd",
    description: "chakra-ui keyboard",
    exampleProperties: {
      text: {
        raw: "enter",
        format: "plain"
      }
    },
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: PropsSpec7,
    state: StateSpec4,
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(({ text, mergeState, customStyle, elementRef }) => {
  useEffect7(() => {
    mergeState({ value: text.raw });
  }, [mergeState, text.raw]);
  return /* @__PURE__ */ jsx12(BaseKbd, {
    className: css8`
        ${customStyle?.content}
      `,
    ref: elementRef,
    children: /* @__PURE__ */ jsx12(Text5, {
      value: text
    })
  });
});

// src/components/List.tsx
import { Type as Type13 } from "@sinclair/typebox";
import { List as BaseList, ListItem as BaseListItem } from "@chakra-ui/react";
import {
  implementRuntimeComponent as implementRuntimeComponent11,
  LIST_ITEM_EXP as LIST_ITEM_EXP3,
  LIST_ITEM_INDEX_EXP as LIST_ITEM_INDEX_EXP3,
  ModuleRenderer as ModuleRenderer2
} from "@subscan/widget-runtime";
import { ModuleRenderSpec as ModuleRenderSpec2 } from "@subscan/widget-shared";
import { css as css9 } from "@emotion/css";
import { CORE_VERSION, CoreWidgetName } from "@subscan/widget-editor-sdk";
import { jsx as jsx13 } from "react/jsx-runtime";
var PropsSpec8 = Type13.Object({
  listData: Type13.Array(Type13.Record(Type13.String(), Type13.String()), {
    title: "Data",
    category: BASIC,
    widget: `${CORE_VERSION}/${CoreWidgetName.Expression}`
  }),
  template: ModuleRenderSpec2
});
var exampleProperties = {
  listData: [{ id: "1" }, { id: "2" }, { id: "3" }],
  template: {
    id: "listItemName-{{$listItem.id}}",
    type: "custom/v1/myModule0",
    properties: {
      value: "{{$listItem.id}}"
    },
    handlers: []
  }
};
var List_default = implementRuntimeComponent11({
  version: "chakra_ui/v1",
  metadata: {
    name: "list",
    description: "chakra-ui list",
    displayName: "List",
    exampleProperties,
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: PropsSpec8,
    methods: {},
    state: Type13.Object({}),
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(({ listData, template, app, services, customStyle, elementRef }) => {
  if (!listData) {
    return null;
  }
  const listItems = listData.map((listItem, i) => {
    const evalScope = {
      [LIST_ITEM_EXP3]: listItem,
      [LIST_ITEM_INDEX_EXP3]: i
    };
    const listItemEle = /* @__PURE__ */ jsx13(BaseListItem, {
      spacing: 3,
      children: /* @__PURE__ */ jsx13(ModuleRenderer2, {
        id: template.id,
        type: template.type,
        properties: template.properties,
        handlers: template.handlers,
        services,
        evalScope,
        app
      })
    }, listItem.id);
    return listItemEle;
  });
  return /* @__PURE__ */ jsx13(BaseList, {
    className: css9`
        ${customStyle?.content}
      `,
    ref: elementRef,
    children: listItems
  });
});

// src/components/Link.tsx
import { Link as Link2 } from "@chakra-ui/react";
import { css as css10 } from "@emotion/css";
import { Type as Type14 } from "@sinclair/typebox";
import {
  implementRuntimeComponent as implementRuntimeComponent12,
  Text as Text6,
  TextPropertySpec as TextPropertySpec3
} from "@subscan/widget-runtime";
import { jsx as jsx14 } from "react/jsx-runtime";
var PropsSpec9 = Type14.Object({
  text: TextPropertySpec3,
  href: Type14.String({
    title: "Href",
    description: "The URL to link to.",
    category: BASIC
  }),
  isExternal: Type14.Boolean({
    title: "External",
    description: "Whether the link should open in a new tab.",
    category: BEHAVIOR
  })
});
var Link_default = implementRuntimeComponent12({
  version: "chakra_ui/v1",
  metadata: {
    name: "link",
    displayName: "Link",
    description: "chakra-ui link",
    exampleProperties: {
      text: {
        raw: "link",
        format: "plain"
      },
      href: "https://www.google.com",
      isExternal: false
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec9,
    state: Type14.Object({}),
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(({ text, href, isExternal, customStyle, elementRef }) => {
  return /* @__PURE__ */ jsx14(Link2, {
    href,
    isExternal,
    color: "blue.500",
    className: css10`
        ${customStyle?.content}
      `,
    ref: elementRef,
    children: /* @__PURE__ */ jsx14(Text6, {
      value: text
    })
  });
});

// src/components/NumberInput.tsx
import { useState as useState5, useEffect as useEffect8 } from "react";
import {
  NumberInput as BaseNumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper
} from "@chakra-ui/react";
import { Type as Type15 } from "@sinclair/typebox";
import { implementRuntimeComponent as implementRuntimeComponent13 } from "@subscan/widget-runtime";
import { css as css11 } from "@emotion/css";
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
var PropsSpec10 = Type15.Object({
  defaultValue: Type15.Number({
    title: "Default Value",
    category: BASIC
  }),
  min: Type15.Number({
    title: "Min",
    category: BASIC
  }),
  max: Type15.Number({
    title: "Max",
    category: BASIC
  }),
  step: Type15.Number({
    title: "Step",
    description: "The amount to increase or decrease the value by.",
    category: BASIC
  }),
  precision: Type15.Number({
    title: "Precision",
    category: BASIC
  }),
  clampValueOnBlur: Type15.Boolean({
    title: "Clamp Value On Blur",
    category: BEHAVIOR
  }),
  allowMouseWheel: Type15.Boolean({
    title: "Allow Mouse Wheel",
    description: "Whether or not to allow the mouse wheel to control the number input.",
    category: BEHAVIOR
  }),
  size: Type15.KeyOf(
    Type15.Object({
      sm: Type15.String(),
      md: Type15.String(),
      lg: Type15.String(),
      xs: Type15.String()
    }),
    {
      title: "Size",
      category: APPEARANCE
    }
  ),
  customerIncrement: Type15.Optional(
    Type15.Object(
      {
        bg: Type15.String({
          title: "Background"
        }),
        children: Type15.String({
          title: "Text"
        }),
        _active: Type15.Object(
          {
            bg: Type15.String({
              title: "Active Background"
            })
          },
          {
            title: "Active"
          }
        )
      },
      {
        title: "Increment Button",
        category: APPEARANCE
      }
    )
  ),
  customerDecrement: Type15.Optional(
    Type15.Object(
      {
        bg: Type15.String({
          title: "Background"
        }),
        children: Type15.String({
          title: "Text"
        }),
        _active: Type15.Object(
          {
            bg: Type15.String({
              title: "Active Background"
            })
          },
          {
            title: "Active"
          }
        )
      },
      {
        title: "Decrement Button",
        category: APPEARANCE
      }
    )
  )
});
var StateSpec5 = Type15.Object({
  value: Type15.Number()
});
var NumberInput_default = implementRuntimeComponent13({
  version: "chakra_ui/v1",
  metadata: {
    name: "numberInput",
    description: "chakra_ui number input",
    displayName: "Number Input",
    exampleProperties: {
      defaultValue: 0,
      min: Number.MIN_SAFE_INTEGER,
      max: Number.MAX_SAFE_INTEGER,
      step: 1,
      precision: 0,
      clampValueOnBlur: false,
      allowMouseWheel: false,
      size: "md"
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec10,
    state: StateSpec5,
    methods: {
      setInputValue: Type15.Object({
        value: Type15.Number()
      }),
      resetInputValue: void 0
    },
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(
  ({
    defaultValue = 0,
    min,
    max,
    step,
    precision,
    clampValueOnBlur = true,
    allowMouseWheel = false,
    size,
    customerIncrement,
    customerDecrement,
    mergeState,
    subscribeMethods,
    customStyle,
    elementRef
  }) => {
    const [value, setValue] = useState5(defaultValue);
    const onChange = (_, valueAsNumber) => setValue(valueAsNumber || 0);
    useEffect8(() => {
      mergeState({ value });
    }, [mergeState, value]);
    useEffect8(() => {
      setValue(defaultValue || 0);
    }, [defaultValue]);
    useEffect8(() => {
      subscribeMethods({
        setInputValue({ value: value2 }) {
          setValue(value2);
        },
        resetInputValue() {
          setValue(defaultValue);
        }
      });
    }, [defaultValue, subscribeMethods]);
    return /* @__PURE__ */ jsxs8(BaseNumberInput, {
      background: "white",
      defaultValue,
      value,
      min,
      max,
      step,
      precision,
      clampValueOnBlur,
      allowMouseWheel,
      size,
      onChange,
      className: css11`
          ${customStyle?.content}
        `,
      ref: elementRef,
      children: [
        /* @__PURE__ */ jsx15(NumberInputField, {}),
        /* @__PURE__ */ jsxs8(NumberInputStepper, {
          children: [
            /* @__PURE__ */ jsx15(NumberIncrementStepper, {
              ...customerIncrement
            }),
            /* @__PURE__ */ jsx15(NumberDecrementStepper, {
              ...customerDecrement
            })
          ]
        })
      ]
    });
  }
);

// src/components/MultiSelect.tsx
import { useEffect as useEffect9 } from "react";
import { Type as Type16 } from "@sinclair/typebox";
import { Select as BaseMultiSelect } from "chakra-react-select";
import { implementRuntimeComponent as implementRuntimeComponent14 } from "@subscan/widget-runtime";
import { Box as Box3 } from "@chakra-ui/react";
import { css as css12 } from "@emotion/css";
import { jsx as jsx16 } from "react/jsx-runtime";
var StateSpec6 = Type16.Object({
  value: Type16.Array(Type16.String())
});
var OptionsSpec = Type16.Array(
  Type16.Object({
    label: Type16.String({
      title: "Label"
    }),
    value: Type16.String({
      title: "Value"
    })
  }),
  {
    title: "Options",
    category: BASIC
  }
);
var PropsSpec11 = Type16.Object({
  options: OptionsSpec,
  placeholder: Type16.String({
    title: "Placeholder",
    category: BASIC
  }),
  defaultValue: Type16.Array(
    Type16.Object({
      label: Type16.String(),
      value: Type16.String()
    }),
    {
      title: "Default Value",
      category: BASIC
    }
  ),
  isDisabled: Type16.Boolean({
    title: "Disabled",
    category: BEHAVIOR
  }),
  isRequired: Type16.Boolean({
    title: "Required",
    category: BEHAVIOR
  }),
  size: Type16.KeyOf(
    Type16.Object({
      sm: Type16.String(),
      md: Type16.String(),
      lg: Type16.String()
    }),
    {
      title: "Size",
      category: APPEARANCE
    }
  ),
  variant: Type16.KeyOf(
    Type16.Object({
      outline: Type16.String(),
      unstyled: Type16.String(),
      filled: Type16.String(),
      flushed: Type16.String()
    }),
    {
      title: "Variant",
      category: APPEARANCE
    }
  )
});
var MultiSelect_default = implementRuntimeComponent14({
  version: "chakra_ui/v1",
  metadata: {
    name: "multiSelect",
    displayName: "MultiSelect",
    description: "chakra-ui MultiSelect",
    exampleProperties: {
      options: [
        {
          label: "value1",
          value: "value1"
        },
        {
          label: "value2",
          value: "value2"
        },
        {
          label: "value3",
          value: "value3"
        }
      ],
      placeholder: "",
      defaultValue: [],
      isDisabled: false,
      isRequired: false,
      size: "md",
      variant: "outline"
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec11,
    state: StateSpec6,
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(
  ({
    options,
    placeholder,
    defaultValue,
    isRequired,
    isDisabled,
    size,
    variant,
    mergeState,
    customStyle,
    elementRef
  }) => {
    useEffect9(() => {
      const newValue = (defaultValue || []).map((o) => o.value);
      mergeState({ value: newValue });
    }, [defaultValue, mergeState]);
    const onChange = (options2) => {
      const newValue = options2.map((o) => o.value);
      mergeState({ value: newValue });
    };
    return /* @__PURE__ */ jsx16(Box3, {
      width: "full",
      className: css12`
          ${customStyle?.content}
        `,
      ref: elementRef,
      children: /* @__PURE__ */ jsx16(BaseMultiSelect, {
        isMulti: true,
        options,
        placeholder,
        isRequired,
        isDisabled,
        size,
        variant,
        onChange,
        defaultValue
      })
    });
  }
);

// src/components/CheckboxGroup.tsx
import { useState as useState7, useEffect as useEffect11 } from "react";
import { Type as Type18 } from "@sinclair/typebox";
import { Box as Box4, CheckboxGroup as BaseCheckboxGroup } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent16 } from "@subscan/widget-runtime";

// src/components/Checkbox.tsx
import { useState as useState6, useEffect as useEffect10, useRef as useRef3 } from "react";
import { Type as Type17 } from "@sinclair/typebox";
import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from "@chakra-ui/react";
import {
  implementRuntimeComponent as implementRuntimeComponent15,
  Text as Text7,
  TextPropertySpec as TextPropertySpec4
} from "@subscan/widget-runtime";
import { css as css13 } from "@emotion/css";
import { jsx as jsx17 } from "react/jsx-runtime";
var IsDisabledSpec = Type17.Boolean({
  title: "Disabled",
  category: BEHAVIOR
});
var SizePropertySpec = Type17.KeyOf(
  Type17.Object({
    sm: Type17.String(),
    md: Type17.String(),
    lg: Type17.String()
  }),
  {
    title: "Size",
    category: APPEARANCE
  }
);
var CheckboxStateSpec = Type17.Object({
  value: Type17.Union([Type17.String(), Type17.Number()]),
  text: Type17.String(),
  checked: Type17.Boolean()
});
var PropsSpec12 = Type17.Object({
  text: TextPropertySpec4,
  value: Type17.Union([Type17.String(), Type17.Number()], {
    title: "Value",
    description: "The value of the checkbox which is used by check group.",
    category: BASIC
  }),
  defaultIsChecked: Type17.Boolean({
    title: "Default Checked",
    category: BASIC
  }),
  isDisabled: IsDisabledSpec,
  isFocusable: Type17.Boolean({
    title: "Focusable",
    category: BEHAVIOR
  }),
  isInValid: Type17.Boolean({
    title: "Invalid",
    category: BEHAVIOR
  }),
  isReadOnly: Type17.Boolean({
    title: "Read Only",
    category: BEHAVIOR
  }),
  isRequired: Type17.Boolean({
    title: "Required",
    category: BEHAVIOR
  }),
  spacing: Type17.String({
    title: "Spacing",
    category: LAYOUT
  }),
  size: SizePropertySpec,
  colorScheme: getColorSchemePropertySpec({
    title: "Color Scheme",
    category: APPEARANCE
  })
});
var Checkbox_default = implementRuntimeComponent15({
  version: "chakra_ui/v1",
  metadata: {
    name: "checkbox",
    description: "chakra-ui checkbox",
    displayName: "Checkbox",
    exampleProperties: {
      text: {
        raw: "Checkbox",
        format: "plain"
      },
      value: "checkbox 1",
      defaultIsChecked: true,
      isDisabled: false,
      isFocusable: true,
      isInValid: false,
      isReadOnly: false,
      isRequired: false,
      size: "md",
      spacing: "",
      colorScheme: "blue"
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec12,
    state: CheckboxStateSpec,
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(
  ({
    text,
    value,
    defaultIsChecked,
    isDisabled,
    isFocusable,
    isInValid,
    isReadOnly,
    isRequired,
    size,
    spacing,
    colorScheme,
    mergeState,
    customStyle,
    getElement
  }) => {
    const groupContext = useCheckboxGroupContext();
    let _defaultIsChecked = false;
    if (typeof defaultIsChecked === "boolean") {
      _defaultIsChecked = defaultIsChecked;
    } else if (groupContext) {
      _defaultIsChecked = groupContext.value.some((val) => val === value);
    }
    const [checked, setChecked] = useState6(_defaultIsChecked);
    const ref = useRef3(null);
    useEffect10(() => {
      mergeState({ text: text.raw });
    }, [mergeState, text.raw]);
    useEffect10(() => {
      mergeState({ value });
    }, [mergeState, value]);
    useEffect10(() => {
      mergeState({ checked });
    }, [checked, mergeState]);
    useEffect10(() => {
      setChecked(!!defaultIsChecked);
    }, [setChecked, defaultIsChecked]);
    useEffect10(() => {
      if (getElement && ref.current) {
        getElement(ref.current.parentElement);
      }
    }, [getElement, ref]);
    const args = {};
    if (colorScheme)
      args.colorScheme = colorScheme;
    if (size)
      args.size = size;
    return /* @__PURE__ */ jsx17(BaseCheckbox, {
      height: "10",
      value,
      isChecked: checked,
      isDisabled,
      isFocusable,
      isInvalid: isInValid,
      isReadOnly,
      isRequired,
      size,
      spacing,
      colorScheme,
      onChange: (e) => {
        setChecked(e.target.checked);
      },
      className: css13`
          ${customStyle?.content}
        `,
      ref,
      children: /* @__PURE__ */ jsx17(Text7, {
        value: text
      })
    });
  }
);

// src/components/CheckboxGroup.tsx
import { jsx as jsx18 } from "react/jsx-runtime";
var DefaultValueSpec = Type18.Array(Type18.Union([Type18.String(), Type18.Number()]), {
  title: "Default Value",
  description: "The default value of the checkbox group to be checked",
  category: BASIC
});
var StateSpec7 = Type18.Object({
  value: DefaultValueSpec
});
var PropsSpec13 = Type18.Object({
  defaultValue: DefaultValueSpec,
  isDisabled: IsDisabledSpec,
  size: SizePropertySpec
});
var CheckboxGroup_default = implementRuntimeComponent16({
  version: "chakra_ui/v1",
  metadata: {
    name: "checkbox_group",
    displayName: "Checkbox Group",
    description: "chakra-ui checkbox group",
    exampleProperties: {
      isDisabled: false,
      defaultValue: []
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec13,
    state: StateSpec7,
    methods: {},
    slots: {
      content: { slotProps: Type18.Object({}) }
    },
    styleSlots: [],
    events: []
  }
})(({ size, defaultValue, isDisabled, slotsElements, mergeState, elementRef }) => {
  const [value, setValue] = useState7(defaultValue);
  useEffect11(() => {
    mergeState({ value });
  }, [mergeState, value]);
  return /* @__PURE__ */ jsx18(Box4, {
    ref: elementRef,
    children: /* @__PURE__ */ jsx18(BaseCheckboxGroup, {
      size,
      defaultValue,
      isDisabled,
      onChange: (val) => setValue(val),
      children: slotsElements.content ? slotsElements.content({}) : null
    })
  });
});

// src/components/Stack.tsx
import { Type as Type19 } from "@sinclair/typebox";
import { Stack as BaseStack } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent17 } from "@subscan/widget-runtime";
import { jsx as jsx19 } from "react/jsx-runtime";
var DirectionSpec = Type19.Union(
  [
    Type19.KeyOf(
      Type19.Object({
        column: Type19.String(),
        "column-reverse": Type19.String(),
        row: Type19.String(),
        "row-reverse": Type19.String()
      })
    ),
    Type19.Array(
      Type19.KeyOf(
        Type19.Object({
          column: Type19.String(),
          "column-reverse": Type19.String(),
          row: Type19.String(),
          "row-reverse": Type19.String()
        })
      )
    )
  ],
  {
    title: "Flex Direction",
    category: LAYOUT
  }
);
var FlexWrapSpec = Type19.KeyOf(
  Type19.Object({
    nowrap: Type19.String(),
    wrap: Type19.String(),
    "wrap-reverse": Type19.String()
  }),
  {
    title: "Flex Wrap",
    category: LAYOUT
  }
);
var AlignItemsSpec = Type19.String({
  title: "Align Items",
  category: LAYOUT
});
var JustifyContentSpec = Type19.String({
  title: "Justify Content",
  category: LAYOUT
});
var SpacingSpec = Type19.Union([Type19.String(), Type19.Number()], {
  title: "Spacing",
  category: LAYOUT
});
var PropsSpec14 = Type19.Object({
  direction: DirectionSpec,
  wrap: FlexWrapSpec,
  align: AlignItemsSpec,
  justify: JustifyContentSpec,
  spacing: SpacingSpec
});
var Stack_default = implementRuntimeComponent17({
  version: "chakra_ui/v1",
  metadata: {
    name: "stack",
    displayName: "Stack",
    description: "chakra-ui stack",
    exampleProperties: {
      direction: "column",
      spacing: 10
    },
    annotations: {
      category: "Layout"
    }
  },
  spec: {
    properties: PropsSpec14,
    state: Type19.Object({}),
    methods: {},
    slots: {
      content: { slotProps: Type19.Object({}) }
    },
    styleSlots: [],
    events: []
  }
})(({ direction, wrap, align, justify, spacing, slotsElements, elementRef }) => {
  return /* @__PURE__ */ jsx19(BaseStack, {
    ...{ direction, wrap, align, justify, spacing },
    ref: elementRef,
    children: slotsElements.content ? slotsElements.content({}) : null
  });
});

// src/components/Switch.tsx
import { Switch } from "@chakra-ui/react";
import { css as css14 } from "@emotion/css";
import { Type as Type20 } from "@sinclair/typebox";
import { implementRuntimeComponent as implementRuntimeComponent18 } from "@subscan/widget-runtime";
import { useEffect as useEffect12, useState as useState8 } from "react";
import { jsx as jsx20 } from "react/jsx-runtime";
var PropsSpec15 = Type20.Object({
  size: Type20.KeyOf(
    Type20.Object({
      sm: Type20.String(),
      md: Type20.String(),
      lg: Type20.String(),
      xs: Type20.String()
    }),
    {
      title: "Size",
      category: BASIC
    }
  ),
  isDisabled: Type20.Boolean({
    title: "Disabled",
    category: BASIC
  })
});
var StateSpec8 = Type20.Object({
  value: Type20.Boolean()
});
var Switch_default = implementRuntimeComponent18({
  version: "chakra_ui/v1",
  metadata: {
    name: "switch",
    displayName: "Switch",
    description: "chakra-ui switch",
    exampleProperties: {
      isDisabled: false
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec15,
    state: StateSpec8,
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(({ isDisabled, size, customStyle, elementRef, mergeState }) => {
  const [value, setValue] = useState8(false);
  const onChange = () => {
    setValue(!value);
  };
  useEffect12(() => {
    mergeState({ value });
  }, [mergeState, value]);
  return /* @__PURE__ */ jsx20("div", {
    ref: elementRef,
    children: /* @__PURE__ */ jsx20(Switch, {
      size,
      isDisabled,
      className: css14`
          ${customStyle?.content}
        `,
      onChange,
      isChecked: value
    })
  });
});

// src/components/Tooltip.tsx
import { Type as Type21 } from "@sinclair/typebox";
import { Tooltip } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent19, TextPropertySpec as TextPropertySpec5 } from "@subscan/widget-runtime";
import { jsx as jsx21 } from "react/jsx-runtime";
var PropsSpec16 = Type21.Object({
  text: TextPropertySpec5,
  defaultIsOpen: Type21.Boolean({
    title: "Default Is Open",
    category: BASIC
  }),
  placement: Type21.KeyOf(
    Type21.Object({
      top: Type21.String(),
      right: Type21.String(),
      bottom: Type21.String(),
      left: Type21.String(),
      auto: Type21.String(),
      "auto-start": Type21.String(),
      "auto-end": Type21.String(),
      "top-start": Type21.String(),
      "top-end": Type21.String(),
      "bottom-start": Type21.String(),
      "bottom-end": Type21.String(),
      "right-start": Type21.String(),
      "right-end": Type21.String(),
      "left-start": Type21.String(),
      "left-end": Type21.String()
    }),
    {
      title: "Placement",
      category: LAYOUT
    }
  ),
  shouldWrapChildren: Type21.Boolean({
    title: "Should Wrap Children",
    category: BEHAVIOR
  }),
  isDisabled: Type21.Boolean({
    title: "Disabled",
    category: BEHAVIOR
  }),
  isOpen: Type21.Boolean({
    title: "Open State",
    category: BEHAVIOR
  }),
  hasArrow: Type21.Boolean({
    title: "Has Arrow",
    category: APPEARANCE
  }),
  colorScheme: getColorSchemePropertySpec({
    title: "Color Scheme",
    category: APPEARANCE
  })
});
var Tooltip_default = implementRuntimeComponent19({
  version: "chakra_ui/v1",
  metadata: {
    name: "tooltip",
    description: "chakra-ui tooltip",
    displayName: "Tooltip",
    exampleProperties: {
      text: {
        raw: "tooltip"
      },
      defaultIsOpen: false,
      placement: "top",
      shouldWrapChildren: false,
      isDisabled: false,
      isOpen: false,
      hasArrow: true,
      colorScheme: "blue"
    },
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: PropsSpec16,
    state: Type21.Object({}),
    methods: {},
    slots: {
      content: { slotProps: Type21.Object({}) }
    },
    styleSlots: [],
    events: []
  }
})(
  ({
    text,
    shouldWrapChildren,
    placement = "auto",
    isOpen,
    hasArrow,
    isDisabled,
    defaultIsOpen,
    slotsElements,
    elementRef
  }) => {
    return /* @__PURE__ */ jsx21(Tooltip, {
      label: text,
      placement,
      isOpen,
      hasArrow,
      isDisabled,
      defaultIsOpen,
      shouldWrapChildren,
      ref: elementRef,
      children: slotsElements.content ? slotsElements.content({}) : null
    });
  }
);

// src/components/HStack.tsx
import { css as css15 } from "@emotion/css";
import { Type as Type22 } from "@sinclair/typebox";
import { HStack as BaseHStack } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent20 } from "@subscan/widget-runtime";
import { jsx as jsx22 } from "react/jsx-runtime";
var PropsSpec17 = Type22.Object({
  direction: DirectionSpec,
  wrap: FlexWrapSpec,
  align: AlignItemsSpec,
  justify: JustifyContentSpec,
  spacing: SpacingSpec
});
var HStack_default = implementRuntimeComponent20({
  version: "chakra_ui/v1",
  metadata: {
    name: "hstack",
    description: "chakra-ui hstack",
    displayName: "HStack",
    exampleProperties: {
      direction: "row",
      wrap: "wrap",
      align: "",
      justify: "",
      spacing: "24px"
    },
    annotations: {
      category: "Layout"
    }
  },
  spec: {
    properties: PropsSpec17,
    state: Type22.Object({}),
    slots: {
      content: { slotProps: Type22.Object({}) }
    },
    styleSlots: ["content"],
    methods: {},
    events: []
  }
})(
  ({
    direction,
    wrap,
    align,
    justify,
    spacing,
    slotsElements,
    customStyle,
    elementRef
  }) => {
    return /* @__PURE__ */ jsx22(BaseHStack, {
      height: "full",
      width: "full",
      padding: "4",
      background: "white",
      border: "1px solid",
      borderColor: "gray.200",
      borderRadius: "4",
      className: css15`
          ${customStyle?.content}
        `,
      ref: elementRef,
      ...{ direction, wrap, align, justify, spacing },
      children: slotsElements.content ? slotsElements.content({}) : null
    });
  }
);

// src/components/VStack.tsx
import { css as css16 } from "@emotion/css";
import { Type as Type23 } from "@sinclair/typebox";
import { VStack as BaseVStack } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent21 } from "@subscan/widget-runtime";
import { jsx as jsx23 } from "react/jsx-runtime";
var PropsSpec18 = Type23.Object({
  direction: DirectionSpec,
  wrap: FlexWrapSpec,
  align: AlignItemsSpec,
  justify: JustifyContentSpec,
  spacing: SpacingSpec
});
var VStack_default = implementRuntimeComponent21({
  version: "chakra_ui/v1",
  metadata: {
    name: "vstack",
    displayName: "VStack",
    description: "chakra-ui vstack",
    exampleProperties: {
      spacing: "24px"
    },
    annotations: {
      direction: "column",
      wrap: "wrap",
      align: "",
      justify: "",
      category: "Layout"
    }
  },
  spec: {
    properties: PropsSpec18,
    state: Type23.Object({}),
    slots: {
      content: { slotProps: Type23.Object({}) }
    },
    styleSlots: ["content"],
    methods: {},
    events: []
  }
})(
  ({
    direction,
    wrap,
    align,
    justify,
    spacing,
    slotsElements,
    customStyle,
    elementRef
  }) => {
    return /* @__PURE__ */ jsx23(BaseVStack, {
      width: "full",
      height: "full",
      padding: "4",
      background: "white",
      border: "1px solid",
      borderColor: "gray.200",
      borderRadius: "4",
      className: css16`
          ${customStyle?.content}
        `,
      ref: elementRef,
      ...{ direction, wrap, align, justify, spacing },
      children: slotsElements.content ? slotsElements.content({}) : null
    });
  }
);

// src/components/Image.tsx
import { Image as BaseImage } from "@chakra-ui/react";
import { css as css17 } from "@emotion/css";
import { Type as Type24 } from "@sinclair/typebox";
import { implementRuntimeComponent as implementRuntimeComponent22 } from "@subscan/widget-runtime";
import { jsx as jsx24 } from "react/jsx-runtime";
var BoxSizePropertySpec = Type24.Union(
  [
    Type24.KeyOf(
      Type24.Object({
        sm: Type24.String(),
        md: Type24.String(),
        lg: Type24.String(),
        xs: Type24.String()
      })
    ),
    Type24.String()
  ],
  {
    title: "Box Size",
    category: APPEARANCE
  }
);
var GlobalCssSpec = Type24.KeyOf(
  Type24.Object({
    "-moz-initial": Type24.String(),
    inherit: Type24.String(),
    initial: Type24.String(),
    revert: Type24.String(),
    unset: Type24.String()
  })
);
var ObjectFitSpec = Type24.Union(
  [
    GlobalCssSpec,
    Type24.KeyOf(
      Type24.Object({
        contain: Type24.String(),
        cover: Type24.String(),
        fill: Type24.String(),
        none: Type24.String(),
        "scale-down": Type24.String()
      })
    )
  ],
  {
    title: "Object Fit",
    description: "How the image should be scaled to fit the element.",
    category: BEHAVIOR
  }
);
var BorderRadiusSpec = Type24.Union(
  [
    GlobalCssSpec,
    Type24.Number(),
    Type24.String(),
    Type24.KeyOf(
      Type24.Object({
        radii: Type24.String(),
        sm: Type24.String(),
        md: Type24.String(),
        lg: Type24.String(),
        base: Type24.String(),
        xl: Type24.String(),
        "2xl": Type24.String(),
        full: Type24.String(),
        "3xl": Type24.String()
      })
    )
  ],
  {
    title: "Border Radius",
    category: APPEARANCE
  }
);
var StateSpec9 = Type24.Object({
  value: Type24.String()
});
var PropsSpec19 = Type24.Object({
  src: Type24.String({
    title: "Src",
    description: "The source of the image",
    category: BASIC
  }),
  fallbackSrc: Type24.String({
    title: "Fallback Src",
    description: "The source of the image to use when the src fails to load",
    category: BASIC
  }),
  alt: Type24.String({
    title: "Alt Text",
    description: "An accessible description of the image for screen readers. This is also rendered as a fallback if the image fails to load.",
    category: BASIC
  }),
  ignoreFallback: Type24.Boolean({
    title: "Ignore Fallback",
    description: "Whether to ignore the fallback image when the src fails to load",
    category: BEHAVIOR
  }),
  objectFit: ObjectFitSpec,
  crossOrigin: Type24.KeyOf(
    Type24.Object({
      anonymous: Type24.String(),
      "use-credentials": Type24.String()
    }),
    {
      title: "Cross Origin",
      description: "How the image should be loaded",
      category: BEHAVIOR
    }
  ),
  htmlHeight: Type24.Union([Type24.String(), Type24.Number()], {
    title: "Height",
    category: LAYOUT
  }),
  htmlWidth: Type24.Union([Type24.String(), Type24.Number()], {
    title: "Width",
    category: LAYOUT
  }),
  boxSize: BoxSizePropertySpec,
  borderRadius: BorderRadiusSpec
});
var Image_default = implementRuntimeComponent22({
  version: "chakra_ui/v1",
  metadata: {
    name: "image",
    displayName: "Image",
    description: "chakra_ui image",
    exampleProperties: {
      src: "https://bit.ly/dan-abramov",
      fallbackSrc: "https://via.placeholder.com/150",
      alt: "dan-abramov",
      ignoreFallback: false,
      objectFit: "cover",
      crossOrigin: "anonymous",
      boxSize: "md",
      htmlHeight: "",
      htmlWidth: "",
      borderRadius: 5
    },
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: PropsSpec19,
    state: StateSpec9,
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: ["onLoad", "onError"]
  }
})(
  ({
    boxSize,
    src,
    alt,
    objectFit,
    borderRadius,
    fallbackSrc,
    ignoreFallback,
    htmlWidth,
    htmlHeight,
    crossOrigin,
    callbackMap,
    customStyle,
    elementRef
  }) => {
    const style = boxSize ? css17`
          ${customStyle?.content}
        ` : css17`
          height: 100%;
          width: 100%;
          ${customStyle?.content}
        `;
    return /* @__PURE__ */ jsx24(BaseImage, {
      className: style,
      src,
      alt,
      objectFit,
      boxSize,
      onLoad: callbackMap?.onLoad,
      htmlHeight,
      htmlWidth,
      crossOrigin,
      onError: callbackMap?.onError,
      ignoreFallback,
      borderRadius,
      fallbackSrc,
      ref: elementRef
    });
  }
);

// src/components/Dialog.tsx
import { useEffect as useEffect13, useState as useState9, useRef as useRef4 } from "react";
import { implementRuntimeComponent as implementRuntimeComponent23, DIALOG_CONTAINER_ID } from "@subscan/widget-runtime";
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Button as Button4
} from "@chakra-ui/react";
import { Type as Type25 } from "@sinclair/typebox";
import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
var getHandleButtonPropertySpec = (options) => Type25.Object(
  {
    text: Type25.String({
      title: "Text"
    }),
    colorScheme: getColorSchemePropertySpec({
      title: "Color Scheme"
    })
  },
  options
);
var PropsSpec20 = Type25.Object({
  title: Type25.String({
    title: "Title",
    category: BASIC
  }),
  confirmButton: getHandleButtonPropertySpec({
    title: "Confirm Button",
    category: BASIC
  }),
  cancelButton: getHandleButtonPropertySpec({
    title: "Cancel Button",
    category: BASIC
  }),
  disableConfirm: Type25.Boolean({
    title: "Disable Confirm",
    category: BEHAVIOR
  })
});
var Dialog_default = implementRuntimeComponent23({
  version: "chakra_ui/v1",
  metadata: {
    name: "dialog",
    displayName: "Dialog",
    description: "chakra_ui dialog",
    exampleProperties: {
      title: "Dialog",
      confirmButton: {
        text: "Confirm"
      },
      cancelButton: {
        text: "Cancel"
      },
      disableConfirm: false
    },
    annotations: {
      category: "Display"
    }
  },
  spec: {
    properties: PropsSpec20,
    state: Type25.Object({}),
    methods: {
      openDialog: Type25.Object({
        title: Type25.String()
      }),
      confirmDialog: void 0,
      cancelDialog: void 0
    },
    slots: {
      content: { slotProps: Type25.Object({}) }
    },
    styleSlots: ["content"],
    events: ["cancelDialog", "confirmDialog"]
  }
})(
  ({
    slotsElements,
    subscribeMethods,
    callbackMap: callbacks,
    title: customerTitle,
    disableConfirm,
    confirmButton = {
      text: "confirm",
      colorScheme: "red"
    },
    cancelButton = {
      text: "cancel",
      colorScheme: "blue"
    },
    customStyle,
    getElement
  }) => {
    const [isOpen, setIsOpen] = useState9(false);
    const [title, setTitle] = useState9(customerTitle || "");
    const cancelRef = useRef4(null);
    const contentRef = useRef4(null);
    const containerRef = useRef4(null);
    useEffect13(() => {
      containerRef.current = document.getElementById(DIALOG_CONTAINER_ID);
    }, [containerRef]);
    useEffect13(() => {
      getElement && contentRef.current && getElement(contentRef.current);
    }, [getElement, isOpen]);
    useEffect13(() => {
      subscribeMethods({
        openDialog({ title: title2 }) {
          setIsOpen(true);
          setTitle(title2);
        },
        confirmDialog() {
          setIsOpen(false);
        },
        cancelDialog() {
          setIsOpen(false);
        }
      });
    }, [subscribeMethods]);
    const dialogContentProps = {
      position: "absolute",
      width: "full",
      containerProps: { position: "absolute", width: "full", height: "full" }
    };
    const dialogOverlayProps = {
      position: "absolute",
      width: "full",
      height: "full"
    };
    const portalProps = {
      appendToParentPortal: true,
      containerRef
    };
    return /* @__PURE__ */ jsx25(AlertDialog, {
      isOpen,
      leastDestructiveRef: cancelRef,
      onClose: () => setIsOpen(false),
      trapFocus: false,
      portalProps: containerRef.current ? portalProps : void 0,
      blockScrollOnMount: false,
      children: /* @__PURE__ */ jsx25(AlertDialogOverlay, {
        ...containerRef.current ? dialogOverlayProps : {},
        children: /* @__PURE__ */ jsxs9(AlertDialogContent, {
          className: `${customStyle?.content}`,
          ...containerRef.current ? dialogContentProps : {},
          ref: contentRef,
          children: [
            /* @__PURE__ */ jsx25(AlertDialogHeader, {
              children: title
            }),
            /* @__PURE__ */ jsx25(AlertDialogBody, {
              children: slotsElements.content ? slotsElements.content({}) : null
            }),
            /* @__PURE__ */ jsxs9(AlertDialogFooter, {
              children: [
                /* @__PURE__ */ jsx25(Button4, {
                  ref: cancelRef,
                  colorScheme: cancelButton.colorScheme,
                  onClick: callbacks?.cancelDialog,
                  children: cancelButton.text
                }),
                /* @__PURE__ */ jsx25(Button4, {
                  disabled: disableConfirm,
                  colorScheme: confirmButton.colorScheme,
                  onClick: callbacks?.confirmDialog,
                  ml: 3,
                  children: confirmButton.text
                })
              ]
            })
          ]
        })
      })
    });
  }
);

// src/components/Select.tsx
import { useState as useState10, useEffect as useEffect14 } from "react";
import { Type as Type26 } from "@sinclair/typebox";
import { Select as BaseSelect } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent24 } from "@subscan/widget-runtime";
import { css as css18 } from "@emotion/css";
import { jsx as jsx26 } from "react/jsx-runtime";
var StateSpec10 = Type26.Object({
  value: Type26.String()
});
var PropsSpec21 = Type26.Object({
  options: Type26.Array(
    Type26.Object({
      label: Type26.String({
        title: "Label"
      }),
      value: Type26.String({
        title: "Value"
      })
    }),
    {
      title: "Options",
      category: BASIC
    }
  ),
  placeholder: Type26.String({
    title: "Placeholder",
    category: BASIC
  }),
  defaultValue: Type26.String({
    title: "Default Value",
    category: BASIC
  }),
  isDisabled: Type26.Boolean({
    title: "Disabled",
    category: BEHAVIOR
  }),
  isInvalid: Type26.Boolean({
    title: "Invalid",
    category: BEHAVIOR
  }),
  isReadOnly: Type26.Boolean({
    title: "Read Only",
    category: BEHAVIOR
  }),
  isRequired: Type26.Boolean({
    title: "Required",
    category: BEHAVIOR
  }),
  size: Type26.KeyOf(
    Type26.Object({
      xs: Type26.String(),
      sm: Type26.String(),
      md: Type26.String(),
      lg: Type26.String()
    }),
    {
      title: "Size",
      category: APPEARANCE
    }
  ),
  variant: Type26.KeyOf(
    Type26.Object({
      outline: Type26.String(),
      unstyled: Type26.String(),
      filled: Type26.String(),
      flushed: Type26.String()
    }),
    {
      title: "Variant",
      category: APPEARANCE
    }
  ),
  errorBorderColor: Type26.String({
    title: "Border Color Of Error",
    category: APPEARANCE
  }),
  focusBorderColor: Type26.String({
    title: "Border Color Of Focus",
    category: APPEARANCE
  })
});
var Select_default = implementRuntimeComponent24({
  version: "chakra_ui/v1",
  metadata: {
    name: "select",
    displayName: "Select",
    description: "chakra-ui select",
    exampleProperties: {
      options: [
        {
          label: "value1",
          value: "value1"
        },
        {
          label: "value2",
          value: "value2"
        },
        {
          label: "value3",
          value: "value3"
        }
      ],
      placeholder: "Select an option",
      defaultValue: "",
      isDisabled: false,
      isInvalid: false,
      isReadOnly: false,
      isRequired: false,
      size: "md",
      variant: "outline",
      errorBorderColor: "red",
      focusBorderColor: "blue"
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec21,
    state: StateSpec10,
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(
  ({
    options,
    placeholder,
    defaultValue,
    errorBorderColor,
    focusBorderColor,
    isDisabled,
    isInvalid,
    isReadOnly,
    isRequired,
    size,
    variant,
    mergeState,
    customStyle,
    elementRef
  }) => {
    const [value, setValue] = useState10(defaultValue);
    useEffect14(() => {
      setValue(defaultValue);
    }, [defaultValue]);
    useEffect14(() => {
      mergeState({ value });
    }, [mergeState, value]);
    return /* @__PURE__ */ jsx26(BaseSelect, {
      background: "white",
      placeholder,
      value,
      errorBorderColor,
      focusBorderColor,
      isDisabled,
      isInvalid,
      isReadOnly,
      isRequired,
      size,
      variant,
      onChange: (e) => setValue(e.target.value),
      className: css18`
          ${customStyle?.content}
        `,
      ref: elementRef,
      children: options.map((opt) => /* @__PURE__ */ jsx26("option", {
        value: opt.value,
        children: opt.label
      }, opt.value))
    });
  }
);

// src/components/RadioGroup.tsx
import { useState as useState11, useEffect as useEffect15 } from "react";
import { Type as Type27 } from "@sinclair/typebox";
import { RadioGroup as BaseRadioGroup } from "@chakra-ui/react";
import { implementRuntimeComponent as implementRuntimeComponent25 } from "@subscan/widget-runtime";
import { css as css19 } from "@emotion/css";
import { jsx as jsx27 } from "react/jsx-runtime";
var StateSpec11 = Type27.Object({
  value: Type27.Union([Type27.String(), Type27.Number()])
});
var PropsSpec22 = Type27.Object({
  defaultValue: Type27.Union([Type27.String(), Type27.Number()], {
    title: "Default Value",
    category: BASIC
  }),
  isNumerical: Type27.Boolean({
    title: "Numerical",
    description: "Whether the value is a number",
    category: BEHAVIOR
  })
});
var RadioGroup_default = implementRuntimeComponent25({
  version: "chakra_ui/v1",
  metadata: {
    name: "radioGroup",
    displayName: "RadioGroup",
    description: "chakra-ui radio group",
    exampleProperties: {
      defaultValue: 0,
      isNumerical: true
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec22,
    state: StateSpec11,
    methods: {},
    slots: {
      content: { slotProps: Type27.Object({}) }
    },
    styleSlots: ["content"],
    events: []
  }
})(
  ({ defaultValue, isNumerical, slotsElements, mergeState, customStyle, elementRef }) => {
    const [value, setValue] = useState11(defaultValue);
    useEffect15(() => {
      mergeState({ value });
    }, [mergeState, value]);
    useEffect15(() => {
      setValue(defaultValue);
    }, [defaultValue]);
    return /* @__PURE__ */ jsx27(BaseRadioGroup, {
      value,
      onChange: (val) => setValue(isNumerical ? Number(val) : val),
      className: css19`
          ${customStyle?.content}
        `,
      ref: elementRef,
      children: slotsElements.content ? slotsElements.content({}) : null
    });
  }
);

// src/components/Radio.tsx
import { useEffect as useEffect16 } from "react";
import { Type as Type28 } from "@sinclair/typebox";
import { Radio as BaseRadio } from "@chakra-ui/react";
import {
  implementRuntimeComponent as implementRuntimeComponent26,
  Text as Text8,
  TextPropertySpec as TextPropertySpec6
} from "@subscan/widget-runtime";
import { css as css20 } from "@emotion/css";
import { jsx as jsx28 } from "react/jsx-runtime";
var StateSpec12 = Type28.Object({
  value: Type28.Union([Type28.String(), Type28.Number()])
});
var PropsSpec23 = Type28.Object({
  text: TextPropertySpec6,
  value: Type28.Union([Type28.String(), Type28.Number()], {
    title: "Value",
    category: BASIC
  }),
  name: Type28.String({
    title: "Name",
    category: BASIC
  }),
  isDisabled: Type28.Boolean({
    title: "Disabled",
    category: BEHAVIOR
  }),
  isFocusable: Type28.Boolean({
    title: "Focusable",
    category: BEHAVIOR
  }),
  isInValid: Type28.Boolean({
    title: "Invalid",
    category: BEHAVIOR
  }),
  isReadOnly: Type28.Boolean({
    title: "Read Only",
    category: BEHAVIOR
  }),
  isRequired: Type28.Boolean({
    title: "Required",
    category: BEHAVIOR
  }),
  spacing: Type28.String({
    title: "Spacing",
    category: LAYOUT
  }),
  colorScheme: getColorSchemePropertySpec({
    title: "Color Scheme",
    category: APPEARANCE
  }),
  size: Type28.KeyOf(
    Type28.Object({
      sm: Type28.String(),
      md: Type28.String(),
      lg: Type28.String()
    }),
    {
      title: "Size",
      category: APPEARANCE
    }
  )
});
var Radio_default = implementRuntimeComponent26({
  version: "chakra_ui/v1",
  metadata: {
    name: "radio",
    displayName: "Radio",
    description: "chakra-ui radio",
    exampleProperties: {
      text: {
        raw: "Radio",
        format: "plain"
      },
      value: "Radio 1",
      isDisabled: false,
      size: "md"
    },
    annotations: {
      category: "Input"
    }
  },
  spec: {
    properties: PropsSpec23,
    state: StateSpec12,
    methods: {},
    slots: {},
    styleSlots: ["content"],
    events: []
  }
})(
  ({
    text,
    value,
    isDisabled,
    isFocusable,
    isInValid,
    isReadOnly,
    isRequired,
    name,
    size,
    spacing,
    colorScheme,
    mergeState,
    customStyle,
    elementRef
  }) => {
    useEffect16(() => {
      mergeState({ value: text.raw });
    }, [mergeState, text.raw]);
    useEffect16(() => {
      mergeState({ value });
    }, [mergeState, value]);
    return /* @__PURE__ */ jsx28(BaseRadio, {
      height: "10",
      value,
      isDisabled,
      isFocusable,
      isInvalid: isInValid,
      isReadOnly,
      isRequired,
      name,
      size,
      spacing,
      colorScheme,
      className: css20`
          ${customStyle?.content}
        `,
      ref: elementRef,
      children: /* @__PURE__ */ jsx28(Text8, {
        value: text
      })
    });
  }
);

// src/components/Types/Toast.ts
import { Type as Type29 } from "@sinclair/typebox";
import { createStandaloneToast } from "@chakra-ui/react";
import { implementUtilMethod } from "@subscan/widget-runtime";
var ToastPosition = Type29.KeyOf(
  Type29.Object({
    top: Type29.String(),
    "top-right": Type29.String(),
    "top-left": Type29.String(),
    bottom: Type29.String(),
    "bottom-right": Type29.String(),
    "bottom-left": Type29.String()
  }),
  {
    defaultValue: "top"
  }
);
var ToastOpenParameterSpec = Type29.Object({
  position: ToastPosition,
  duration: Type29.Number({ defaultValue: 1e3 }),
  title: Type29.String(),
  description: Type29.String(),
  isClosable: Type29.Boolean(),
  variant: Type29.KeyOf(
    Type29.Object({
      subtle: Type29.String(),
      solid: Type29.String(),
      "left-accent": Type29.String(),
      "top-accent": Type29.String()
    }),
    {
      defaultValue: "subtle"
    }
  ),
  status: Type29.KeyOf(
    Type29.Object({
      error: Type29.String(),
      success: Type29.String(),
      warning: Type29.String(),
      info: Type29.String()
    }),
    {
      defaultValue: "info"
    }
  ),
  id: Type29.String()
});
var ToastCloseParameterSpec = Type29.Object({
  id: Type29.String(),
  positions: Type29.Array(ToastPosition, {
    defaultValue: []
  })
});
var pickProperty = (schema, object) => {
  const result = {};
  for (const key in schema.properties) {
    result[key] = object[key];
  }
  return result;
};
var toastInstances = {};
function ToastOpenUtilMethodFactory(sunmaoInstanceKey) {
  const toastOpen = implementUtilMethod({
    version: "chakra_ui/v1",
    metadata: {
      name: "openToast"
    },
    spec: {
      parameters: ToastOpenParameterSpec
    }
  })((parameters) => {
    if (!toastInstances[sunmaoInstanceKey]) {
      toastInstances[sunmaoInstanceKey] = createStandaloneToast();
    }
    if (parameters) {
      toastInstances[sunmaoInstanceKey](pickProperty(ToastOpenParameterSpec, parameters));
    }
  });
  return toastOpen;
}
function ToastCloseUtilMethodFactory(sunmaoInstanceKey) {
  const toastClose = implementUtilMethod({
    version: "chakra_ui/v1",
    metadata: {
      name: "closeToast"
    },
    spec: {
      parameters: ToastCloseParameterSpec
    }
  })((parameters) => {
    const toast = toastInstances[sunmaoInstanceKey];
    if (!toast) {
      return;
    }
    if (!parameters) {
      toast.closeAll();
    } else {
      const closeParameters = pickProperty(ToastCloseParameterSpec, parameters);
      if (closeParameters.id !== void 0) {
        toast.close(closeParameters.id);
      } else {
        toast.closeAll(closeParameters);
      }
    }
  });
  return toastClose;
}

// src/lib.ts
var sunmaoChakraUILib = {
  components: [
    Root_default,
    Button_default,
    Tabs_default,
    Table_default,
    Input_default,
    Box_default,
    Divider_default,
    FormControl_default,
    Form_default,
    Kbd_default,
    List_default,
    Link_default,
    MultiSelect_default,
    NumberInput_default,
    Checkbox_default,
    CheckboxGroup_default,
    Stack_default,
    Switch_default,
    Tooltip_default,
    HStack_default,
    VStack_default,
    Image_default,
    Dialog_default,
    Select_default,
    RadioGroup_default,
    Radio_default
  ],
  traits: [],
  modules: [],
  utilMethods: [ToastOpenUtilMethodFactory, ToastCloseUtilMethodFactory]
};

export {
  sunmaoChakraUILib
};
//# sourceMappingURL=chunk-TW762QWV.mjs.map