@itcase/ui 1.0.1

package/dist/components/Group.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var direction = require('../constants/componentProps/direction.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var stacking = require('../constants/componentProps/stacking.js');
+var wrap = require('../constants/componentProps/wrap.js');
+var width = require('../constants/componentProps/width.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+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 Group(props) {
+  var id = props.id,
+    children = props.children,
+    className = props.className,
+    horizontalScroll = props.horizontalScroll,
+    set = props.set,
+    style = props.style;
+  var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_content-align_',
+    propsKey: 'contentAlign'
+  });
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  var stackingClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_stacking_',
+    propsKey: 'stacking'
+  });
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_direction_',
+    propsKey: 'direction'
+  });
+  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_wrap_',
+    propsKey: 'wrap'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_shape_',
+    propsKey: 'shape'
+  });
+  var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_columns_',
+    propsKey: 'columns'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  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),
+    id: id,
+    style: Object.assign({}, groupStyles, style)
+  }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
+    className: "group__wrapper",
+    style: groupWrapperStyles
+  }, children) : children);
+}
+Group.propTypes = {
+  id: PropTypes__default.default.string,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.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),
+  contentAlign: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignDesktop: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignMobile: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignTablet: PropTypes__default.default.oneOf([null, 'center']),
+  stacking: PropTypes__default.default.oneOf(stacking.default),
+  stackingDesktop: PropTypes__default.default.oneOf(stacking.default),
+  stackingMobile: PropTypes__default.default.oneOf(stacking.default),
+  stackingTablet: PropTypes__default.default.oneOf(stacking.default),
+  wrap: PropTypes__default.default.oneOf(wrap.default),
+  wrapDesktop: PropTypes__default.default.oneOf(wrap.default),
+  wrapMobile: PropTypes__default.default.oneOf(wrap.default),
+  wrapTablet: PropTypes__default.default.oneOf(wrap.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),
+  spaceBetweenItems: PropTypes__default.default.string,
+  spaceBetweenItemsDesktop: PropTypes__default.default.string,
+  spaceBetweenItemsMobile: PropTypes__default.default.string,
+  spaceBetweenItemsTablet: PropTypes__default.default.string,
+  width: PropTypes__default.default.oneOf(width.default),
+  widthMobile: PropTypes__default.default.oneOf(width.default),
+  widthTablet: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default),
+  columns: PropTypes__default.default.number,
+  columnsDesktop: PropTypes__default.default.number,
+  columnsMobile: PropTypes__default.default.number,
+  columnsTablet: PropTypes__default.default.number,
+  set: PropTypes__default.default.string,
+  horizontalScroll: PropTypes__default.default.bool
+};
+
+exports.Group = Group;

package/dist/components/Icon.js

