mainstack-design-system 0.7.27 → 0.7.29

package/build/index.d.ts

@@ -135,6 +135,8 @@ export declare const Banner: ({ variant, onProceed, message, buttonText, hasProc
 
 export declare const BarChartFilledIcon: (props: IconProps) => JSX_2.Element;
 
+export declare const BarcodeScannerIcon: (props: IconProps) => JSX_2.Element;
+
 export declare const BlockIcon: (props: IconProps) => JSX_2.Element;
 
 export declare const BoltFilledIcon: (props: IconProps) => JSX_2.Element;

package/build/mainstack-design-system.js

@@ -1,6 +1,6 @@
 import "./index.css";
 import { Button as T7, Flex as y1, Icon as O, Text as B1, AccordionItem as o9, Box as k1, AccordionButton as i9, Center as n5, AccordionPanel as a9, Image as t2, Circle as ee, useRadio as l9, Tabs as O7, TabList as B7, Tab as F7, TabPanels as N7, TabPanel as P7, Show as $5, Select as s9, useCheckbox as R7, Switch as u9, FormLabel as u2, InputGroup as te, InputRightElement as ne, InputLeftElement as re, Input as U2, Textarea as c9, Spinner as D7, useDisclosure as G7, Popover as oe, PopoverTrigger as ie, PopoverContent as ae, PopoverArrow as C9, PopoverBody as le, chakra as x5, Tooltip as d9, useMediaQuery as j7, Grid as f9, GridItem as Se, SimpleGrid as h9, Slider as p9, SliderTrack as g9, SliderFilledTrack as m9, SliderThumb as v9 } from "@chakra-ui/react";
-import { Accordion as wh, AccordionPanel as xh, ChakraProvider as Ih } from "@chakra-ui/react";
+import { Accordion as xh, AccordionPanel as Ih, ChakraProvider as Hh } from "@chakra-ui/react";
 import { jsx as t, jsxs as r1, Fragment as X1 } from "react/jsx-runtime";
 import { motion as W7 } from "framer-motion";
 import * as M1 from "react";
@@ -6482,6 +6482,22 @@ const o2 = ({
       }
     )
   }
+), Gf = (e) => /* @__PURE__ */ t(
+  O,
+  {
+    ...e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: { maskType: "alpha" },
+    children: /* @__PURE__ */ t("g", { mask: "url(#mask0_2364_121229)", children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M1.04102 17.2923V13.5423H2.29102V16.0423H4.79102V17.2923H1.04102ZM15.2077 17.2923V16.0423H17.7077V13.5423H18.9577V17.2923H15.2077ZM3.33268 15.0007V5.00065H4.99935V15.0007H3.33268ZM5.83268 15.0007V5.00065H6.66602V15.0007H5.83268ZM8.33268 15.0007V5.00065H9.99935V15.0007H8.33268ZM10.8327 15.0007V5.00065H13.3327V15.0007H10.8327ZM14.166 15.0007V5.00065H14.9993V15.0007H14.166ZM15.8327 15.0007V5.00065H16.666V15.0007H15.8327ZM1.04102 6.45898V2.70898H4.79102V3.95898H2.29102V6.45898H1.04102ZM17.7077 6.45898V3.95898H15.2077V2.70898H18.9577V6.45898H17.7077Z",
+        fill: "currentColor"
+      }
+    ) })
+  }
 );
 const A2 = {
   "3xl": {
@@ -6581,7 +6597,7 @@ const A2 = {
     ...n,
     children: r
   }
-), Gf = c2(
+), jf = c2(
   ({
     children: e,
     title: o,
@@ -6651,7 +6667,7 @@ const A2 = {
                 ] })
               }
             ),
-            /* @__PURE__ */ t(a9, { p: 0, mt: "24px", children: e })
+            /* @__PURE__ */ t(a9, { p: 0, mt: "24px", overflow: "auto", children: e })
           ]
         }
       )
@@ -6708,7 +6724,7 @@ const A2 = {
       children: r()
     }
   ) });
