@itcase/ui 1.1.5 → 1.1.7

package/dist/components/Tile.js

@@ -1,54 +1,45 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var index$2 = require('./Badge.js');
-require('./Icon.js');
-var index = require('./Title.js');
-var index$1 = require('./Text.js');
-var align = require('../constants/componentProps/align.js');
-var alignDirection = require('../constants/componentProps/alignDirection.js');
-var borderColor = require('../constants/componentProps/borderColor.js');
-var borderColorHover = require('../constants/componentProps/borderColorHover.js');
-var borderType = require('../constants/componentProps/borderType.js');
-var borderWidth = require('../constants/componentProps/borderWidth.js');
-var size = require('../constants/componentProps/size.js');
-var textColor = require('../constants/componentProps/textColor.js');
-var fill = require('../constants/componentProps/fill.js');
-var shape = require('../constants/componentProps/shape.js');
-var textSize = require('../constants/componentProps/textSize.js');
-var useStyles = require('../hooks/useStyles.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textGradient.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('react-inlinesvg');
-require('./Link.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/strokeColor.js');
-require('./Tooltip.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/textAlign.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);
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Badge } from './Badge.js';
+import './Icon.js';
+import { Title } from './Title.js';
+import { T as Text } from '../Text-DffpwlYq.js';
+import alignProps from '../constants/componentProps/align.js';
+import alignDirectionProps from '../constants/componentProps/alignDirection.js';
+import borderColorProps from '../constants/componentProps/borderColor.js';
+import borderColorHoverProps from '../constants/componentProps/borderColorHover.js';
+import borderTypeProps from '../constants/componentProps/borderType.js';
+import borderWidthProps from '../constants/componentProps/borderWidth.js';
+import sizeProps from '../constants/componentProps/size.js';
+import textColorProps from '../constants/componentProps/textColor.js';
+import fillProps from '../constants/componentProps/fill.js';
+import shapeProps from '../constants/componentProps/shape.js';
+import textSizeProps from '../constants/componentProps/textSize.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import '../jsx-runtime-ClDdVO4Q.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import 'react-inlinesvg';
+import './Link.js';
+import '../constants/componentProps/textGradient.js';
+import '../constants/componentProps/textStyle.js';
+import '../constants/componentProps/textWeight.js';
+import '../constants/componentProps/type.js';
+import '../constants/componentProps/underline.js';
+import '../constants/componentProps/iconSize.js';
+import '../constants/componentProps/strokeColor.js';
+import './Tooltip.js';
+import '../constants/componentProps/titleSize.js';
+import '../constants/componentProps/textAlign.js';
+import '../constants/componentProps/wrap.js';
 
 function Tile(props) {
   const {
@@ -76,60 +67,60 @@ function Tile(props) {
     type,
     onClick
   } = props;
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignDirectionClass = useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
   });
-  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignClass = useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'align'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'tile_shape_',
     propsKey: 'shape'
   });
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorHoverClass = useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'borderColorHover'
   });
