sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/Datepicker/Datepicker.js

@@ -1,136 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Datepicker = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
-var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
-var _DatePicker = require("@mui/x-date-pickers/DatePicker");
-var _demo = require("@mui/x-date-pickers/internals/demo");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _Datepicker = require("./Datepicker.style");
-var _CalendarIcon = require("../../icons/CalendarIcon");
-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; }
-/**
- *  SAG Datepicker
- */
-const Datepicker = ({
-  width = '100%',
-  text,
-  format = 'MMM DD, YYYY',
-  shape,
-  onChange,
-  value,
-  disableClearable,
-  disabled = false,
-  labelColor = '#1B30AA'
-}) => {
-  /**
-   *  SAG Datepicker
-   */
-
-  const [valueState, setvalueState] = _react.default.useState(null);
-  (0, _react.useEffect)(() => {
-    if (value) {
-      setvalueState((0, _dayjs.default)(value));
-    } else {
-      setvalueState(null);
-    }
-  }, [value]);
-  (0, _react.useEffect)(() => {}, [valueState]);
-  const getTextFieldStyle = () => {
-    if (shape === 'round') {
-      // round
-      return {
-        '& .MuiInputLabel-inputRoot': {
-          fontFamily: 'Poppins',
-          fontSize: '14px',
-          fontWidth: 400,
-          paddingLeft: '10px !important',
-          borderRadius: '12px',
-          width
-          // color: labelColor,
-        },
-        '& .MuiOutlinedInput-root': {
-          borderRadius: '12px',
-          fontFamily: 'Poppins',
-          fontSize: '14px',
-          fontWidth: 400,
-          width,
-          // color: labelColor,
-          legend: {
-            marginLeft: '10px'
-          },
-          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
-          '&[class*="MuiOutlinedInput-root"] .MuiInputLabel-input:first-of-type': {
-            // Default left padding is 6px
-            paddingLeft: '10px'
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#E7E7E7'
-            // color: labelColor,
-          },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
-            // color: labelColor,
-          },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor
-            // color: labelColor,
-          }
-        },
-        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
-          // Default transform is "translate(14px, 20px) scale(1)""
-          // This lines up the label with the initial cursor position in the input
-          // after changing its padding-left.
-          transform: 'translate(14px, 18px) scale(1);',
-          fontSize: '14px',
-          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575'
-        },
-        '& .MuiInputLabel-outlined': {
-          fontFamily: 'Poppins',
-          paddingLeft: '10px',
-          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575',
-          fontWidth: 400,
-          fontSize: '18px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: 0,
-          background: 'white'
-          // color: labelColor,
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  return <_Datepicker.DatepickerContainer width={width}>
-      <_LocalizationProvider.LocalizationProvider dateAdapter={_AdapterDayjs.AdapterDayjs} width={width}>
-        <_demo.DemoContainer components={['DatePicker']} width={width}>
-          <_DatePicker.DatePicker value={valueState} clearable disabled={disabled} onChange={newValue => {
-          setvalueState(newValue);
-          onChange({
-            newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
-          });
-        }} sx={getTextFieldStyle()} label={text} slots={{
-          openPickerIcon: _CalendarIcon.CalendarIcon
-        }} slotProps={{
-          textField: {
-            fullWidth: true
-          },
-          actionBar: {
-            actions: ['clear']
-          }
-        }} format={format} />
-        </_demo.DemoContainer>
-      </_LocalizationProvider.LocalizationProvider>
-    </_Datepicker.DatepickerContainer>;
-};
-exports.Datepicker = Datepicker;
-var _default = exports.default = Datepicker;

package/dist/components/Datepicker/Datepicker.stories.js

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SmallSquare = exports.RegularFormat = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Datepicker = require("./Datepicker");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: "SAG/Datepicker",
-  component: _Datepicker.Datepicker,
-  tags: ["autodocs"],
-  argTypes: {
-    width: {
-      control: {
-        type: "text"
-      },
-      description: "width of the input field",
-      defaultValue: "300px"
-    },
-    text: {
-      name: "text",
-      control: {
-        type: "text"
-      },
-      description: "text inside of the input field",
-      defaultValue: "Search..."
-    },
-    shape: {
-      control: {
-        type: "radio"
-      },
-      options: ["round", "square"],
-      description: "shape: round/square"
-    },
-    format: {
-      name: "format",
-      control: {
-        type: "text"
-      },
-      description: "valid date format "
-    },
-    onChange: {
-      action: "onChange",
-      description: "returns an option (object) selected by the user"
-    },
-    value: {
-      name: "value",
-      control: {
-        type: "text"
-      },
-      description: "set value (correct date format)"
-    },
-    disabled: {
-      name: "disabled",
-      control: {
-        type: "boolean"
-      },
-      description: "disable component"
-    }
-  }
-};
-const Template = args => <_Datepicker.Datepicker {...args} />;
-const SmallSquare = exports.SmallSquare = Template.bind({});
-SmallSquare.args = {
-  width: "300px",
-  text: "From",
-  shape: "round",
-  format: "MMM DD, YYYY",
-  //value: "2023-08-16",
-  disabled: false,
-  labelColor: "#066768"
-};
-const RegularFormat = exports.RegularFormat = Template.bind({});
-RegularFormat.args = {
-  width: "100%",
-  text: "From",
-  shape: "round",
-  format: "YYYY-MM-DD",
-  value: "2023-08-16",
-  disabled: false,
-  labelColor: "#066768"
-};

