@itcase/ui 1.0.1

package/dist/components/Switch.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+require('prop-types');
+var clsx = require('clsx');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Switch(props) {
+  var className = props.className,
+    set = props.set;
+    props.onClick;
+    props.onMouseDown;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('switch', className, set && "switch_set_" + set)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    type: "checkbox",
+    className: "switch__checkbox"
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "switch__bg"
+  }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "switch__toggle"
+  }, "\xA0"));
+}
+
+exports.Switch = Switch;

package/dist/components/Text.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var textColor = require('../constants/componentProps/textColor.js');
+var textColorActive = require('../constants/componentProps/textColorActive.js');
+var textColorHover = require('../constants/componentProps/textColorHover.js');
+var size = require('../constants/componentProps/size.js');
+var textStyle = require('../constants/componentProps/textStyle.js');
+var textWeight = require('../constants/componentProps/textWeight.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 Text(props) {
+  var after = props.after,
+    before = props.before,
+    children = props.children,
+    className = props.className,
+    cursor = props.cursor,
+    Tag = props.tag,
+    htmlFor = props.htmlFor,
+    type = props.type,
+    onClick = props.onClick;
+  var _useStyles = useStyles.useStyles(props),
+    textStyles = _useStyles.styles;
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'size'
+  });
+  var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  var textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color-active_',
+    propsKey: 'textColorActive'
+  });
+  var textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_hover_',
+    propsKey: 'textColorHover'
+  });
+  var textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-gradient_',
+    propsKey: 'textColorGradient'
+  });
+  var textTruncateClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-truncate_',
+    propsKey: 'textTruncate'
+  });
+  var textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-style_',
+    propsKey: 'textStyle'
+  });
+  var textWrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'word-wrap_',
+    propsKey: 'textWrap'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && "text_type_" + type, widthClass, onClick && (cursor || 'cursor_type_pointer')),
+    htmlFor: htmlFor,
+    style: textStyles,
+    onClick: onClick
+  }, before, children, after);
+}
+Text.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  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),
+  tag: PropTypes__default.default.string,
+  cursor: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textColorMobile: PropTypes__default.default.oneOf(textColor.default),
+  textColorTablet: PropTypes__default.default.oneOf(textColor.default),
+  textColorDesktop: PropTypes__default.default.oneOf(textColor.default),
+  textColorActive: PropTypes__default.default.oneOf(textColorActive.default),
+  textColorHover: PropTypes__default.default.oneOf(textColorHover.default),
+  textGradient: PropTypes__default.default.string,
+  textStyle: PropTypes__default.default.oneOf(textStyle.default),
+  textWeight: PropTypes__default.default.oneOf(textWeight.default),
+  textWeightDesktop: PropTypes__default.default.oneOf(textWeight.default),
+  textWeightMobile: PropTypes__default.default.oneOf(textWeight.default),
+  textWeightTablet: PropTypes__default.default.oneOf(textWeight.default),
+  type: PropTypes__default.default.string,
+  htmlFor: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.fund
+};
+Text.defaultProps = {
+  tag: 'span',
+  size: 'm',
+  textColor: 'surfaceTextPrimary'
+};
+
+exports.Text = Text;

package/dist/components/Textarea.js

@@ -0,0 +1,90 @@
+'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 Textarea(props) {
+  var id = props.id,
+    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: 'textarea_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'textarea_shape_',
+    propsKey: 'shape'
+  });
+  var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'size'
+  });
+  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("textarea", {
+    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
+    id: id,
+    disabled: disabled,
+    placeholder: placeholder,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onKeyDown: onKeyDown
+  });
+}
+Textarea.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
+};
+Textarea.defaultProps = {
+  size: 'm'
+};
+
+exports.Textarea = Textarea;

package/dist/components/Tile.js