-}, jf = (e) => /* @__PURE__ */ t(X1, { children: e.type === "image" ? /* @__PURE__ */ t(
+}, Wf = (e) => /* @__PURE__ */ t(X1, { children: e.type === "image" ? /* @__PURE__ */ t(
   t2,
   {
     ...e,
@@ -6874,7 +6890,7 @@ const A2 = {
       ] })
     ] })
   ] });
-}, Wf = ({ isChecked: e, label: o, hasRadio: i, ...r }) => /* @__PURE__ */ t(
+}, zf = ({ isChecked: e, label: o, hasRadio: i, ...r }) => /* @__PURE__ */ t(
   y1,
   {
     pl: "16px",
@@ -6955,7 +6971,7 @@ const A2 = {
       }
     )
   }
-), zf = ({
+), Xf = ({
   items: e,
   width: o,
   tabIndex: i,
@@ -7022,7 +7038,7 @@ const A2 = {
     }
   ),
   /* @__PURE__ */ t(N7, { children: e.map((d, g) => /* @__PURE__ */ t(P7, { padding: "0", children: d.element }, g)) })
-] }), Xf = ({
+] }), Yf = ({
   limit: e,
   setLimit: o,
   page: i,
@@ -7232,7 +7248,7 @@ const A2 = {
       ] })
     ] })
   ] });
-}, Yf = (e) => {
+}, Jf = (e) => {
   const { state: o, getCheckboxProps: i, getInputProps: r, getLabelProps: n, htmlProps: d } = R7(e);
   return /* @__PURE__ */ r1(k1, { as: "label", cursor: "pointer", position: "relative", ...d, children: [
     /* @__PURE__ */ t("input", { ...r(), disabled: e.isDisabled }),
@@ -7323,7 +7339,7 @@ const A2 = {
       ] })
     ] })
   ] });
-}, Jf = ({
+}, qf = ({
   steps: e,
   page: o,
   handleStepClick: i,
@@ -7398,7 +7414,7 @@ const A2 = {
       ))
     }
   );
