@agentscope-ai/design 1.0.5 → 1.0.7

package/lib/components/commonComponents/Progress/demo/demo1.js

@@ -0,0 +1,17 @@
+import { Progress } from "../../../..";
+import { Flex } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var App = function App() {
+  return /*#__PURE__*/_jsx(Flex, {
+    style: {
+      width: '200px'
+    },
+    vertical: true,
+    children: /*#__PURE__*/_jsx(Progress, {
+      percent: 50,
+      showInfo: false
+    })
+  });
+};
+export default App;

package/lib/components/commonComponents/Radio/demo/demo1.js

@@ -0,0 +1,25 @@
+import { Radio } from "../../../..";
+import { Flex } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: "middle",
+    children: [/*#__PURE__*/_jsx(Radio, {
+      children: "unselected"
+    }), /*#__PURE__*/_jsx(Radio, {
+      disabled: true,
+      children: "unselected disabled"
+    }), /*#__PURE__*/_jsx(Radio, {
+      checked: true,
+      children: "selected"
+    }), /*#__PURE__*/_jsx(Radio, {
+      disabled: true,
+      checked: true,
+      children: "selected disabled"
+    })]
+  });
+};
+export default App;

package/lib/components/commonComponents/RadioButton/demo/demo1.js

@@ -0,0 +1,28 @@
+import { Flex } from 'antd';
+import React from 'react';
+import RadioButton from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+var onChange = function onChange(e) {
+  console.log("radio checked:".concat(e.target.value));
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(Flex, {
+    vertical: true,
+    gap: "middle",
+    children: /*#__PURE__*/_jsx(RadioButton, {
+      onChange: onChange,
+      defaultValue: "max",
+      options: [{
+        value: 'max',
+        label: 'Qwen-Max'
+      }, {
+        value: 'plus',
+        label: 'Qwen-Plus'
+      }, {
+        value: 'turbo',
+        label: 'Qwen-Turbo'
+      }]
+    })
+  });
+};
+export default App;

package/lib/components/commonComponents/RadioButton/demo/demo2.js

@@ -0,0 +1,58 @@
+import { Flex, Radio } from 'antd';
+import React from 'react';
+import RadioButton from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var onChange = function onChange(e) {
+  console.log("radio checked:".concat(e.target.value));
+};
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: "16px",
+    children: [/*#__PURE__*/_jsxs(RadioButton, {
+      onChange: onChange,
+      defaultValue: "a",
+      size: "large",
+      children: [/*#__PURE__*/_jsx(Radio.Button, {
+        value: "a",
+        children: "Qwen-Max"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "b",
+        children: "Qwen-Plus"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "c",
+        children: "Qwen-Turbo"
+      })]
+    }), /*#__PURE__*/_jsxs(RadioButton, {
+      onChange: onChange,
+      defaultValue: "a",
+      size: "middle",
+      children: [/*#__PURE__*/_jsx(Radio.Button, {
+        value: "a",
+        children: "Qwen-Max"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "b",
+        children: "Qwen-Plus"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "c",
+        children: "Qwen-Turbo"
+      })]
+    }), /*#__PURE__*/_jsxs(RadioButton, {
+      onChange: onChange,
+      defaultValue: "a",
+      size: "small",
+      children: [/*#__PURE__*/_jsx(Radio.Button, {
+        value: "a",
+        children: "Qwen-Max"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "b",
+        children: "Qwen-Plus"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "c",
+        children: "Qwen-Turbo"
+      })]
+    })]
+  });
+};
+export default App;

package/lib/components/commonComponents/RadioButton/demo/demo3.js

@@ -0,0 +1,31 @@
+import { Flex } from 'antd';
+import React from 'react';
+import RadioButton from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+var onChange = function onChange(e) {
+  console.log("radio checked:".concat(e.target.value));
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(Flex, {
+    vertical: true,
+    gap: "middle",
+    children: /*#__PURE__*/_jsx(RadioButton, {
+      onChange: onChange,
+      defaultValue: "a",
+      options: [{
+        value: 'a',
+        label: 'Qwen-Max',
+        disabled: true
+      }, {
+        value: 'b',
+        label: 'Qwen-Plus',
+        disabled: true
+      }, {
+        value: 'c',
+        label: 'Qwen-Turbo',
+        disabled: true
+      }]
+    })
+  });
+};
+export default App;

