@salesgenterp/ui-components 0.0.17 → 0.0.20

package/README.md

@@ -15,6 +15,12 @@ Note: `import 'antd/dist/antd.css'` in storybook component to apply the style.
 
 Check latest version [here](https://www.npmjs.com/package/@salesgenterp/ui-components)
 
+### Add tag to publish commit:
+- Add tag to maintain the release version. Run following commands:
+  - git tag -a `<version-number>` 9fceb02
+    - example: git tag -a v1.2 9fceb02
+  - git push origin --tags
+
 #### Auto publish:
 - Publishing package is automated using github actions.
 - Changes pushed/merged into `master` branch with updated package verison will be automatically published to npm.

package/dist/index.js

@@ -3,7 +3,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var antd = require('antd');
-var styled = _interopDefault(require('styled-components'));
+var styled = require('styled-components');
+var styled__default = _interopDefault(styled);
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -47,6 +48,25 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+var buttonColor = function buttonColor(theme) {
+  var color = theme.colors.primary;
+  return "\n  border-color: " + color + " !important;\n  background: " + color + " !important;\n ";
+};
+
+var buttonSVGStyles = function buttonSVGStyles(theme) {
+  return "\n  svg {\n    fill: " + theme.colors.white + "\n  }  \n";
+};
+
+var primaryButtonStyle = function primaryButtonStyle(_ref) {
+  var theme = _ref.theme;
+  return "\n    " + buttonColor(theme) + "\n\n    &:hover,\n    &:focus,\n    &:active {\n      " + buttonColor(theme) + "\n    }\n    \n    " + buttonSVGStyles(theme) + "\n";
+};
+
+var labelPrimaryStyle = function labelPrimaryStyle(_ref) {
+  var theme = _ref.theme;
+  return " color: " + theme.colors.primary;
+};
+
 function _templateObject12() {
   var data = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n  button {\n    padding: 0;\n    margin-right: 5px;\n    text-transform: uppercase;\n  }\n"]);
 
@@ -58,7 +78,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = _taggedTemplateLiteralLoose(["\n  background: red;\n  height: 30px;\n  width: 30px;\n\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  border-radius: 50%;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 30px;\n  width: 30px;\n\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  border-radius: 50%;\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -68,7 +88,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n  color: white;\n  ", ";\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -138,7 +158,7 @@ function _templateObject4() {
 }
 
 function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n  color: red;\n  font-weight: 500;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-weight: 500;\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -148,7 +168,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n  color: red;\n  font-weight: bold;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-weight: bold;\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -166,18 +186,21 @@ function _templateObject() {
 
   return data;
 }
-var StyledOne = styled.div(_templateObject());
-var StyledPrice = styled.div(_templateObject2());
-var StyledOutOfStock = styled.div(_templateObject3());
-var StyledStockBG = styled.div(_templateObject4());
-var StyledUpdateQty = styled.div(_templateObject5());
-var StyledNumberInput = styled(antd.Input)(_templateObject6());
-var StyledFlex = styled.div(_templateObject7());
-var AddToCartContainer = styled(StyledFlex)(_templateObject8());
-var StyledNotifyMe = styled(StyledFlex)(_templateObject9());
-var StyledNotifyButton = styled(antd.Button)(_templateObject10());
-var StyledProductCounter = styled.div(_templateObject11());
-var StyledLoginView = styled.div(_templateObject12());
+var StyledOne = styled__default.div(_templateObject());
+var StyledPrice = styled__default.div(_templateObject2(), labelPrimaryStyle);
+var StyledOutOfStock = styled__default.div(_templateObject3(), labelPrimaryStyle);
+var StyledStockBG = styled__default.div(_templateObject4());
+var StyledUpdateQty = styled__default.div(_templateObject5());
+var StyledNumberInput = styled__default(antd.Input)(_templateObject6());
+var StyledFlex = styled__default.div(_templateObject7());
+var AddToCartContainer = styled__default(StyledFlex)(_templateObject8());
+var StyledNotifyMe = styled__default(StyledFlex)(_templateObject9());
+var StyledNotifyButton = styled__default(antd.Button)(_templateObject10(), primaryButtonStyle);
+var StyledProductCounter = styled__default.div(_templateObject11(), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.primary;
+});
+var StyledLoginView = styled__default.div(_templateObject12());
 
 var preventOuterClick = function preventOuterClick(e) {
   e.preventDefault();
@@ -191,11 +214,9 @@ var ProductCounter = function ProductCounter(_ref) {
 };
 
 var QtyMeter = function QtyMeter(_ref2) {
-  var _ref2$defaultQty = _ref2.defaultQty,
-      defaultQty = _ref2$defaultQty === void 0 ? 0 : _ref2$defaultQty,
-      updatedQty = _ref2.updatedQty;
+  var updatedQty = _ref2.updatedQty;
 
-  var _useState = React.useState(defaultQty),
+  var _useState = React.useState(0),
       qtyToBuy = _useState[0],
       setQtyToBuy = _useState[1];
 
@@ -204,6 +225,10 @@ var QtyMeter = function QtyMeter(_ref2) {
       setShowInput = _useState2[1];
 
   var containerRef = React.useRef(null);
+
+  var _useContext = React.useContext(ProductContext),
+      totalQty = _useContext.item.qty;
+
   React.useEffect(function () {
     var onResize = function onResize() {
       var _containerRef$current = containerRef.current.closest('.ant-card').getBoundingClientRect(),
@@ -227,7 +252,7 @@ var QtyMeter = function QtyMeter(_ref2) {
   var increaseQty = function increaseQty(e) {
     preventOuterClick(e);
 
-    if (qtyToBuy >= 0) {
+    if (qtyToBuy >= 0 && qtyToBuy < totalQty) {
       updateQty(qtyToBuy + 1);
     }
   };
@@ -249,19 +274,22 @@ var QtyMeter = function QtyMeter(_ref2) {
     }
   };
 
-  return /*#__PURE__*/React__default.createElement(StyledUpdateQty, {
-    ref: containerRef
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProductCounter, {
+    qty: qtyToBuy
+  }), /*#__PURE__*/React__default.createElement(StyledUpdateQty, {
+    ref: containerRef,
+    className: "qty-container"
   }, /*#__PURE__*/React__default.createElement(antd.Button, {
-    onClick: increaseQty
+    onClick: increaseQty,
+    className: "increment"
   }, "+"), showInput && /*#__PURE__*/React__default.createElement(StyledNumberInput, {
     value: qtyToBuy,
     onChange: onInputChange,
     onClick: preventOuterClick
   }), /*#__PURE__*/React__default.createElement(antd.Button, {
-    onClick: decreaseQty
-  }, "-"), /*#__PURE__*/React__default.createElement(ProductCounter, {
-    qty: qtyToBuy
-  }));
+    onClick: decreaseQty,
+    className: "decrement"
+  }, "-")));
 };
 
 function _arrayWithHoles(arr) {
@@ -2094,8 +2122,6 @@ var ShoppingCartOutlined$2 = /*#__PURE__*/React.forwardRef(ShoppingCartOutlined$
 var NotifyMeButton = function NotifyMeButton(_ref) {
   var onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(StyledNotifyButton, {
-    type: "primary",
-    danger: true,
     onClick: onClick
   }, /*#__PURE__*/React__default.createElement(BellOutlined$2, null));
 };
@@ -2130,11 +2156,19 @@ var NotifyMe = function NotifyMe() {
   }));
 };
 
+function _templateObject$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n"]);
+
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var StyledAddToCartIconButton = styled__default(antd.Button)(_templateObject$1(), primaryButtonStyle);
 var AddToCartButton = function AddToCartButton(_ref) {
   var onClick = _ref.onClick;
-  return /*#__PURE__*/React__default.createElement(antd.Button, {
-    danger: true,
-    type: "primary",
+  return /*#__PURE__*/React__default.createElement(StyledAddToCartIconButton, {
     onClick: onClick
   }, /*#__PURE__*/React__default.createElement(ShoppingCartOutlined$2, null));
 };
@@ -2194,10 +2228,169 @@ var One = function One() {
   }) : renderSubModules());
 };
 
-function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  text-align: center;\n\n  :hover {\n    cursor: pointer;\n\n    ", ";\n\n    .quick-action {\n      display: flex;\n    }\n  }\n\n  .ant-card-cover {\n    ", "\n  }\n\n  .ant-card-body {\n    padding: 15px;\n    padding-top: 0px;\n  }\n\n  .ant-card-meta {\n    margin-bottom: 6px;\n\n    .ant-card-meta-title {\n      white-space: initial;\n      font-size: 14px;\n      ", "\n    }\n\n    .ant-card-meta-description {\n      ", ";\n    }\n  }\n"]);
+function _templateObject4$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  height: 35px;\n\n  ", "\n"]);
 
-  _templateObject$1 = function _templateObject() {
+  _templateObject4$1 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  height: 35px;\n  text-transform: uppercase;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);
+
+  _templateObject3$1 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  font-size: 20px;\n  margin-bottom: 10px;\n"]);
+
+  _templateObject2$1 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$2() {
+  var data = _taggedTemplateLiteralLoose(["\n  min-height: 60px;\n"]);
+
+  _templateObject$2 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var StyledTwo = styled__default.div(_templateObject$2());
+var StyledPrice$1 = styled__default.div(_templateObject2$1());
+var StyledOutOfStock$1 = styled__default.div(_templateObject3$1());
+var StyledAddToCartButton = styled__default(antd.Button)(_templateObject4$1(), primaryButtonStyle);
+
+function Two() {
+  var _useContext = React.useContext(ProductContext),
+      _useContext$item = _useContext.item,
+      price = _useContext$item.price,
+      currency = _useContext$item.currency,
+      qty = _useContext$item.qty,
+      id = _useContext$item.id,
+      addToCart = _useContext.addToCart;
+
+  var amount = currency + " " + price;
+  var isProductOutOfStock = qty === 0;
+
+  var onAddToCartClick = function onAddToCartClick(e) {
+    preventOuterClick(e);
+    addToCart({
+      id: id,
+      qty: 1
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(StyledTwo, null, /*#__PURE__*/React__default.createElement(StyledPrice$1, null, amount), isProductOutOfStock ? /*#__PURE__*/React__default.createElement(StyledOutOfStock$1, null, "out of stock") : /*#__PURE__*/React__default.createElement(StyledAddToCartButton, {
+    type: "primary",
+    icon: /*#__PURE__*/React__default.createElement(ShoppingCartOutlined$2, null),
+    onClick: onAddToCartClick
+  }, "Add to Cart"));
+}
+
+function _templateObject5$1() {
+  var data = _taggedTemplateLiteralLoose([""]);
+
+  _templateObject5$1 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4$2() {
+  var data = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  margin-bottom: 10px;\n\n  .qty-container {\n    position: relative;\n    width: 70px;\n    height: 35px;\n\n    input {\n      width: inherit;\n      text-align: left;\n    }\n\n    .increment,\n    .decrement {\n      position: absolute;\n      right: 8px;\n      height: 14px;\n      width: 14px;\n      font-size: 12px;\n      z-index: 1;\n      padding: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .increment {\n      top: 3px;\n    }\n    .decrement {\n      bottom: 3px;\n    }\n  }\n"]);
+
+  _templateObject4$2 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$2() {
+  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  ", ";\n"]);
+
+  _templateObject3$2 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$2() {
+  var data = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  ", ";\n"]);
+
+  _templateObject2$2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$3() {
+  var data = _taggedTemplateLiteralLoose([""]);
+
+  _templateObject$3 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var StyledThree = styled__default.div(_templateObject$3());
+var StyledPrice$2 = styled__default.div(_templateObject2$2(), labelPrimaryStyle);
+var StyledAddToCartButton$1 = styled__default(antd.Button)(_templateObject3$2(), primaryButtonStyle);
+var StyledPriceQtyContainer = styled__default(StyledFlex)(_templateObject4$2());
+var StyledQty = styled__default.div(_templateObject5$1());
+
+function Three() {
+  var _useContext = React.useContext(ProductContext),
+      _useContext$item = _useContext.item,
+      price = _useContext$item.price,
+      currency = _useContext$item.currency,
+      qty = _useContext$item.qty,
+      id = _useContext$item.id,
+      addToCart = _useContext.addToCart;
+
+  var _useState = React.useState(0),
+      newUpdatedQty = _useState[0],
+      setNewUpdatedQty = _useState[1];
+
+  var amount = currency + " " + price;
+  var isProductOutOfStock = qty === 0;
+
+  var onAddToCartClick = function onAddToCartClick(e) {
+    preventOuterClick(e);
+    addToCart({
+      id: id,
+      qty: newUpdatedQty
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(StyledThree, null, !isProductOutOfStock && /*#__PURE__*/React__default.createElement(StyledPriceQtyContainer, null, /*#__PURE__*/React__default.createElement(StyledPrice$2, null, amount), /*#__PURE__*/React__default.createElement(StyledQty, null, /*#__PURE__*/React__default.createElement(QtyMeter, {
+    updatedQty: setNewUpdatedQty
+  }))), isProductOutOfStock ? /*#__PURE__*/React__default.createElement(NotifyMe, null) : /*#__PURE__*/React__default.createElement(StyledAddToCartButton$1, {
+    type: "primary",
+    icon: /*#__PURE__*/React__default.createElement(ShoppingCartOutlined$2, null),
+    onClick: onAddToCartClick
+  }, "Add to Cart"));
+}
+
+function _templateObject$4() {
+  var data = _taggedTemplateLiteralLoose(["\n  text-align: center;\n\n  :hover {\n    cursor: pointer;\n\n    .quick-action {\n      display: flex;\n    }\n  }\n\n  .ant-card-cover .ant-image {\n    ", "\n  }\n\n  .ant-card-body {\n    padding: 15px;\n    padding-top: 0px;\n  }\n\n  .ant-card-meta {\n    margin-bottom: 6px;\n\n    .ant-card-meta-title {\n      white-space: initial;\n      font-size: 14px;\n      ", "\n    }\n\n    .ant-card-meta-description {\n      ", ";\n    }\n  }\n"]);
+
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -2219,14 +2412,7 @@ var descriptionLayout = function descriptionLayout(_ref3) {
   return "\n  margin-bottom: " + detail.mb + "px;\n";
 };
 
-var boxShadow = function boxShadow() {
-  return "\n  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),\n    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),\n    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),\n    0 100px 80px rgba(0, 0, 0, 0.12);\n\n  transition: box-shadow 0.3s ease-in-out;\n";
-};
-
-var StyledCardProductContainer = styled(antd.Card)(_templateObject$1(), function (_ref4) {
-  var showBoxShadow = _ref4.showBoxShadow;
-  return showBoxShadow && boxShadow();
-}, imageLayout, titleLayout, descriptionLayout);
+var StyledCardProductContainer = styled__default(antd.Card)(_templateObject$4(), imageLayout, titleLayout, descriptionLayout);
 
 var OneQuickAction = function OneQuickAction() {
   var _useContext = React.useContext(ProductContext),
@@ -2234,7 +2420,8 @@ var OneQuickAction = function OneQuickAction() {
       addToCart = _useContext.addToCart;
 
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(AddToCartButton, {
-    onClick: function onClick() {
+    onClick: function onClick(e) {
+      preventOuterClick(e);
       addToCart({
         id: id,
         qty: 1
@@ -2243,22 +2430,37 @@ var OneQuickAction = function OneQuickAction() {
   }));
 };
 
-function _templateObject$2() {
-  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  display: none;\n"]);
+function _templateObject$5() {
+  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  display: none;\n  z-index: 1;\n"]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var StyledQuickActions = styled.div(_templateObject$2());
+var StyledQuickActions = styled__default.div(_templateObject$5());
 var QuickAction = function QuickAction(props) {
   return /*#__PURE__*/React__default.createElement(StyledQuickActions, _extends({}, props, {
     className: "quick-action"
   }), props.children);
 };
 
+var Breakpoint = function Breakpoint() {};
+
+Breakpoint.xs = 'xs';
+Breakpoint.sm = 'sm';
+Breakpoint.md = 'md';
+Breakpoint.lg = 'lg';
+Breakpoint.xl = 'xl';
+Breakpoint.xxl = 'xxl';
+
+var Variant = function Variant() {};
+
+Variant.ONE = 'one';
+Variant.TWO = 'two';
+Variant.THREE = 'three';
+
 var Meta = antd.Card.Meta;
 
 var noop = function noop() {};
@@ -2275,12 +2477,24 @@ var ProductContext = React__default.createContext(defaultProps);
 
 var getComponent = function getComponent(variant) {
   switch (variant) {
-    case 'one':
+    case Variant.ONE:
       return {
         quickAction: /*#__PURE__*/React__default.createElement(OneQuickAction, null),
         subComponent: /*#__PURE__*/React__default.createElement(One, null)
       };
 
+    case Variant.TWO:
+      return {
+        quickAction: /*#__PURE__*/React__default.createElement(OneQuickAction, null),
+        subComponent: /*#__PURE__*/React__default.createElement(Two, null)
+      };
+
+    case Variant.THREE:
+      return {
+        quickAction: /*#__PURE__*/React__default.createElement(OneQuickAction, null),
+        subComponent: /*#__PURE__*/React__default.createElement(Three, null)
+      };
+
     default:
       return {
         quickAction: '',
@@ -2314,8 +2528,8 @@ var Product = function Product(props) {
     onClick: function onClick(e) {
       return onProductClick(item, e);
     },
-    showBoxShadow: showBoxShadow,
     layout: layoutModel,
+    hoverable: showBoxShadow,
     cover: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showQuickAction && /*#__PURE__*/React__default.createElement(QuickAction, null, c.quickAction), /*#__PURE__*/React__default.createElement(antd.Image, {
       onClick: function onClick(e) {
         preventOuterClick(e);
@@ -2332,6 +2546,13 @@ var Product = function Product(props) {
   }), c.subComponent)));
 };
 
+var theme = {
+  colors: {
+    primary: 'red',
+    white: 'white'
+  }
+};
+
 var noop$1 = function noop() {};
 
 var getLayoutModel = function getLayoutModel(_temp) {
@@ -2399,7 +2620,8 @@ var ProductSlider = function ProductSlider(props) {
 
   var colCount = newProps.colCount,
       items = newProps.items,
-      restProps = _objectWithoutPropertiesLoose(newProps, ["colCount", "items"]);
+      theme$1 = newProps.theme,
+      restProps = _objectWithoutPropertiesLoose(newProps, ["colCount", "items", "theme"]);
 
   var _restProps$layoutMode = restProps.layoutModel,
       colSpace = _restProps$layoutMode.colSpace,
@@ -2421,23 +2643,21 @@ var ProductSlider = function ProductSlider(props) {
       key: item.id
     }));
   });
-  return /*#__PURE__*/React__default.createElement(antd.Row, {
+
+  var newTheme = _extends({}, theme, {
+    colors: _extends({}, theme.colors, theme$1.colors)
+  });
+
+  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+    theme: newTheme
+  }, /*#__PURE__*/React__default.createElement(antd.Row, {
     gutter: [colSpace, rowSpace],
     style: {
       background: backgroundColor
     }
-  }, products);
+  }, products));
 };
 
-var Breakpoint = function Breakpoint() {};
-
-Breakpoint.xs = 'xs';
-Breakpoint.sm = 'sm';
-Breakpoint.md = 'md';
-Breakpoint.lg = 'lg';
-Breakpoint.xl = 'xl';
-Breakpoint.xxl = 'xxl';
-
 var ProductHelper = /*#__PURE__*/function () {
   function ProductHelper() {
     this.setupMap();
@@ -2556,6 +2776,7 @@ exports.Breakpoint = Breakpoint;
 exports.Product = Product;
 exports.ProductHelper = ProductHelper;
 exports.ProductSlider = ProductSlider;
+exports.Variant = Variant;
 exports.useGridSize = useGridSize;
 exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=index.js.map