@itcase/ui 1.0.1

package/dist/hooks/styleAttributes.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var styleAttributes = [
+/**
+ * Layout
+ */
+'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'border', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'gap', 'rowGap', 'columnGap', 'columnWidth', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'start', 'top', 'width', 'zIndex', 'order',
+/**
+ * Shadow
+ */
+'elevation', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius',
+/**
+ * Transform
+ */
+'transform',
+/**
+ * View
+ */
+'background', 'backgroundColor', 'borderBottomColor', 'borderBottomEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderColor', 'borderCurve', 'borderEndColor', 'borderLeftColor', 'borderRadius', 'borderRightColor', 'borderStartColor', 'borderStyle', 'borderTopColor', 'borderTopEndRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'opacity', 'cursor',
+/**
+ * Text
+ */
+'color', 'fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'letterSpacing', 'lineHeight', 'textAlign', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'verticalAlign', 'writingMode', 'whiteSpace',
+/**
+ * Image
+ */
+'overlayColor', 'resizeMode', 'tintColor', 'objectFit',
+/**
+ * Grid
+ */
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows'];
+
+exports.default = styleAttributes;

package/dist/hooks/useDeviceTargetClass.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var React = require('react');
+var castArray = require('lodash/castArray');
+var camelCase = require('lodash/camelCase');
+var UIContext = require('../context/UIContext.js');
+require('prop-types');
+require('./useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var castArray__default = /*#__PURE__*/_interopDefault(castArray);
+var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+
+function useDeviceTargetClass(componentProps, hookProps) {
+  /** Generate a class depending on the user's device.
+   *
+   * Usage:
+   *  const sizeClass = useDeviceTargetClass(props, {
+   *    prefix: 'some-item_size_',
+   *    propsKey: 'size',
+   *  })
+   * Return: "some-item_size_m" (or "s", or "l", or something else)
+   *
+   * "componentProps" - "props" from component
+   * "hookProps" - special props for generating class
+   **/
+
+  var _hookProps$prefix = hookProps.prefix,
+    prefix = _hookProps$prefix === void 0 ? '' : _hookProps$prefix,
+    propsKey = hookProps.propsKey,
+    _hookProps$replace = hookProps.replace,
+    replace = _hookProps$replace === void 0 ? [/([A-Z])/g, '-$1'] : _hookProps$replace;
+  var _useUserDeviceContext = UIContext.useUserDeviceContext(),
+    isMobile = _useUserDeviceContext.isMobile,
+    isTablet = _useUserDeviceContext.isTablet,
+    isDesktop = _useUserDeviceContext.isDesktop;
+  var targetClassValue = React.useMemo(function () {
+    // prettier-ignore
+    var deviceBasePart = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
+    var valueForDevice = componentProps["" + propsKey + deviceBasePart];
+    var valueDefault = componentProps[propsKey];
+    return valueForDevice || valueDefault;
+  }, [isMobile, isTablet, isDesktop, componentProps[propsKey], componentProps[propsKey + "Mobile"], componentProps[propsKey + "Tablet"], componentProps[propsKey + "Desktop"]]);
+  var targetClass = React.useMemo(function () {
+    if (targetClassValue) {
+      var cleanClassValue = camelCase__default.default(String(targetClassValue));
+      if (replace) {
+        var replaceList = castArray__default.default(replace);
+        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+      }
+      return ("" + prefix + cleanClassValue).toLowerCase();
+    }
+    return null;
+  }, [targetClassValue, prefix, replace]);
+  return targetClass;
+}
+
+exports.useDeviceTargetClass = useDeviceTargetClass;

package/dist/hooks/useMediaQueries.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var reactResponsive = require('react-responsive');
+
+var tablet = "48em";
+var mediaQueries = {
+	"mobile-tiny": "15em",
+	"mobile-small": "20em",
+	"mobile-medium": "23.435em",
+	"mobile-normal": "24.375em",
+	"mobile-large": "26.75em",
+	"mobile-extra-large": "30em",
+	"mobile-super-extra-large": "40em",
+	tablet: tablet,
+	"tablet-small": "40em",
+	"tablet-large": "60em",
+	"desktop-small": "60em",
+	"desktop-medium": "64em",
+	"desktop-normal": "72.5em",
+	"desktop-large": "80em",
+	"desktop-extra-large": "90em",
+	"desktop-super-extra-large": "120em",
+	"desktop-huge": "160em"
+};
+
+var isSSR = typeof window === 'undefined';
+function useMediaQueries(userDevice) {
+  if (userDevice === void 0) {
+    userDevice = {};
+  }
+  // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
+
+  var isMobile = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-tiny'],
+    maxWidth: mediaQueries['tablet']
+  }) || isSSR && Boolean(userDevice.isMobile);
+
+  // const isMobileTiny = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-tiny'],
+  //   maxWidth: mediaQueries['mobile-small'],
+  // })
+  // const isMobileSmall = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-small'],
+  //   maxWidth: mediaQueries['mobile-medium'],
+  // })
+  // const isMobileMedium = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-medium'],
+  //   maxWidth: mediaQueries['mobile-normal'],
+  // })
+  // const isMobileNormal = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-normal'],
+  //   maxWidth: mediaQueries['mobile-large'],
+  // })
+  // const isMobileStandart = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-large'],
+  //   maxWidth: mediaQueries['mobile-extra-large'],
+  // })
+  // const isMobileLarge = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-extra-large'],
+  //   maxWidth: mediaQueries['mobile-super-extra-large'],
+  // })
+  reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-super-extra-large'],
+    maxWidth: mediaQueries['tablet']
+  });
+  var isTablet = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['tablet'],
+    maxWidth: mediaQueries['desktop-small']
+  }) || isSSR && Boolean(userDevice.isTablet);
+  // const isTabletSmall = useMediaQuery({
+  //   minWidth: mediaQueries['tablet-small'],
+  //   maxWidth: mediaQueries['tablet'],
+  // })
+  // const isTabletLarge = useMediaQuery({
+  //   minWidth: mediaQueries['tablet'],
+  //   maxWidth: mediaQueries['tablet-large'],
+  // })
+
+  var isDesktop = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-small'],
+    maxWidth: mediaQueries['desktop-super-huge']
+  }) || isSSR && Boolean(userDevice.isDesktop);
+  // const isDesktopSmall = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-small'],
+  //   maxWidth: mediaQueries['desktop-medium'],
+  // })
+  // const isDesktopMedium = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-medium'],
+  //   maxWidth: mediaQueries['desktop-normal'],
+  // })
+  // const isDesktopNormal = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-normal'],
+  //   maxWidth: mediaQueries['desktop-large'],
+  // })
+  // const isDesktopStandart = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-large'],
+  //   maxWidth: mediaQueries['desktop-extra-large'],
+  // })
+  // const isDesktopLarge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-extra-large'],
+  //   maxWidth: mediaQueries['desktop-super-extra-large'],
+  // })
+  // const isDesktopHuge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-super-extra-large'],
+  //   maxWidth: mediaQueries['desktop-huge'],
+  // })
+  var isDesktopMega = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-huge']
+  });
+  return {
+    // isWarning,
+    isMobile: isMobile,
+    // isMobileTiny,
+    // isMobileSmall,
+    // isMobileMedium,
+    // isMobileNormal,
+    // isMobileStandart,
+    // isMobileLarge,
+    isMobileHuge: isMobile,
+    isTablet: isTablet,
+    // isTabletSmall,
+    // isTabletLarge,
+    isDesktop: isDesktop,
+    // isDesktopSmall,
+    // isDesktopMedium,
+    // isDesktopNormal,
+    // isDesktopStandart,
+    // isDesktopLarge,
+    // isDesktopHuge,
+    isDesktopMega: isDesktopMega
+  };
+}
+
+exports.useMediaQueries = useMediaQueries;

