@itcase/ui 1.0.1

package/dist/components/Button.js

@@ -0,0 +1,215 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderType = require('../constants/componentProps/borderType.js');
+var fill = require('../constants/componentProps/fill.js');
+var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
+var shape = require('../constants/componentProps/shape.js');
+var size = require('../constants/componentProps/size.js');
+var type = require('../constants/componentProps/type.js');
+var width = require('../constants/componentProps/width.js');
+var index$1 = require('./Icon.js');
+var index$2 = require('./Text.js');
+var index = require('./Link.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.js');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.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('../constants/componentProps/textGradient.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);
+
+function Button(props) {
+  var before = props.before,
+    after = props.after,
+    className = props.className,
+    Counter = props.Counter,
+    children = props.children,
+    iconAfter = props.iconAfter,
+    iconAfterSize = props.iconAfterSize,
+    iconBefore = props.iconBefore,
+    iconBeforeSize = props.iconBeforeSize,
+    label = props.label,
+    link = props.link,
+    href = props.href,
+    target = props.target,
+    rel = props.rel,
+    size = props.size,
+    iconBeforeBgFill = props.iconBeforeBgFill,
+    iconBeforeFill = props.iconBeforeFill,
+    iconAfterBgFillSize = props.iconAfterBgFillSize;
+    props.iconBeforeBgFillSize;
+    var iconBeforeStroke = props.iconBeforeStroke,
+    iconAfterBgFill = props.iconAfterBgFill,
+    iconAfterFill = props.iconAfterFill,
+    iconAfterStroke = props.iconAfterStroke,
+    type = props.type,
+    htmlType = props.htmlType,
+    isDisabled = props.isDisabled,
+    onClick = props.onClick,
+    onMouseDown = props.onMouseDown;
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'button_width_',
+    propsKey: 'width'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'button_size_',
+    propsKey: 'size'
+  });
+  var labelTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelTextColor'
+  });
+  var labelSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelSize'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'button_shape_',
+    propsKey: 'shape'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_',
+    propsKey: 'borderType'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    buttonStyles = _useStyles.styles,
+    labelStyles = _useStyles.label;
+  return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
+    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, Counter && 'button_type_counter', !label && (iconBefore || iconAfter || before || after) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
+    href: link || href,
+    DefaultComponent: "button",
+    disabled: isDisabled,
+    rel: rel,
+    style: buttonStyles,
+    target: target,
+    type: htmlType,
+    onClick: onClick,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "button__wrapper"
+  }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    className: "button__icon",
+    SvgImage: iconBefore,
+    size: iconBeforeSize,
+    bgFill: iconBeforeBgFill,
+    bgFillSize: iconAfterBgFillSize,
+    fill: iconBeforeFill,
+    stroke: iconBeforeStroke
+  }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
+    className: "button__label",
+    textColor: labelTextColorClass,
+    size: labelSizeClass,
+    style: labelStyles
+  }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    className: "button__icon",
+    SvgImage: iconAfter,
+    size: iconAfterSize,
+    bgFillSize: iconAfterBgFillSize,
+    bgFill: iconAfterBgFill,
+    fill: iconAfterFill,
+    stroke: iconAfterStroke
+  }), Counter, after));
+}
+Button.propTypes = {
+  Counter: PropTypes__default.default.element,
+  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),
+  children: PropTypes__default.default.any,
+  after: PropTypes__default.default.any,
+  before: 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),
+  border: PropTypes__default.default.string,
+  borderDesktop: PropTypes__default.default.string,
+  borderMobile: PropTypes__default.default.string,
+  borderTablet: PropTypes__default.default.string,
+  iconAfter: PropTypes__default.default.any,
+  iconAfterSize: PropTypes__default.default.string,
+  iconBefore: PropTypes__default.default.any,
+  iconBeforeSize: PropTypes__default.default.string,
+  label: PropTypes__default.default.string,
+  LinkComponent: PropTypes__default.default.any,
+  href: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  target: PropTypes__default.default.string,
+  iconBeforeBgFill: PropTypes__default.default.string,
+  iconBeforeFill: PropTypes__default.default.string,
+  iconBeforeStroke: PropTypes__default.default.string,
+  iconAfterBgFill: PropTypes__default.default.string,
+  iconAfterFill: PropTypes__default.default.string,
+  iconAfterStroke: PropTypes__default.default.string,
+  rel: 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),
+  textColor: PropTypes__default.default.string,
+  textColorDesktop: PropTypes__default.default.string,
+  textColorMobile: PropTypes__default.default.string,
+  textColorTablet: PropTypes__default.default.string,
+  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),
+  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),
+  type: PropTypes__default.default.oneOf(type.default),
+  htmlType: PropTypes__default.default.string,
+  width: PropTypes__default.default.oneOf(width.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,
+  onMouseDown: PropTypes__default.default.func,
+  isDisabled: PropTypes__default.default.bool
+};
+Button.defaultProps = {
+  // Button with a `type="submit"` attribute is a form control by default.
+  // If the button is not associated with any form, it will look for
+  // the nearest form in the DOM and submit its data when clicked.
+  htmlType: 'button',
+  size: 'm',
+  labelSize: 'm',
+  width: 'hug'
+};
+
+exports.Button = Button;

