react-jupiter 5.12.0 → 6.0.0-beta.1

package/dist/components/icon/index.js

@@ -0,0 +1,116 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+var _tailwindMerge = require("tailwind-merge");
+var HeroIcons = _interopRequireWildcard(require("@heroicons/react/24/outline"));
+var HeroIconsSolid = _interopRequireWildcard(require("@heroicons/react/24/solid"));function _getRequireWildcardCache(e) {if ("function" != typeof WeakMap) return null;var r = new WeakMap(),t = new WeakMap();return (_getRequireWildcardCache = function (e) {return e ? t : r;})(e);}function _interopRequireWildcard(e, r) {if (!r && e && e.__esModule) return e;if (null === e || "object" != typeof e && "function" != typeof e) return { default: e };var t = _getRequireWildcardCache(r);if (t && t.has(e)) return t.get(e);var n = { __proto__: null },a = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];}return n.default = e, t && t.set(e, n), n;}function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
+
+
+
+
+
+
+
+
+
+
+
+const Icon = (_ref) =>
+
+
+
+
+
+
+
+
+{let { name, size = 'md', color, className, style, onClick, variant = 'outline', ...rest } = _ref;
+  // Map old size values to new size values in pixels
+  const getSizeInPixels = () => {
+    switch (size) {
+      case 'xs':
+        return 12;
+      case 'sm':
+        return 16;
+      case 'md':
+        return 20;
+      case 'lg':
+        return 24;
+      case 'xl':
+        return 32;
+      case '2xl':
+        return 40;
+      default:
+        // If it's already a number, return it directly
+        return typeof size === 'number' ? size : 20;
+    }
+  };
+
+  // Map old color values to new color tokens
+  const getColor = () => {
+    switch (color) {
+      case 'white':
+        return 'white';
+      case 'black':
+        return '#000000';
+      case 'gray':
+        return '#6B7280'; // gray-500
+      case 'darkGray':
+        return '#374151'; // gray-700
+      case 'darkBlue':
+        return '#6941C6'; // primary-700
+      case 'red':
+        return '#EF4444'; // error-500
+      case 'green':
+        return '#10B981'; // success-500
+      case 'yellow':
+        return '#F59E0B'; // warning-500
+      case 'blue':
+        return '#3B82F6'; // info-500
+      default:
+        // If it's not a known color name, pass it through as a custom color
+        return color;
+    }
+  };
+
+  // Get the appropriate Heroicon component
+  const getHeroIcon = () => {
+    const iconName = name.
+    split('-').
+    map((part, index) => index === 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part.charAt(0).toUpperCase() + part.slice(1)).
+    join('') + 'Icon';
+    const icons = variant === 'solid' ? HeroIconsSolid : HeroIcons;
+    console.log(iconName, icons[iconName]);
+    return icons[iconName];
+  };
+
+  // Apply styles and colors
+  const iconSize = getSizeInPixels();
+  const iconColor = getColor();
+
+  const iconStyle = {
+    ...style,
+    color: iconColor,
+    width: iconSize,
+    height: iconSize
+  };
+
+  const HeroIcon = getHeroIcon();
+  if (!HeroIcon) {
+    console.log(`Icon "${HeroIcon}" not found in Heroicons`);
+    return null;
+  }
+
+  return (/*#__PURE__*/
+    _react.default.createElement("div", _extends({
+      className: (0, _tailwindMerge.twMerge)('inline-block', className),
+      onClick: onClick,
+      "aria-hidden": "true" },
+    rest), /*#__PURE__*/
+
+    _react.default.createElement(HeroIcon, { style: iconStyle })
+    ));
+
+};var _default = exports.default =
+
+Icon;