package/dist/hooks/useStyles.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var useStyles = require('../useStyles-77c3b520.js');
+require('react');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('./styleAttributes.js');
+require('../context/UIContext.js');
+require('prop-types');
+require('./useMediaQueries.js');
+require('react-responsive');
+
+
+
+exports.useStyles = useStyles.useStyles;

package/dist/index-f1505c84.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var ChevronDown16 = function ChevronDown16(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.50398 4.75303C2.81229 4.41566 3.31216 4.41566 3.62047 4.75303L8.1611 9.72163C8.22276 9.7891 8.32274 9.7891 8.3844 9.72163L12.925 4.75303C13.2333 4.41566 13.7332 4.41566 14.0415 4.75303C14.3498 5.09039 14.3498 5.63737 14.0415 5.97474L9.50088 10.9433C8.8226 11.6856 7.7229 11.6856 7.04462 10.9433L2.50398 5.97474C2.19567 5.63737 2.19567 5.09039 2.50398 4.75303Z"
+  }));
+};
+ChevronDown16.defaultProps = {
+  width: "17",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var Facebook24 = function Facebook24(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M24 12.0301C24 5.38947 18.624 0 12 0C5.376 0 0 5.38947 0 12.0301C0 17.8526 4.128 22.7008 9.6 23.8195V15.6391H7.2V12.0301H9.6V9.02256C9.6 6.70075 11.484 4.81203 13.8 4.81203H16.8V8.42105H14.4C13.74 8.42105 13.2 8.96241 13.2 9.62406V12.0301H16.8V15.6391H13.2V24C19.26 23.3985 24 18.2737 24 12.0301Z"
+  }));
+};
+Facebook24.defaultProps = {
+  width: "24",
+  height: "24",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var Instagram24 = function Instagram24(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M6.96 0H17.04C20.88 0 24 3.12 24 6.96V17.04C24 18.8859 23.2667 20.6562 21.9615 21.9615C20.6562 23.2667 18.8859 24 17.04 24H6.96C3.12 24 0 20.88 0 17.04V6.96C0 5.11409 0.733284 3.34379 2.03854 2.03854C3.34379 0.733284 5.11409 0 6.96 0ZM6.72 2.4C5.57427 2.4 4.47546 2.85514 3.6653 3.6653C2.85514 4.47546 2.4 5.57427 2.4 6.72V17.28C2.4 19.668 4.332 21.6 6.72 21.6H17.28C18.4257 21.6 19.5245 21.1449 20.3347 20.3347C21.1449 19.5245 21.6 18.4257 21.6 17.28V6.72C21.6 4.332 19.668 2.4 17.28 2.4H6.72ZM18.3 4.2C18.6978 4.2 19.0794 4.35804 19.3607 4.63934C19.642 4.92064 19.8 5.30218 19.8 5.7C19.8 6.09783 19.642 6.47936 19.3607 6.76066C19.0794 7.04197 18.6978 7.2 18.3 7.2C17.9022 7.2 17.5206 7.04197 17.2393 6.76066C16.958 6.47936 16.8 6.09783 16.8 5.7C16.8 5.30218 16.958 4.92064 17.2393 4.63934C17.5206 4.35804 17.9022 4.2 18.3 4.2ZM12 6C13.5913 6 15.1174 6.63214 16.2426 7.75736C17.3679 8.88258 18 10.4087 18 12C18 13.5913 17.3679 15.1174 16.2426 16.2426C15.1174 17.3679 13.5913 18 12 18C10.4087 18 8.88258 17.3679 7.75736 16.2426C6.63214 15.1174 6 13.5913 6 12C6 10.4087 6.63214 8.88258 7.75736 7.75736C8.88258 6.63214 10.4087 6 12 6ZM12 8.4C11.0452 8.4 10.1295 8.77928 9.45442 9.45442C8.77928 10.1295 8.4 11.0452 8.4 12C8.4 12.9548 8.77928 13.8705 9.45442 14.5456C10.1295 15.2207 11.0452 15.6 12 15.6C12.9548 15.6 13.8705 15.2207 14.5456 14.5456C15.2207 13.8705 15.6 12.9548 15.6 12C15.6 11.0452 15.2207 10.1295 14.5456 9.45442C13.8705 8.77928 12.9548 8.4 12 8.4Z"
+  }));
+};
+Instagram24.defaultProps = {
+  width: "24",
+  height: "24",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var DoubleArrowRight24 = function DoubleArrowRight24(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M17 12C17 12.2305 16.9233 12.4271 16.764 12.6034L12.1622 17.7763C12.0383 17.9254 11.8732 18 11.6844 18C11.3009 18 11 17.661 11 17.2136C11 16.9966 11.0767 16.8 11.2065 16.6508L15.354 12L11.2065 7.34915C11.0767 7.19322 11 6.99661 11 6.77966C11 6.33898 11.3009 6 11.6844 6C11.8732 6 12.0383 6.07458 12.1622 6.22373L16.764 11.3966C16.9233 11.5729 16.9941 11.7695 17 12Z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M13 12C13 12.2305 12.9233 12.4271 12.764 12.6034L8.16224 17.7763C8.03835 17.9254 7.87316 18 7.68437 18C7.30089 18 7 17.661 7 17.2136C7 16.9966 7.0767 16.8 7.20649 16.6508L11.354 12L7.20649 7.34915C7.0767 7.19322 7 6.99661 7 6.77966C7 6.33898 7.30089 6 7.68437 6C7.87316 6 8.03835 6.07458 8.16224 6.22373L12.764 11.3966C12.9233 11.5729 12.9941 11.7695 13 12Z"
+  }));
+};
+DoubleArrowRight24.defaultProps = {
+  width: "24",
+  height: "24",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var DoubleArrowLeft24 = function DoubleArrowLeft24(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M7 12C7 12.2305 7.0767 12.4271 7.23599 12.6034L11.8378 17.7763C11.9617 17.9254 12.1268 18 12.3156 18C12.6991 18 13 17.661 13 17.2136C13 16.9966 12.9233 16.8 12.7935 16.6508L8.64602 12L12.7935 7.34915C12.9233 7.19322 13 6.99661 13 6.77966C13 6.33898 12.6991 6 12.3156 6C12.1268 6 11.9617 6.07458 11.8378 6.22373L7.23599 11.3966C7.0767 11.5729 7.0059 11.7695 7 12Z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M11 12C11 12.2305 11.0767 12.4271 11.236 12.6034L15.8378 17.7763C15.9617 17.9254 16.1268 18 16.3156 18C16.6991 18 17 17.661 17 17.2136C17 16.9966 16.9233 16.8 16.7935 16.6508L12.646 12L16.7935 7.34915C16.9233 7.19322 17 6.99661 17 6.77966C17 6.33898 16.6991 6 16.3156 6C16.1268 6 15.9617 6.07458 15.8378 6.22373L11.236 11.3966C11.0767 11.5729 11.0059 11.7695 11 12Z"
+  }));
+};
+DoubleArrowLeft24.defaultProps = {
+  width: "24",
+  height: "24",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var icon16 = {
+  chevron_down: ChevronDown16
+};
+var icon24 = {
+  facebook: Facebook24,
+  instagram: Instagram24,
+  doubleArrowRight: DoubleArrowRight24,
+  doubleArrowLeft: DoubleArrowLeft24
+};
+
+exports.icon16 = icon16;
+exports.icon24 = icon24;

package/dist/objectWithoutProperties-ea190611.js

@@ -0,0 +1,188 @@
+'use strict';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+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 ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+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 _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;
+}
+
+exports._defineProperty = _defineProperty;
+exports._extends = _extends;
+exports._objectSpread2 = _objectSpread2;
+exports._objectWithoutProperties = _objectWithoutProperties;
+exports._slicedToArray = _slicedToArray;
+exports._toConsumableArray = _toConsumableArray;
+exports._toPropertyKey = _toPropertyKey;
+exports._typeof = _typeof;

