@spaced-out/ui-design-system 0.1.32 → 0.1.33

package/lib/components/FileUpload/FileUpload.module.css

@@ -131,7 +131,7 @@
   composes: formLabelMedium from '../../styles/typography.module.css';
   color: colorTextPrimary;
   gap: spaceXXSmall;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .fileName {

package/lib/components/FileUpload/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _FileBlock = require("./FileBlock");
+Object.keys(_FileBlock).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FileBlock[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FileBlock[key];
+    }
+  });
+});
 var _FileUpload = require("./FileUpload");
 Object.keys(_FileUpload).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/FileUpload/index.js.flow

@@ -1,3 +1,4 @@
 // @flow strict
 
+export * from './FileBlock';
 export * from './FileUpload';

package/lib/components/Stepper/Step/Step.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _Icon = require("../../Icon");
+var _StepperModule = _interopRequireDefault(require("../Stepper.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    active,
+    children,
+    completed = false,
+    disabled = false,
+    expanded = false,
+    index = 0,
+    last,
+    classNames,
+    onClick,
+    allowClick
+  } = _ref;
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const stepContent = childrenArray.map(stepContent => /*#__PURE__*/React.cloneElement(stepContent, {
+    ...stepContent.props,
+    active,
+    completed,
+    disabled
+  }));
+  const handleClick = e => allowClick && onClick?.(index, e);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: (0, _classify.default)(_StepperModule.default.stepWrapper, {
+      [_StepperModule.default.active]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.expanded]: expanded,
+      [_StepperModule.default.last]: last,
+      [_StepperModule.default.disabled]: disabled,
+      [_StepperModule.default.clickable]: allowClick
+    }, classNames?.wrapper),
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_StepperModule.default.stepWrapperCounter, {
+      [_StepperModule.default.selected]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.expanded]: expanded,
+      [_StepperModule.default.last]: last,
+      [_StepperModule.default.disabled]: disabled
+    }, classNames?.stepCounter)
+  }, completed && !active ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "check",
+    color: "inversePrimary",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, (index + 1).toString())), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content)
+  }, stepContent));
+});
+exports.Step = Step;

package/lib/components/Stepper/Step/Step.js.flow