-  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
   const {
     styles: tileStyles
-  } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && `direction_${direction}`, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && `tile_size_${size}`, type && `tile_type_${type}`, badge && `tile_state_badge`),
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && `direction_${direction}`, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && `tile_size_${size}`, type && `tile_type_${type}`, badge && `tile_state_badge`),
     style: tileStyles,
     onClick: onClick
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tile__wrapper', alignClass, alignDirectionClass)
-  }, before, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('tile__wrapper', alignClass, alignDirectionClass)
+  }, before, title && /*#__PURE__*/React__default.createElement(Title, {
     className: "tile__title",
     size: titleTextSize,
     textAlign: titleTextAlign,
     textColor: titleTextColor,
     textWeight: titleTextWeight,
     textWrap: titleTextWrap
-  }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, title), text && /*#__PURE__*/React__default.createElement(Text, {
     className: "tile__text",
     size: textSize,
     textColor: textColor,
     textWrap: textWrap
-  }, text), badge && /*#__PURE__*/React__default.default.createElement(index$2.Badge, {
+  }, text), badge && /*#__PURE__*/React__default.createElement(Badge, {
     className: "tile__badge",
     size: badgeSize,
     textSize: badgeTextSize,
@@ -138,50 +129,50 @@ function Tile(props) {
   }), children, after));
 }
 Tile.propTypes = {
-  after: PropTypes__default.default.any,
-  align: PropTypes__default.default.oneOf(align.default),
-  alignDesktop: PropTypes__default.default.oneOf(align.default),
-  alignMobile: PropTypes__default.default.oneOf(align.default),
-  alignTablet: PropTypes__default.default.oneOf(align.default),
-  alignDirection: PropTypes__default.default.oneOf(alignDirection.default),
-  alignDirectionDesktop: PropTypes__default.default.oneOf(alignDirection.default),
-  alignDirectionMobile: PropTypes__default.default.oneOf(alignDirection.default),
-  alignDirectionTablet: PropTypes__default.default.oneOf(alignDirection.default),
-  badge: PropTypes__default.default.element,
-  badgeSize: PropTypes__default.default.oneOf(size.default),
-  badgeTextSize: PropTypes__default.default.oneOf(textSize.default),
-  badgeType: PropTypes__default.default.string,
-  before: PropTypes__default.default.any,
-  borderColor: PropTypes__default.default.oneOf(borderColor.default),
-  borderColorHover: PropTypes__default.default.oneOf(borderColorHover.default),
-  borderType: PropTypes__default.default.oneOf(borderType.default),
-  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
-  children: PropTypes__default.default.any,
-  className: 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),
-  onClick: PropTypes__default.default.func,
-  reverse: 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.string,
-  text: PropTypes__default.default.string,
-  textColor: PropTypes__default.default.oneOf(textColor.default),
-  textSize: PropTypes__default.default.oneOf(size.default),
-  textTag: PropTypes__default.default.string,
-  textWrap: PropTypes__default.default.string,
-  title: PropTypes__default.default.string,
-  titleTextAlign: PropTypes__default.default.oneOf(size.default),
-  titleTextColor: PropTypes__default.default.oneOf(size.default),
-  titleTextSize: PropTypes__default.default.oneOf(size.default),
-  titleTextWeight: PropTypes__default.default.oneOf(size.default),
-  titleTextWrap: PropTypes__default.default.oneOf(size.default),
-  type: PropTypes__default.default.string
+  after: PropTypes.any,
+  align: PropTypes.oneOf(alignProps),
+  alignDesktop: PropTypes.oneOf(alignProps),
+  alignMobile: PropTypes.oneOf(alignProps),
+  alignTablet: PropTypes.oneOf(alignProps),
+  alignDirection: PropTypes.oneOf(alignDirectionProps),
+  alignDirectionDesktop: PropTypes.oneOf(alignDirectionProps),
+  alignDirectionMobile: PropTypes.oneOf(alignDirectionProps),
+  alignDirectionTablet: PropTypes.oneOf(alignDirectionProps),
+  badge: PropTypes.element,
+  badgeSize: PropTypes.oneOf(sizeProps),
+  badgeTextSize: PropTypes.oneOf(textSizeProps),
+  badgeType: PropTypes.string,
+  before: PropTypes.any,
+  borderColor: PropTypes.oneOf(borderColorProps),
+  borderColorHover: PropTypes.oneOf(borderColorHoverProps),
+  borderType: PropTypes.oneOf(borderTypeProps),
+  borderWidth: PropTypes.oneOf(borderWidthProps),
+  children: PropTypes.any,
+  className: PropTypes.string,
+  direction: PropTypes.string,
+  fill: PropTypes.oneOf(fillProps),
+  fillDesktop: PropTypes.oneOf(fillProps),
+  fillMobile: PropTypes.oneOf(fillProps),
+  fillTablet: PropTypes.oneOf(fillProps),
+  onClick: PropTypes.func,
+  reverse: PropTypes.bool,
+  shape: PropTypes.oneOf(shapeProps),
+  shapeDesktop: PropTypes.oneOf(shapeProps),
+  shapeMobile: PropTypes.oneOf(shapeProps),
+  shapeTablet: PropTypes.oneOf(shapeProps),
+  size: PropTypes.string,
+  text: PropTypes.string,
+  textColor: PropTypes.oneOf(textColorProps),
+  textSize: PropTypes.oneOf(sizeProps),
+  textTag: PropTypes.string,
+  textWrap: PropTypes.string,
+  title: PropTypes.string,
+  titleTextAlign: PropTypes.oneOf(sizeProps),
+  titleTextColor: PropTypes.oneOf(sizeProps),
+  titleTextSize: PropTypes.oneOf(sizeProps),
+  titleTextWeight: PropTypes.oneOf(sizeProps),
+  titleTextWrap: PropTypes.oneOf(sizeProps),
+  type: PropTypes.string
 };
 Tile.defaultProps = {
   textTag: 'span',
@@ -569,4 +560,4 @@ Tile.__docgenInfo = {
   }
 };
 
-exports.Tile = Tile;
+export { Tile };

package/dist/components/Title.js