package/dist/components/icon/index.stories.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.Small = exports.Medium = exports.Large = exports.Default = void 0;var _react = _interopRequireDefault(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Components/Icon',
+  component: _index.default,
+  argTypes: {
+    name: {
+      control: 'text',
+      description: 'Name of the icon to display'
+    },
+    size: {
+      control: 'select',
+      options: ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'],
+      description: 'Size of the icon'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  name: 'academic-cap',
+  size: 'md'
+};
+
+const Small = exports.Small = Template.bind({});
+Small.args = {
+  name: 'academic-cap',
+  size: 'sm'
+};
+
+const Medium = exports.Medium = Template.bind({});
+Medium.args = {
+  name: 'academic-cap',
+  size: 'md'
+};
+
+const Large = exports.Large = Template.bind({});
+Large.args = {
+  name: 'academic-cap',
+  size: 'lg'
+};

package/dist/components/icon/index.styles.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = require("../utils/theme");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const StyledIcon = _styledComponents.default.i`
+  font-size: ${(_ref) => {let { theme, size } = _ref;return `${theme.size[size]}px`;}};
+  color: ${(_ref2) => {let { theme, IconColor } = _ref2;return (0, _theme.getColorFromName)(theme, IconColor);}};
+  margin: ${(_ref3) => {let {
+    theme, size, stickyLeft, stickyRight, marginRight, marginLeft
+  } = _ref3;return `0 ${marginRight || (stickyRight ? 0 : theme.marginSize[size])}px 0 ${marginLeft || (stickyLeft ? 0 : theme.marginSize[size])}px`;}};
+`;var _default = exports.default =
+
+StyledIcon;

package/dist/components/icon/index.test.js

@@ -0,0 +1,66 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+require("jest-styled-components");
+
+var _test = _interopRequireDefault(require("../utils/test"));
+var _index = _interopRequireDefault(require("./index"));
+var _theme = _interopRequireDefault(require("./theme"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
+
+const setupShallow = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
+    (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, _extends({ name: props.icon }, props))));};
+
+
+const setupMount = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
+    (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, _extends({ name: props.icon }, props))));};
+
+
+describe('Icons Tests', () => {
+  it('should not render component when name prop is undefined', () => {
+    const component = setupShallow();
+    const Icon = (0, _test.default)(component, 'icon');
+    expect(Icon.length).toBe(0);
+  });
+
+  it('should render icon component', () => {
+    const component = setupShallow({ name: 'watch-later' });
+    const wrapper = (0, _test.default)(component, 'icon');
+    expect(wrapper.length).toBe(1);
+  });
+
+  it('should render icon component with medium size', () => {
+    const component = setupMount({ name: 'watch-later' });
+    const Icon = (0, _test.default)(component, 'icon');
+    expect(Icon).toHaveStyleRule('font-size', `${_theme.default.size.md}px`);
+  });
+
+  it('should render icon component with large size', () => {
+    const component = setupMount({ name: 'watch-later', size: 'lg' });
+    const Icon = (0, _test.default)(component, 'icon');
+    expect(Icon).toHaveStyleRule('font-size', `${_theme.default.size.lg}px`);
+  });
+
+  it('should render icon component with small size', () => {
+    const component = setupMount({ name: 'watch-later', size: 'sm' });
+    const Icon = (0, _test.default)(component, 'icon');
+    expect(Icon).toHaveStyleRule('font-size', `${_theme.default.size.sm}px`);
+  });
+
+  it('should render gray icon component with small size', () => {
+    const component = setupMount({ name: 'watch-later', size: 'sm', color: 'gray' });
+    const Icon = (0, _test.default)(component, 'icon');
+    expect(Icon).toHaveStyleRule('font-size', `${_theme.default.size.sm}px`);
+    expect(Icon).toHaveStyleRule('color', `${_theme.default.colors.gray800}`);
+  });
+
+  it('should render sticky left and sticky right icon', () => {
+    const component = setupMount({ name: 'watch-later', stickyLeft: true, stickyRight: true });
+    const Icon = (0, _test.default)(component, 'icon');
+    expect(Icon).toHaveStyleRule('margin', '0 0px 0 0px');
+  });
+
+  it('should render sticky right icon', () => {
+    const component = setupMount({ name: 'watch-later', stickyRight: true });
+    const Icon = (0, _test.default)(component, 'icon');
+    expect(Icon).toHaveStyleRule('margin', `0 0px 0 ${_theme.default.marginSize.md}px`);
+  });
+});

package/dist/components/icon/theme.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const iconTheme = {
+  size: {
+    xxlg: 48,
+    xlg: 32,
+    lg: 24,
+    md: 20,
+    sm: 16,
+    xs: 12
+  },
+  marginSize: {
+    xxlg: 18,
+    xlg: 16,
+    lg: 12,
+    md: 10,
+    sm: 8
+  },
+  colors: _themes.default.colors,
+  defaultColor: _themes.default.colors.riverBedDark
+};var _default = exports.default =
+
+iconTheme;

package/dist/components/index.js

