@apexcura/ui-components 0.0.13-Beta26 → 0.0.13-Beta28

package/dist/index.js

@@ -58,7 +58,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var TextElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.value);
     }
@@ -80,7 +80,7 @@ var TextElement = (props) => {
       variant: props.variant,
       name: props.name,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       }
     }
   ));
@@ -95,22 +95,20 @@ var PasswordElement = (props) => {
   const handleVisibilityToggle = () => {
     setPasswordVisible((prev) => !prev);
   };
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.value);
     }
   };
   const renderVisibilityIcon = (visible) => visible ? /* @__PURE__ */ import_react2.default.createElement(import_icons.EyeTwoTone, null) : /* @__PURE__ */ import_react2.default.createElement(import_icons.EyeInvisibleOutlined, null);
-  const renderPasswordInput = () => /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ import_react2.default.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react2.default.createElement(
     import_antd2.Input.Password,
     {
       placeholder: props.placeholder,
-      prefix: props.prefix,
-      addonBefore: props.addonBefore,
       className: props.className,
       type: props.type,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       },
       iconRender: renderVisibilityIcon,
       visibilityToggle: {
@@ -118,15 +116,14 @@ var PasswordElement = (props) => {
         onVisibleChange: handleVisibilityToggle
       }
     }
-  );
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ import_react2.default.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react2.default.createElement(import_antd2.Space, null, renderPasswordInput()));
+  ));
 };
 
 // src/Components/NumberElement.tsx
 var import_react3 = __toESM(require("react"));
 var import_antd3 = require("antd");
 var NumberElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     const newValue = e.target.value.replace(/[^0-9]/g, "");
     if (props.onChange) {
       props.onChange(newValue);
@@ -148,7 +145,7 @@ var NumberElement = (props) => {
       variant: props.variant,
       name: props.name,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       }
     }
   ));
@@ -159,7 +156,7 @@ var import_react4 = __toESM(require("react"));
 var import_antd4 = require("antd");
 var { TextArea } = import_antd4.Input;
 var TextareaElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.value);
     }
@@ -179,7 +176,7 @@ var TextareaElement = (props) => {
       showCount: true,
       maxLength: props.maxLength,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       }
     }
   ));
@@ -196,7 +193,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange2 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -215,7 +212,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.className,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange2
     }
   );
 };