package/dist/components/Caption.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('../constants/componentProps/fill.js');
+var fillGradient = require('../constants/componentProps/fillGradient.js');
+var captionPosition = require('../constants/componentProps/captionPosition.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.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 Caption(props) {
+  var children = props.children,
+    className = props.className;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill-gradient_',
+    propsKey: 'fillGradient'
+  });
+  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caption_position_',
+    propsKey: 'position'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    captionStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'caption', positionClass, fillClass, fillGradientClass),
+    style: captionStyles
+  }, children);
+}
+Caption.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  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),
+  fillGradient: PropTypes__default.default.oneOf(fillGradient.default),
+  fillGradientMobile: PropTypes__default.default.oneOf(fillGradient.default),
+  fillGradientTablet: PropTypes__default.default.oneOf(fillGradient.default),
+  fillGradientDesktop: PropTypes__default.default.oneOf(fillGradient.default),
+  position: PropTypes__default.default.oneOf(captionPosition.default),
+  positionMobile: PropTypes__default.default.oneOf(captionPosition.default),
+  positionTablet: PropTypes__default.default.oneOf(captionPosition.default),
+  positionDesktop: PropTypes__default.default.oneOf(captionPosition.default)
+};
+
+exports.Caption = Caption;

package/dist/components/Card.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var size = require('../constants/componentProps/size.js');
+var shape = require('../constants/componentProps/shape.js');
+var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
+var index$1 = require('./Text.js');
+var index = require('./Image.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.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('../useStyles-77c3b520.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('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/horizontalContentAlign.js');
+require('../constants/componentProps/resizeMode.js');
+require('../constants/componentProps/verticalContentAlign.js');
+require('../constants/componentProps/width.js');
+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 Card(props) {
+  var children = props.children,
+    className = props.className,
+    size = props.size,
+    src = props.src,
+    text = props.text,
+    textSize = props.textSize,
+    textColor = props.textColor,
+    textTag = props.textTag,
+    title = props.title,
+    titleSize = props.titleSize,
+    titleTag = props.titleTag,
+    titleColor = props.titleColor,
+    image = props.image,
+    imageShape = props.imageShape,
+    type = props.type,
+    onClick = props.onClick;
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'card_shape_',
+    propsKey: 'shape'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'resize-horizontal_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    onClick: onClick,
+    className: clsx__default.default(className, 'card', shapeClass, size && "card_size_" + size, type && "card_type_" + type, widthClass)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "card__wrapper"
+  }, image, src && /*#__PURE__*/React__default.default.createElement(index.Image, {
+    className: "card__image",
+    shape: imageShape,
+    src: src
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "card__data"
+  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "card__data-title",
+    size: titleSize,
+    textColor: titleColor,
+    tag: titleTag
+  }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    size: textSize,
+    tag: textTag,
+    textColor: textColor,
+    className: "card__data-desc"
+  }, text)), children));
+}
+Card.propTypes = {
+  size: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  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),
+  image: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  imageShape: PropTypes__default.default.oneOf(shape.default),
+  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)
+};
+Card.defaultProps = {
+  textSize: 'p',
+  titleColor: 'surfaceTextPrimary',
+  titleTag: 'span',
+  titleSize: 'h5',
+  imageShape: 'rounded',
+  textColor: 'surfaceTextPrimary'
+};
+
+exports.Card = Card;

package/dist/components/Cell.js

