@itcase/ui 1.0.8 → 1.0.10

package/dist/components/Dot.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderType = require('../constants/componentProps/borderType.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Dot(props) {
+  var className = props.className,
+    children = props.children;
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_',
+    propsKey: 'borderType'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'dot_shape_',
+    propsKey: 'shape'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'dot', borderClass, borderTypeClass, fillClass, shapeClass)
+  }, children);
+}
+Dot.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  border: PropTypes__default.default.string,
+  borderDesktop: PropTypes__default.default.string,
+  borderMobile: PropTypes__default.default.string,
+  borderTablet: PropTypes__default.default.string,
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
+  borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default)
+};
+Dot.defaultProps = {};
+
+exports.Dot = Dot;

package/dist/components/Group.js

@@ -89,11 +89,19 @@ function Group(props) {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
+  var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'flex-grow_',
+    propsKey: 'flexGrow'
+  });
+  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
   var _useStyles = useStyles.useStyles(props),
     groupStyles = _useStyles.styles,
     groupWrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     id: id,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Modal.js

@@ -4,36 +4,27 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var require$$2 = require('react-dom');
 var clsx = require('clsx');
-require('./Icon.js');
-require('./Text.js');
 var index = require('./Fader.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../context/UIContext.js');
+var useStyles = require('../useStyles-e4accb53.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = require('./Loader.js');
-require('react-inlinesvg');
 require('../constants/componentProps/fill.js');
-require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/strokeColor.js');
-require('./Link.js');
-require('../useStyles-e4accb53.js');
-require('../hooks/styleAttributes.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
+require('../constants/componentProps/fillGradient.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('lodash/castArray');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('./Text.js');
+require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/fillGradient.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -185,16 +176,39 @@ var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props,
     prefix: 'fill_',
     propsKey: 'contentFill'
   });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'modal-shape_',
+    propsKey: 'shape'
+  });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
+  });
+  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    modalStyles = _useStyles.styles;
 
   // Use a portal to render the children into the element
   return modalElement && /*#__PURE__*/require$$2__default.default.createPortal(
   // Any valid React child: JSX, strings, arrays, etc.
   isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('modal-content', contentClassName, contentFillClass),
+    className: clsx__default.default('modal-content', contentClassName, contentFillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
     id: id,
     ref: modalContentRef,
     tabIndex: 0,
-    onBlur: isOutsideClose ? undefined : closeModal
+    onBlur: isOutsideClose ? undefined : closeModal,
+    style: modalStyles
   }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__close",
     onClick: closeModal

package/dist/components/Select.js

@@ -7466,7 +7466,7 @@ var CreatableSelect$1 = CreatableSelect;
 
 var SelectControl = function SelectControl(props) {
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Control, Object.assign({}, props, {
-    className: clsx__default.default(props.selectProps.inputFill, props.selectProps.inputShape)
+    className: clsx__default.default(props.selectProps.inputFill, props.selectProps.inputShape, props.selectProps.inputBorderColor && "border-color_" + props.selectProps.inputBorderColor)
   }));
 };
 SelectControl.propTypes = {
@@ -7480,8 +7480,8 @@ SelectControl.propTypes = {
 var SelectClearIndicator = function SelectClearIndicator(props) {
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.ClearIndicator, props, props.selectProps.clearIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
     SvgImage: props.selectProps.clearIcon,
-    fill: props.selectProps.clearIconFill,
-    stroke: props.selectProps.clearIconStroke
+    iconFill: props.selectProps.clearIconFill,
+    iconStroke: props.selectProps.clearIconStroke
   }) : props.children);
 };
 SelectClearIndicator.propTypes = {
@@ -7496,8 +7496,8 @@ SelectClearIndicator.propTypes = {
 var SelectDropdownIndicator = function SelectDropdownIndicator(props) {
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.DropdownIndicator, props, props.selectProps.dropdownIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
     SvgImage: props.selectProps.dropdownIcon,
-    fill: props.selectProps.dropdownIconFill,
-    stroke: props.selectProps.dropdownIconStroke
+    iconFill: props.selectProps.dropdownIconFill,
+    iconStroke: props.selectProps.dropdownIconStroke
   }) : props.children);
 };
 SelectDropdownIndicator.propTypes = {
@@ -7615,7 +7615,13 @@ SelectValueContainer.propTypes = {
 };
 
 var SelectNoOptions = function SelectNoOptions(props) {
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, props, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  var _props$selectProps = props.selectProps,
+    optionFill = _props$selectProps.optionFill,
+    optionBorder = _props$selectProps.optionBorder,
+    optionBorderType = _props$selectProps.optionBorderType;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, Object.assign({}, props, {
+    className: clsx__default.default(optionFill, optionBorder, optionBorderType)
+  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
     size: props.selectProps.noOptionsTextSize,
     textColor: props.selectProps.noOptionsTextColor
   }, props.selectProps.noOptionsText));
@@ -7661,7 +7667,7 @@ function SelectContainer(props) {
     onChange = props.onChange;
   var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
@@ -7718,6 +7724,9 @@ function SelectContainer(props) {
   var inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'inputTextColor'
   });
+  var inputBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'inputBorderColor'
+  });
   var placeholderTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'placeholderTextSize'
   });