@@ -0,0 +1,101 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../../utils/classify';
+import {Icon} from '../../Icon';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  stepCounter?: string,
+  content?: string,
+}>;
+
+export type StepProps = {
+  active?: boolean,
+  children: React.Node,
+  completed?: boolean,
+  disabled?: boolean,
+  expanded?: boolean,
+  index: number,
+  last?: boolean,
+  classNames?: ClassNames,
+  allowClick?: boolean,
+  onClick?: (idx: number, e?: ?SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
+  React.forwardRef<StepProps, HTMLDivElement>(
+    (
+      {
+        active,
+        children,
+        completed = false,
+        disabled = false,
+        expanded = false,
+        index = 0,
+        last,
+        classNames,
+        onClick,
+        allowClick,
+      }: StepProps,
+      ref,
+    ): React.Node => {
+      const childrenArray = React.Children.toArray(children).filter(Boolean);
+      const stepContent = childrenArray.map((stepContent) =>
+        React.cloneElement(stepContent, {
+          ...stepContent.props,
+          active,
+          completed,
+          disabled,
+        }),
+      );
+
+      const handleClick = (e) => allowClick && onClick?.(index, e);
+
+      return (
+        <div
+          ref={ref}
+          className={classify(
+            css.stepWrapper,
+            {
+              [css.active]: active,
+              [css.completed]: completed,
+              [css.expanded]: expanded,
+              [css.last]: last,
+              [css.disabled]: disabled,
+              [css.clickable]: allowClick,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={handleClick}
+        >
+          <div
+            className={classify(
+              css.stepWrapperCounter,
+              {
+                [css.selected]: active,
+                [css.completed]: completed,
+                [css.expanded]: expanded,
+                [css.last]: last,
+                [css.disabled]: disabled,
+              },
+              classNames?.stepCounter,
+            )}
+          >
+            {completed && !active ? (
+              <Icon name="check" color="inversePrimary" size="small" />
+            ) : (
+              <React.Fragment>{(index + 1).toString()}</React.Fragment>
+            )}
+          </div>
+          <div className={classify(css.stepContent, classNames?.content)}>
+            {stepContent}
+          </div>
+        </div>
+      );
+    },
+  );

package/lib/components/Stepper/Step/StepContent.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepContent = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../../utils/classify");
+var _StepperModule = _interopRequireDefault(require("../Stepper.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StepContent = _ref => {
+  let {
+    children,
+    classNames,
+    active,
+    completed = false,
+    disabled = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_StepperModule.default.stepContentWrapper, {
+      [_StepperModule.default.active]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, children);
+};
+exports.StepContent = StepContent;

package/lib/components/Stepper/Step/StepContent.js.flow

@@ -0,0 +1,40 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../../utils/classify';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepContentProps = {
+  children: React.Node,
+  active?: boolean,
+  completed?: boolean,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const StepContent = ({
+  children,
+  classNames,
+  active,
+  completed = false,
+  disabled = false,
+}: StepContentProps): React.Node => (
+  <div
+    className={classify(
+      css.stepContentWrapper,
+      {
+        [css.active]: active,
+        [css.completed]: completed,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {children}
+  </div>
+);

package/lib/components/Stepper/Step/StepLabel.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../../utils/classify");
+var _StepperModule = _interopRequireDefault(require("../Stepper.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StepLabel = _ref => {
+  let {
+    children,
+    classNames,
+    active,
+    completed = false,
+    disabled = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_StepperModule.default.stepLabelWrapper, {
+      [_StepperModule.default.active]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, children);
+};
+exports.StepLabel = StepLabel;

package/lib/components/Stepper/Step/StepLabel.js.flow

@@ -0,0 +1,40 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../../utils/classify';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepLabelProps = {
+  children: React.Node,
+  active?: boolean,
+  completed?: boolean,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const StepLabel = ({
+  children,
+  classNames,
+  active,
+  completed = false,
+  disabled = false,
+}: StepLabelProps): React.Node => (
+  <div
+    className={classify(
+      css.stepLabelWrapper,
+      {
+        [css.active]: active,
+        [css.completed]: completed,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {children}
+  </div>
+);

package/lib/components/Stepper/Step/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Step = require("./Step");
+Object.keys(_Step).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Step[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Step[key];
+    }
+  });
+});
+var _StepContent = require("./StepContent");
+Object.keys(_StepContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StepContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StepContent[key];
+    }
+  });
+});
+var _StepLabel = require("./StepLabel");
+Object.keys(_StepLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StepLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StepLabel[key];
+    }
+  });
+});

package/lib/components/Stepper/Step/index.js.flow

@@ -0,0 +1,5 @@
+// @flow strict
+
+export * from './Step';
+export * from './StepContent';
+export * from './StepLabel';

package/lib/components/Stepper/Stepper.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Stepper = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _StepperModule = _interopRequireDefault(require("./Stepper.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Stepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    activeStep = 0,
+    children,
+    orientation = 'horizontal',
+    classNames,
+    disabled = false
+  } = _ref;
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const steps = childrenArray.map((step, index) => {
+    let isLastStepCompleted = false;
+    const {
+      disabled: disabledChild,
+      onClick
+    } = step.props;
+    if (index === 0) {
+      isLastStepCompleted = true;
+    } else {
+      isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
+    }
+    return /*#__PURE__*/React.cloneElement(step, {
+      ...step.props,
+      index,
+      last: index + 1 === childrenArray.length,
+      active: index === activeStep,
+      allowClick: onClick && index !== activeStep && isLastStepCompleted,
+      disabled: disabledChild || disabled
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_StepperModule.default.stepperWrapper, _StepperModule.default[orientation], classNames?.wrapper),
+    ref: ref
+  }, steps);
+});
+exports.Stepper = Stepper;

package/lib/components/Stepper/Stepper.js.flow

@@ -0,0 +1,64 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepperProps = {
+  classNames?: ClassNames,
+  activeStep?: number,
+  children: React.Node,
+  orientation?: 'horizontal' | 'vertical',
+  disabled?: boolean,
+};
+
+export const Stepper: React$AbstractComponent<StepperProps, HTMLDivElement> =
+  React.forwardRef<StepperProps, HTMLDivElement>(
+    (
+      {
+        activeStep = 0,
+        children,
+        orientation = 'horizontal',
+        classNames,
+        disabled = false,
+      }: StepperProps,
+      ref,
+    ) => {
+      const childrenArray = React.Children.toArray(children).filter(Boolean);
+      const steps = childrenArray.map((step, index) => {
+        let isLastStepCompleted = false;
+        const {disabled: disabledChild, onClick} = step.props;
+        if (index === 0) {
+          isLastStepCompleted = true;
+        } else {
+          isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
+        }
+        return React.cloneElement(step, {
+          ...step.props,
+          index,
+          last: index + 1 === childrenArray.length,
+          active: index === activeStep,
+          allowClick: onClick && index !== activeStep && isLastStepCompleted,
+          disabled: disabledChild || disabled,
+        });
+      });
+
+      return (
+        <div
+          className={classify(
+            css.stepperWrapper,
+            css[orientation],
+            classNames?.wrapper,
+          )}
+          ref={ref}
+        >
+          {steps}
+        </div>
+      );
+    },
+  );

package/lib/components/Stepper/Stepper.module.css

@@ -0,0 +1,110 @@
+@value (
+  colorFillPrimary,
+  colorSuccessDark,
+  colorBackgroundTertiary,
+  colorFillDisabled,
+  colorTextSecondary,
+  colorTextPrimary,
+  colorTextDisabled,
+  colorTextInversePrimary,
+  colorBorderSecondary
+) from '../../styles/variables/_color.css';
+@value (
+  size24,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+@value (
+  spaceMedium,
+  spaceSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  borderWidthPrimary,
+  borderRadiusCircle
+) from '../../styles/variables/_border.css';
+
+.stepperWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: spaceXXSmall;
+}
+
+.stepperWrapper.vertical {
+  flex-direction: column;
+  gap: spaceMedium;
+  justify-content: initial;
+}
+
+.stepWrapper {
+  position: relative;
+  display: flex;
+  gap: spaceSmall;
+  width: sizeFluid;
+}
+
+.stepWrapperCounter {
+  display: flex;
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  composes: subTitleExtraSmall from '../../styles/typography.module.css';
+  height: size24;
+  width: size24;
+  min-height: size24;
+  min-width: size24;
+  justify-content: center;
+  align-items: center;
+  border-radius: borderRadiusCircle;
+  background-color: transparent;
+  border: borderWidthPrimary solid colorBorderSecondary;
+  color: colorTextSecondary;
+}
+
+.stepWrapperCounter.selected {
+  background-color: colorFillPrimary;
+  border: borderWidthPrimary solid transparent;
+  color: colorTextInversePrimary;
+}
+
+.stepWrapperCounter.completed {
+  background-color: colorSuccessDark;
+  border: borderWidthPrimary solid transparent;
+  color: colorTextInversePrimary;
+}
+
+.stepWrapperCounter.disabled {
+  background-color: colorFillDisabled;
+  border: borderWidthPrimary solid transparent;
+  color: colorTextDisabled;
+}
+
+.stepContent {
+  display: flex;
+  flex-flow: column;
+  gap: spaceXXSmall;
+}
+
+.stepLabelWrapper {
+  composes: subTitleSmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.stepLabelWrapper.active {
+  color: colorTextPrimary;
+}
+
+.stepLabelWrapper.disabled {
+  color: colorTextDisabled;
+}
+
+.stepContentWrapper {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.stepContentWrapper.disabled {
+  color: colorTextDisabled;
+}
+
+.clickable {
+  cursor: pointer;
+}

package/lib/components/Stepper/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Step = require("./Step");
+Object.keys(_Step).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Step[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Step[key];
+    }
+  });
+});
+var _Stepper = require("./Stepper");
+Object.keys(_Stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Stepper[key];
+    }
+  });
+});

package/lib/components/Stepper/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Step';
+export * from './Stepper';

package/lib/components/index.js

@@ -421,6 +421,17 @@ Object.keys(_StatusIndicator).forEach(function (key) {
     }
   });
 });
+var _Stepper = require("./Stepper");
+Object.keys(_Stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Stepper[key];
+    }
+  });
+});
 var _SubMenu = require("./SubMenu");
 Object.keys(_SubMenu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -38,6 +38,7 @@ export * from './RadioButton';
 export * from './SearchInput';
 export * from './SideMenuLink';
 export * from './StatusIndicator';
+export * from './Stepper';
 export * from './SubMenu';
 export * from './Table';
 export * from './Tabs';