@@ -0,0 +1,75 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () {return _avatar.default;} });Object.defineProperty(exports, "Button", { enumerable: true, get: function () {return _button.default;} });Object.defineProperty(exports, "Card", { enumerable: true, get: function () {return _card.default;} });Object.defineProperty(exports, "Cover", { enumerable: true, get: function () {return _cover.default;} });Object.defineProperty(exports, "Display", { enumerable: true, get: function () {return _display.default;} });Object.defineProperty(exports, "FileItem", { enumerable: true, get: function () {return _fileItem.default;} });Object.defineProperty(exports, "Form", { enumerable: true, get: function () {return _form.default;} });Object.defineProperty(exports, "FormV7", { enumerable: true, get: function () {return _formV.default;} });Object.defineProperty(exports, "Grid", { enumerable: true, get: function () {return _grid.default;} });Object.defineProperty(exports, "Icon", { enumerable: true, get: function () {return _icon.default;} });Object.defineProperty(exports, "Modal", { enumerable: true, get: function () {return _modal.default;} });Object.defineProperty(exports, "NumericSummeryReport", { enumerable: true, get: function () {return _numericSummeryReport.default;} });Object.defineProperty(exports, "ProductMenu", { enumerable: true, get: function () {return _productMenu.default;} });Object.defineProperty(exports, "ProductOwner", { enumerable: true, get: function () {return _productOwner.default;} });Object.defineProperty(exports, "ProductProperties", { enumerable: true, get: function () {return _productProperties.default;} });Object.defineProperty(exports, "Responsive", { enumerable: true, get: function () {return _responsive.default;} });Object.defineProperty(exports, "ShowDate", { enumerable: true, get: function () {return _showDate.default;} });Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () {return _spacing.default;} });Object.defineProperty(exports, "Tab", { enumerable: true, get: function () {return _tabs.default;} });Object.defineProperty(exports, "Table", { enumerable: true, get: function () {return _table.default;} });Object.defineProperty(exports, "TitledAvatar", { enumerable: true, get: function () {return _titledAvatar.default;} });Object.defineProperty(exports, "Typography", { enumerable: true, get: function () {return _typography.default;} });exports.jupiterColors = exports.default = void 0;Object.defineProperty(exports, "utils", { enumerable: true, get: function () {return _utils.default;} });var _grid = _interopRequireDefault(require("./grid"));
+var _spacing = _interopRequireDefault(require("./spacing"));
+var _utils = _interopRequireDefault(require("./utils"));
+var _typography = _interopRequireDefault(require("./typography"));
+var _showDate = _interopRequireDefault(require("./show-date"));
+var _avatar = _interopRequireDefault(require("./avatar"));
+var _icon = _interopRequireDefault(require("./icon"));
+var _button = _interopRequireDefault(require("./button"));
+var _titledAvatar = _interopRequireDefault(require("./titled-avatar"));
+var _numericSummeryReport = _interopRequireDefault(require("./numeric-summery-report"));
+var _card = _interopRequireDefault(require("./card"));
+var _productProperties = _interopRequireDefault(require("./product-properties"));
+var _cover = _interopRequireDefault(require("./cover"));
+var _form = _interopRequireDefault(require("./form"));
+var _display = _interopRequireDefault(require("./display"));
+var _responsive = _interopRequireDefault(require("./responsive"));
+var _productOwner = _interopRequireDefault(require("./product-owner"));
+var _fileItem = _interopRequireDefault(require("./file-item"));
+var _modal = _interopRequireDefault(require("./modal"));
+var _productMenu = _interopRequireDefault(require("./product-menu"));
+var _table = _interopRequireDefault(require("./table"));
+var _tabs = _interopRequireDefault(require("./tabs"));
+var _themes = _interopRequireDefault(require("./themes"));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _formV = _interopRequireDefault(require("./form-v7"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}const { colors } = _themes.default;exports.jupiterColors = colors;var _default = exports.default =
+
+
+
+
+
+
+
+
+
+
+{
+  Grid: _grid.default,
+  Spacing: _spacing.default,
+  utils: _utils.default,
+  Typography: _typography.default,
+  ShowDate: _showDate.default,
+  Avatar: _avatar.default,
+  Icon: _icon.default,
+  Button: _button.default,
+  TitledAvatar: _titledAvatar.default,
+  NumericSummeryReport: _numericSummeryReport.default,
+  Card: _card.default,
+  ProductProperties: _productProperties.default,
+  Cover: _cover.default,
+  Form: _form.default,
+  Responsive: _responsive.default,
+  ProductOwner: _productOwner.default,
+  FileItem: _fileItem.default,
+  Modal: _modal.default,
+  ProductMenu: _productMenu.default,
+  Table: _table.default,
+  Tab: _tabs.default,
+  Display: _display.default
+};

package/dist/components/modal/index.js

@@ -0,0 +1,100 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _reactModal = _interopRequireDefault(require("react-modal"));
+var _globalStyle = _interopRequireDefault(require("../globalStyle"));
+var _index = require("./index.style");
+var _icon = _interopRequireDefault(require("../icon"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// bind modal to the body of the app
+_reactModal.default.setAppElement('body');
+
+function JupiterModal(_ref)
+
+
+
+
+
+
+
+
+
+
+{let { onRequestClose = () => {}, onAfterOpen = () => {}, hasCloseButton = true, disabledClose = false, modalWidth = '80%', modalWidthMobile = '100%', fullHeight = false, isOpen, className = '', children } = _ref;
+  const customStyles = {
+    overlay: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.75)',
+      zIndex: 99
+    },
+    content: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      transform: 'translate(-50%, -50%)',
+      maxWidth: '990px',
+      padding: '20px',
+      backgroundColor: 'white',
+      height: fullHeight ? '100%' : 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+      pointerEvents: 'auto',
+      backgroundClip: 'padding-box',
+      border: '1px solid rgba(0,0,0,.2)',
+      borderRadius: '.2rem'
+    }
+  };
+  return (/*#__PURE__*/
+    _react.default.createElement(_reactModal.default, {
+      isOpen: isOpen,
+      onAfterOpen: onAfterOpen,
+      onRequestClose: onRequestClose,
+      shouldCloseOnOverlayClick: !disabledClose,
+      overlayClassName: "modal",
+      className: `content ${className}`,
+      style: customStyles }, /*#__PURE__*/
+
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement(_index.StyledWrapper, null,
+    !disabledClose && hasCloseButton && /*#__PURE__*/
+    _react.default.createElement(_index.StyledIcon, { onClick: onRequestClose, "aria-hidden": "true" }, /*#__PURE__*/
+    _react.default.createElement(_icon.default, { name: "close", size: "md" })
+    ),
+
+    children
+    ), /*#__PURE__*/
+    _react.default.createElement("style", null,
+    `
+          .content {
+            width: ${modalWidth};
+          }
+          @media(max-width: 767px){
+            .content {
+              width: ${modalWidthMobile};
+            }
+          }
+        `
+    )
+    ));
+
+}var _default = exports.default =
+
+JupiterModal;

