@sendoutcards/quantum-design-ui 1.8.39-alpha.2 → 1.8.39-alpha.4

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext, useContext, useCallback, useMemo, useRef, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useState, useEffect, createContext, useRef, useMemo, useCallback, useContext, useLayoutEffect, useImperativeHandle } from 'react';
 import { jsx, ThemeProvider, Global, css, useTheme } from '@emotion/react';
 import Color$1 from 'color';
 import { motion, useMotionValue, useTransform, animate, AnimatePresence, useElementScroll, AnimateSharedLayout, useAnimation } from 'framer-motion';
@@ -12351,6 +12351,12 @@ var styles$R = {
 var templateObject_1$V;
 
 var useOutsideClick = function (ref, handler, targetIdBypass) {
+  // Store handler in a ref so we can access latest version without dependency
+  var handlerRef = useRef(handler);
+  // Update ref when handler changes
+  useEffect(function () {
+    handlerRef.current = handler;
+  }, [handler]);
   useEffect(function () {
     var listener = function (event) {
       // Do nothing if clicking ref's element or descendent elements
@@ -12369,7 +12375,7 @@ var useOutsideClick = function (ref, handler, targetIdBypass) {
       if (!(ref === null || ref === void 0 ? void 0 : ref.current) || (ref === null || ref === void 0 ? void 0 : ref.current.contains(event.target))) {
         return;
       }
-      handler(event);
+      handlerRef.current(event);
     };
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
@@ -12377,20 +12383,24 @@ var useOutsideClick = function (ref, handler, targetIdBypass) {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  },
-  // Add ref and handler to effect dependencies
-  // It's worth noting that because passed in handler is a new ...
-  // ... function on every render that will cause this effect ...
-  // ... callback/cleanup to run every render. It's not a big deal ...
-  // ... but to optimize you can wrap handler in useCallback before ...
-  // ... passing it into this hook.
-  [ref, handler, targetIdBypass]);
+  }, [ref, targetIdBypass]);
 };
 
-var Div = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var rest = __rest(props, []);
+var Div = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onMouseEvent = props.onMouseEvent,
+    onClick = props.onClick,
+    rest = __rest(props, ["onMouseEvent", "onClick"]);
   var entities = useEntities();
-  var generatedDivStyles = generateStyles(props, entities);
+  var generatedDivStyles = useMemo(function () {
+    return generateStyles(props, entities);
+  }, [props, entities]);
+  var handleClick = useCallback(function (e) {
+    if (onMouseEvent) {
+      onMouseEvent(e);
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, [onMouseEvent, onClick]);
   useOutsideClick(ref, function () {
     props.outsideClick && props.outsideClick();
   }, props.clickElementBypass);
@@ -12398,17 +12408,11 @@ var Div = /*#__PURE__*/React.forwardRef(function (props, ref) {
     key: props.motionKey,
     ref: ref,
     animate: process.env.NODE_ENV === 'test' ? undefined : props.animate,
-    onClick: props.onMouseEvent ? function (e) {
-      var _a;
-      return (_a = props.onMouseEvent) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    } : function () {
-      var _a;
-      return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onClick: handleClick,
     css: styles$R.divStyles(generatedDivStyles),
     className: "".concat(props.className ? props.className : '')
   }, rest), props.children);
-});
+}));
 
 var useWindowSize = function () {
   return useContext(WindowSizeContext);
@@ -12557,7 +12561,7 @@ var computeTextTypeFromInfoBlockSize = function (size) {
   });
 };
 