@@ -0,0 +1,184 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var SVG = require('react-inlinesvg');
+var fill = require('../constants/componentProps/fill.js');
+var iconSize = require('../constants/componentProps/iconSize.js');
+var shape = require('../constants/componentProps/shape.js');
+var strokeColor = require('../constants/componentProps/strokeColor.js');
+var index = require('./Link.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.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('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+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);
+var SVG__default = /*#__PURE__*/_interopDefault(SVG);
+
+var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, ref) {
+  var before = props.before,
+    after = props.after,
+    Counter = props.Counter,
+    SvgImage = props.SvgImage,
+    imageSrc = props.imageSrc,
+    simple = props.simple,
+    className = props.className,
+    href = props.href,
+    link = props.link,
+    linkTarget = props.linkTarget,
+    linkRel = props.linkRel,
+    width = props.width,
+    height = props.height,
+    onClick = props.onClick;
+  var svgSizes = React.useMemo(function () {
+    var sizes = {};
+    if (width) {
+      sizes.width = width;
+    }
+    if (height) {
+      sizes.height = height;
+    }
+    return sizes;
+  }, []);
+  var bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'bgFill'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var bgFillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_size_',
+    propsKey: 'bgFillSize'
+  });
+  var strokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_stroke_',
+    propsKey: 'stroke'
+  });
+  var strokeHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_stroke_hover_',
+    propsKey: 'strokeHover'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_shape_',
+    propsKey: 'shape'
+  });
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var borderHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderHover'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    iconStyles = _useStyles.styles;
+  var ImageComponent = React.useMemo(function () {
+    if (SvgImage) {
+      return /*#__PURE__*/React__default.default.createElement(SvgImage, svgSizes);
+    }
+    if (imageSrc) {
+      if (imageSrc.endsWith('.svg')) {
+        return /*#__PURE__*/React__default.default.createElement(SVG__default.default, {
+          src: imageSrc,
+          preProcessor: removeFillStroke
+        });
+      }
+      return /*#__PURE__*/React__default.default.createElement("img", {
+        src: imageSrc
+      });
+    }
+    return null;
+  }, [SvgImage, imageSrc]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'icon', simple && 'icon_type_simple', bgFillClass, bgFillSizeClass, borderClass, borderHoverClass, fillClass, fillHoverClass, shapeClass, strokeClass, strokeHoverClass, Counter && 'icon_type_with-counter', (link || href || onClick) && 'cursor_type_pointer'),
+    ref: ref,
+    style: iconStyles,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
+    href: link || href,
+    target: linkTarget,
+    rel: linkRel,
+    className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', sizeClass),
+    DefaultComponent: "div"
+  }, before, ImageComponent, after, Counter));
+});
+Icon.propTypes = {
+  SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.func, PropTypes__default.default.object]),
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillSize: PropTypes__default.default.string,
+  fillSizeDesktop: PropTypes__default.default.string,
+  fillSizeMobile: PropTypes__default.default.string,
+  fillSizeTablet: PropTypes__default.default.string,
+  border: PropTypes__default.default.string,
+  borderDesktop: PropTypes__default.default.string,
+  borderMobile: PropTypes__default.default.string,
+  borderTablet: PropTypes__default.default.string,
+  bgFill: PropTypes__default.default.oneOf(fill.default),
+  bgFillMobile: PropTypes__default.default.oneOf(fill.default),
+  bgFillTablet: PropTypes__default.default.oneOf(fill.default),
+  bgFillDesktop: PropTypes__default.default.oneOf(fill.default),
+  height: PropTypes__default.default.string,
+  LinkComponent: PropTypes__default.default.any,
+  href: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  linkTarget: PropTypes__default.default.string,
+  linkRel: PropTypes__default.default.string,
+  imageSrc: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  simple: PropTypes__default.default.bool,
+  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),
+  size: PropTypes__default.default.oneOf(iconSize.default),
+  sizeDesktop: PropTypes__default.default.oneOf(iconSize.default),
+  sizeMobile: PropTypes__default.default.oneOf(iconSize.default),
+  sizeTablet: PropTypes__default.default.oneOf(iconSize.default),
+  stroke: PropTypes__default.default.oneOf(strokeColor.default),
+  strokeDesktop: PropTypes__default.default.oneOf(strokeColor.default),
+  strokeMobile: PropTypes__default.default.oneOf(strokeColor.default),
+  strokeTablet: PropTypes__default.default.oneOf(strokeColor.default),
+  width: PropTypes__default.default.string
+};
+Icon.defaultProps = {
+  simple: false,
+  LinkComponent: 'a'
+};
+function removeFillStroke(code) {
+  return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
+}
+
+exports.Icon = Icon;