package/dist/components/modal/index.stories.js

@@ -0,0 +1,86 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithoutCloseButton = exports.Minimal = exports.FullOptions = exports.DisabledClose = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _getRequireWildcardCache(e) {if ("function" != typeof WeakMap) return null;var r = new WeakMap(),t = new WeakMap();return (_getRequireWildcardCache = function (e) {return e ? t : r;})(e);}function _interopRequireWildcard(e, r) {if (!r && e && e.__esModule) return e;if (null === e || "object" != typeof e && "function" != typeof e) return { default: e };var t = _getRequireWildcardCache(r);if (t && t.has(e)) return t.get(e);var n = { __proto__: null },a = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];}return n.default = e, t && t.set(e, n), n;}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}var _default = exports.default =
+
+{
+  title: 'Modal',
+  component: _index.default,
+
+  argTypes: {
+    modalWidth: {
+      control: 'text',
+      defaultValue: '30%'
+    },
+    modalWidthMobile: {
+      control: 'text',
+      defaultValue: '80%'
+    },
+    hasCloseButton: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    disabledClose: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    isOpen: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    onRequestClose: {
+      action: 'onRequestClose'
+    },
+    onAfterOpen: {
+      action: 'onAfterOpen'
+    }
+  }
+};
+
+const Template = (args) => {
+  const [show, setShow] = (0, _react.useState)(false);
+  return (/*#__PURE__*/
+    _react.default.createElement("div", null, /*#__PURE__*/
+    _react.default.createElement("button", { type: "button", onClick: () => setShow(true) }, "\u0646\u0645\u0627\u06CC\u0634 \u0645\u0648\u062F\u0627\u0644"), /*#__PURE__*/
+    _react.default.createElement("div", null, /*#__PURE__*/
+    _react.default.createElement("article", null, /*#__PURE__*/
+    _react.default.createElement("p", null, "\u0644\u0648\u0631\u0645 \u0627\u06CC\u067E\u0633\u0648\u0645 \u0645\u062A\u0646 \u0633\u0627\u062E\u062A\u06AF\u06CC")
+    )
+    ), /*#__PURE__*/
+    _react.default.createElement(_index.default, _extends({}, args, { isOpen: show, onRequestClose: () => setShow(false) }), /*#__PURE__*/
+    _react.default.createElement("h1", null, "\u0633\u0644\u0627\u0645"), /*#__PURE__*/
+    _react.default.createElement("p", null, "\u0627\u06CC\u0646 \u06CC\u06A9 \u0646\u0645\u0648\u0646\u0647 \u0627\u0633\u062A")
+    )
+    ));
+
+};
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {
+  modalWidth: '30%',
+  modalWidthMobile: '80%',
+  hasCloseButton: true,
+  disabledClose: false
+};
+
+const FullOptions = exports.FullOptions = Template.bind({});
+FullOptions.args = {
+  modalWidth: '100px',
+  modalWidthMobile: '80%',
+  hasCloseButton: true,
+  disabledClose: false,
+  onRequestClose: (0, _addonActions.action)('trigger what you want to do in onRequestClose function'),
+  onAfterOpen: (0, _addonActions.action)('trigger what you want to do in onAfterOpen function')
+};
+
+const WithoutCloseButton = exports.WithoutCloseButton = Template.bind({});
+WithoutCloseButton.args = {
+  ...Minimal.args,
+  hasCloseButton: false
+};
+
+const DisabledClose = exports.DisabledClose = Template.bind({});
+DisabledClose.args = {
+  ...Minimal.args,
+  disabledClose: true
+};

