@itcase/ui 1.1.7 → 1.1.9

package/dist/components/Icon.js

@@ -1,631 +1,32 @@
-import React__default, { useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import SVG from 'react-inlinesvg';
-import { LinkWrapper } from './Link.js';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { useStyles } from '../hooks/useStyles.js';
-import fillProps from '../constants/componentProps/fill.js';
-import borderColorProps from '../constants/componentProps/borderColor.js';
-import borderTypeProps from '../constants/componentProps/borderType.js';
-import iconSizeProps from '../constants/componentProps/iconSize.js';
-import shapeProps from '../constants/componentProps/shape.js';
-import strokeColorProps from '../constants/componentProps/strokeColor.js';
-import { Tooltip } from './Tooltip.js';
-import '../constants/componentProps/size.js';
-import '../constants/componentProps/textColor.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';
+export { I as Icon, i as iconConfig } from '../Icon-Dn2eEZvb.js';
+import '../Link-ByBzBRDH.js';
+import '../jsx-runtime-ClDdVO4Q.js';
+import 'react';
+import 'clsx';
+import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-DffpwlYq.js';
-import '../jsx-runtime-ClDdVO4Q.js';
+import 'react-inlinesvg';
+import './Tooltip.js';
+import '../Text-BcGbRc14.js';
 import './Title.js';
+import '../constants/componentProps/fill.js';
 import '../constants/componentProps/textAlign.js';
+import '../constants/componentProps/textColor.js';
+import '../constants/componentProps/textGradient.js';
+import '../constants/componentProps/textStyle.js';
+import '../constants/componentProps/textWeight.js';
 import '../constants/componentProps/titleSize.js';
+import '../constants/componentProps/type.js';
 import '../constants/componentProps/wrap.js';
+import '../constants/componentProps/size.js';
 import '../constants/componentProps/textSize.js';
-
-const iconConfig = {
-  appearance: {},
-  setAppearance: newComponent => {
-    iconConfig.appearance = newComponent;
-  }
-};
-const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
-  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  const {
-    Badge,
-    SvgImage,
-    after,
-    before,
-    className,
-    dataTour,
-    height,
-    href,
-    id,
-    imageSrc,
-    link,
-    linkRel,
-    linkTarget,
-    showTooltip,
-    tooltipAppearance,
-    tooltipText,
-    tooltipTextSize,
-    tooltipTitle,
-    tooltipTitleSize,
-    width,
-    onClick
-  } = props;
-  const svgSizes = useMemo(() => {
-    const sizes = {};
-    if (width) {
-      sizes.width = width;
-    }
-    if (height) {
-      sizes.height = height;
-    }
-    return sizes;
-  }, [height, width]);
-  const cursorClass = useDeviceTargetClass(props, {
-    prefix: 'cursor_',
-    propsKey: 'cursor'
-  });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const fillDisabledClass = useDeviceTargetClass(props, {
-    prefix: 'fill_disabled_',
-    propsKey: 'fillDisabled'
-  });
-  const fillSizeClass = useDeviceTargetClass(props, {
-    prefix: 'icon_fill_size_',
-    propsKey: 'fillSize'
-  });
-  const iconFillClass = useDeviceTargetClass(props, {
-    prefix: 'icon_fill_',
-    propsKey: 'iconFill'
-  });
-  const iconFillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'icon_fill_hover_',
-    propsKey: 'iconFillHover'
-  });
-  const iconFillDisabledClass = useDeviceTargetClass(props, {
-    prefix: 'icon_fill_disabled_',
-    propsKey: 'iconFillDisabled'
-  });
-  const iconStrokeClass = useDeviceTargetClass(props, {
-    prefix: 'icon_stroke_',
-    propsKey: 'iconStroke'
-  });
-  const iconStrokeHoverClass = useDeviceTargetClass(props, {
-    prefix: 'icon_stroke_hover_',
-    propsKey: 'iconStrokeHover'
-  });
-  const iconStrokeDisabledClass = useDeviceTargetClass(props, {
-    prefix: 'icon_stroke_disabled_',
-    propsKey: 'iconStrokeDisabled'
-  });
-  const iconSizeClass = useDeviceTargetClass(props, {
-    prefix: 'icon_size_',
-    propsKey: 'iconSize'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'icon_shape_',
-    propsKey: 'shape'
-  });
-  const borderColorClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const borderColorHoverClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_hover_',
-    propsKey: 'borderColorHover'
-  });
-  const borderWidthClass = useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const alignmentClass = useDeviceTargetClass(props, {
-    prefix: 'alignment_',
-    propsKey: 'alignment'
-  });
-  const {
-    styles: iconStyles
-  } = useStyles(props);
-  const ImageComponent = useMemo(() => {
-    if (SvgImage) {
-      return /*#__PURE__*/React__default.createElement(SvgImage, svgSizes);
-    }
-    if (imageSrc) {
-      if (imageSrc.endsWith('.svg')) {
-        return /*#__PURE__*/React__default.createElement(SVG, {
-          preProcessor: removeFillStroke,
-          src: imageSrc
-        });
-      }
-      return /*#__PURE__*/React__default.createElement("img", {
-        src: imageSrc
-      });
-    }
-    return null;
-  }, [SvgImage, svgSizes, imageSrc]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, iconStrokeDisabledClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
-    "data-tour": dataTour,
-    id: id,
-    ref: ref,
-    style: iconStyles,
-    onClick: onClick,
-    onMouseEnter: () => setIsTooltipVisible(true),
-    onMouseLeave: () => setIsTooltipVisible(false)
-  }, /*#__PURE__*/React__default.createElement(LinkWrapper, {
-    className: clsx(link || href ? 'icon__link' : 'icon__item', iconSizeClass),
-    DefaultComponent: "div",
-    href: link || href,
-    rel: linkRel,
-    target: linkTarget
-  }, before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && /*#__PURE__*/React__default.createElement(Tooltip, {
-    appearance: tooltipAppearance,
-    className: clsx(className, 'icon__tooltip', alignmentClass),
-    text: tooltipText,
-    textSize: tooltipTextSize,
-    title: tooltipTitle,
-    titleSize: tooltipTitleSize
-  })));
-});
-Icon.propTypes = {
-  after: PropTypes.any,
-  // "bool" type is valid for condition constructions, e.g. "Boolean(some) && <Badge>"
-  Badge: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
-  before: PropTypes.any,
-  borderColor: PropTypes.oneOf(borderColorProps),
-  borderType: PropTypes.oneOf(borderTypeProps),
-  className: PropTypes.string,
-  dataTour: PropTypes.string,
-  fill: PropTypes.oneOf(fillProps),
-  fillDesktop: PropTypes.oneOf(fillProps),
-  fillMobile: PropTypes.oneOf(fillProps),
-  fillSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  fillSizeDesktop: PropTypes.string,
-  fillSizeMobile: PropTypes.string,
-  fillSizeTablet: PropTypes.string,
-  fillTablet: PropTypes.oneOf(fillProps),
-  height: PropTypes.string,
-  href: PropTypes.string,
-  iconStroke: PropTypes.oneOf(strokeColorProps),
-  iconStrokeDesktop: PropTypes.oneOf(strokeColorProps),
-  iconStrokeMobile: PropTypes.oneOf(strokeColorProps),
-  iconStrokeTablet: PropTypes.oneOf(strokeColorProps),
-  id: PropTypes.string,
-  imageSrc: PropTypes.string,
-  link: PropTypes.string,
-  LinkComponent: PropTypes.any,
-  linkRel: PropTypes.string,
-  linkTarget: PropTypes.string,
-  shape: PropTypes.oneOf(shapeProps),
-  shapeDesktop: PropTypes.oneOf(shapeProps),
-  shapeMobile: PropTypes.oneOf(shapeProps),
-  shapeTablet: PropTypes.oneOf(shapeProps),
-  showTooltip: PropTypes.bool,
-  size: PropTypes.oneOf(iconSizeProps),
-  sizeDesktop: PropTypes.oneOf(iconSizeProps),
-  sizeMobile: PropTypes.oneOf(iconSizeProps),
-  sizeTablet: PropTypes.oneOf(iconSizeProps),
-  SvgImage: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func, PropTypes.object]),
-  tooltipAppearance: PropTypes.string,
-  tooltipText: PropTypes.string,
-  tooltipTextSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  tooltipTitle: PropTypes.string,
-  tooltipTitleSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  width: PropTypes.string,
-  onClick: PropTypes.func
-};
-Icon.defaultProps = {
-  LinkComponent: 'a'
-};
-function removeFillStroke(code) {
-  return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
-}
-Icon.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Icon",
-  "props": {
-    "LinkComponent": {
-      "defaultValue": {
-        "value": "'a'",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "after": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "Badge": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "element"
-        }, {
-          "name": "bool"
-        }]
-      },
-      "required": false
-    },
-    "before": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "borderColor": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "borderColorProps"
-      },
-      "required": false
-    },
-    "borderType": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "borderTypeProps"
-      },
-      "required": false
-    },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "dataTour": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "fill": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillSize": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "string"
-        }, {
-          "name": "number"
-        }]
-      },
-      "required": false
-    },
-    "fillSizeDesktop": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "fillSizeMobile": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "fillSizeTablet": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "fillTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "height": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "href": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "iconStroke": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "strokeColorProps"
-      },
-      "required": false
-    },
-    "iconStrokeDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "strokeColorProps"
-      },
-      "required": false
-    },
-    "iconStrokeMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "strokeColorProps"
-      },
-      "required": false
-    },
-    "iconStrokeTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "strokeColorProps"
-      },
-      "required": false
-    },
-    "id": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "imageSrc": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "link": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "linkRel": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "linkTarget": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "shape": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "showTooltip": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "size": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "iconSizeProps"
-      },
-      "required": false
-    },
-    "sizeDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "iconSizeProps"
-      },
-      "required": false
-    },
-    "sizeMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "iconSizeProps"
-      },
-      "required": false
-    },
-    "sizeTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "iconSizeProps"
-      },
-      "required": false
-    },
-    "SvgImage": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "elementType"
-        }, {
-          "name": "func"
-        }, {
-          "name": "object"
-        }]
-      },
-      "required": false
-    },
-    "tooltipAppearance": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "tooltipText": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "tooltipTextSize": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "string"
-        }, {
-          "name": "number"
-        }]
-      },
-      "required": false
-    },
-    "tooltipTitle": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "tooltipTitleSize": {
-      "description": "",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "string"
-        }, {
-          "name": "number"
-        }]
-      },
-      "required": false
-    },
-    "width": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "onClick": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    }
-  }
-};
-
-export { Icon, iconConfig };
+import '../constants/componentProps/shape.js';

package/dist/components/Image.js

@@ -5,16 +5,16 @@ import borderColorProps from '../constants/componentProps/borderColor.js';
 import resizeModeProps from '../constants/componentProps/resizeMode.js';
 import shapeProps from '../constants/componentProps/shape.js';
 import widthProps from '../constants/componentProps/width.js';
-import { useStyles } from '../hooks/useStyles.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import 'lodash/castArray';
 import 'lodash/camelCase';
-import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import 'lodash/castArray';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
 
 function Image(props) {
   const {
@@ -72,7 +72,7 @@ function Image(props) {
   });
   const borderClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
   const borderColorImageClass = useDeviceTargetClass(props, {
     prefix: 'border-color-image_',