@prom-ui/core 0.2.0 → 1.0.0-alpha.0

package/Box/index.d.ts

@@ -1,2 +1,88 @@
-import { Box } from 'evokit-box';
-export { Box };
+import * as React from 'react';
+type AsProp<C extends React.ElementType> = {
+    'box-as'?: C;
+};
+type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+type EvokitMedia = 'small' | 'medium' | 'large' | 'wide' | 'huge';
+type EvokitMediaSufix<T extends string | number> = T | `${T}` | `${T}@${EvokitMedia}`;
+type EvokitProps<T extends string | number> = T | `${T}` | T[] | `${T}`[] | Partial<Record<`${T}`, boolean>>;
+type BoxThemes = EvokitMediaSufix<'black-100' | 'black-200' | 'black-300' | 'black-400' | 'black-600' | 'black-700' | 'black-800' | 'black-900' | 'green-50' | 'green-500' | 'green-700' | 'red-50' | 'red-100' | 'red-500' | 'violet-50' | 'violet-100' | 'violet-500' | 'violet-700' | 'violet-800' | 'white' | 'yellow-50' | 'yellow-100' | 'yellow-200' | 'yellow-500'>;
+type BoxBorderWidth = EvokitMediaSufix<'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl'>;
+type BoxBorderStyle = EvokitMediaSufix<'solid' | 'dotted' | 'dashed'>;
+type BoxAlign = EvokitMediaSufix<'none' | 'left' | 'center' | 'right'>;
+type BoxDisplay = EvokitMediaSufix<'none' | 'none:empty' | 'block' | 'inline-block' | 'inline'>;
+type BoxHeight = EvokitMediaSufix<'auto' | '1-1'>;
+type BoxMargin = EvokitMediaSufix<'none' | 'auto' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl'>;
+type BoxOpacity = EvokitMediaSufix<0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 100>;
+type BoxOverflow = EvokitMediaSufix<'auto' | 'hidden' | 'scroll' | 'visible'>;
+type BoxPadding = EvokitMediaSufix<'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl'>;
+type BoxPlace = EvokitMediaSufix<'none' | 'top' | 'top-left' | 'top-right' | 'center' | 'center-left' | 'center-right' | 'bottom' | 'bottom-left' | 'bottom-right'>;
+type BoxPosition = EvokitMediaSufix<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>;
+type BoxRound = EvokitMediaSufix<'none' | 'full' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl'>;
+type BoxWidth = EvokitMediaSufix<'auto' | `1-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}` | `2-${2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}` | `3-${3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}` | `4-${4 | 5 | 6 | 7 | 8 | 9 | 10}` | `5-${5 | 6 | 7 | 8 | 9 | 10}` | `6-${6 | 7 | 8 | 9 | 10}` | `7-${7 | 8 | 9 | 10}` | `8-${8 | 9 | 10}` | `9-${9 | 10}` | `10-10`>;
+type BoxZIndex = EvokitMediaSufix<'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl'>;
+export type BoxProps = {
+    'box-align'?: EvokitProps<BoxAlign>;
+    'box-background'?: EvokitProps<BoxThemes>;
+    'box-border'?: EvokitProps<BoxThemes | `${BoxThemes} ${string}`>;
+    /** @ignore */
+    'box-border-color'?: EvokitProps<BoxThemes>;
+    /** @ignore */
+    'box-border-width'?: EvokitProps<BoxBorderWidth>;
+    /** @ignore */
+    'box-border-style'?: EvokitProps<BoxBorderStyle>;
+    'box-display'?: EvokitProps<BoxDisplay>;
+    'box-height'?: EvokitProps<BoxHeight>;
+    'box-margin'?: EvokitProps<BoxMargin | `${BoxMargin} ${string}`>;
+    /** @ignore */
+    'box-margin-top'?: EvokitProps<BoxMargin>;
+    /** @ignore */
+    'box-margin-right'?: EvokitProps<BoxMargin>;
+    /** @ignore */
+    'box-margin-bottom'?: EvokitProps<BoxMargin>;
+    /** @ignore */
+    'box-margin-left'?: EvokitProps<BoxMargin>;
+    'box-opacity'?: EvokitProps<BoxOpacity>;
+    'box-overflow'?: EvokitProps<BoxOverflow | `${BoxOverflow} ${string}`>;
+    /** @ignore */
+    'box-overflow-x'?: EvokitProps<BoxOverflow>;
+    /** @ignore */
+    'box-overflow-y'?: EvokitProps<BoxOverflow>;
+    'box-padding'?: EvokitProps<BoxPadding | `${BoxPadding} ${string}`>;
+    /** @ignore */
+    'box-padding-top'?: EvokitProps<BoxPadding>;
+    /** @ignore */
+    'box-padding-right'?: EvokitProps<BoxPadding>;
+    /** @ignore */
+    'box-padding-bottom'?: EvokitProps<BoxPadding>;
+    /** @ignore */
+    'box-padding-left'?: EvokitProps<BoxPadding>;
+    'box-place'?: EvokitProps<BoxPlace>;
+    'box-position'?: EvokitProps<BoxPosition | `${BoxPosition} ${string}`>;
+    'box-round'?: EvokitProps<BoxRound | `${BoxRound} ${string}`>;
+    /** @ignore */
+    'box-round-top-left'?: EvokitProps<BoxRound>;
+    /** @ignore */
+    'box-round-top-right'?: EvokitProps<BoxRound>;
+    /** @ignore */
+    'box-round-bottom-left'?: EvokitProps<BoxRound>;
+    /** @ignore */
+    'box-round-bottom-right'?: EvokitProps<BoxRound>;
+    'box-width'?: EvokitProps<BoxWidth>;
+    'box-zindex'?: EvokitProps<BoxZIndex>;
+    'box-blackhole'?: EvokitProps<'shadow-hover' | 'product-tile'>;
+};
+export type BoxPropsPolymorphic<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, BoxProps>;
+export type Box = <C extends React.ElementType = 'div'>(props: BoxPropsPolymorphic<C>) => React.ReactElement | null;
+/**
+ * Компонент `Box` из библиотеки `evokit` является простым контейнером, который может
+ * использоваться для размещения других элементов интерфейса.
+ * Он может использоваться как самостоятельный элемент или в качестве родительского элемента для других компонентов.
+ */
+export declare const Box: Box;
+export {};