-}, qf = ({
+}, Uf = ({
   items: e,
   width: o,
   tabIndex: i,
@@ -7494,7 +7510,7 @@ const A2 = {
     }
   ),
   /* @__PURE__ */ t(N7, { children: e.map((d, g) => /* @__PURE__ */ t(P7, { padding: "0", children: d.element }, g)) })
-] }), Uf = ({
+] }), $f = ({
   label: e,
   subtext: o,
   refkey: i,
@@ -10954,7 +10970,7 @@ const ge = {
     margin: "0px",
     padding: "0px"
   })
-}, me = (e) => /* @__PURE__ */ t(X1, { children: e.isMulti ? /* @__PURE__ */ t(X1, {}) : /* @__PURE__ */ t(Q2.DropdownIndicator, { ...e, children: /* @__PURE__ */ t(W7.div, { animate: { rotate: e.isFocused ? "180deg" : "0deg" }, children: /* @__PURE__ */ t(q7, { boxSize: "24px" }) }) }) }), _t = (e) => /* @__PURE__ */ t(Q2.ClearIndicator, { ...e, children: /* @__PURE__ */ t(se, { boxSize: "20px", color: T.black300 }) }), At = ({ innerProps: e }) => /* @__PURE__ */ t(X1, {}), Et = (e) => /* @__PURE__ */ t(Q2.MultiValueRemove, { ...e, children: /* @__PURE__ */ t(se, { boxSize: "18px", color: T.white100 }) }), $f = ({
+}, me = (e) => /* @__PURE__ */ t(X1, { children: e.isMulti ? /* @__PURE__ */ t(X1, {}) : /* @__PURE__ */ t(Q2.DropdownIndicator, { ...e, children: /* @__PURE__ */ t(W7.div, { animate: { rotate: e.isFocused ? "180deg" : "0deg" }, children: /* @__PURE__ */ t(q7, { boxSize: "24px" }) }) }) }), _t = (e) => /* @__PURE__ */ t(Q2.ClearIndicator, { ...e, children: /* @__PURE__ */ t(se, { boxSize: "20px", color: T.black300 }) }), At = ({ innerProps: e }) => /* @__PURE__ */ t(X1, {}), Et = (e) => /* @__PURE__ */ t(Q2.MultiValueRemove, { ...e, children: /* @__PURE__ */ t(se, { boxSize: "18px", color: T.white100 }) }), Kf = ({
   label: e,
   id: o,
   name: i,
@@ -11054,7 +11070,7 @@ const ge = {
       ]
     }
   );
-}, Kf = ({
+}, Qf = ({
   label: e,
   id: o,
   name: i,
@@ -12988,7 +13004,7 @@ const W4 = (Z7 = L3 == null ? void 0 : L3.sort((e, o) => e.name.localeCompare(o.
   // @ts-ignore
   abr: e.alpha3Code,
   code: e.alpha2Code
-})), Qf = ({
+})), eh = ({
   value: e,
   onChange: o,
   label: i = "Country",
@@ -14396,7 +14412,7 @@ var z4 = function(e) {
   X.defaultProps = { country: "", value: "", onlyCountries: [], preferredCountries: [], excludeCountries: [], placeholder: "1 (702) 123-4567", searchPlaceholder: "search", searchNotFound: "No entries to show", flagsImagePath: "./flags.png", disabled: !1, containerStyle: {}, inputStyle: {}, buttonStyle: {}, dropdownStyle: {}, searchStyle: {}, containerClass: "", inputClass: "", buttonClass: "", dropdownClass: "", searchClass: "", className: "", autoFormat: !0, enableAreaCodes: !1, enableTerritories: !1, disableCountryCode: !1, disableDropdown: !1, enableLongNumbers: !1, countryCodeEditable: !0, enableSearch: !1, disableSearchIcon: !1, disableInitialCountryGuess: !1, disableCountryGuess: !1, regions: "", inputProps: {}, localization: {}, masks: null, priority: null, areaCodes: null, preserveOrder: [], defaultMask: "... ... ... ... ..", alwaysDefaultMask: !1, prefix: "+", copyNumbersOnly: !0, renderStringAsFlag: "", autocompleteSearch: !1, jumpCursorToEnd: !0, enableAreaCodeStretch: !1, enableClickOutside: !0, showDropdown: !1, isValid: !0, defaultErrorMessage: "", specialLabel: "Phone", onEnterKeyPress: null, keys: { UP: 38, DOWN: 40, RIGHT: 39, LEFT: 37, ENTER: 13, ESC: 27, PLUS: 43, A: 65, Z: 90, SPACE: 32, TAB: 9 } }, o.default = X;
 }]);
 const X4 = /* @__PURE__ */ St(z4);
-const eh = ({
+const th = ({
   value: e,
   onChange: o,
   enableSearch: i,
@@ -22969,7 +22985,7 @@ const Bl = ({
     /* @__PURE__ */ t("button", { className: "ql-video" })
   ] }),
   /* @__PURE__ */ t("span", { className: "ql-formats", children: /* @__PURE__ */ t("button", { className: "ql-clean" }) })
-] }), th = ({
+] }), nh = ({
   defaultValue: e,
   onChange: o,
   border: i,
@@ -23074,7 +23090,7 @@ const Bl = ({
       }
     )
   ] });
-}, nh = ({
+}, rh = ({
   name: e,
   id: o,
   value: i,
@@ -23128,7 +23144,7 @@ const Bl = ({
       ...s
     }
   )
-] }), rh = ({
+] }), oh = ({
   label: e,
   name: o,
   id: i,
@@ -23252,7 +23268,7 @@ const Bl = ({
       )
     ] }) : null })
   ] });
-}, oh = ({
+}, ih = ({
   label: e,
   name: o,
   id: i,
@@ -23338,7 +23354,7 @@ const Bl = ({
     /* @__PURE__ */ t(P5, { color: T.red500 }),
     /* @__PURE__ */ t(U1, { color: T.red500, size: "xxs", children: c })
   ] }) })