@@ -7758,8 +7767,8 @@ function SelectContainer(props) {
     // isLoading={isLoading}
     ,
     isClearable: isClearable,
-    clearIcon: clearIcon,
     openMenuOnClick: openMenuOnClick,
+    clearIcon: clearIcon,
     clearIconFill: clearIconFill,
     clearIconStroke: clearIconStroke,
     closeMenuOnSelect: closeMenuOnSelect != null ? closeMenuOnSelect : false,
@@ -7784,12 +7793,16 @@ function SelectContainer(props) {
     inputTextColor: inputTextColorClass,
     inputCaretColor: inputCaretColorClass,
     inputShape: inputShapeClass,
+    inputBorderColor: inputBorderColorClass,
     placeholder: placeholder,
     placeholderTextSize: placeholderTextSizeClass,
     placeholderTextColor: placeholderTextColorClass,
     noOptionsTextSize: noOptionsTextSizeClass,
     noOptionsTextColor: noOptionsTextColorClass,
     noOptionsText: noOptionsText,
+    noOptionsFill: optionFillClass,
+    noOptionBorder: optionBorderClass,
+    noOptionBorderType: optionBorderTypeClass,
     options: options,
     components: {
       Control: SelectControl,

package/dist/css/components/Dot/Dot.css

@@ -0,0 +1,23 @@
+.dot {
+}
+.dot {
+  min-width: var(--dot-width);
+  min-height: var(--dot-height);
+  max-width: var(--dot-width);
+  max-height: var(--dot-height);
+}
+.dot_shape {
+  &_rounded {
+    border-radius: 12px;
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+  &_geometric {
+    border-radius: 0;
+  }
+}
+:root {
+  --dot-width: 16px;
+  --dot-height: 16px;
+}

package/dist/css/components/Flex/Flex.css

@@ -63,7 +63,7 @@
   }
 }
 .flex {
-  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly, flexStart, flexEnd, center, spaceBetween, spaceAround, spaceEvenly {
     &_justify-content_$(val) {
       & > div {
         justify-content: $(val);

package/dist/css/components/Modal/Modal.css

@@ -15,36 +15,21 @@
     display: flex;
   }
 }
+.modal-shape {
+  &_rounded {
+    border-radius: 12px;
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+}
 .modal-content {
   width: 100%;
-  max-width: var(--modal-max-width);
-  border-radius: 8px;
+  max-width: var(--modal-max-width, 600px);
   position: relative;
-  height: 200px;
-  width: 200px;
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-  }
-  &__title {
-    text-align: center;
-    padding: 0 0 20px 0;
-    margin: 0;
-    @mixin h3 600;
-  }
+  min-height: 200px;
+  min-width: 200px;
   &__inner {
     width: 100%;
   }
-  &__desc {
-    text-align: center;
-    padding: 0;
-    margin: 0;
-    @mixin p;
-  }
-  &__button {
-    width: 100%;
-    margin: 24px 0 0 0;
-  }
 }

package/dist/css/components/Select/Select.css

@@ -29,6 +29,26 @@
   }
 }
 
+.select {
+  &&_size {
+    @each $size in normal, compaсt {
+      &_$(size) {
+        ^^&__control {
+          padding: var(--select-size-$(size)-padding);
+        }
+        ^^&__option {
+          padding: var(--select-size-$(size)-padding);
+        }
+        ^^&__menu {
+          &-notice  {
+            padding: var(--select-size-$(size)-padding);
+          }
+        }
+      }
+    }
+  }
+}
+
 .select {
   &__control {
     position: relative;
@@ -117,7 +137,6 @@
 .select {
   &__menu {
     &-notice {
-      padding: 10px 48px 10px 20px;
     }
   }
 }

package/dist/css/components/Select/css/__menu/select__menu-notice.css

@@ -1,7 +1,6 @@
 .select {
   &__menu {
     &-notice {
-      padding: 10px 48px 10px 20px;
     }
   }
 }

package/dist/css/styles/flex/flex-grow.css

@@ -0,0 +1,7 @@
+.flex-grow {
+  @each $val in 0, 1 {
+    &_$(val) {
+      flex-grow: $(val);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",