package/dist/useStyles-77c3b520.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var React = require('react');
+var camelCase = require('lodash/camelCase');
+var maxBy = require('lodash/maxBy');
+var upperFirst = require('lodash/upperFirst');
+var styleAttributes = require('./hooks/styleAttributes.js');
+var UIContext = require('./context/UIContext.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+var maxBy__default = /*#__PURE__*/_interopDefault(maxBy);
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+
+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;
+}
+
+var _excluded = ["isMobile", "isTablet", "isDesktop"];
+var DEVICE_TYPES = [];
+var removeDeviceType = function removeDeviceType(originalKey) {
+  // Remove "mobile"/"tablet"/"desktop"
+  var withOutDeviceType = DEVICE_TYPES.reduce(function (cleanKey, deviceType) {
+    if (cleanKey.endsWith(upperFirst__default.default(deviceType))) {
+      return cleanKey.replace(upperFirst__default.default(deviceType), '');
+    }
+    return cleanKey;
+  }, originalKey);
+  return withOutDeviceType;
+};
+function useStyles(props) {
+  var allDevicesTypes = UIContext.useUserDeviceContext();
+  var isMobile = allDevicesTypes.isMobile,
+    isTablet = allDevicesTypes.isTablet,
+    isDesktop = allDevicesTypes.isDesktop,
+    fullNamedDeviceTypes = _objectWithoutPropertiesLoose(allDevicesTypes, _excluded);
+
+  // prettier-ignore
+  var deviceBasePart = React.useMemo(function () {
+    return isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
+  }, [isMobile, isTablet, isDesktop]);
+  /*
+   * rule of prop key:
+   *
+   * first is style     second is div targer  thrid is device
+   * paddingHorizontal  GridInnerWrapper      MobileNormal
+   *
+   * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
+   */
+
+  var currentDevice = React.useMemo(function () {
+    var deviceTypes = Object.keys(allDevicesTypes).map(function (key) {
+      return camelCase__default.default(key.replace('is', ''));
+    });
+
+    // if "fullNamedDeviceTypes.isMobileLarge": true - that our device
+    var currentDevice = Object.keys(fullNamedDeviceTypes).find(function (key) {
+      return fullNamedDeviceTypes[key];
+    });
+    if (!currentDevice) {
+      currentDevice = deviceBasePart;
+    }
+    currentDevice = upperFirst__default.default(camelCase__default.default(currentDevice.replace('is', '')));
+    DEVICE_TYPES = deviceTypes;
+
+    // Set non-existent "currentDevice" value, to collect default styles later
+    return currentDevice || '__DEVICE_IS_NOT_FOUND__';
+  }, [allDevicesTypes, deviceBasePart]);
+  var collectedStyles = React.useMemo(function () {
+    var resultStyles = {};
+
+    // For every component props
+    Object.entries(props).forEach(function (_ref) {
+      var propKey = _ref[0],
+        propValue = _ref[1];
+      // Collect list of possible styles for propKey. e.g:
+      // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
+      var possibleStyleAttributes = styleAttributes.default.filter(function (styleAttribute) {
+        return propKey.startsWith(styleAttribute);
+      });
+
+      // Get longest style key (e.g. "borderLeftWidth")
+      var currentStyleAttribute = maxBy__default.default(possibleStyleAttributes, 'length');
+      if (currentStyleAttribute) {
+        var isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
+        var value = null;
+
+        // e.g. "GridWrapperInner"
+        var targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
+        var targetElementResultKey = camelCase__default.default(targetElementKey) || 'styles';
+        if (!resultStyles[targetElementResultKey]) {
+          resultStyles[targetElementResultKey] = {};
+        }
+        if (isStyleForCurrentDevice) {
+          value = propValue;
+        } else {
+          var propKeyWithOutDeviceType = "" + currentStyleAttribute + targetElementKey;
+          var propKeyWithBaseDeviceType = "" + propKeyWithOutDeviceType + deviceBasePart;
+          var defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
+          var currentValue = resultStyles[targetElementResultKey][currentStyleAttribute];
+          if (propKeyWithOutDeviceType.includes('Horizontal')) {
+            var keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
+            currentValue = resultStyles[targetElementResultKey][keyLeft];
+          } else if (propKeyWithOutDeviceType.includes('Vertical')) {
+            var keyTop = currentStyleAttribute.replace('Vertical', 'Top');
+            currentValue = resultStyles[targetElementResultKey][keyTop];
+          }
+          if (!currentValue) {
+            value = defaultValue;
+          }
+        }
+        if (value) {
+          // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
+          var HAS_UNIT = /\D/;
+          // prettier-ignore
+          var ignorePX = currentStyleAttribute.includes('zIndex') || currentStyleAttribute.includes('order');
+          if (!HAS_UNIT.test(value) && !ignorePX) {
+            value = value + "px";
+          }
+          if (currentStyleAttribute.includes('Horizontal')) {
+            var _keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
+            var keyRight = currentStyleAttribute.replace('Horizontal', 'Right');
+            resultStyles[targetElementResultKey][_keyLeft] = value;
+            resultStyles[targetElementResultKey][keyRight] = value;
+          } else if (currentStyleAttribute.includes('Vertical')) {
+            var _keyTop = currentStyleAttribute.replace('Vertical', 'Top');
+            var keyBottom = currentStyleAttribute.replace('Vertical', 'Bottom');
+            resultStyles[targetElementResultKey][_keyTop] = value;
+            resultStyles[targetElementResultKey][keyBottom] = value;
+          } else {
+            resultStyles[targetElementResultKey][currentStyleAttribute] = value;
+          }
+        }
+      }
+    });
+    return resultStyles;
+  }, [currentDevice]); // props
+
+  return collectedStyles;
+}
+
+exports._objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+exports.useStyles = useStyles;