package/dist/components/Image.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var horizontalContentAlign = require('../constants/componentProps/horizontalContentAlign.js');
+var resizeMode = require('../constants/componentProps/resizeMode.js');
+var shape = require('../constants/componentProps/shape.js');
+var verticalContentAlign = require('../constants/componentProps/verticalContentAlign.js');
+var width = require('../constants/componentProps/width.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+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 Image(props) {
+  var after = props.after,
+    alt = props.alt,
+    before = props.before,
+    caption = props.caption,
+    children = props.children,
+    className = props.className,
+    imgClassName = props.imgClassName,
+    imgWrapClassName = props.imgWrapClassName,
+    overlay = props.overlay,
+    src = props.src,
+    title = props.title,
+    type = props.type,
+    onClick = props.onClick,
+    onError = props.onError;
+  var horizontalContentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_horizontal-content-align_',
+    propsKey: 'horizontalContentAlign'
+  });
+  var verticalContentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_vertical-content-align_',
+    propsKey: 'verticalContentAlign'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_shape_',
+    propsKey: 'shape'
+  });
+  var resizeModeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'image_resize-mode_',
+    propsKey: 'resizeMode'
+  });
+  var imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'imageWidth'
+  });
+  var imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'imageHeight'
+  });
+  var borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColorImage'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    styles = _useStyles.styles,
+    wrapperStyles = _useStyles.wrapper,
+    imageStyles = _useStyles.image;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'image', type && "image_type_" + type, horizontalContentAlignClass, verticalContentAlignClass, shapeClass, resizeModeClass),
+    onClick: onClick,
+    style: styles
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('image__wrapper', imgWrapClassName),
+    style: wrapperStyles
+  }, /*#__PURE__*/React__default.default.createElement("img", {
+    src: src,
+    alt: alt,
+    title: title,
+    style: imageStyles,
+    className: clsx__default.default('image__item', imageWidthClass, imageHeightClass, imgClassName, borderColorImageClass),
+    onError: onError
+  }), overlay, caption, children), after);
+}
+Image.propTypes = {
+  after: PropTypes__default.default.any,
+  alt: PropTypes__default.default.string,
+  before: PropTypes__default.default.any,
+  borderColorImage: PropTypes__default.default.oneOf(borderColor.default),
+  borderColorImageDesktop: PropTypes__default.default.oneOf(borderColor.default),
+  borderColorImageMobile: PropTypes__default.default.oneOf(borderColor.default),
+  borderColorImageTablet: PropTypes__default.default.oneOf(borderColor.default),
+  overlay: PropTypes__default.default.any,
+  caption: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  horizontalContentAlign: PropTypes__default.default.oneOf(horizontalContentAlign.default),
+  horizontalContentAlignDesktop: PropTypes__default.default.oneOf(horizontalContentAlign.default),
+  horizontalContentAlignMobile: PropTypes__default.default.oneOf(horizontalContentAlign.default),
+  horizontalContentAlignTablet: PropTypes__default.default.oneOf(horizontalContentAlign.default),
+  imgClassName: PropTypes__default.default.string,
+  imgWrapClassName: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  resizeMode: PropTypes__default.default.oneOf(resizeMode.default),
+  resizeModeDesktop: PropTypes__default.default.oneOf(resizeMode.default),
+  resizeModeMobile: PropTypes__default.default.oneOf(resizeMode.default),
+  resizeModeTablet: PropTypes__default.default.oneOf(resizeMode.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),
+  size: PropTypes__default.default.string,
+  src: PropTypes__default.default.string,
+  style: PropTypes__default.default.object,
+  title: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  сontentX: PropTypes__default.default.string,
+  сontentXDesktop: PropTypes__default.default.string,
+  сontentXMobile: PropTypes__default.default.string,
+  сontentXTablet: PropTypes__default.default.string,
+  сontentY: PropTypes__default.default.string,
+  сontentYDesktop: PropTypes__default.default.string,
+  сontentYMobile: PropTypes__default.default.string,
+  сontentYTablet: PropTypes__default.default.string,
+  imageWidth: PropTypes__default.default.oneOf(width.default),
+  imageWidthMobile: PropTypes__default.default.oneOf(width.default),
+  imageWidthTablet: PropTypes__default.default.oneOf(width.default),
+  imageWidthDesktop: PropTypes__default.default.oneOf(width.default),
+  verticalContentAlign: PropTypes__default.default.oneOf(verticalContentAlign.default),
+  verticalContentAlignDesktop: PropTypes__default.default.oneOf(verticalContentAlign.default),
+  verticalContentAlignMobile: PropTypes__default.default.oneOf(verticalContentAlign.default),
+  verticalContentAlignTablet: PropTypes__default.default.oneOf(verticalContentAlign.default),
+  onError: PropTypes__default.default.func
+};
+
+exports.Image = Image;

package/dist/components/Input.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+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 Input(props) {
+  var id = props.id,
+    type = props.type,
+    className = props.className,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    value = props.value,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_shape_',
+    propsKey: 'shape'
+  });
+  var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'textSize'
+  });
+  var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'caret'
+  });
+  var placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderTextColor'
+  });
+  var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default(className, 'input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
+    type: type,
+    id: id,
+    disabled: disabled,
+    placeholder: placeholder,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onKeyDown: onKeyDown
+  });
+}
+Input.propTypes = {
+  id: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  onBlur: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+Input.defaultProps = {
+  size: 'm',
+  type: 'text'
+};
+
+exports.Input = Input;

package/dist/components/Label.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Text.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var size = require('../constants/componentProps/size.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var emojiSize = require('../constants/componentProps/emojiSize.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+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 Label(props) {
+  var children = props.children,
+    className = props.className,
+    label = props.label,
+    labelTextSize = props.labelTextSize,
+    labelTextWrap = props.labelTextWrap,
+    labelTextColor = props.labelTextColor,
+    type = props.type;
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'label_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'label_shape_',
+    propsKey: 'shape'
+  });
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_',
+    propsKey: 'borderType'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    labelStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'label', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "label_type_" + type),
+    style: labelStyles
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "label__inner"
+  }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "label__label",
+    textColor: labelTextColor,
+    size: labelTextSize,
+    textWrap: labelTextWrap
+  }, label) : /*#__PURE__*/React__default.default.createElement("div", {
+    className: "label__label"
+  }, label), children));
+}
+Label.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),
+  emoji: PropTypes__default.default.string,
+  emojiFill: PropTypes__default.default.oneOf(fill.default),
+  emojiSize: PropTypes__default.default.oneOf(emojiSize.default),
+  emojiType: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: 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),
+  label: PropTypes__default.default.any,
+  labelSize: PropTypes__default.default.oneOf(size.default),
+  labelSizeDesktop: PropTypes__default.default.oneOf(size.default),
+  labelSizeMobile: PropTypes__default.default.oneOf(size.default),
+  labelSizeTablet: PropTypes__default.default.oneOf(size.default),
+  labelTextColor: PropTypes__default.default.oneOf(size.default),
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
+  type: PropTypes__default.default.string
+};
+Label.defaultProps = {
+  label: 'Label'
+};
+
+exports.Label = Label;