@@ -229,7 +226,7 @@ var RadioElement = (props) => {
   const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
   const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
-  const handleChange = (option) => {
+  const handleChange2 = (option) => {
     console.log(option);
     setSelectedValue(option);
     setIsDisabled(true);
@@ -252,7 +249,7 @@ var RadioElement = (props) => {
         import_antd6.Radio,
         {
           onChange: () => {
-            handleChange(option);
+            handleChange2(option);
           },
           key: option.value,
           value: option.value,
@@ -274,7 +271,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
   const checkAll = props.options && props.options.length === checkedList.length;
-  const handleChange = (list) => {
+  const handleChange2 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
@@ -307,7 +304,7 @@ var CheckboxElement = (props) => {
       className: props.className,
       options: props.options,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange2
     }
   ));
 };
@@ -372,7 +369,7 @@ var onSearch = (value) => {
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
 var SingleSelectElement = (props) => {
-  const handleChange = (values) => {
+  const handleChange2 = (values) => {
     if (props.onChange) {
       const option = props.dropDownOptions?.find(
         (option2) => String(option2.title) === values
@@ -387,7 +384,7 @@ var SingleSelectElement = (props) => {
       showSearch: true,
       placeholder: props.placeholder,
       optionFilterProp: "children",
-      onChange: handleChange,
+      onChange: handleChange2,
       onSearch,
       filterOption,
       options: props.dropDownOptions?.map((eachOption) => ({
@@ -403,7 +400,7 @@ var SingleSelectElement = (props) => {
 var import_react11 = __toESM(require("react"));
 var import_antd9 = require("antd");
 var MultipleSelectElement = (props) => {
-  const handleChange = (values) => {
+  const handleChange2 = (values) => {
     if (props.onChange) {
       const selectedOptions = values.map((value) => {
         const option = props.dropDownOptions?.find((option2) => String(option2.title) === value);
@@ -417,7 +414,7 @@ var MultipleSelectElement = (props) => {
     {
       mode: "multiple",
       placeholder: props.placeholder,
-      onChange: handleChange,
+      onChange: handleChange2,
       options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
     }
   );
@@ -570,14 +567,14 @@ var AddMoreTable = (props) => {
 // src/Components/Sidebar.tsx
 var import_react14 = __toESM(require("react"));
 var Sidebar = (props) => {
-  const handleChange = (item) => {
+  const handleChange2 = (item) => {
     if (props.onChange) {
       props.onChange(item);
     }
   };
   return /* @__PURE__ */ import_react14.default.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react14.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
     return /* @__PURE__ */ import_react14.default.createElement("li", { onClick: () => {
-      handleChange(item);
+      handleChange2(item);
     }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react14.default.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ import_react14.default.createElement("p", null, item.label));
   })));
 };
@@ -703,7 +700,7 @@ var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = (0, import_react21.useState)({});
   const [model, setModel] = (0, import_react21.useState)(false);
-  const handleChange = (record) => {
+  const handleChange2 = (record) => {
     if (props.onChange) {
       props.onChange(record);
     }
@@ -753,7 +750,7 @@ var TableElement = (props) => {
         return {
           onClick: () => {
             setSelectedRecord(record);
-            handleChange(record);
+            handleChange2(record);
             setModel(true);
           },
           style: { cursor: "pointer" }
@@ -770,7 +767,7 @@ var import_icons4 = require("@ant-design/icons");
 var import_moment = __toESM(require("moment"));
 var DatePickerElement = (props) => {
   const [date, setDate] = (0, import_react22.useState)(null);
-  const handleChange = (date2, dateString) => {
+  const handleChange2 = (date2, dateString) => {
     console.log("date---------", date2);
     console.log("datestring", dateString);
     if (date2) {
@@ -810,7 +807,7 @@ var DatePickerElement = (props) => {
       placeholder: props.placeholder,
       value: date,
       variant: "borderless",
-      onChange: handleChange
+      onChange: handleChange2
     }
   ), /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.RightOutlined, null)));
 };
@@ -821,7 +818,7 @@ var import_antd16 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
 var DateRangePickerElement = (props) => {
   const { RangePicker } = import_antd16.DatePicker;
-  const handleChange = (dates, dateStrings) => {
+  const handleChange2 = (dates, dateStrings) => {
     if (dates && props.onChange) {
       props.onChange(dateStrings);
     } else {
@@ -834,7 +831,7 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [(0, import_dayjs.default)().add(-30, "d"), (0, import_dayjs.default)()] },
     { label: "Last 90 Days", value: [(0, import_dayjs.default)().add(-90, "d"), (0, import_dayjs.default)()] }
   ];
-  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange2 }));
 };
 
 // src/Components/UploadElement.tsx
@@ -873,19 +870,48 @@ var Image = (props) => {
 var import_react26 = __toESM(require("react"));
 var import_antd18 = require("antd");
 var SingleCheckbox = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ import_react26.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ import_react26.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange2(e), className: props.className }, props.label);
 };
 
 // src/Components/MultiSelect.tsx
 var import_react27 = __toESM(require("react"));
 var import_antd19 = require("antd");
+var options = [];
+for (let i = 10; i < 36; i++) {
+  options.push({
+    value: i.toString(36) + i,
+    label: i.toString(36) + i
+  });
+}
+var handleChange = (value) => {
+  console.log(`Selected: ${value}`);
+};
 var MultiSelect = (props) => {
-  return /* @__PURE__ */ import_react27.default.createElement(import_antd19.Space, null, /* @__PURE__ */ import_react27.default.createElement(import_antd19.Select, { options: props.selectAfter }), /* @__PURE__ */ import_react27.default.createElement(import_antd19.Select, { options: props.selectAfter }));
+  return /* @__PURE__ */ import_react27.default.createElement("div", { style: { display: "flex", backgroundColor: "white", borderRadius: 10, border: "1px solid gray" } }, /* @__PURE__ */ import_react27.default.createElement(
+    import_antd19.Select,
+    {
+      defaultValue: "a1",
+      onChange: handleChange,
+      style: { width: 70, border: "none", borderRadius: 0 },
+      variant: "borderless",
+      options
+    }
+  ), /* @__PURE__ */ import_react27.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react27.default.createElement(
+    import_antd19.Select,
+    {
+      placeholder: "Please select",
+      defaultValue: ["a10"],
+      onChange: handleChange,
+      variant: "borderless",
+      style: { width: 70, borderRadius: 0, border: "0px none" },
+      options
+    }
+  ));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import React from "react";
 import { Input as AntInput } from "antd";
 var TextElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.value);
     }
@@ -24,7 +24,7 @@ var TextElement = (props) => {
       variant: props.variant,
       name: props.name,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       }
     }
   ));
@@ -33,28 +33,26 @@ var TextElement = (props) => {
 // src/Components/PasswordElement.tsx
 import React2, { useState } from "react";
 import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
-import { Input, Space } from "antd";
+import { Input } from "antd";
 var PasswordElement = (props) => {
   const [passwordVisible, setPasswordVisible] = useState(false);
   const handleVisibilityToggle = () => {
     setPasswordVisible((prev) => !prev);
   };
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.value);
     }
   };
   const renderVisibilityIcon = (visible) => visible ? /* @__PURE__ */ React2.createElement(EyeTwoTone, null) : /* @__PURE__ */ React2.createElement(EyeInvisibleOutlined, null);
-  const renderPasswordInput = () => /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ React2.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ React2.createElement(
     Input.Password,
     {
       placeholder: props.placeholder,
-      prefix: props.prefix,
-      addonBefore: props.addonBefore,
       className: props.className,
       type: props.type,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       },
       iconRender: renderVisibilityIcon,
       visibilityToggle: {
@@ -62,15 +60,14 @@ var PasswordElement = (props) => {
         onVisibleChange: handleVisibilityToggle
       }
     }
-  );
-  return /* @__PURE__ */ React2.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ React2.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ React2.createElement(Space, null, renderPasswordInput()));
+  ));
 };
 
 // src/Components/NumberElement.tsx
 import React3 from "react";
 import { Input as AntInput2 } from "antd";
 var NumberElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     const newValue = e.target.value.replace(/[^0-9]/g, "");
     if (props.onChange) {
       props.onChange(newValue);
@@ -92,7 +89,7 @@ var NumberElement = (props) => {
       variant: props.variant,
       name: props.name,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       }
     }
   ));
@@ -103,7 +100,7 @@ import React4 from "react";
 import { Input as Input2 } from "antd";
 var { TextArea } = Input2;
 var TextareaElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.value);
     }
@@ -123,7 +120,7 @@ var TextareaElement = (props) => {
       showCount: true,
       maxLength: props.maxLength,
       onChange: (e) => {
-        handleChange(e);
+        handleChange2(e);
       }
     }
   ));
@@ -140,7 +137,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ React5.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange2 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -159,7 +156,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.className,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange2
     }
   );
 };