package/dist/components/modal/index.style.js

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.StyledWrapper = exports.StyledIcon = void 0;exports.customModalStyles = customModalStyles;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _detectMobile = require("../utils/detectMobile");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const StyledIcon = exports.StyledIcon = _styledComponents.default.span`
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 8px;
+  z-index: 999;
+`;
+
+const StyledWrapper = exports.StyledWrapper = _styledComponents.default.div`
+  width: 100%;
+  min-height: 300px;
+  box-sizing: border-box;
+`;
+
+function customModalStyles(
+borderRadius, overlayBackground, width, widthMobile, shadow, fullHeight)
+{
+  return {
+    content: {
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: `${borderRadius}px`,
+      border: '0',
+      padding: _detectMobile.isMobile ? '50px 0' : '0',
+      margin: '0',
+      width: _detectMobile.isMobile ? widthMobile : width,
+      boxShadow: `0 0 ${shadow.blur}px ${shadow.spread}px rgba(0, 0, 0, ${shadow.opacity})`,
+      height: fullHeight ? '100%' : 'auto'
+    },
+    overlay: {
+      background: overlayBackground
+    }
+  };
+}

package/dist/components/modal/theme.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const theme = {
+  borderRadius: _themes.default.borderRadius.low,
+  overlayColor: _themes.default.colors.gray800,
+  white: _themes.default.colors.white,
+  defaultColor: _themes.default.colors.riverBedDark,
+  modalShadow: _themes.default.shadows[5]
+};var _default = exports.default =
+
+theme;

package/dist/components/numeric-summery-report/index.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+var _globalStyle = _interopRequireDefault(require("../globalStyle"));
+var _typography = require("../typography");
+var _numbers = require("../utils/numbers");
+var _index = require("./index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+const NumericSummeryReport = (_ref) => {let { data, textColor = 'gray' } = _ref;return (/*#__PURE__*/
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement(_index.ListContainer, { "data-test": "numeric-summery-report" },
+    data.map((report) => /*#__PURE__*/
+    _react.default.createElement(_index.ListItem, { key: report.id }, /*#__PURE__*/
+    _react.default.createElement(_typography.Text, { size: "12", color: textColor }, report.title), /*#__PURE__*/
+    _react.default.createElement(_typography.Text, { size: "16", bold: true }, (0, _numbers.toPersianNumber)(report.count, {}))
+    )
+    )
+    )
+    ));};var _default = exports.default =
+
+
+NumericSummeryReport;

package/dist/components/numeric-summery-report/index.stories.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithColor = exports.Default = void 0;var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Components/NumericSummeryReport',
+  component: _index.default,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title of the report'
+    },
+    value: {
+      control: 'number',
+      description: 'Numeric value to display'
+    },
+    textColor: {
+      control: 'color',
+      description: 'Color of the text'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  title: 'Total Users',
+  value: 1234,
+  textColor: '#000000'
+};
+
+const WithColor = exports.WithColor = Template.bind({});
+WithColor.args = {
+  title: 'Active Users',
+  value: 567,
+  textColor: '#2196F3'
+};

package/dist/components/numeric-summery-report/index.style.js

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.ListItem = exports.ListContainer = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const ListContainer = exports.ListContainer = _styledComponents.default.ul`
+  display: flex;
+  height: 57px;
+  width: 100%;
+  align-items: center;
+  justify-content: space-around;
+`;
+
+const ListItem = exports.ListItem = _styledComponents.default.li`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;