package/dist/components/Datepicker/Datepicker.style.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatepickerContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// import './font.css';
-
-const DatepickerContainer = exports.DatepickerContainer = _styledComponents.default.div`
-  width: ${props => props.width};
-  text-align: left;
-  position: relative; 
-  align-items: center;
-  justify-content: center;
-  font-family: Poppins;  
-  font-size: "14px";
-`;

package/dist/components/DialogOverlay/DialogOverlay.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CloseXIcon = require("../../icons/CloseXIcon");
-var _DialogOverlay = require("./DialogOverlay.style");
-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; }
-const DialogOverlay = props => {
-  const {
-    title,
-    children,
-    onDialogClose,
-    className
-  } = props;
-  (0, _react.useEffect)(() => {
-    const modal = document.querySelector('dialog');
-    modal.showModal();
-  }, []);
-  const closeModal = () => {
-    const modal = document.querySelector('dialog');
-    modal.close();
-    onDialogClose();
-  };
-  return <_DialogOverlay.ModalWrapper className={className}>
-      <_DialogOverlay.Modal>
-        <_DialogOverlay.ModalHeader>
-          <_DialogOverlay.ModalTitle>{title}</_DialogOverlay.ModalTitle>
-          <_DialogOverlay.ModalClose type="button" onClick={closeModal}>
-            <_CloseXIcon.CloseXIcon fill="white" />
-          </_DialogOverlay.ModalClose>
-        </_DialogOverlay.ModalHeader>
-
-        <_DialogOverlay.ModalBody id="modalBody">
-          {children}
-        </_DialogOverlay.ModalBody>
-      </_DialogOverlay.Modal>
-    </_DialogOverlay.ModalWrapper>;
-};
-var _default = exports.default = DialogOverlay;
-DialogOverlay.propTypes = {
-  title: _propTypes.default.string,
-  children: _propTypes.default.node,
-  onDialogClose: _propTypes.default.func,
-  className: _propTypes.default.string
-};
-DialogOverlay.defaultProps = {
-  title: 'Title',
-  children: null,
-  onDialogClose: () => {},
-  className: ''
-};

package/dist/components/DialogOverlay/DialogOverlay.stories.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Modal = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DialogOverlay = _interopRequireDefault(require("./DialogOverlay"));
-var _EventDetailsCard = _interopRequireDefault(require("../EventDetailsCard/EventDetailsCard"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG BI/DialogOverlay',
-  component: _DialogOverlay.default,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'Title',
-      control: 'text',
-      description: 'The title of the dialog'
-    },
-    children: {
-      name: 'Content',
-      control: 'text',
-      description: 'The content of the dialog'
-    },
-    onDialogClose: {
-      name: 'On Dialog Close',
-      action: 'onDialogClose',
-      description: 'The function to call when the dialog is closed'
-    }
-  }
-};
-const Template = args => <_DialogOverlay.default {...args} />;
-const Modal = exports.Modal = Template.bind({});
-Modal.args = {
-  title: 'Title',
-  children: <_EventDetailsCard.default />,
-  onDialogClose: () => {}
-};