@@ -173,7 +170,7 @@ var RadioElement = (props) => {
   const [isDisabled, setIsDisabled] = useState2(props.disabled);
   const [selectedValue, setSelectedValue] = useState2(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
-  const handleChange = (option) => {
+  const handleChange2 = (option) => {
     console.log(option);
     setSelectedValue(option);
     setIsDisabled(true);
@@ -196,7 +193,7 @@ var RadioElement = (props) => {
         Radio,
         {
           onChange: () => {
-            handleChange(option);
+            handleChange2(option);
           },
           key: option.value,
           value: option.value,
@@ -218,7 +215,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = useState3(defaultCheckedList);
   const checkAll = props.options && props.options.length === checkedList.length;
-  const handleChange = (list) => {
+  const handleChange2 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
@@ -251,7 +248,7 @@ var CheckboxElement = (props) => {
       className: props.className,
       options: props.options,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange2
     }
   ));
 };
@@ -316,7 +313,7 @@ var onSearch = (value) => {
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
 var SingleSelectElement = (props) => {
-  const handleChange = (values) => {
+  const handleChange2 = (values) => {
     if (props.onChange) {
       const option = props.dropDownOptions?.find(
         (option2) => String(option2.title) === values
@@ -331,7 +328,7 @@ var SingleSelectElement = (props) => {
       showSearch: true,
       placeholder: props.placeholder,
       optionFilterProp: "children",
-      onChange: handleChange,
+      onChange: handleChange2,
       onSearch,
       filterOption,
       options: props.dropDownOptions?.map((eachOption) => ({
@@ -347,7 +344,7 @@ var SingleSelectElement = (props) => {
 import React10 from "react";
 import { Select as Select3 } from "antd";
 var MultipleSelectElement = (props) => {
-  const handleChange = (values) => {
+  const handleChange2 = (values) => {
     if (props.onChange) {
       const selectedOptions = values.map((value) => {
         const option = props.dropDownOptions?.find((option2) => String(option2.title) === value);
@@ -361,7 +358,7 @@ var MultipleSelectElement = (props) => {
     {
       mode: "multiple",
       placeholder: props.placeholder,
-      onChange: handleChange,
+      onChange: handleChange2,
       options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
     }
   );
@@ -514,14 +511,14 @@ var AddMoreTable = (props) => {
 // src/Components/Sidebar.tsx
 import React13 from "react";
 var Sidebar = (props) => {
-  const handleChange = (item) => {
+  const handleChange2 = (item) => {
     if (props.onChange) {
       props.onChange(item);
     }
   };
   return /* @__PURE__ */ React13.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ React13.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
     return /* @__PURE__ */ React13.createElement("li", { onClick: () => {
-      handleChange(item);
+      handleChange2(item);
     }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ React13.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ React13.createElement("p", null, item.label));
   })));
 };
@@ -647,7 +644,7 @@ var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = useState5({});
   const [model, setModel] = useState5(false);
-  const handleChange = (record) => {
+  const handleChange2 = (record) => {
     if (props.onChange) {
       props.onChange(record);
     }
@@ -697,7 +694,7 @@ var TableElement = (props) => {
         return {
           onClick: () => {
             setSelectedRecord(record);
-            handleChange(record);
+            handleChange2(record);
             setModel(true);
           },
           style: { cursor: "pointer" }
@@ -714,7 +711,7 @@ import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import moment from "moment";
 var DatePickerElement = (props) => {
   const [date, setDate] = useState6(null);
-  const handleChange = (date2, dateString) => {
+  const handleChange2 = (date2, dateString) => {
     console.log("date---------", date2);
     console.log("datestring", dateString);
     if (date2) {
@@ -754,18 +751,18 @@ var DatePickerElement = (props) => {
       placeholder: props.placeholder,
       value: date,
       variant: "borderless",
-      onChange: handleChange
+      onChange: handleChange2
     }
   ), /* @__PURE__ */ React21.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ React21.createElement(RightOutlined, null)));
 };
 
 // src/Components/DateRangePickerElement.tsx
 import React22 from "react";
-import { DatePicker as DatePicker2, Space as Space2 } from "antd";
+import { DatePicker as DatePicker2, Space } from "antd";
 import dayjs from "dayjs";
 var DateRangePickerElement = (props) => {
   const { RangePicker } = DatePicker2;
-  const handleChange = (dates, dateStrings) => {
+  const handleChange2 = (dates, dateStrings) => {
     if (dates && props.onChange) {
       props.onChange(dateStrings);
     } else {
@@ -778,7 +775,7 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [dayjs().add(-30, "d"), dayjs()] },
     { label: "Last 90 Days", value: [dayjs().add(-90, "d"), dayjs()] }
   ];
-  return /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange2 }));
 };
 
 // src/Components/UploadElement.tsx
@@ -817,19 +814,48 @@ var Image = (props) => {
 import React25 from "react";
 import { Checkbox as Checkbox2 } from "antd";
 var SingleCheckbox = (props) => {
-  const handleChange = (e) => {
+  const handleChange2 = (e) => {
     if (props.onChange) {
       props.onChange(e.target.checked);
     }
   };
-  return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
+  return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange2(e), className: props.className }, props.label);
 };
 
 // src/Components/MultiSelect.tsx
 import React26 from "react";
-import { Select as Select4, Space as Space3 } from "antd";
+import { Select as Select4 } from "antd";
+var options = [];
+for (let i = 10; i < 36; i++) {
+  options.push({
+    value: i.toString(36) + i,
+    label: i.toString(36) + i
+  });
+}
+var handleChange = (value) => {
+  console.log(`Selected: ${value}`);
+};
 var MultiSelect = (props) => {
-  return /* @__PURE__ */ React26.createElement(Space3, null, /* @__PURE__ */ React26.createElement(Select4, { options: props.selectAfter }), /* @__PURE__ */ React26.createElement(Select4, { options: props.selectAfter }));
+  return /* @__PURE__ */ React26.createElement("div", { style: { display: "flex", backgroundColor: "white", borderRadius: 10, border: "1px solid gray" } }, /* @__PURE__ */ React26.createElement(
+    Select4,
+    {
+      defaultValue: "a1",
+      onChange: handleChange,
+      style: { width: 70, border: "none", borderRadius: 0 },
+      variant: "borderless",
+      options
+    }
+  ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
+    Select4,
+    {
+      placeholder: "Please select",
+      defaultValue: ["a10"],
+      onChange: handleChange,
+      variant: "borderless",
+      style: { width: 70, borderRadius: 0, border: "0px none" },
+      options
+    }
+  ));
 };
 export {
   AddMoreTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.13-Beta26",
+  "version": "0.0.13-Beta28",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",