@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/TabGroup-B1LUF9Hg.js

@@ -0,0 +1,1081 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index$1 = require('./components/Badge.js');
+var Text = require('./Text-CfBPhwqK.js');
+var index = require('./components/Link.js');
+var index$2 = require('./components/Divider.js');
+var fill = require('./constants/componentProps/fill.js');
+var shape = require('./constants/componentProps/shape.js');
+var textColorActive = require('./constants/componentProps/textColorActive.js');
+var textColorHover = require('./constants/componentProps/textColorHover.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 type = require('./constants/componentProps/type.js');
+var underline = require('./constants/componentProps/underline.js');
+var useStyles = require('./hooks/useStyles.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var size = require('./constants/componentProps/size.js');
+var direction = require('./constants/componentProps/direction.js');
+var stacking = require('./constants/componentProps/stacking.js');
+var wrap = require('./constants/componentProps/wrap.js');
+var width = require('./constants/componentProps/width.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);
+
+const tabConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    tabConfig.appearance = newComponent;
+  }
+};
+function Tab(props) {
+  const {
+    isActive,
+    isDisabled,
+    isHover,
+    appearance,
+    after,
+    before,
+    children,
+    className,
+    href,
+    link,
+    set,
+    rel,
+    target,
+    label,
+    labelColor,
+    labelTextColorHover,
+    labelColorActive,
+    labelColorDisabled,
+    labelTextGradient,
+    labelTextSize,
+    labelTextWrap,
+    labelTextStyle,
+    reset,
+    labelTextWeight,
+    dataTour,
+    dividerFill,
+    dividerFillHover,
+    dividerFillActive,
+    dividerFillActiveHover,
+    dividerFillDisabled,
+    dividerSize,
+    dividerDirection,
+    onClick,
+    onMouseEnter,
+    badgeAppearance,
+    badgeSize,
+    badgeTextSize,
+    badgeValue
+  } = props;
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  const fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_hover_',
+    propsKey: 'fillActiveHover'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'linkFill'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_shape_',
+    propsKey: 'shape'
+  });
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  const typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_type_',
+    propsKey: 'type'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const {
+    styles: tab
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass || (isDisabled ? fillDisabledClass || tabConfig.appearance[appearance]?.fillDisabled && `fill_${tabConfig.appearance[appearance].fillDisabled}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillClass || tabConfig.appearance[appearance]?.fill && `fill_${tabConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass || (isDisabled ? null : tabConfig.appearance[appearance]?.fillHover && `fill_hover_${tabConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass || tabConfig.appearance[appearance]?.size && `tab_size_${tabConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillActiveClass, fillActiveHoverClass, shapeClass, typeClass || tabConfig.appearance[appearance]?.type && `tab_type_${tabConfig.appearance[appearance].type}`.replace(/([A-Z])/g, '-$1').toLowerCase(), widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
+    "data-tour": dataTour,
+    style: tab,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, /*#__PURE__*/React__default.default.createElement(index.Link, {
+    className: clsx__default.default('tab__link', alignDirectionClass, alignClass),
+    fill: linkFillClass,
+    href: link || href,
+    rel: rel,
+    target: target
+  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "tab__wrapper"
+  }, (label || tabConfig.appearance[appearance]?.label) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "tab__label",
+    size: labelTextSize || tabConfig.appearance[appearance]?.labelTextSize,
+    textColor: isDisabled ? labelColorDisabled || tabConfig.appearance[appearance]?.labelColorDisabled : labelColor || tabConfig.appearance[appearance]?.labelColor,
+    textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance]?.labelColorActive),
+    textColorGradient: labelTextGradient,
+    textColorHover: labelTextColorHover,
+    textStyle: labelTextStyle,
+    textWeight: labelTextWeight,
+    textWrap: labelTextWrap
+  }, dividerFillActive, " ", label || tabConfig.appearance[appearance]?.label), (badgeValue || tabConfig.appearance[appearance]?.badgeValue) && /*#__PURE__*/React__default.default.createElement(index$1.Badge, {
+    appearance: badgeAppearance || tabConfig.appearance[appearance]?.badgeAppearance,
+    size: badgeSize || tabConfig.appearance[appearance]?.badgeSize,
+    textSize: badgeTextSize || tabConfig.appearance[appearance]?.badgeTextSize,
+    value: badgeValue || tabConfig.appearance[appearance]?.badgeValue
+  })), /*#__PURE__*/React__default.default.createElement(index$2.Divider, {
+    direction: dividerDirection,
+    fill: isDisabled ? dividerFillDisabled || tabConfig.appearance[appearance]?.dividerFillDisabled : dividerFill || tabConfig.appearance[appearance]?.dividerFill,
+    fillActive: isActive && (dividerFillActive || tabConfig.appearance[appearance]?.dividerFillActive),
+    fillActiveHover: dividerFillActiveHover,
+    fillHover: isHover && (dividerFillHover || tabConfig.appearance[appearance]?.dividerFillHover),
+    size: dividerSize,
+    width: "fill"
+  })), after)));
+}
+Tab.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  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),
+  href: PropTypes__default.default.string,
+  isActive: PropTypes__default.default.bool,
+  label: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.string]),
+  labelColor: PropTypes__default.default.oneOf(textColor.default),
+  labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
+  labelTextColorHover: PropTypes__default.default.oneOf(textColorHover.default),
+  labelTextGradient: PropTypes__default.default.oneOf(textGradient.default),
+  labelTextSize: PropTypes__default.default.oneOf(size.default),
+  labelTextStyle: PropTypes__default.default.oneOf(textStyle.default),
+  labelTextWeight: PropTypes__default.default.oneOf(textWeight.default),
+  labelTextWrap: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  LinkComponent: PropTypes__default.default.any,
+  linkFill: PropTypes__default.default.oneOf(fill.default),
+  linkFillDesktop: PropTypes__default.default.oneOf(fill.default),
+  linkFillMobile: PropTypes__default.default.oneOf(fill.default),
+  linkFillTablet: PropTypes__default.default.oneOf(fill.default),
+  rel: 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),
+  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),
+  target: PropTypes__default.default.string,
+  type: PropTypes__default.default.oneOf(type.default),
+  typeDesktop: PropTypes__default.default.oneOf(type.default),
+  typeMobile: PropTypes__default.default.oneOf(type.default),
+  typeTablet: PropTypes__default.default.oneOf(type.default),
+  underline: PropTypes__default.default.oneOf(underline.default),
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func
+};
+Tab.defaultProps = {
+  size: 'normal',
+  LinkComponent: 'a',
+  direction: 'horizontal'
+};
+Tab.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Tab",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "LinkComponent": {
+      "defaultValue": {
+        "value": "'a'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "direction": {
+      "defaultValue": {
+        "value": "'horizontal'",
+        "computed": false
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "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
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "href": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isActive": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "label": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false
+    },
+    "labelColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "labelColorActive": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorActiveProps"
+      },
+      "required": false
+    },
+    "labelTextColorHover": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorHoverProps"
+      },
+      "required": false
+    },
+    "labelTextGradient": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textGradientProps"
+      },
+      "required": false
+    },
+    "labelTextSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "labelTextStyle": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textStyleProps"
+      },
+      "required": false
+    },
+    "labelTextWeight": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textWeightProps"
+      },
+      "required": false
+    },
+    "labelTextWrap": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "link": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "linkFill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "linkFillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "linkFillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "linkFillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "rel": {
+      "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
+    },
+    "sizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "target": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "typeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "typeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "typeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "underline": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "underlineProps"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseEnter": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+function TabGroup(props) {
+  const {
+    id,
+    dataTour,
+    children,
+    className,
+    horizontalScroll,
+    set,
+    style
+  } = props;
+  const contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_content-align_',
+    propsKey: 'contentAlign'
+  });
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_direction_',
+    propsKey: 'direction'
+  });
+  const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'group_wrap_',
+    propsKey: 'wrap'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const {
+    styles: groupStyles,
+    wrapper: groupWrapperStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass),
+    id: id,
+    "data-tour": dataTour,
+    style: Object.assign({}, groupStyles, style)
+  }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
+    className: "group__wrapper",
+    style: groupWrapperStyles
+  }, children) : children);
+}
+TabGroup.propTypes = {
+  id: PropTypes__default.default.string,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  contentAlign: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignDesktop: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignMobile: PropTypes__default.default.oneOf([null, 'center']),
+  contentAlignTablet: PropTypes__default.default.oneOf([null, 'center']),
+  stacking: PropTypes__default.default.oneOf(stacking.default),
+  stackingDesktop: PropTypes__default.default.oneOf(stacking.default),
+  stackingMobile: PropTypes__default.default.oneOf(stacking.default),
+  stackingTablet: PropTypes__default.default.oneOf(stacking.default),
+  wrap: PropTypes__default.default.oneOf(wrap.default),
+  wrapDesktop: PropTypes__default.default.oneOf(wrap.default),
+  wrapMobile: PropTypes__default.default.oneOf(wrap.default),
+  wrapTablet: PropTypes__default.default.oneOf(wrap.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  spaceBetweenItems: PropTypes__default.default.string,
+  spaceBetweenItemsDesktop: PropTypes__default.default.string,
+  spaceBetweenItemsMobile: PropTypes__default.default.string,
+  spaceBetweenItemsTablet: PropTypes__default.default.string,
+  width: PropTypes__default.default.oneOf(width.default),
+  widthMobile: PropTypes__default.default.oneOf(width.default),
+  widthTablet: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default),
+  columns: PropTypes__default.default.number,
+  columnsDesktop: PropTypes__default.default.number,
+  columnsMobile: PropTypes__default.default.number,
+  columnsTablet: PropTypes__default.default.number,
+  set: PropTypes__default.default.string,
+  horizontalScroll: PropTypes__default.default.bool
+};
+TabGroup.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TabGroup",
+  "props": {
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "direction": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "contentAlign": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "null",
+          "computed": false
+        }, {
+          "value": "'center'",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "contentAlignDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "null",
+          "computed": false
+        }, {
+          "value": "'center'",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "contentAlignMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "null",
+          "computed": false
+        }, {
+          "value": "'center'",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "contentAlignTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "null",
+          "computed": false
+        }, {
+          "value": "'center'",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "stacking": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "stackingProps"
+      },
+      "required": false
+    },
+    "stackingDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "stackingProps"
+      },
+      "required": false
+    },
+    "stackingMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "stackingProps"
+      },
+      "required": false
+    },
+    "stackingTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "stackingProps"
+      },
+      "required": false
+    },
+    "wrap": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "wrapProps"
+      },
+      "required": false
+    },
+    "wrapDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "wrapProps"
+      },
+      "required": false
+    },
+    "wrapMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "wrapProps"
+      },
+      "required": false
+    },
+    "wrapTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "wrapProps"
+      },
+      "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
+    },
+    "spaceBetweenItems": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "spaceBetweenItemsDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "spaceBetweenItemsMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "spaceBetweenItemsTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "width": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "widthMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "widthTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "widthDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "columns": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnsDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnsMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnsTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "horizontalScroll": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Tab = Tab;
+exports.TabGroup = TabGroup;
+exports.tabConfig = tabConfig;