package/Box/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Box",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Button",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/ButtonPageUp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ButtonPageUp",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Checkbox",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Flex/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Flex",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Grid",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Icon",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Image",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/ImageEmoji/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/ImageEmoji",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Input",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/InputField/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/InputField",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/KeyPress/cjs/index.development.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useKeyPress = require('@prom-ui/hooks/useKeyPress');
+var useKeyPress = require('@prom-ui/core/useKeyPress');
 
 function _interopNamespaceCompat(e) {
     if (e && typeof e === 'object' && 'default' in e) return e;
@@ -50,4 +50,8 @@ var KeyPress = function (_a) {
   return null;
 };
 
+Object.defineProperty(exports, 'useKeyPress', {
+    enumerable: true,
+    get: function () { return useKeyPress.useKeyPress; }
+});
 exports.KeyPress = KeyPress;

package/KeyPress/cjs/index.development.v2.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useKeyPress = require('@prom-ui/hooks/useKeyPress');
+var useKeyPress = require('@prom-ui/core/useKeyPress');
 
 function _interopNamespaceCompat(e) {
     if (e && typeof e === 'object' && 'default' in e) return e;
@@ -50,4 +50,8 @@ var KeyPress = function (_a) {
   return null;
 };
 
+Object.defineProperty(exports, 'useKeyPress', {
+    enumerable: true,
+    get: function () { return useKeyPress.useKeyPress; }
+});
 exports.KeyPress = KeyPress;

package/KeyPress/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/hooks/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,f=e.onKeyUp,s=void 0===f?function(){}:f;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:s}):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/core/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};Object.defineProperty(exports,"useKeyPress",{enumerable:!0,get:function(){return r.useKeyPress}}),exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,s=e.onKeyUp,f=void 0===s?function(){}:s;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:f}):null};