@@ -0,0 +1,252 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index$4 = require('./Counter.js');
+var index$1 = require('./Emoji.js');
+var index = require('./Icon.js');
+var index$2 = require('./Title.js');
+var index$3 = require('./Text.js');
+var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
+var align = require('../constants/componentProps/align.js');
+var alignDirection = require('../constants/componentProps/alignDirection.js');
+var size = require('../constants/componentProps/size.js');
+var iconSize = require('../constants/componentProps/iconSize.js');
+var textAlign = require('../constants/componentProps/textAlign.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.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');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/emojiSize.js');
+require('react-inlinesvg');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/underline.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.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 Tile(props) {
+  var children = props.children,
+    className = props.className,
+    counter = props.counter,
+    counterSize = props.counterSize,
+    counterType = props.counterType,
+    direction = props.direction,
+    emoji = props.emoji,
+    emojiFill = props.emojiFill,
+    emojiSize = props.emojiSize,
+    emojiType = props.emojiType,
+    height = props.height,
+    icon = props.icon,
+    iconBgFill = props.iconBgFill,
+    iconBgFillDesktop = props.iconBgFillDesktop,
+    iconBgFillMobile = props.iconBgFillMobile,
+    iconBgFillTablet = props.iconBgFillTablet,
+    iconFill = props.iconFill,
+    iconFillDesktop = props.iconFillDesktop,
+    iconFillMobile = props.iconFillMobile,
+    iconFillSize = props.iconFillSize,
+    iconFillSizeDesktop = props.iconFillSizeDesktop,
+    iconFillSizeMobile = props.iconFillSizeMobile,
+    iconFillSizeTablet = props.iconFillSizeTablet,
+    iconFillTablet = props.iconFillTablet,
+    iconStroke = props.iconStroke,
+    iconShape = props.iconShape,
+    iconSize = props.iconSize,
+    iconSizeMobile = props.iconSizeMobile,
+    iconSizeTable = props.iconSizeTable,
+    iconSizeDesktop = props.iconSizeDesktop,
+    iconSrc = props.iconSrc,
+    reverse = props.reverse,
+    size = props.size,
+    text = props.text,
+    textSize = props.textSize,
+    textWrap = props.textWrap,
+    textTag = props.textTag,
+    title = props.title,
+    titleSize = props.titleSize,
+    titleTag = props.titleTag,
+    titleAlign = props.titleAlign,
+    titleAlignMobile = props.titleAlignMobile,
+    titleAlignTablet = props.titleAlignTablet,
+    titleAlignDesktop = props.titleAlignDesktop,
+    titleWrap = props.titleWrap,
+    type = props.type,
+    onClick = props.onClick;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tile_shape_',
+    propsKey: 'shape'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'resize-horizontal_',
+    propsKey: 'width'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    tileStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "tile_direction_" + direction, reverse && 'tile_reverse', size && "tile_size_" + size, type && "tile_type_" + type, widthClass, height && "tile_height_" + height, counter && "tile_state_counter"),
+    style: tileStyles,
+    onClick: onClick
+  }, (icon || iconSrc) && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "tile__icon"
+  }, /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    SvgImage: icon,
+    bgFill: iconBgFill,
+    bgFillMobile: iconBgFillMobile,
+    bgFillTablet: iconBgFillTablet,
+    bgFillDesktop: iconBgFillDesktop,
+    fill: iconFill,
+    fillMobile: iconFillMobile,
+    fillTablet: iconFillTablet,
+    fillDesktop: iconFillDesktop,
+    fillSize: iconFillSize,
+    fillSizeMobile: iconFillSizeMobile,
+    fillSizeTablet: iconFillSizeTablet,
+    fillSizeDesktop: iconFillSizeDesktop,
+    stroke: iconStroke,
+    imageSrc: iconSrc,
+    shape: iconShape,
+    size: iconSize,
+    sizeMobile: iconSizeMobile,
+    sizeTablet: iconSizeTable,
+    sizeDesktop: iconSizeDesktop
+  })), emoji && /*#__PURE__*/React__default.default.createElement(index$1.Emoji, {
+    className: "tile__emoji",
+    emoji: emoji,
+    fill: emojiFill,
+    size: emojiSize,
+    type: emojiType
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('tile__wrapper', alignClass, alignDirectionClass)
+  }, title && /*#__PURE__*/React__default.default.createElement(index$2.Title, {
+    size: titleSize,
+    textWrap: titleWrap,
+    tag: titleTag,
+    textAlign: titleAlign,
+    textAlignMobile: titleAlignMobile,
+    textAlignTablet: titleAlignTablet,
+    textAlignDesktop: titleAlignDesktop,
+    className: "tile__title"
+  }, title), text && /*#__PURE__*/React__default.default.createElement(index$3.Text, {
+    size: textSize,
+    tag: textTag,
+    textWrap: textWrap,
+    className: "tile__text"
+  }, text), counter && /*#__PURE__*/React__default.default.createElement(index$4.Counter, {
+    className: "tile__counter",
+    value: counter,
+    size: counterSize,
+    type: counterType
+  }), children));
+}
+Tile.propTypes = {
+  align: PropTypes__default.default.oneOf(align.default),
+  alignMobile: PropTypes__default.default.oneOf(align.default),
+  alignTablet: PropTypes__default.default.oneOf(align.default),
+  alignDesktop: PropTypes__default.default.oneOf(align.default),
+  alignDirection: PropTypes__default.default.oneOf(alignDirection.default),
+  alignDirectionMobile: PropTypes__default.default.oneOf(alignDirection.default),
+  alignDirectionTablet: PropTypes__default.default.oneOf(alignDirection.default),
+  alignDirectionDesktop: PropTypes__default.default.oneOf(alignDirection.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  counter: PropTypes__default.default.string,
+  counterSize: PropTypes__default.default.string,
+  counterType: PropTypes__default.default.string,
+  direction: 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),
+  iconSize: PropTypes__default.default.oneOf(iconSize.default),
+  iconSizeMobile: PropTypes__default.default.oneOf(iconSize.default),
+  iconSizeTable: PropTypes__default.default.oneOf(iconSize.default),
+  iconSizeDesktop: PropTypes__default.default.oneOf(iconSize.default),
+  iconStroke: PropTypes__default.default.string,
+  emoji: PropTypes__default.default.string,
+  emojiFill: PropTypes__default.default.string,
+  emojiSize: PropTypes__default.default.string,
+  emojiType: PropTypes__default.default.string,
+  height: PropTypes__default.default.string,
+  icon: PropTypes__default.default.string,
+  iconSrc: PropTypes__default.default.string,
+  iconBgFill: PropTypes__default.default.string,
+  iconBgFillMobile: PropTypes__default.default.string,
+  iconBgFillTablet: PropTypes__default.default.string,
+  iconBgFillDesktop: PropTypes__default.default.string,
+  iconFill: PropTypes__default.default.string,
+  iconFillMobile: PropTypes__default.default.string,
+  iconFillTablet: PropTypes__default.default.string,
+  iconFillDesktop: PropTypes__default.default.string,
+  iconFillSize: PropTypes__default.default.string,
+  iconFillSizeMobile: PropTypes__default.default.string,
+  iconFillSizeTablet: PropTypes__default.default.string,
+  iconFillSizeDesktop: PropTypes__default.default.string,
+  iconShape: PropTypes__default.default.string,
+  reverse: PropTypes__default.default.bool,
+  size: PropTypes__default.default.string,
+  text: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  width: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthMobile: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthTablet: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  widthDesktop: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  onClick: PropTypes__default.default.func,
+  title: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.oneOf(size.default),
+  titleAlign: PropTypes__default.default.oneOf(textAlign.default),
+  titleAlignMobile: PropTypes__default.default.oneOf(textAlign.default),
+  titleAlignTablet: PropTypes__default.default.oneOf(textAlign.default),
+  titleAlignDesktop: PropTypes__default.default.oneOf(textAlign.default),
+  titleTag: PropTypes__default.default.oneOf(size.default),
+  textSize: PropTypes__default.default.oneOf(size.default),
+  textTag: PropTypes__default.default.oneOf(size.default),
+  textWrap: PropTypes__default.default.string
+};
+Tile.defaultProps = {
+  textTag: 'span',
+  titleSize: 'h5',
+  alignDirection: 'vertical'
+};
+
+exports.Tile = Tile;