@@ -0,0 +1,180 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Icon.js');
+var index$1 = require('./Text.js');
+var size = require('../constants/componentProps/size.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('react-inlinesvg');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../useStyles-77c3b520.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('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+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 Cell(props) {
+  var className = props.className,
+    iconAfter = props.iconAfter,
+    iconAfterSize = props.iconAfterSize,
+    iconBefore = props.iconBefore,
+    iconBeforeSize = props.iconBeforeSize,
+    iconBeforeBgFill = props.iconBeforeBgFill,
+    iconBeforeFill = props.iconBeforeFill,
+    iconBeforeStroke = props.iconBeforeStroke,
+    iconAfterBgFill = props.iconAfterBgFill,
+    iconAfterFill = props.iconAfterFill,
+    iconAfterStroke = props.iconAfterStroke,
+    isActive = props.isActive,
+    isDisabled = props.isDisabled,
+    set = props.set,
+    titleTag = props.titleTag,
+    decsTag = props.decsTag,
+    after = props.after,
+    before = props.before,
+    desc = props.desc,
+    descSize = props.descSize,
+    descTextColor = props.descTextColor,
+    title = props.title,
+    titleSize = props.titleSize,
+    titleTextColor = props.titleTextColor,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cell__wrapper_shape_',
+    propsKey: 'shape'
+  });
+  var bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'bgFill'
+  });
+  var bgFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'bgFillHover'
+  });
+  var bgFillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'bgFillActive'
+  });
+  var bgFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'bgFillDisabled'
+  });
+  var bgShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cell_shape_',
+    propsKey: 'bgShape'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, set && "cell_set_" + set, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__before"
+  }, before), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('cell__wrapper', fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass)
+  }, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "cell__icon-before",
+    SvgImage: iconBefore,
+    size: iconBeforeSize,
+    bgFill: iconBeforeBgFill,
+    fill: iconBeforeFill,
+    stroke: iconBeforeStroke
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__data"
+  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "cell__title",
+    tag: titleTag,
+    size: titleSize,
+    textColor: titleTextColor
+  }, title), desc && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "cell__desc",
+    tag: decsTag,
+    size: descSize,
+    textColor: descTextColor
+  }, desc)), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "cell__icon-after",
+    SvgImage: iconAfter,
+    size: iconAfterSize,
+    bgFill: iconAfterBgFill,
+    fill: iconAfterFill,
+    stroke: iconAfterStroke
+  })), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__after"
+  }, after));
+}
+Cell.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  desc: PropTypes__default.default.string,
+  descSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  descTextColor: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  titleTextColor: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func,
+  iconAfter: PropTypes__default.default.any,
+  iconAfterSize: PropTypes__default.default.string,
+  iconBefore: PropTypes__default.default.any,
+  iconBeforeSize: PropTypes__default.default.string,
+  iconBeforeBgFill: PropTypes__default.default.string,
+  iconBeforeFill: PropTypes__default.default.string,
+  iconBeforeStroke: PropTypes__default.default.string,
+  iconAfterBgFill: PropTypes__default.default.string,
+  iconAfterFill: PropTypes__default.default.string,
+  iconAfterStroke: PropTypes__default.default.string,
+  isActive: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool
+};
+Cell.defaultProps = {
+  isDisabled: false,
+  textSize: 'p'
+};
+
+exports.Cell = Cell;

package/dist/components/Checkbox.js

@@ -0,0 +1,68 @@
+'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 Checkbox(props) {
+  var id = props.id,
+    className = props.className,
+    checked = props.checked,
+    disabled = props.disabled,
+    onChange = props.onChange;
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox_shape_',
+    propsKey: 'shape'
+  });
+  var fillCheckedClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox_fill_checked_',
+    propsKey: 'fillChecked'
+  });
+  var fillCheckmarkClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox_fill_checkmark_',
+    propsKey: 'fillCheckmark'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillDisableClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox_fill_disable_',
+    propsKey: 'fillDisable'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'checkbox', fillCheckmarkClass, fillCheckedClass, fillClass, fillDisableClass, shapeClass, borderColorClass)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    type: "checkbox",
+    id: id,
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    className: "checkbox__checkbox"
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "checkbox__bg"
+  }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "checkbox__mark"
+  }, "\xA0"));
+}
+Checkbox.propTypes = {
+  className: PropTypes__default.default.string
+};
+
+exports.Checkbox = Checkbox;