-] }), ih = ({
+] }), ah = ({
   variant: e,
   onProceed: o,
   message: i,
@@ -23482,7 +23498,7 @@ const Bl = ({
             ]
           }
         ),
-        /* @__PURE__ */ r1(y1, { justifyContent: "center", alignItems: "center", gap: "16px", children: [
+        (n || d) && /* @__PURE__ */ r1(y1, { justifyContent: "center", alignItems: "center", gap: "16px", children: [
           n && /* @__PURE__ */ t(
             h5,
             {
@@ -23515,7 +23531,7 @@ const Bl = ({
       ]
     }
   );
-}, ah = ({
+}, lh = ({
   label: e,
   body: o,
   hasSpecialArrow: i,
@@ -23672,7 +23688,7 @@ const Bl = ({
       ] })
     }
   );
-}, lh = ({ label: e, children: o, placement: i, ...r }) => /* @__PURE__ */ t(
+}, sh = ({ label: e, children: o, placement: i, ...r }) => /* @__PURE__ */ t(
   d9,
   {
     hasArrow: !0,
@@ -23693,7 +23709,7 @@ const Bl = ({
     ...r,
     children: o
   }
-), sh = ({
+), uh = ({
   icon: e,
   image: o,
   iconPosition: i,
@@ -23814,7 +23830,7 @@ const Bl = ({
   return Object.entries(e).forEach(([r, n]) => {
     i[r] = K3[n][o];
   }), i;
-}, uh = ({ size: e, color: o, fontFamily: i, children: r, ...n }) => /* @__PURE__ */ t(
+}, ch = ({ size: e, color: o, fontFamily: i, children: r, ...n }) => /* @__PURE__ */ t(
   B1,
   {
     as: "h1",
@@ -23894,7 +23910,7 @@ const Bl = ({
   return Object.entries(e).forEach(([r, n]) => {
     i[r] = Z2[n][o];
   }), i;
-}, ch = ({ size: e, color: o, fontFamily: i, children: r, ...n }) => /* @__PURE__ */ t(
+}, Ch = ({ size: e, color: o, fontFamily: i, children: r, ...n }) => /* @__PURE__ */ t(
   B1,
   {
     as: "h1",
@@ -23915,7 +23931,7 @@ const Bl = ({
     ...n,
     children: r
   }
-), Ch = ({
+), dh = ({
   file: e,
   onHandleChange: o,
   handleDeleteFile: i,
@@ -24057,7 +24073,7 @@ const Bl = ({
       }
     )
   ] });
-}, dh = ({
+}, fh = ({
   multiple: e = !1,
   onHandleChange: o,
   imageArray: i,
@@ -24309,7 +24325,7 @@ const Bl = ({
       }
     )
   ] });
-}, fh = ({ width: e, height: o, color: i }) => /* @__PURE__ */ t(
+}, hh = ({ width: e, height: o, color: i }) => /* @__PURE__ */ t(
   y1,
   {
     width: e || "100%",
@@ -24329,7 +24345,7 @@ const Bl = ({
       }
     ) })
   }
-), hh = ({
+), ph = ({
   fontFamily: e,
   urlLabel: o,
   status: i,
@@ -24463,7 +24479,7 @@ const Bl = ({
     bgColor: T.gray50,
     textColor: T.gray400
   }
-}, ph = ({ status: e, icon: o, label: i, allCaps: r, fontFamily: n }) => {
+}, gh = ({ status: e, icon: o, label: i, allCaps: r, fontFamily: n }) => {
   var d, g, b;
   return /* @__PURE__ */ r1(
     y1,
@@ -24498,7 +24514,7 @@ const Bl = ({
       ]
     }
   );
-}, gh = ({
+}, mh = ({
   maxValue: e = 10,
   minValue: o,
   sliderValue: i,
@@ -24876,7 +24892,8 @@ const Yl = ({
   return /* @__PURE__ */ r1(
     y1,
     {
-      width: "auto",
+      maxW: { base: "343px", md: "400px" },
+      width: "1000px",
       borderRadius: "12px",
       border: "1px solid",
       borderColor: o === "default" || o === "info" ? T.gray50 : o === "error" ? T.red100 : o === "warning" ? T.amber100 : T.green100,
@@ -24930,7 +24947,7 @@ const Yl = ({
       ]
     }
   );
-}, mh = () => /* @__PURE__ */ t(
+}, vh = () => /* @__PURE__ */ t(
   Q3,
   {
     autoClose: 4e3,
@@ -24955,7 +24972,7 @@ const Yl = ({
     }
   }
 );
-function vh(e, o, i, r, n, d) {
+function yh(e, o, i, r, n, d) {
   D1(
     /* @__PURE__ */ t(
       Yl,
@@ -24971,9 +24988,9 @@ function vh(e, o, i, r, n, d) {
   );
 }
 export {
-  wh as Accordion,
-  Gf as AccordionItem,
-  xh as AccordionPanel,
+  xh as Accordion,
+  jf as AccordionItem,
+  Ih as AccordionPanel,
   ts as AccountBalanceIcon,
   ns as AccountBalanceWalletFilledIcon,
   rs as AccountBalanceWalletIcon,
@@ -25016,11 +25033,12 @@ export {
   Ns as AutoFixFilledIcon,
   M9 as AutoFixIcon,
   Ps as AutoGraphIcon,
-  jf as Avatars,
+  Wf as Avatars,
   Rs as AwardStarFilledIcon,
   Ds as AwardStarIcon,
-  ih as Banner,
+  ah as Banner,
   Gs as BarChartFilledIcon,
+  Gf as BarcodeScannerIcon,
   js as BlockIcon,
   Ws as BoltFilledIcon,
   zs as BoltIcon,
@@ -25056,8 +25074,8 @@ export {
   ue as CheckIcon,
   P9 as ChevronLeftIcon,
   N9 as ChevronRightIcon,
-  Wf as Chip,
-  ah as ClickTooltip,
+  zf as Chip,
+  lh as ClickTooltip,
   O2 as CloseIcon,
   vu as CloudUploadIcon,
   yu as CodeIcon,
@@ -25077,14 +25095,14 @@ export {
   Eu as ContactsIcon,
   Su as ContentCopyIcon,
   Zu as CopyIcon,
-  Qf as CountrySelect,
+  eh as CountrySelect,
   Of as CourseFilledIcon,
   Tf as CourseIcon,
-  Kf as CreatableSelectInput,
+  Qf as CreatableSelectInput,
   Tu as CreditCardFilledIcon,
   Ou as CreditCardIcon,
   Df as CurrencyExchangeIcon,
-  mh as CustomSnackbarContainer,
+  vh as CustomSnackbarContainer,
   Bu as DarkModeIcon,
   Fu as DashboardFilledIcon,
   Nu as DashboardIcon,
@@ -25097,7 +25115,7 @@ export {
   zu as DiamondIcon,
   Xu as DigitalProductsIcon,
   Yu as DiscountIcon,
-  uh as Display,
+  ch as Display,
   Ju as Diversity1Icon,
   qu as Diversity2Icon,
   Uu as Diversity3Icon,
@@ -25107,7 +25125,7 @@ export {
   Ku as DomainAddIcon,
   Qu as DomainIcon,
   ec as DomainVerificationIcon,
-  zf as DoubleTab,
+  Xf as DoubleTab,
   rc as DownloadIcon,
   oc as DraftsIcon,
   ic as DragHandleIcon,
@@ -25134,7 +25152,7 @@ export {
   xc as FeedFilledIcon,
   Ic as FeedIcon,
   A9 as FilePresentIcon,
-  Ch as FileUploader,
+  dh as FileUploader,
   Hc as FilterListIcon,
   Lf as FingerprintIcon,
   Vc as FitbitArrowDownIcon,
@@ -25162,18 +25180,18 @@ export {
   zc as GridViewIcon,
   Xc as GroupFilledIcon,
   Yc as GroupIcon,
-  ch as Heading,
+  Ch as Heading,
   qc as HeadphonesIcon,
   Uc as HomeFilledIcon,
   $c as HomeIcon,
   Kc as HomePinIcon,
   Qc as HourGlassEmptyIcon,
   Pf as HourGlassTopIcon,
-  lh as HoverTooltip,
+  sh as HoverTooltip,
   eC as HubIcon,
   o2 as IconButton,
   Ff as IdCardIcon,
-  dh as ImageUploader,
+  fh as ImageUploader,
   E9 as InfoFilledIcon,
   S9 as InfoGradientFilledIcon,
   P5 as InfoIcon,
@@ -25191,7 +25209,7 @@ export {
   cC as LibraryMusicIcon,
   CC as LinkIcon,
   dC as LinkOffIcon,
-  fh as Loader,
+  hh as Loader,
   fC as LocalActivityIcon,
   hC as LocalFloristFilledIcon,
   pC as LocalFloristIcon,
@@ -25200,9 +25218,9 @@ export {
   vC as LoginIcon,
   yC as LogoutIcon,
   bC as MailIcon,
-  Ih as MainstackProvider,
+  Hh as MainstackProvider,
   wC as MarkUnreadChatIcon,
-  th as MarkdownEditor,
+  nh as MarkdownEditor,
   xC as MasterClassIcon,
   IC as MediaLinkFilledIcon,
   HC as MediaLinkIcon,
@@ -25219,7 +25237,7 @@ export {
   TC as OpenInNewIcon,
   OC as OthersIcon,
   BC as PageViewIcon,
-  Xf as Pagination,
+  Yf as Pagination,
   NC as PaidFilledIcon,
   FC as PaidIcon,
   PC as PaletteFilledIcon,
@@ -25237,7 +25255,7 @@ export {
   Sf as PersonBookIcon,
   Bf as PersonFilledIcon,
   JC as PersonIcon,
-  eh as PhoneNumberInput,
+  th as PhoneNumberInput,
   qC as PhotoCameraIcon,
   UC as PhotoFilledIcon,
   Z9 as PhotoIcon,
@@ -25270,14 +25288,14 @@ export {
   yd as ReportFilledIcon,
   bd as ReportIcon,
   wd as ReviewsIcon,
-  Yf as RoundCheckButton,
+  Jf as RoundCheckButton,
   xd as SavingsFilledIcon,
   Id as SavingsIcon,
   Hd as ScheduleIcon,
   Vd as ScheduleSendIcon,
-  nh as SearchInput,
+  rh as SearchInput,
   T9 as SearchNormalIcon,
-  $f as SelectInput,
+  Kf as SelectInput,
   kd as SellIcon,
   Ld as SendIcon,
   Md as ServicesIcon,
@@ -25289,14 +25307,14 @@ export {
   Td as ShoppingCartFilledIcon,
   Od as ShoppingCartIcon,
   Bd as ShuffleIcon,
-  gh as Slider,
+  mh as Slider,
   Fd as SmartPhoneIcon,
   Xl as SnackbarType,
   Nd as SocialLeaderboardIcon,
   Pd as StarFilledIcon,
   Rd as StarHalfIcon,
   Dd as StarIcon,
-  Jf as Stepper,
+  qf as Stepper,
   Gd as StoreFrontFilledIcon,
   jd as StoreFrontIcon,
   Wd as StrikeThroughSIcon,
@@ -25309,24 +25327,24 @@ export {
   Ud as SwitchAccountFilledIcon,
   $d as SwitchAccountIcon,
   Kd as SyncSavedLocallyIcon,
-  qf as TabMenu,
+  Uf as TabMenu,
   Qd as TabletIcon,
-  ph as Tag,
-  rh as TextArea,
+  gh as Tag,
+  oh as TextArea,
   ef as ThumbDownFilledIcon,
   tf as ThumbDownIcon,
   nf as ThumbUpFilledIcon,
   rf as ThumbUpIcon,
-  sh as Tiles,
+  uh as Tiles,
   of as TocIcon,
-  Uf as ToggleButton,
+  $f as ToggleButton,
   af as TrainingsIcon,
   P3 as TrashDeleteBinIcon,
   lf as TrendingUpIcon,
   sf as UndoIcon,
   uf as UploadIcon,
-  hh as UrlInput,
-  oh as UsernameInput,
+  ph as UrlInput,
+  ih as UsernameInput,
   cf as VerifiedIcon,
   gf as VideoCamIcon,
   mf as VideoFileIcon,
@@ -25346,5 +25364,5 @@ export {
   If as WidgetsFilledIcon,
   Hf as WidgetsIcon,
   Vf as WorkshopsIcon,
-  vh as customSnackbar
+  yh as customSnackbar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainstack-design-system",
-  "version": "0.7.27",
+  "version": "0.7.29",
   "type": "module",
   "main": "build/mainstack-design-system.js",
   "types": "build/index.d.ts",