-var Anchor = function (props) {
+var Anchor = /*#__PURE__*/React.memo(function (props) {
   var entities = useEntities();
   var _a = props.color,
     color = _a === void 0 ? 'primaryBody' : _a,
@@ -12567,29 +12571,34 @@ var Anchor = function (props) {
     _c = props.display,
     display = _c === void 0 ? 'inline-block' : _c,
     shouldDownload = props.shouldDownload,
-    rest = __rest(props, ["color", "size", "isDecorated", "display", "shouldDownload"]);
-  var generatedDivStyles = generateStyles(__assign({
-    display: display
-  }, rest), entities);
+    onMouseEvent = props.onMouseEvent,
+    onClick = props.onClick,
+    rest = __rest(props, ["color", "size", "isDecorated", "display", "shouldDownload", "onMouseEvent", "onClick"]);
+  var generatedDivStyles = useMemo(function () {
+    return generateStyles(__assign({
+      display: display
+    }, rest), entities);
+  }, [display, rest, entities]);
+  var handleClick = useCallback(function (e) {
+    if (onMouseEvent) {
+      onMouseEvent(e);
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, [onMouseEvent, onClick]);
   return jsx(motion.a, _extends({
     rel: "noopener noreferrer",
     target: rest.target
   }, rest, {
     href: rest.href,
-    onClick: rest.onMouseEvent ? function (e) {
-      var _a;
-      return (_a = rest.onMouseEvent) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    } : function () {
-      var _a;
-      return (_a = rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest);
-    },
+    onClick: handleClick,
     download: shouldDownload,
     css: styles$T.anchorStyles(generatedDivStyles, entities, color, isDecorated)
   }), jsx(Text, {
     type: computeTextTypeFromSize(size),
     color: color
   }, rest.title || rest.children));
-};
+});
 
 var styles$Q = {
   spanStyles: function (generatedStyles) {
@@ -12598,21 +12607,27 @@ var styles$Q = {
 };
 var templateObject_1$U;
 
-var Span = function (props) {
+var Span = /*#__PURE__*/React.memo(function (props) {
+  var onMouseEvent = props.onMouseEvent,
+    onClick = props.onClick,
+    rest = __rest(props, ["onMouseEvent", "onClick"]);
   var entities = useEntities();
-  var generatedDivStyles = generateStyles(props, entities);
-  return jsx(motion.span, _extends({}, props, {
-    onClick: props.onMouseEvent ? function (e) {
-      var _a;
-      return (_a = props.onMouseEvent) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    } : function () {
-      var _a;
-      return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+  var generatedDivStyles = useMemo(function () {
+    return generateStyles(props, entities);
+  }, [props, entities]);
+  var handleClick = useCallback(function (e) {
+    if (onMouseEvent) {
+      onMouseEvent(e);
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, [onMouseEvent, onClick]);
+  return jsx(motion.span, _extends({}, rest, {
+    onClick: handleClick,
     css: styles$Q.spanStyles(generatedDivStyles),
-    className: "".concat(props.className ? props.className : '')
-  }), props.children);
-};
+    className: "".concat(rest.className ? rest.className : '')
+  }), rest.children);
+});
 
 var styles$P = {
   listContainer: function (orientation, alignment, listStyle, generatedStyles) {
@@ -12621,18 +12636,20 @@ var styles$P = {
 };
 var templateObject_1$T;
 
-var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var List = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _a = props.listStyle,
     listStyle = _a === void 0 ? 'none' : _a,
     rest = __rest(props, ["listStyle"]);
   var entities = useEntities();
-  var generatedStyles = generateStyles(rest, entities);
+  var generatedStyles = useMemo(function () {
+    return generateStyles(rest, entities);
+  }, [rest, entities]);
   return jsx(motion.ul, _extends({}, rest, {
     css: styles$P.listContainer(rest.orientation, rest.alignment, listStyle, generatedStyles),
     className: "\n      ".concat(rest.className ? rest.className : ''),
     ref: ref
   }), rest.children);
-});
+}));
 
 var computeAvatarProperties = function (size, sizeMap) {
   return mapSizeType(size, sizeMap);
@@ -12879,20 +12896,26 @@ var styles$M = {
 };
 var templateObject_1$P;
 
-var ListItem = function (props) {
+var ListItem = /*#__PURE__*/React.memo(function (props) {
+  var onMouseEvent = props.onMouseEvent,
+    onClick = props.onClick,
+    rest = __rest(props, ["onMouseEvent", "onClick"]);
   var entities = useEntities();
-  var generatedStyles = generateStyles(props, entities);
-  return jsx(motion.li, _extends({}, props, {
-    onClick: props.onMouseEvent ? function (e) {
-      var _a;
-      return (_a = props.onMouseEvent) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    } : function () {
-      var _a;
-      return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
-    css: styles$M.listItem(generatedStyles, props.orientation, entities)
-  }), props.children);
-};
+  var generatedStyles = useMemo(function () {
+    return generateStyles(props, entities);
+  }, [props, entities]);
+  var handleClick = useCallback(function (e) {
+    if (onMouseEvent) {
+      onMouseEvent(e);
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, [onMouseEvent, onClick]);
+  return jsx(motion.li, _extends({}, rest, {
+    onClick: handleClick,
+    css: styles$M.listItem(generatedStyles, rest.orientation, entities)
+  }), rest.children);
+});
 
 var Bar = function (_a) {
   var height = _a.height,
@@ -12921,31 +12944,36 @@ var styles$L = {
 };
 var templateObject_1$O, templateObject_2$s;
 
-var Flex = function (props) {
+var Flex = /*#__PURE__*/React.memo(function (props) {
   var entities = useEntities();
   var _a = props.display,
     display = _a === void 0 ? 'flex' : _a,
-    rest = __rest(props, ["display"]);
-  var generatedDivStyles = generateStyles(__assign({
-    display: display
-  }, rest), entities);
+    onMouseEvent = props.onMouseEvent,
+    onClick = props.onClick,
+    rest = __rest(props, ["display", "onMouseEvent", "onClick"]);
+  var generatedDivStyles = useMemo(function () {
+    return generateStyles(__assign({
+      display: display
+    }, rest), entities);
+  }, [display, rest, entities]);
   var ref = useRef(null);
+  var handleClick = useCallback(function (e) {
+    if (onMouseEvent) {
+      onMouseEvent(e);
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, [onMouseEvent, onClick]);
   useOutsideClick(ref, function () {
-    props.outsideClick && props.outsideClick();
+    rest.outsideClick && rest.outsideClick();
   });
   return jsx(motion.main, _extends({}, rest, {
     ref: ref,
-    onClick: props.onMouseEvent ? function (e) {
-      var _a;
-      return (_a = props.onMouseEvent) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    } : function () {
-      var _a;
-      return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onClick: handleClick,
     css: styles$L.flexStyles(generatedDivStyles),
-    className: "".concat(props.className ? props.className : '')
-  }), props.children);
-};
+    className: "".concat(rest.className ? rest.className : '')
+  }), rest.children);
+});
 
 var LoadingSpinner = function (_a) {
   var size = _a.size,
@@ -13020,23 +13048,27 @@ var styles$K = {
 };
 var templateObject_1$M;
 
-var Section = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var Section = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onClick = props.onClick,
+    rest = __rest(props, ["onClick"]);
   var entities = useEntities();
-  var generatedDivStyles = generateStyles(props, entities);
+  var generatedDivStyles = useMemo(function () {
+    return generateStyles(props, entities);
+  }, [props, entities]);
+  var handleClick = useCallback(function () {
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  }, [onClick]);
   useOutsideClick(ref, function () {
-    props.outsideClick && props.outsideClick();
-  }, props.clickElementBypass);
-  return jsx(motion.section, _extends({}, props, {
+    rest.outsideClick && rest.outsideClick();
+  }, rest.clickElementBypass);
+  return jsx(motion.section, _extends({}, rest, {
     ref: ref,
-    animate: process.env.NODE_ENV === 'test' ? undefined : props.animate,
-    onClick: function () {
-      var _a;
-      return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    animate: process.env.NODE_ENV === 'test' ? undefined : rest.animate,
+    onClick: handleClick,
     css: styles$K.sectionStyles(generatedDivStyles),
-    className: "".concat(props.className ? props.className : '')
-  }), props.children);
-});
+    className: "".concat(rest.className ? rest.className : '')
+  }), rest.children);
+}));
 
 var styles$J = {
   asideStyles: function (generatedStyles) {
@@ -13045,28 +13077,34 @@ var styles$J = {
 };
 var templateObject_1$L;
 
-var Aside = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var Aside = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onMouseEvent = props.onMouseEvent,
+    onClick = props.onClick,
+    rest = __rest(props, ["onMouseEvent", "onClick"]);
   var entities = useEntities();
-  var generatedDivStyles = generateStyles(props, entities);
+  var generatedDivStyles = useMemo(function () {
+    return generateStyles(props, entities);
+  }, [props, entities]);
+  var handleClick = useCallback(function (e) {
+    if (onMouseEvent) {
+      onMouseEvent(e);
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, [onMouseEvent, onClick]);
   useOutsideClick(ref, function () {
-    props.outsideClick && props.outsideClick();
+    rest.outsideClick && rest.outsideClick();
   });
-  return jsx(motion.aside, _extends({}, props, {
+  return jsx(motion.aside, _extends({}, rest, {
     ref: ref,
-    animate: process.env.NODE_ENV === 'test' ? undefined : props.animate,
-    onClick: props.onMouseEvent ? function (e) {
-      var _a;
-      return (_a = props.onMouseEvent) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    } : function () {
-      var _a;
-      return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    animate: process.env.NODE_ENV === 'test' ? undefined : rest.animate,
+    onClick: handleClick,
     css: styles$J.asideStyles(generatedDivStyles),
-    className: "".concat(props.className ? props.className : '')
-  }), props.children);
-});
+    className: "".concat(rest.className ? rest.className : '')
+  }), rest.children);
+}));
 
-var VStack = function (_a) {
+var VStack = /*#__PURE__*/React.memo(function (_a) {
   var children = _a.children,
     gap = _a.gap,
     justifyContent = _a.justifyContent,
@@ -13090,9 +13128,9 @@ var VStack = function (_a) {
     inset: inset,
     outset: outset
   }, children);
-};
+});
 
-var HStack = function (_a) {
+var HStack = /*#__PURE__*/React.memo(function (_a) {
   var children = _a.children,
     gap = _a.gap,
     _b = _a.justify,
@@ -13105,7 +13143,9 @@ var HStack = function (_a) {
     outset = _a.outset,
     _e = _a.childWidth,
     childWidth = _e === void 0 ? 'initial' : _e;
-  var childrenArray = React.Children.toArray(children);
+  var childrenArray = useMemo(function () {
+    return React.Children.toArray(children);
+  }, [children]);
   return jsx(Flex, {
     width: "auto",
     inset: inset,
@@ -13127,7 +13167,7 @@ var HStack = function (_a) {
     }
     return jsx(React.Fragment, null);
   }));
-};
+});
 
 var Card = function (props) {
   var _a, _b;
@@ -13761,26 +13801,32 @@ var DragBox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
 });
 
-var FlexItem = function (props) {
+var FlexItem = /*#__PURE__*/React.memo(function (props) {
+  var onMouseEvent = props.onMouseEvent,
+    onClick = props.onClick,
+    rest = __rest(props, ["onMouseEvent", "onClick"]);
   var entities = useEntities();
-  var generatedDivStyles = generateStyles(props, entities);
+  var generatedDivStyles = useMemo(function () {
+    return generateStyles(props, entities);
+  }, [props, entities]);
   var ref = useRef(null);
+  var handleClick = useCallback(function (e) {
+    if (onMouseEvent) {
+      onMouseEvent(e);
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, [onMouseEvent, onClick]);
   useOutsideClick(ref, function () {
-    props.outsideClick && props.outsideClick();
+    rest.outsideClick && rest.outsideClick();
   });
-  return jsx(motion.section, _extends({}, props, {
+  return jsx(motion.section, _extends({}, rest, {
     ref: ref,
-    onClick: props.onMouseEvent ? function (e) {
-      var _a;
-      return (_a = props.onMouseEvent) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    } : function () {
-      var _a;
-      return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onClick: handleClick,
     css: styles$L.flexItemStyles(generatedDivStyles),
-    className: "".concat(props.className ? props.className : '')
-  }), props.children);
-};
+    className: "".concat(rest.className ? rest.className : '')
+  }), rest.children);
+});
 
 var styles$B = {
   sideNav: function (navigationEntity) {
@@ -16241,10 +16287,14 @@ var Tabs = function (_a) {
     _d = _a.justify,
     justify = _d === void 0 ? 'flex-start' : _d,
     children = _a.children;
-  var tabChildren = React.Children.toArray(children);
-  var tabKeys = tabChildren.map(function (tabChild) {
-    return tabChild.props.tabKey;
-  });
+  var tabChildren = useMemo(function () {
+    return React.Children.toArray(children);
+  }, [children]);
+  var tabKeys = useMemo(function () {
+    return tabChildren.map(function (tabChild) {
+      return tabChild.props.tabKey;
+    });
+  }, [tabChildren]);
   var ref = useRef(null);
   var hocs = useEntities().hocs;
   var _e = useState(tabKeys.indexOf(defaultActiveKey) || 0),
@@ -16357,7 +16407,9 @@ var Stoplight = function (_a) {
     _d = _a.isCollapsible,
     isCollapsible = _d === void 0 ? false : _d,
     children = _a.children;
-  var stoplightChildren = React.Children.toArray(children);
+  var stoplightChildren = useMemo(function () {
+    return React.Children.toArray(children);
+  }, [children]);
   var stoplightRef = useRef(null);
   var colorOption = useEntities().colorOption;
   var computeBorderRadiusFromSize = function (size) {
@@ -20616,8 +20668,12 @@ var AnimatedGrid = function (_a) {
     _j = _a.maxWidth,
     maxWidth = _j === void 0 ? 1000 : _j,
     children = _a.children;
-  var gridChildren = React.Children.toArray(children);
-  var numChildren = gridChildren.length + (gridImages ? gridImages.length : 0);
+  var gridChildren = useMemo(function () {
+    return React.Children.toArray(children);
+  }, [children]);
+  var numChildren = useMemo(function () {
+    return gridChildren.length + (gridImages ? gridImages.length : 0);
+  }, [gridChildren, gridImages]);
   var rowHeight = rowSize + gap;
   var colWidth = columnSize + gap;
   var numCols = Math.floor(maxWidth / colWidth);

package/dist/src/atoms/anchor/anchor.d.ts

@@ -13,4 +13,4 @@ export declare type AnchorProps = {
     target?: '_blank' | '_self' | '_parent' | '_top';
     shouldDownload?: boolean;
 } & HOCBaseProps & HOCMotionProps;
-export declare const Anchor: (props: AnchorProps) => React.JSX.Element;
+export declare const Anchor: React.MemoExoticComponent<(props: AnchorProps) => React.JSX.Element>;

package/dist/src/atoms/aside/aside.d.ts

@@ -6,7 +6,7 @@ export declare type AsideProps = {
     outsideClick?: () => void;
     clickElementBypass?: string;
 } & HOCBaseProps & HOCMotionProps;
-export declare const Aside: React.ForwardRefExoticComponent<{
+export declare const Aside: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     outsideClick?: (() => void) | undefined;
     clickElementBypass?: string | undefined;
@@ -14,4 +14,4 @@ export declare const Aside: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     motionKey?: string | number | undefined;
     id?: string | undefined;
-} & import("framer-motion").MotionProps & React.RefAttributes<HTMLElement>>;
+} & import("framer-motion").MotionProps & React.RefAttributes<HTMLElement>>>;

package/dist/src/atoms/div/div.d.ts

@@ -7,7 +7,7 @@ export declare type DivProps = {
     clickElementBypass?: string;
     tabIndex?: number;
 } & HOCBaseProps & HOCMotionProps;
-export declare const Div: React.ForwardRefExoticComponent<{
+export declare const Div: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     outsideClick?: (() => void) | undefined;
     clickElementBypass?: string | undefined;
@@ -16,4 +16,4 @@ export declare const Div: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     motionKey?: string | number | undefined;
     id?: string | undefined;
-} & import("framer-motion").MotionProps & React.RefAttributes<HTMLDivElement>>;
+} & import("framer-motion").MotionProps & React.RefAttributes<HTMLDivElement>>>;

package/dist/src/atoms/flex/flex.d.ts

@@ -5,4 +5,4 @@ export declare type FlexProps = {
     children?: React.ReactNode;
     outsideClick?: () => void;
 } & HOCBaseProps & HOCMotionProps;
-export declare const Flex: (props: FlexProps) => React.JSX.Element;
+export declare const Flex: React.MemoExoticComponent<(props: FlexProps) => React.JSX.Element>;

package/dist/src/atoms/flex/flexItem.d.ts

@@ -5,4 +5,4 @@ export declare type FlexItemPropTypes = {
     children?: React.ReactNode;
     outsideClick?: () => void;
 } & HOCBaseProps & HOCMotionProps;
-export declare const FlexItem: (props: FlexItemPropTypes) => React.JSX.Element;
+export declare const FlexItem: React.MemoExoticComponent<(props: FlexItemPropTypes) => React.JSX.Element>;

package/dist/src/atoms/hStack/hStack.d.ts

@@ -11,4 +11,4 @@ export declare type HStackProps = {
     childWidth?: string;
     children?: React.ReactNode;
 };
-export declare const HStack: ({ children, gap, justify, alignItems, shouldWrap, inset, outset, childWidth, }: HStackProps) => React.JSX.Element;
+export declare const HStack: React.MemoExoticComponent<({ children, gap, justify, alignItems, shouldWrap, inset, outset, childWidth, }: HStackProps) => React.JSX.Element>;

package/dist/src/atoms/list/list.d.ts

@@ -10,7 +10,7 @@ export declare type ListProps = {
 export declare type ListOrientation = 'vertical' | 'horizontal';
 export declare type AlignmentOptions = 'left' | 'center' | 'right';
 export declare type ListStyleType = 'disc' | 'none' | 'circle';
-export declare const List: React.ForwardRefExoticComponent<{
+export declare const List: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     orientation: ListOrientation;
     alignment: AlignmentOptions;
     children?: React.ReactNode;
@@ -19,4 +19,4 @@ export declare const List: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     motionKey?: string | number | undefined;
     id?: string | undefined;
-} & import("framer-motion").MotionProps & React.RefAttributes<HTMLUListElement>>;
+} & import("framer-motion").MotionProps & React.RefAttributes<HTMLUListElement>>>;

package/dist/src/atoms/listItem/listItem.d.ts

@@ -10,4 +10,4 @@ export declare type ListItemProps = {
     initial?: string;
     transition?: {};
 } & HOCBaseProps & HOCMotionProps;
-export declare const ListItem: (props: ListItemProps) => React.JSX.Element;
+export declare const ListItem: React.MemoExoticComponent<(props: ListItemProps) => React.JSX.Element>;

package/dist/src/atoms/section/section.d.ts

@@ -6,7 +6,7 @@ export declare type SectionProps = {
     outsideClick?: () => void;
     clickElementBypass?: string;
 } & HOCBaseProps & HOCMotionProps;
-export declare const Section: React.ForwardRefExoticComponent<{
+export declare const Section: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     outsideClick?: (() => void) | undefined;
     clickElementBypass?: string | undefined;
@@ -14,4 +14,4 @@ export declare const Section: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     motionKey?: string | number | undefined;
     id?: string | undefined;
-} & import("framer-motion").MotionProps & React.RefAttributes<HTMLElement>>;
+} & import("framer-motion").MotionProps & React.RefAttributes<HTMLElement>>>;

package/dist/src/atoms/span/span.d.ts

@@ -4,4 +4,4 @@ import { HOCMotionProps } from "../../helpers/hoc-types/hocMotionTypes";
 export declare type SpanProps = {
     children?: React.ReactNode;
 } & HOCBaseProps & HOCMotionProps;
-export declare const Span: (props: SpanProps) => React.JSX.Element;
+export declare const Span: React.MemoExoticComponent<(props: SpanProps) => React.JSX.Element>;

package/dist/src/atoms/vStack/vStack.d.ts

@@ -14,4 +14,4 @@ export declare type VStackProps = {
     overflow?: Overflow;
     children?: React.ReactNode;
 };
-export declare const VStack: ({ children, gap, justifyContent, alignItems, alignContent, inset, outset, width, height, overflow, }: VStackProps) => React.JSX.Element;
+export declare const VStack: React.MemoExoticComponent<({ children, gap, justifyContent, alignItems, alignContent, inset, outset, width, height, overflow, }: VStackProps) => React.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.8.39-alpha.2",
+  "version": "1.8.39-alpha.4",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",