package/KeyPress/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/hooks/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,f=e.onKeyUp,s=void 0===f?function(){}:f;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:s}):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/core/useKeyPress");function t(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),o=function(e){var t=e.code,n=e.onKeyDown,o=e.onKeyUp;return r.useKeyPress(t,n,o),null};Object.defineProperty(exports,"useKeyPress",{enumerable:!0,get:function(){return r.useKeyPress}}),exports.KeyPress=function(e){var r=e.isActive,t=void 0===r||r,u=e.code,c=e.onKeyDown,i=void 0===c?function(){}:c,s=e.onKeyUp,f=void 0===s?function(){}:s;return t?n.createElement(o,{code:u,onKeyDown:i,onKeyUp:f}):null};

package/KeyPress/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useKeyPress } from '@prom-ui/core/useKeyPress';
 export type KeyPressProps = {
     /** Если передать `false` компонент перестанет работать */
     isActive?: boolean;
@@ -10,3 +11,4 @@ export type KeyPressProps = {
     onKeyUp?: (e: KeyboardEvent) => void;
 };
 export declare const KeyPress: React.FC<KeyPressProps>;
+export { useKeyPress };

package/KeyPress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/KeyPress",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Line/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Line",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Link",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/List/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/List",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Media/{context.d.ts → MediaProvider.d.ts}

@@ -1,8 +1,8 @@
 import React from 'react';
-import { tSCREEN_BREAKPOINTS } from './breakpoints';
+import { SCREEN_BREAKPOINTS } from '@prom-ui/core/useMedia';
 export type MediaProviderProps = {
     children?: React.ReactNode;
     resetOnMount?: boolean;
-    width?: tSCREEN_BREAKPOINTS;
+    width?: keyof typeof SCREEN_BREAKPOINTS;
 };
 export declare const MediaProvider: React.FC<MediaProviderProps>;

package/Media/cjs/index.development.js

@@ -2,48 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var reactResponsive = require('react-responsive');
+var useMedia = require('@prom-ui/core/useMedia');
 var React = require('react');
-var PropTypes = require('prop-types');
+var reactResponsive = require('react-responsive');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
-
-var MIN_SCREEN_WIDTH = 1;
-var SCREEN_BREAKPOINTS = {
-  small: 480,
-  medium: 768,
-  large: 960,
-  wide: 1200,
-  huge: 1400
-};
-var SCREEN_BREAKPOINTS_PROXY = new Proxy(SCREEN_BREAKPOINTS, {
-  get: function (target, key) {
-    if (!target.hasOwnProperty(key)) {
-      var keyListStr = JSON.stringify(Object.keys(target));
-      throw new Error("Media received unknown width \"".concat(key, "\". You should use one of ").concat(keyListStr));
-    }
-    return target[key];
-  }
-});
-var getBreakPoint = function (key) {
-  // Use proxy in debug mode, to ensure that we are reading only existing breakpoints
-  if (process.env.NODE_ENV !== 'production') {
-    return SCREEN_BREAKPOINTS_PROXY[key];
-  }
-  return SCREEN_BREAKPOINTS[key];
-};
-
-var useMedia = function (_a) {
-  var minWidth = _a.minWidth,
-    maxWidth = _a.maxWidth;
-  return reactResponsive.useMediaQuery({
-    minWidth: minWidth ? getBreakPoint(minWidth) : MIN_SCREEN_WIDTH,
-    maxWidth: maxWidth ? getBreakPoint(maxWidth) - 1 : undefined
-  });
-};
 
 var MediaProvider = function (_a) {
   var _b = _a.resetOnMount,
@@ -51,7 +16,7 @@ var MediaProvider = function (_a) {
     width = _a.width,
     children = _a.children;
   var _c = React.useState({
-      width: width ? getBreakPoint(width) : MIN_SCREEN_WIDTH
+      width: width ? useMedia.SCREEN_BREAKPOINTS[width] : 1
     }),
     value = _c[0],
     setValue = _c[1];
@@ -64,20 +29,16 @@ var MediaProvider = function (_a) {
     value: value
   }, children);
 };
-// MediaProvider.defaultProps = {
-//     resetOnMount: false,
-// };
-MediaProvider.propTypes = {
-  resetOnMount: PropTypes__default.default.bool,
-  // children: PropTypes.node.isRequired,
-  width: PropTypes__default.default.oneOf(['small', 'medium', 'large', 'wide', 'huge'])
-};
 
+// PDS core
+/**
+ * Компонент отображает соответствующий контент от состояние медиа-запроса и обновляет его при изменении размера окна браузера.
+ */
 var Media = function (_a) {
   var minWidth = _a.minWidth,
     maxWidth = _a.maxWidth,
     children = _a.children;
-  var matchMedia = useMedia({
+  var matchMedia = useMedia.useMedia({
     minWidth: minWidth,
     maxWidth: maxWidth
   });
@@ -87,6 +48,13 @@ var Media = function (_a) {
   return null;
 };
 
+Object.defineProperty(exports, 'SCREEN_BREAKPOINTS', {
+    enumerable: true,
+    get: function () { return useMedia.SCREEN_BREAKPOINTS; }
+});
+Object.defineProperty(exports, 'useMedia', {
+    enumerable: true,
+    get: function () { return useMedia.useMedia; }
+});
 exports.Media = Media;
 exports.MediaProvider = MediaProvider;
-exports.useMedia = useMedia;

package/Media/cjs/index.development.v2.js

@@ -2,48 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var reactResponsive = require('react-responsive');
+var useMedia = require('@prom-ui/core/useMedia');
 var React = require('react');
-var PropTypes = require('prop-types');
+var reactResponsive = require('react-responsive');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
-
-var MIN_SCREEN_WIDTH = 1;
-var SCREEN_BREAKPOINTS = {
-  small: 480,
-  medium: 768,
-  large: 960,
-  wide: 1200,
-  huge: 1400
-};
-var SCREEN_BREAKPOINTS_PROXY = new Proxy(SCREEN_BREAKPOINTS, {
-  get: function (target, key) {
-    if (!target.hasOwnProperty(key)) {
-      var keyListStr = JSON.stringify(Object.keys(target));
-      throw new Error("Media received unknown width \"".concat(key, "\". You should use one of ").concat(keyListStr));
-    }
-    return target[key];
-  }
-});
-var getBreakPoint = function (key) {
-  // Use proxy in debug mode, to ensure that we are reading only existing breakpoints
-  if (process.env.NODE_ENV !== 'production') {
-    return SCREEN_BREAKPOINTS_PROXY[key];
-  }
-  return SCREEN_BREAKPOINTS[key];
-};
-
-var useMedia = function (_a) {
-  var minWidth = _a.minWidth,
-    maxWidth = _a.maxWidth;
-  return reactResponsive.useMediaQuery({
-    minWidth: minWidth ? getBreakPoint(minWidth) : MIN_SCREEN_WIDTH,
-    maxWidth: maxWidth ? getBreakPoint(maxWidth) - 1 : undefined
-  });
-};
 
 var MediaProvider = function (_a) {
   var _b = _a.resetOnMount,
@@ -51,7 +16,7 @@ var MediaProvider = function (_a) {
     width = _a.width,
     children = _a.children;
   var _c = React.useState({
-      width: width ? getBreakPoint(width) : MIN_SCREEN_WIDTH
+      width: width ? useMedia.SCREEN_BREAKPOINTS[width] : 1
     }),
     value = _c[0],
     setValue = _c[1];
@@ -64,20 +29,16 @@ var MediaProvider = function (_a) {
     value: value
   }, children);
 };
-// MediaProvider.defaultProps = {
-//     resetOnMount: false,
-// };
-MediaProvider.propTypes = {
-  resetOnMount: PropTypes__default.default.bool,
-  // children: PropTypes.node.isRequired,
-  width: PropTypes__default.default.oneOf(['small', 'medium', 'large', 'wide', 'huge'])
-};
 
+// PDS core
+/**
+ * Компонент отображает соответствующий контент от состояние медиа-запроса и обновляет его при изменении размера окна браузера.
+ */
 var Media = function (_a) {
   var minWidth = _a.minWidth,
     maxWidth = _a.maxWidth,
     children = _a.children;
-  var matchMedia = useMedia({
+  var matchMedia = useMedia.useMedia({
     minWidth: minWidth,
     maxWidth: maxWidth
   });
@@ -87,6 +48,13 @@ var Media = function (_a) {
   return null;
 };
 
+Object.defineProperty(exports, 'SCREEN_BREAKPOINTS', {
+    enumerable: true,
+    get: function () { return useMedia.SCREEN_BREAKPOINTS; }
+});
+Object.defineProperty(exports, 'useMedia', {
+    enumerable: true,
+    get: function () { return useMedia.useMedia; }
+});
 exports.Media = Media;
 exports.MediaProvider = MediaProvider;
-exports.useMedia = useMedia;

package/Media/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),t=require("react"),r=require("prop-types");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t),o=i(r),u={small:480,medium:768,large:960,wide:1200,huge:1400},d=new Proxy(u,{get:function(e,t){if(!e.hasOwnProperty(t)){var r=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(t,'". You should use one of ').concat(r))}return e[t]}}),a=function(e){return"production"!==process.env.NODE_ENV?d[e]:u[e]},s=function(t){var r=t.minWidth,i=t.maxWidth;return e.useMediaQuery({minWidth:r?a(r):1,maxWidth:i?a(i)-1:void 0})},c=function(r){var i=r.resetOnMount,o=void 0!==i&&i,u=r.width,d=r.children,s=t.useState({width:u?a(u):1}),c=s[0],l=s[1];return t.useEffect((function(){o&&l(void 0)}),[]),n.default.createElement(e.Context.Provider,{value:c},d)};c.propTypes={resetOnMount:o.default.bool,width:o.default.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var t=e.minWidth,r=e.maxWidth,i=e.children;return s({minWidth:t,maxWidth:r})?i:null},exports.MediaProvider=c,exports.useMedia=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@prom-ui/core/useMedia"),t=require("react"),r=require("react-responsive");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t);Object.defineProperty(exports,"SCREEN_BREAKPOINTS",{enumerable:!0,get:function(){return e.SCREEN_BREAKPOINTS}}),Object.defineProperty(exports,"useMedia",{enumerable:!0,get:function(){return e.useMedia}}),exports.Media=function(t){var r=t.minWidth,i=t.maxWidth,n=t.children;return e.useMedia({minWidth:r,maxWidth:i})?n:null},exports.MediaProvider=function(i){var u=i.resetOnMount,o=void 0!==u&&u,d=i.width,a=i.children,c=t.useState({width:d?e.SCREEN_BREAKPOINTS[d]:1}),s=c[0],f=c[1];return t.useEffect((function(){o&&f(void 0)}),[]),n.default.createElement(r.Context.Provider,{value:s},a)};

package/Media/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),t=require("react"),r=require("prop-types");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t),o=i(r),u={small:480,medium:768,large:960,wide:1200,huge:1400},d=new Proxy(u,{get:function(e,t){if(!e.hasOwnProperty(t)){var r=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(t,'". You should use one of ').concat(r))}return e[t]}}),a=function(e){return"production"!==process.env.NODE_ENV?d[e]:u[e]},s=function(t){var r=t.minWidth,i=t.maxWidth;return e.useMediaQuery({minWidth:r?a(r):1,maxWidth:i?a(i)-1:void 0})},c=function(r){var i=r.resetOnMount,o=void 0!==i&&i,u=r.width,d=r.children,s=t.useState({width:u?a(u):1}),c=s[0],l=s[1];return t.useEffect((function(){o&&l(void 0)}),[]),n.default.createElement(e.Context.Provider,{value:c},d)};c.propTypes={resetOnMount:o.default.bool,width:o.default.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var t=e.minWidth,r=e.maxWidth,i=e.children;return s({minWidth:t,maxWidth:r})?i:null},exports.MediaProvider=c,exports.useMedia=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@prom-ui/core/useMedia"),t=require("react"),r=require("react-responsive");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t);Object.defineProperty(exports,"SCREEN_BREAKPOINTS",{enumerable:!0,get:function(){return e.SCREEN_BREAKPOINTS}}),Object.defineProperty(exports,"useMedia",{enumerable:!0,get:function(){return e.useMedia}}),exports.Media=function(t){var r=t.minWidth,i=t.maxWidth,n=t.children;return e.useMedia({minWidth:r,maxWidth:i})?n:null},exports.MediaProvider=function(i){var u=i.resetOnMount,o=void 0!==u&&u,d=i.width,a=i.children,c=t.useState({width:d?e.SCREEN_BREAKPOINTS[d]:1}),s=c[0],f=c[1];return t.useEffect((function(){o&&f(void 0)}),[]),n.default.createElement(r.Context.Provider,{value:s},a)};

package/Media/index.d.ts

@@ -1,12 +1,20 @@
 import * as React from 'react';
-import { tSCREEN_BREAKPOINTS } from './breakpoints';
-import { useMedia } from './useMedia';
-import { MediaProvider } from './context';
+import { useMedia, SCREEN_BREAKPOINTS } from '@prom-ui/core/useMedia';
+export { MediaProvider } from './MediaProvider';
 export type MediaProps = {
-    minWidth?: tSCREEN_BREAKPOINTS;
-    maxWidth?: tSCREEN_BREAKPOINTS;
-    /** React children */
+    /**
+     * Аналог CSS медиа правила `@media (min-width: ...)`
+     */
+    minWidth?: keyof typeof SCREEN_BREAKPOINTS;
+    /**
+     * Аналог CSS медиа правила `@media (max-width: ...)`
+     */
+    maxWidth?: keyof typeof SCREEN_BREAKPOINTS;
+    /** @ignore */
     children?: any;
 };
-export { useMedia, MediaProvider };
+/**
+ * Компонент отображает соответствующий контент от состояние медиа-запроса и обновляет его при изменении размера окна браузера.
+ */
 export declare const Media: React.FC<MediaProps>;
+export { useMedia, SCREEN_BREAKPOINTS };

package/Media/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@prom-ui/core/Media",
-  "version": "0.2.0",
+  "version": "1.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
     "*.css"
   ],
   "dependencies": {
-    "react-responsive": "^8.1.0"
+    "react-responsive": "^9.0.2"
   }
 }