package/lib/components/commonComponents/RadioButton/demo/demo4.js

@@ -0,0 +1,30 @@
+import { Flex } from 'antd';
+import React from 'react';
+import RadioButton from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+var onChange = function onChange(e) {
+  console.log("radio checked:".concat(e.target.value));
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(Flex, {
+    vertical: true,
+    gap: "middle",
+    children: /*#__PURE__*/_jsx(RadioButton, {
+      onChange: onChange,
+      defaultValue: "a",
+      buttonStyle: "solid",
+      ghost: false,
+      options: [{
+        value: 'a',
+        label: 'Qwen-Max'
+      }, {
+        value: 'c',
+        label: 'Qwen-Plus'
+      }, {
+        value: 'd',
+        label: 'Qwen-Turbo'
+      }]
+    })
+  });
+};
+export default App;

package/lib/components/commonComponents/RadioButton/demo/demo5.js

@@ -0,0 +1,30 @@
+import { Flex, Radio } from 'antd';
+import React from 'react';
+import RadioButton from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var onChange = function onChange(e) {
+  console.log("radio checked:".concat(e.target.value));
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(Flex, {
+    vertical: true,
+    gap: "middle",
+    children: /*#__PURE__*/_jsxs(RadioButton, {
+      onChange: onChange,
+      defaultValue: "a",
+      bordered: true,
+      children: [/*#__PURE__*/_jsx(Radio.Button, {
+        value: "a",
+        children: "Qwen-Max"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "b",
+        children: "Qwen-Plus"
+      }), /*#__PURE__*/_jsx(Radio.Button, {
+        value: "c",
+        children: "Qwen-Turbo"
+      })]
+    })
+  });
+};
+export default App;

package/lib/components/commonComponents/RadioButton/index.d.ts