package/dist/components/DialogOverlay/DialogOverlay.style.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ModalWrapper = exports.ModalTitle = exports.ModalHeader = exports.ModalClose = exports.ModalBody = exports.Modal = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const scrollableStyles = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E3E4E5;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const ModalWrapper = exports.ModalWrapper = _styledComponents.default.dialog`
-  width: 100vw;
-  height: 100vh;
-  padding: 20px;
-  border: none;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-
-  &[open] {
-    background-color: rgba(24, 24, 24, 0.80);
-    position: fixed;
-    inset: 0;
-    align-content: center;
-  }
-`;
-const Modal = exports.Modal = _styledComponents.default.div`
-    width: 79%;
-    max-width: 1500px;
-    margin: 0 auto;
-    ${scrollableStyles}
-`;
-const ModalHeader = exports.ModalHeader = _styledComponents.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 32px;
-`;
-const ModalBody = exports.ModalBody = _styledComponents.default.div`
-    ${scrollableStyles}
-    max-height: 80vh;
-`;
-const ModalTitle = exports.ModalTitle = _styledComponents.default.h5`
-    font-family: 'Poppins', sans-serif;
-    font-size: 32px;
-    font-weight: 500;
-    color: white;
-    margin: 0;
-`;
-const ModalClose = exports.ModalClose = _styledComponents.default.button`
-    outline: none;
-    cursor: pointer;
-    border: none;
-    background-color: transparent;
-`;

package/dist/components/DoublePanelDataRow/DoublePanelDataRow.js

@@ -1,89 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DoublePanelDataRow = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DoublePanelDataRow = require("./DoublePanelDataRow.style");
-var _ArrowUpIcon = require("../../icons/ArrowUpIcon");
-var _ArrowDownIcon = require("../../icons/ArrowDownIcon");
-var _CommonFunctions = require("../../utils/CommonFunctions");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable no-restricted-globals */
-
-const DoublePanelDataRow = props => {
-  const {
-    width,
-    height,
-    data,
-    backgroundColor,
-    className,
-    customDataFormat,
-    showPercentChange
-  } = props;
-  const getArrowSign = arrowSign => {
-    if (!arrowSign) {
-      return '-';
-    }
-    if (arrowSign === 'up') {
-      return <_DoublePanelDataRow.PercentageChange color="#5FCC70" value={34} // TODO: when ready, replace with actual value
-      >
-          <_ArrowUpIcon.ArrowUpIcon width={12} height={12} />
-          {' '}
-          (+34K)
-        </_DoublePanelDataRow.PercentageChange>;
-    }
-    return <_DoublePanelDataRow.PercentageChange color="#D23630" value={66} // TODO: when ready, replace with actual value
-    >
-        <_ArrowDownIcon.ArrowDownIcon width={12} height={12} />
-        {' '}
-        (-12K)
-      </_DoublePanelDataRow.PercentageChange>;
-  };
-  return <_DoublePanelDataRow.LinnerContainer className={className} backgroundColor={backgroundColor} width={width} height={height} customDataFormat={customDataFormat}>
-      {data.map(item => <_DoublePanelDataRow.DataBox className="data-box-item">
-          {item.title && <_DoublePanelDataRow.DataBoxTitle className="DataBoxTitle">{item.title}</_DoublePanelDataRow.DataBoxTitle>}
-          <_DoublePanelDataRow.CellItem>
-            {item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? <>
-                  {item.sign && <_DoublePanelDataRow.CellItemValueSign>{item.sign}</_DoublePanelDataRow.CellItemValueSign>}
-                  {customDataFormat ? <_DoublePanelDataRow.BigValue className="DataBoxValue">
-                      {''.concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value))}
-                      {item.isPercent && <_DoublePanelDataRow.CellItemValueSign>%</_DoublePanelDataRow.CellItemValueSign>}
-                    </_DoublePanelDataRow.BigValue> : <_DoublePanelDataRow.BigValue>
-                      {''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value))}
-                      {item.isPercent && <_DoublePanelDataRow.CellItemValueSign>%</_DoublePanelDataRow.CellItemValueSign>}
-                    </_DoublePanelDataRow.BigValue>}
-                  {showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')}
-                </> : <_DoublePanelDataRow.CellItemNoValue>N/A</_DoublePanelDataRow.CellItemNoValue>}
-          </_DoublePanelDataRow.CellItem>
-
-          <_DoublePanelDataRow.ValueChange />
-        </_DoublePanelDataRow.DataBox>)}
-    </_DoublePanelDataRow.LinnerContainer>;
-};
-exports.DoublePanelDataRow = DoublePanelDataRow;
-var _default = exports.default = DoublePanelDataRow;
-DoublePanelDataRow.propTypes = {
-  className: _propTypes.default.string,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    value: _propTypes.default.number,
-    sign: _propTypes.default.string
-  })),
-  backgroundColor: _propTypes.default.string,
-  customDataFormat: _propTypes.default.bool,
-  showPercentChange: _propTypes.default.bool
-};
-DoublePanelDataRow.defaultProps = {
-  className: '',
-  width: '100%',
-  height: 'auto',
-  data: [],
-  backgroundColor: '#FFFFFF',
-  customDataFormat: false,
-  showPercentChange: false
-};

package/dist/components/DoublePanelDataRow/DoublePanelDataRow.stories.js

@@ -1,116 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DoublePanelDataRow = require("./DoublePanelDataRow");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const data = [{
-  title: 'Total Offer Targeted',
-  value: null,
-  sign: '',
-  isPercent: false
-}, {
-  title: 'Total Impressions',
-  value: 15000.6,
-  sign: '$',
-  isPercent: false
-}, {
-  title: 'Total Clipped',
-  value: undefined,
-  sign: '$',
-  isPercent: false
-}, {
-  title: 'Total Redemptions',
-  value: undefined,
-  sign: 'x',
-  isPercent: false
-}, {
-  title: 'Red’ Rate From Targeted',
-  value: 17.8,
-  sign: '',
-  isPercent: true
-}, {
-  title: 'Red’ Rate From Impressions',
-  value: 17.8,
-  sign: '',
-  isPercent: true
-}, {
-  title: 'Redemption Cost',
-  value: 100005,
-  sign: '$',
-  isPercent: false
-}, {
-  title: 'Incremental Sales',
-  value: 15002,
-  sign: '$',
-  isPercent: false
-}, {
-  title: 'Redeemers Sales',
-  value: 43900,
-  sign: '$',
-  isPercent: false
-}];
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG BI/DoublePanelDataRow',
-  component: _DoublePanelDataRow.DoublePanelDataRow,
-  tags: ['autodocs'],
-  argTypes: {
-    data: {
-      name: 'Data',
-      control: {
-        type: 'object'
-      },
-      description: 'Data to be displayed in the control'
-    },
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the control (in px / %)'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the control (in px / %)'
-    },
-    backgroundColor: {
-      name: 'Background Color',
-      control: {
-        type: 'color'
-      },
-      description: 'Background color of the control'
-    },
-    customDataFormat: {
-      name: 'Custom Data Format',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Keep decimal points in the value'
-    },
-    showPercentChange: {
-      name: 'Show Percent Change',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show the percentage change'
-    }
-  }
-};
-const Template = args => <_DoublePanelDataRow.DoublePanelDataRow {...args} />;
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  data,
-  width: '100%',
-  height: 'auto',
-  backgroundColor: 'white',
-  customDataFormat: false,
-  showPercentChange: true
-};

package/dist/components/DoublePanelDataRow/DoublePanelDataRow.style.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ValueChange = exports.PercentageChange = exports.LinnerContainer = exports.DataBoxTitle = exports.DataBox = exports.CellItemValueSign = exports.CellItemNoValue = exports.CellItem = exports.BigValue = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  display: grid;
-  gap: 48px 0;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: auto auto;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  background-color: ${props => props.backgroundColor};
-  padding: 50px 20px 20px;
-  box-sizing: border-box;
-`;
-const DataBox = exports.DataBox = _styledComponents.default.div`
-  height: 100%;
-  padding: 0 40px;
-  border-left: 1px solid #d0d0d0;
-  &:nth-child(1),
-  &:nth-child(6) {
-    border-left: none;
-    padding-left: 0;
-  }
-  &:nth-child(5),
-  &:nth-child(10) {
-    padding-right: 0;
-  }
-`;
-const CellItem = exports.CellItem = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-`;
-const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span`
-  font-size: 18px;
-  display: block;
-  margin: 0 0 12px;
-`;
-const BigValue = exports.BigValue = _styledComponents.default.span`
-  font-size: 40px;
-  font-weight: 500;
-  margin-right: 5px;
-`;
-const CellItemValueSign = exports.CellItemValueSign = _styledComponents.default.span`
-  font-size: 16px;
-  font-weight: 400;
-`;
-const ValueChange = exports.ValueChange = _styledComponents.default.span`
-  font-size: 16px;
-  font-weight: 400;
-`;
-const CellItemNoValue = exports.CellItemNoValue = _styledComponents.default.span`
-  font-size: 40px;
-  font-weight: 500;
-`;
-const PercentageChange = exports.PercentageChange = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  color: ${props => props.color};
-`;