package/dist/components/Title.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('../constants/componentProps/fill.js');
+var textAlign = require('../constants/componentProps/textAlign.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textGradient = require('../constants/componentProps/textGradient.js');
+var textStyle = require('../constants/componentProps/textStyle.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+var titleSize = require('../constants/componentProps/titleSize.js');
+var type = require('../constants/componentProps/type.js');
+var wrap = require('../constants/componentProps/wrap.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.js');
+var UIContext = require('../context/UIContext.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+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 Title(props) {
+  var tag = props.tag,
+    text = props.text,
+    textWrap = props.textWrap;
+  var children = props.children,
+    className = props.className,
+    onClick = props.onClick;
+  var size = props.size,
+    sizeMobile = props.sizeMobile,
+    sizeTablet = props.sizeTablet,
+    sizeDesktop = props.sizeDesktop;
+  var _useUserDeviceContext = UIContext.useUserDeviceContext(),
+    isMobile = _useUserDeviceContext.isMobile,
+    isTablet = _useUserDeviceContext.isTablet,
+    isDesktop = _useUserDeviceContext.isDesktop;
+  var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  var textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color-active_',
+    propsKey: 'textColorActive'
+  });
+  var textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_hover_',
+    propsKey: 'textColorHover'
+  });
+  var textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-align_',
+    propsKey: 'textAlign'
+  });
+  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'title_type_',
+    propsKey: 'type'
+  });
+  var fillColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-gradient_',
+    propsKey: 'textColorGradient'
+  });
+  var textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-style_',
+    propsKey: 'textStyle'
+  });
+  var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  var textTruncateClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-truncate_',
+    propsKey: 'textTruncate'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    titleStyles = _useStyles.styles;
+
+  // Element type (h1, h2, ..., h6)
+  var Tag = React.useMemo(function () {
+    if (tag) {
+      return tag;
+    }
+    if (isMobile && sizeMobile) {
+      return sizeMobile;
+    }
+    if (isTablet && sizeTablet) {
+      return sizeTablet;
+    }
+    if (isDesktop && sizeDesktop) {
+      return sizeDesktop;
+    }
+    return size;
+  }, [isMobile, isTablet, isDesktop]);
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'title', fillColorClass, size && "title_size_" + size, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_" + textWrap),
+    onClick: onClick,
+    style: titleStyles
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: clsx__default.default(textAlignClass, 'title__wrapper', textTruncateClass)
+  }, children || text));
+}
+Title.propTypes = {
+  children: PropTypes__default.default.any,
+  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),
+  size: PropTypes__default.default.oneOf(titleSize.default),
+  sizeMobile: PropTypes__default.default.oneOf(titleSize.default),
+  sizeTablet: PropTypes__default.default.oneOf(titleSize.default),
+  sizeDesktop: PropTypes__default.default.oneOf(titleSize.default),
+  text: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textColorDesktop: PropTypes__default.default.oneOf(textColor.default),
+  textColorMobile: PropTypes__default.default.oneOf(textColor.default),
+  textColorTablet: PropTypes__default.default.oneOf(textColor.default),
+  textGradient: PropTypes__default.default.oneOf(textGradient.default),
+  textStyle: PropTypes__default.default.oneOf(textStyle.default),
+  textWeight: PropTypes__default.default.oneOf(textWeight.default),
+  textWrap: PropTypes__default.default.oneOf(wrap.default),
+  textAlign: PropTypes__default.default.oneOf(textAlign.default),
+  textAlignMobile: PropTypes__default.default.oneOf(textAlign.default),
+  textAlignTablet: PropTypes__default.default.oneOf(textAlign.default),
+  textAlignDesktop: PropTypes__default.default.oneOf(textAlign.default),
+  type: PropTypes__default.default.oneOf(type.default),
+  onClick: PropTypes__default.default.func
+};
+Title.defaultProps = {
+  size: 'h1'
+};
+
+exports.Title = Title;