@@ -0,0 +1,23 @@
+import { RadioGroupProps } from 'antd';
+export interface SparkRadioButtonProps extends RadioGroupProps {
+    /**
+     * @description 边框
+     * @descriptionEn border
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * @description 按钮背景色类型
+     * @descriptionEn ghost
+     * @default true
+     */
+    ghost?: boolean;
+    /**
+     * @description 间距
+     * @descriptionEn gap
+     * @default 12 px
+     */
+    gap?: number;
+}
+declare const _default: (props: SparkRadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/RadioButton/index.style.d.ts

@@ -0,0 +1,72 @@
+export declare function getIndexStyleData(params: any): {
+    [x: string]: {
+        border: string;
+        backgroundColor: string;
+        '&:first-child': {
+            'border-inline-start': string;
+        };
+        borderRadius: string;
+        '&::before': {
+            display: string;
+        };
+        '&:not(:last-child)': {
+            marginRight: string;
+        };
+        color?: undefined;
+        '&:hover'?: undefined;
+    } | {
+        [x: string]: {
+            [x: string]: {
+                [x: string]: string | {
+                    backgroundColor: string;
+                };
+                color: string;
+                backgroundColor: string;
+                '&:hover'?: undefined;
+            } | {
+                '&:hover': {
+                    backgroundColor: string;
+                };
+                color?: undefined;
+                backgroundColor?: undefined;
+            };
+        };
+        border?: undefined;
+        backgroundColor?: undefined;
+        '&:first-child'?: undefined;
+        borderRadius?: undefined;
+        '&::before'?: undefined;
+        '&:not(:last-child)'?: undefined;
+        color?: undefined;
+        '&:hover'?: undefined;
+    } | {
+        [x: string]: {
+            border: string;
+            '&:not(:first-child)': {
+                'border-inline-start-width': string;
+            };
+        };
+        border?: undefined;
+        backgroundColor?: undefined;
+        '&:first-child'?: undefined;
+        borderRadius?: undefined;
+        '&::before'?: undefined;
+        '&:not(:last-child)'?: undefined;
+        color?: undefined;
+        '&:hover'?: undefined;
+    } | {
+        color: string;
+        backgroundColor: string;
+        '&:hover': {
+            color: string;
+            backgroundColor: string;
+        };
+        border?: undefined;
+        '&:first-child'?: undefined;
+        borderRadius?: undefined;
+        '&::before'?: undefined;
+        '&:not(:last-child)'?: undefined;
+    };
+};
+declare const useIndexStyle: (props?: {}) => import("../../../config").CommonConfig;
+export default useIndexStyle;

package/lib/components/commonComponents/RadioButton/index.style.js

@@ -0,0 +1,63 @@
+var _excluded = ["css"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import createStyle from "../../../libs/createStyle";
+export function getIndexStyleData(params) {
+  var antPrefix = params.antPrefix,
+    _params$gap = params.gap,
+    gap = _params$gap === void 0 ? 12 : _params$gap,
+    sparkPrefix = params.sparkPrefix;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(antPrefix, "-radio-button-wrapper"), {
+    border: 'none',
+    backgroundColor: 'transparent',
+    '&:first-child': {
+      'border-inline-start': 'initial'
+    },
+    borderRadius: '6px',
+    '&::before': {
+      display: 'none !important'
+    },
+    '&:not(:last-child)': {
+      marginRight: "".concat(gap, "px")
+    }
+  }), ".".concat(antPrefix, "-radio-group-ghost"), _defineProperty({}, ".".concat(antPrefix, "-radio-button-wrapper-checked"), _defineProperty(_defineProperty({}, "&:not(.".concat(antPrefix, "-radio-button-wrapper-disabled)"), _defineProperty({
+    color: "var(--".concat(antPrefix, "-color-primary)"),
+    backgroundColor: "var(--".concat(antPrefix, "-color-primary-bg)")
+  }, ".".concat(antPrefix, "-radio-button-wrapper-checked"), {
+    backgroundColor: "var(--".concat(antPrefix, "-color-primary-bg)")
+  })), "&.".concat(antPrefix, "-radio-button-wrapper-disabled"), {
+    '&:hover': {
+      backgroundColor: "var(--".concat(antPrefix, "-color-fill-tertiary)")
+    }
+  }))), ".".concat(sparkPrefix, "-radio-group-bordered"), _defineProperty({}, ".".concat(antPrefix, "-radio-button-wrapper"), {
+    border: "var(--".concat(antPrefix, "-line-width) var(--").concat(antPrefix, "-line-type) var(--").concat(antPrefix, "-color-border)"),
+    '&:not(:first-child)': {
+      'border-inline-start-width': '1px'
+    }
+  })), ".".concat(antPrefix, "-radio-button-wrapper-disabled"), {
+    color: "var(--".concat(antPrefix, "-color-text-tertiary)"),
+    backgroundColor: 'transparent',
+    '&:hover': {
+      color: "var(--".concat(antPrefix, "-color-text-tertiary)"),
+      backgroundColor: 'transparent'
+    }
+  }), ".".concat(antPrefix, "-radio-button-wrapper-checked.").concat(antPrefix, "-radio-button-wrapper-disabled"), {
+    color: "var(--".concat(antPrefix, "-color-text-tertiary)"),
+    backgroundColor: "var(--".concat(antPrefix, "-color-fill-tertiary)"),
+    '&:hover': {
+      color: "var(--".concat(antPrefix, "-color-text-tertiary)"),
+      backgroundColor: "var(--".concat(antPrefix, "-color-fill-tertiary)")
+    }
+  });
+}
+var useIndexStyle = createStyle(function (_ref2) {
+  var css = _ref2.css,
+    params = _objectWithoutProperties(_ref2, _excluded);
+  var result = css(getIndexStyleData(params));
+  return result;
+});
+export default useIndexStyle;

package/lib/components/commonComponents/Result/demo/demo1.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Result/demo/demo1.js

@@ -0,0 +1,10 @@
+import { Result } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Result, {
+    type: "success",
+    title: "Sucess",
+    description: "Please try later...",
+    okText: "Try now"
+  });
+});

package/lib/components/commonComponents/Result/demo/demo2.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Result/demo/demo2.js

@@ -0,0 +1,10 @@
+import { Result } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Result, {
+    type: "failed",
+    title: "Failed",
+    description: "Please try later...",
+    okText: "Retry"
+  });
+});

package/lib/components/commonComponents/Result/demo/demo3.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Result/demo/demo3.js

@@ -0,0 +1,10 @@
+import { Result } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Result, {
+    type: "error",
+    title: "Error",
+    description: "Please try again later",
+    okText: "Retry"
+  });
+});