package/OutsideClick/cjs/index.development.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useOutsideClick = require('@prom-ui/hooks/useOutsideClick');
+var useOutsideClick = require('@prom-ui/core/useOutsideClick');
 
 function _interopNamespaceCompat(e) {
     if (e && typeof e === 'object' && 'default' in e) return e;
@@ -78,4 +78,8 @@ var OutsideClick = function (_a) {
   }), children);
 };
 
+Object.defineProperty(exports, 'useOutsideClick', {
+    enumerable: true,
+    get: function () { return useOutsideClick.useOutsideClick; }
+});
 exports.OutsideClick = OutsideClick;

package/OutsideClick/cjs/index.development.v2.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useOutsideClick = require('@prom-ui/hooks/useOutsideClick');
+var useOutsideClick = require('@prom-ui/core/useOutsideClick');
 
 function _interopNamespaceCompat(e) {
     if (e && typeof e === 'object' && 'default' in e) return e;
@@ -78,4 +78,8 @@ var OutsideClick = function (_a) {
   }), children);
 };
 
+Object.defineProperty(exports, 'useOutsideClick', {
+    enumerable: true,
+    get: function () { return useOutsideClick.useOutsideClick; }
+});
 exports.OutsideClick = OutsideClick;

package/OutsideClick/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/hooks/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var r=e.children,o=e.isActive,c=void 0===o||o,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return c?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/core/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};Object.defineProperty(exports,"useOutsideClick",{enumerable:!0,get:function(){return t.useOutsideClick}}),exports.OutsideClick=function(e){var r=e.children,c=e.isActive,o=void 0===c||c,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return o?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};

package/OutsideClick/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/hooks/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var r=e.children,o=e.isActive,c=void 0===o||o,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return c?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@prom-ui/core/useOutsideClick");function r(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};Object.defineProperty(exports,"useOutsideClick",{enumerable:!0,get:function(){return t.useOutsideClick}}),exports.OutsideClick=function(e){var r=e.children,c=e.isActive,o=void 0===c||c,u=e.onClick,l=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(u)[0];return o?n.createElement("div",i({},l,{ref:a}),r):n.createElement("div",null,r)};

package/OutsideClick/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useOutsideClick } from '@prom-ui/core/useOutsideClick';
 type OutsideClickProps = {
     /** React children */
     children?: React.ReactNode;
@@ -8,4 +9,4 @@ type OutsideClickProps = {
     onClick: () => void;
 };
 export declare const OutsideClick: React.FC<OutsideClickProps>;
-export {};
+export { useOutsideClick };