@@ -1,33 +1,25 @@
-'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('../hooks/useStyles.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);
+import React__default, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import fillProps from '../constants/componentProps/fill.js';
+import textAlignProps from '../constants/componentProps/textAlign.js';
+import textColorProps from '../constants/componentProps/textColor.js';
+import textGradientProps from '../constants/componentProps/textGradient.js';
+import textStyleProps from '../constants/componentProps/textStyle.js';
+import textWeightProps from '../constants/componentProps/textWeight.js';
+import titleSizeProps from '../constants/componentProps/titleSize.js';
+import typeProps from '../constants/componentProps/type.js';
+import wrapProps from '../constants/componentProps/wrap.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { useUserDeviceContext } from '../context/UIContext.js';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
 
 const titleConfig = {
   appearance: {},
@@ -59,53 +51,53 @@ function Title(props) {
     isMobile,
     isTablet,
     isDesktop
-  } = UIContext.useUserDeviceContext();
-  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  } = useUserDeviceContext();
+  const textColorClass = useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
-  const textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorActiveClass = useDeviceTargetClass(props, {
     prefix: 'text-color_active_',
     propsKey: 'textColorActive'
   });
-  const textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorHoverClass = useDeviceTargetClass(props, {
     prefix: 'text-color_hover_',
     propsKey: 'textColorHover'
   });
-  const textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textAlignClass = useDeviceTargetClass(props, {
     prefix: 'text-align_',
     propsKey: 'textAlign'
   });
-  const typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const typeClass = useDeviceTargetClass(props, {
     prefix: 'title_type_',
     propsKey: 'type'
   });
-  const fillColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillColorClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textGradientClass = useDeviceTargetClass(props, {
     prefix: 'text-gradient_',
     propsKey: 'textColorGradient'
   });
-  const textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textStyleClass = useDeviceTargetClass(props, {
     prefix: 'text-style_',
     propsKey: 'textStyle'
   });
-  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const weightClass = useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
   });
-  const textTruncateClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textTruncateClass = useDeviceTargetClass(props, {
     prefix: 'text-truncate_',
     propsKey: 'textTruncate'
   });
   const {
     styles: titleStyles
-  } = useStyles.useStyles(props);
+  } = useStyles(props);
 
   // Element type (h1, h2, ..., h6)
-  const Tag = React.useMemo(() => {
+  const Tag = useMemo(() => {
     if (tag) {
       return tag;
     }
@@ -120,42 +112,42 @@ function Title(props) {
     }
     return size;
   }, [isMobile, isTablet, isDesktop]);
-  return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass || titleConfig.appearance[appearance] && `text-color_${titleConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
+  return /*#__PURE__*/React__default.createElement(Tag, {
+    className: clsx(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass || titleConfig.appearance[appearance]?.textColor && `text-color_${titleConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
     "data-tour": dataTour,
     onClick: onClick,
     style: titleStyles
-  }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default(textAlignClass, 'title__wrapper', textTruncateClass)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: clsx(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
+  children: PropTypes.any,
+  className: PropTypes.string,
+  fill: PropTypes.oneOf(fillProps),
+  fillDesktop: PropTypes.oneOf(fillProps),
+  fillMobile: PropTypes.oneOf(fillProps),
+  fillTablet: PropTypes.oneOf(fillProps),
+  size: PropTypes.oneOf(titleSizeProps),
+  sizeMobile: PropTypes.oneOf(titleSizeProps),
+  sizeTablet: PropTypes.oneOf(titleSizeProps),
+  sizeDesktop: PropTypes.oneOf(titleSizeProps),
+  text: PropTypes.string,
+  tag: PropTypes.string,
+  textColor: PropTypes.oneOf(textColorProps),
+  textColorDesktop: PropTypes.oneOf(textColorProps),
+  textColorMobile: PropTypes.oneOf(textColorProps),
+  textColorTablet: PropTypes.oneOf(textColorProps),
+  textGradient: PropTypes.oneOf(textGradientProps),
+  textStyle: PropTypes.oneOf(textStyleProps),
+  textWeight: PropTypes.oneOf(textWeightProps),
+  textWrap: PropTypes.oneOf(wrapProps),
+  textAlign: PropTypes.oneOf(textAlignProps),
+  textAlignMobile: PropTypes.oneOf(textAlignProps),
+  textAlignTablet: PropTypes.oneOf(textAlignProps),
+  textAlignDesktop: PropTypes.oneOf(textAlignProps),
+  type: PropTypes.oneOf(typeProps),
+  onClick: PropTypes.func
 };
 Title.defaultProps = {
   size: 'h3'
@@ -396,5 +388,4 @@ Title.__docgenInfo = {
   }
 };
 
-exports.Title = Title;
-exports.titleConfig = titleConfig;
+export { Title, titleConfig };