package/lib/components/commonComponents/Result/demo/demo4.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Result/demo/demo4.js

@@ -0,0 +1,10 @@
+import { Result } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Result, {
+    type: "inProgress",
+    title: "In Progress",
+    description: "Please try later...",
+    okText: "Retry"
+  });
+});

package/lib/components/commonComponents/Result/demo/demo5.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Result/demo/demo5.js

@@ -0,0 +1,10 @@
+import { Result } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Result, {
+    type: "404",
+    title: "404",
+    description: "Please try again later",
+    okText: "Retry"
+  });
+});

package/lib/components/commonComponents/Result/demo/demo6.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Result/demo/demo6.js

@@ -0,0 +1,10 @@
+import { Result } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Result, {
+    type: "networkError",
+    title: "Network Error",
+    description: "Please try later...",
+    okText: "Retry"
+  });
+});

package/lib/components/commonComponents/Result/index.d.ts

@@ -0,0 +1,10 @@
+import { SparkEmptyProps } from '../Empty';
+export interface SparkResultProps extends Omit<SparkEmptyProps, 'texture'> {
+    /**
+     * @description 是否显示纹理
+     * @default false
+     */
+    texture?: boolean;
+}
+declare const _default: (props: SparkResultProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/components/commonComponents/Result/index.js

@@ -0,0 +1,19 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["texture"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import Empty from "../Empty";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function (props) {
+  var _props$texture = props.texture,
+    texture = _props$texture === void 0 ? false : _props$texture,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx(Empty, _objectSpread(_objectSpread({}, restProps), {}, {
+    texture: texture
+  }));
+});

package/lib/components/commonComponents/Result/index.style.d.ts

@@ -0,0 +1,3 @@
+export declare function getIndexStyleData(params: any): {};
+declare const useIndexStyle: (props?: {}) => import("../../../config").CommonConfig;
+export default useIndexStyle;

package/lib/components/commonComponents/Result/index.style.js

@@ -0,0 +1,16 @@
+var _excluded = ["css"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import createStyle from "../../../libs/createStyle";
+export function getIndexStyleData(params) {
+  var sparkPrefix = params.sparkPrefix,
+    antPrefix = params.antPrefix;
+  return {};
+}
+var useIndexStyle = createStyle(function (_ref) {
+  var css = _ref.css,
+    params = _objectWithoutProperties(_ref, _excluded);
+  var result = css(getIndexStyleData(params));
+  return result;
+});
+export default useIndexStyle;

package/lib/components/commonComponents/Select/demo/demo1.js

@@ -0,0 +1,74 @@
+import { Select } from "../../../..";
+import { Flex } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var handleChange = function handleChange(value) {
+  console.log("selected ".concat(value));
+};
+var handleChange2 = function handleChange2(value) {
+  console.log("selected ".concat(value));
+};
+var handleChange3 = function handleChange3(value) {
+  console.log("selected ".concat(value));
+};
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: "middle",
+    align: "center",
+    justify: "center",
+    children: [/*#__PURE__*/_jsx(Select, {
+      placeholder: "Select here...",
+      style: {
+        width: 240
+      },
+      onChange: handleChange,
+      options: [{
+        value: '1',
+        label: 'Menu Item 1'
+      }, {
+        value: '2',
+        label: 'Menu Item 2'
+      }, {
+        value: '3',
+        label: 'Menu Item 3'
+      }]
+    }), /*#__PURE__*/_jsx(Select, {
+      placeholder: "Select here...",
+      style: {
+        width: 240
+      },
+      disabled: true,
+      onChange: handleChange2,
+      value: '1',
+      options: [{
+        value: '1',
+        label: 'Selected item'
+      }, {
+        value: '2',
+        label: 'Menu Item 2'
+      }, {
+        value: '3',
+        label: 'Menu Item 3'
+      }]
+    }), /*#__PURE__*/_jsx(Select, {
+      status: "error",
+      placeholder: "Select here...",
+      style: {
+        width: 240
+      },
+      onChange: handleChange3,
+      options: [{
+        value: '1',
+        label: 'Error Menu Item 1'
+      }, {
+        value: '2',
+        label: 'Error Menu Item 2'
+      }, {
+        value: '3',
+        label: 'Error Menu Item 3'
+      }]
+    })]
+  });
+};
+export default App;