sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/BannersDropdown/BannersDropdown.style.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToggledDropdownTitle = exports.ToggledDropdownList = exports.ToggledDropdown = exports.ToggleBannersWrapper = exports.ToggleBanners = exports.MainContainer = exports.IconWrap = exports.ArrowWrap = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MainContainer = exports.MainContainer = _styledComponents.default.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  background-color: white;
-  border-radius: 30px;
-`;
-const ToggleBannersWrapper = exports.ToggleBannersWrapper = _styledComponents.default.div`
-  position: relative;
-`;
-const ToggleBanners = exports.ToggleBanners = _styledComponents.default.button`
-  display: flex;
-  gap: 4px;
-  color: #2d8de7;
-  border: 1px solid #c7e4ff;
-  border-radius: 30px;
-  background-color: #edf6ff;
-  padding: 6px 12px;
-  cursor: pointer;
-  &.partial {
-    color: #757575;
-    border: 1px solid #ececec;
-    background-color: #ececec;
-  }
-  > span {
-    white-space: nowrap;
-  }
-`;
-const ArrowWrap = exports.ArrowWrap = _styledComponents.default.div`
-  > svg {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease;
-  }
-  &.opened {
-    svg {
-      transform: rotate(0deg);
-    }
-  }
-`;
-const ToggledDropdown = exports.ToggledDropdown = _styledComponents.default.div`
-  position: absolute;
-  margin-top: 10px;
-  border-radius: 5px;
-  background-color: white;
-  overflow: hidden;
-  z-index: 99;
-
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-`;
-const ToggledDropdownTitle = exports.ToggledDropdownTitle = _styledComponents.default.span`
-  font-size: 14px;
-  font-weight: 600;
-  padding: 8px 12px;
-  margin-bottom: 12px;
-  white-space: nowrap;
-`;
-const ToggledDropdownList = exports.ToggledDropdownList = _styledComponents.default.ul`
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  li {
-    font-size: 14px;
-    font-weight: 400;
-    display: flex;
-    gap: 6px;
-    padding: 14px 12px;
-    align-items: center;
-    cursor: pointer;
-    &:hover {
-      background-color: #f7f8fa;
-    }
-
-    &.unchecked {
-      color: #cfcfcf;
-      svg {
-        filter: grayscale(1);
-      }
-    }
-
-    > svg {
-      min-width: 50px;
-    }
-
-    > span {
-      white-space: nowrap;
-    }
-  }
-`;
-const IconWrap = exports.IconWrap = _styledComponents.default.div`
-  min-width: 54px;
-  text-align: center;
-`;

package/dist/components/BarChart/BarChart.js

@@ -1,245 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BarChart = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _recharts = require("recharts");
-var _CommonFunctions = require("../../utils/CommonFunctions");
-var _BarChart = require("./BarChart.style");
-var _PerformanceAnalyticsLegend = _interopRequireDefault(require("../PerformanceAnalyticsLegend/PerformanceAnalyticsLegend"));
-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; }
-/* eslint-disable react/prop-types */
-/* eslint-disable no-shadow */
-/* eslint-disable react/no-unstable-nested-components */
-/* eslint-disable no-nested-ternary */
-
-const ICON_TYPE_SQUARE = 'Square';
-const ICON_TYPE_LEGEND_UNION_ICON = 'LegendUnionIcon';
-const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
-
-/* BarCharts */
-const BarChart = props => {
-  const {
-    className,
-    title,
-    barChartData,
-    barSize,
-    barFontSizeValue,
-    isDollar,
-    width,
-    height,
-    barChartColor,
-    currentBarColor,
-    showLegend,
-    legendData,
-    showDollarSign,
-    showReferenceLine,
-    referenceLinePoint,
-    referenceLineColor,
-    referenceLineDashed,
-    showCurrentCampaignStyle,
-    isPercent
-  } = props;
-  const controlsContainerRef = (0, _react.useRef)();
-  const areAllDatesEmpty = () => {
-    if (!barChartData || barChartData?.length === 0) return true;
-    return barChartData?.every(item => !item.date);
-  };
-  const displayFormattedValue = (value, showFullNumber = false) => {
-    if (value === undefined || value === null) return '';
-    let formattedValue = '';
-    if (isPercent) {
-      formattedValue = ''.concat(value.toFixed(1), '%');
-    } else if (isDollar) {
-      formattedValue = ''.concat(showDollarSign ? '$' : '', !showFullNumber ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(Number.isInteger(value) ? value : value.toFixed(1)), !showFullNumber ? (0, _CommonFunctions.getFormattedUnits)(value) : '');
-    } else {
-      formattedValue = ''.concat(!showFullNumber ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(Number.isInteger(value) ? value : value.toFixed(1)), !showFullNumber ? (0, _CommonFunctions.getFormattedUnits)(value) : '');
-    }
-    return formattedValue;
-  };
-
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const CustomTooltip = tooltipData => {
-    const {
-      active,
-      payload,
-      label
-    } = tooltipData;
-    if (!active || !payload || payload?.length === 0) return null;
-    let currentTooltipValue = 0;
-    if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
-    return <_BarChart.TooltipDiv>
-        <_BarChart.TooltipTitle>{`${label}`}</_BarChart.TooltipTitle>
-        <_BarChart.TooltipLabel>
-          {`${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`}
-        </_BarChart.TooltipLabel>
-      </_BarChart.TooltipDiv>;
-  };
-  const CustomizedTickBarChart = props => {
-    const {
-      x,
-      y,
-      payload
-    } = props;
-    if (barChartData && barChartData.length > 0 && payload) {
-      const retailerData = barChartData.filter(item => item.title === payload.value);
-      if (retailerData && retailerData.length > 0) {
-        return <g transform={`translate(${x},${y})`}>
-            {showCurrentCampaignStyle && retailerData[0].isCurrent && <rect x={-56} // Adjust this to position the background properly
-          y={5} // Adjust this for vertical alignment with your text
-          width={112} // Adjust width based on the text length
-          height={22} // Adjust height based on font size
-          fill={currentBarColor || '#90CE9C'} rx={12} />}
-
-            <text x={0} y={0} dy={16} fill="#212121">
-              <_BarChart.LabelBoldText textAnchor="middle" x={0} dy={showCurrentCampaignStyle ? 20 : 50} fontSize={showCurrentCampaignStyle ? 12 : 16} fontWeight={showCurrentCampaignStyle ? 500 : 600} fill={showCurrentCampaignStyle && !retailerData[0].isCurrent ? '#8B8989' : '#212121'}>
-                {(() => {
-                if (showCurrentCampaignStyle) {
-                  if (retailerData[0].isCurrent) {
-                    if (payload?.value?.length > 6) {
-                      return `${payload.value.slice(0, 6)}...-Current`;
-                    }
-                    return `${payload.value}-Current`;
-                  }
-                  if (payload?.value?.length > 10) {
-                    return `${payload.value.slice(0, 10)}...`;
-                  }
-                  return `${payload.value}`;
-                }
-                return payload?.value;
-              })()}
-              </_BarChart.LabelBoldText>
-
-              <_BarChart.LabelText textAnchor="middle" x="0" dy="30" fontSize={14} fontWeight={400}>
-                {retailerData[0].date}
-              </_BarChart.LabelText>
-            </text>
-          </g>;
-      }
-      return null;
-    }
-    return null;
-  };
-  const CustomizedLabel = props => {
-    const {
-      x,
-      y,
-      stroke,
-      value
-    } = props;
-    return <text x={x + 30} y={y} dy={-8} fill={showCurrentCampaignStyle ? '#8B8989' : stroke} fontSize={barFontSizeValue} textAnchor="middle">
-        {displayFormattedValue(value)}
-      </text>;
-  };
-  return <_BarChart.ControlsContainer className={className} height={height} width={width} ref={controlsContainerRef}>
-      <_BarChart.Controls>
-        <_BarChart.Title>{title}</_BarChart.Title>
-
-        <_recharts.ResponsiveContainer width="100%" height="100%">
-          <_recharts.BarChart width={width} height={height} data={barChartData} margin={{
-          top: 20,
-          right: 0,
-          bottom: 0,
-          left: -5
-        }}>
-            {showCurrentCampaignStyle && <_recharts.CartesianGrid strokeDasharray="3 3" vertical={false} />}
-
-            {showCurrentCampaignStyle && <_recharts.YAxis tickCount={10} interval="preserveEnd" domain={[0, 'auto']} tick={{
-            fill: '#8B8989'
-          }} axisLine={false} fontWeight={400} fontSize="12px" tickLine={false} tickFormatter={value => `${displayFormattedValue(value)}`} />}
-
-            {showReferenceLine && <_recharts.ReferenceLine y={referenceLinePoint} stroke={referenceLineColor} strokeDasharray={referenceLineDashed} />}
-            <_recharts.XAxis dataKey="title" tick={CustomizedTickBarChart} tickLine={false} height={areAllDatesEmpty() ? 50 : 120} stroke="#D0D0D0" domain={[0, 'auto']} interval={0} />
-
-            <_recharts.Tooltip content={<CustomTooltip />} />
-            <_recharts.Tooltip />
-
-            <_recharts.Bar dataKey="value" fill={barChartColor} minPointSize={5} barSize={barSize ?? 60} radius={[5, 5, 0, 0]}>
-              <_recharts.LabelList dataKey="value" content={CustomizedLabel} />
-            </_recharts.Bar>
-          </_recharts.BarChart>
-        </_recharts.ResponsiveContainer>
-
-        {showLegend && <_PerformanceAnalyticsLegend.default legendData={legendData} />}
-      </_BarChart.Controls>
-    </_BarChart.ControlsContainer>;
-};
-exports.BarChart = BarChart;
-var _default = exports.default = BarChart;
-BarChart.propTypes = {
-  title: _propTypes.default.string,
-  barChartData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    date: _propTypes.default.string,
-    value: _propTypes.default.number
-  })),
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  barSize: _propTypes.default.number,
-  barFontSizeValue: _propTypes.default.string,
-  barChartColor: _propTypes.default.string,
-  showDollarSign: _propTypes.default.bool,
-  isDollar: _propTypes.default.bool,
-  showLegend: _propTypes.default.bool,
-  legendData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string.isRequired,
-    iconType: _propTypes.default.oneOf([ICON_TYPE_SQUARE, ICON_TYPE_LEGEND_UNION_ICON, ICON_TYPE_LEGEND_LINE_ICON]).isRequired,
-    iconColor: _propTypes.default.string.isRequired
-  })),
-  showReferenceLine: _propTypes.default.bool,
-  referenceLinePoint: _propTypes.default.number,
-  referenceLineColor: _propTypes.default.string,
-  referenceLineDashed: _propTypes.default.string,
-  showCurrentCampaignStyle: _propTypes.default.bool,
-  currentBarColor: _propTypes.default.string,
-  isPercent: _propTypes.default.bool
-};
-BarChart.defaultProps = {
-  title: 'String',
-  barChartData: [{
-    title: 'Food Lion',
-    date: '15.01.24-31.01.24',
-    value: 542366
-  }, {
-    title: 'Hannaford',
-    date: '15.01.24-31.01.24',
-    value: 699511
-  }, {
-    title: 'The Giant Company',
-    date: '15.01.24-31.01.24',
-    value: 403092
-  }, {
-    title: 'Giant Food',
-    date: '15.01.24-31.01.24',
-    value: 396184
-  }, {
-    title: 'Stop&Shop',
-    date: '15.01.24-31.01.24',
-    value: 415317
-  }],
-  width: '100%',
-  height: '100%',
-  barSize: 60,
-  barFontSizeValue: '0.6em',
-  barChartColor: '#BD9EFF',
-  showDollarSign: true,
-  isDollar: true,
-  showLegend: true,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: ICON_TYPE_SQUARE,
-    iconColor: '#BD9EFF'
-  }],
-  showReferenceLine: false,
-  referenceLinePoint: 0,
-  referenceLineColor: '#212121',
-  referenceLineDashed: '5',
-  showCurrentCampaignStyle: false,
-  currentBarColor: '#90CE9C',
-  isPercent: false
-};

package/dist/components/BarChart/BarChart.stories.js

@@ -1,306 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.currentCampaignStyleWithPercent = exports.currentCampaignStyle = exports.SalesDollars = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BarChart = require("./BarChart");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const arrData = [{
-  title: 'Food Lion',
-  date: '15.01.24-31.01.24',
-  value: 542366
-}, {
-  title: 'Hannaford',
-  date: '15.01.24-31.01.24',
-  value: 699511
-}, {
-  title: 'The Giant Company',
-  date: '15.01.24-31.01.24',
-  value: 403092
-}, {
-  title: 'Giant Food',
-  date: '15.01.24-31.01.24',
-  value: -6184
-}, {
-  title: 'Stop&Shop',
-  date: '15.01.24-31.01.24',
-  value: 415317
-}];
-const arrDataCurrentCampaign = [{
-  title: 'Back to School 2023',
-  date: '',
-  value: 542366.4155445,
-  isCurrent: false
-}, {
-  title: 'Fall Friends & Thanksgiving 2023',
-  date: '',
-  value: 699511.5454,
-  isCurrent: false
-}, {
-  title: 'Mar 23',
-  date: '',
-  value: 403092,
-  isCurrent: false
-}, {
-  title: 'Apr 23',
-  date: '',
-  value: 600184.4545,
-  isCurrent: false
-}, {
-  title: 'May 23',
-  date: '',
-  value: 415317.55,
-  isCurrent: false
-}, {
-  title: 'Jun 23',
-  date: '',
-  value: 542366,
-  isCurrent: false
-}, {
-  title: 'Jul 23',
-  date: '',
-  value: 699511,
-  isCurrent: false
-}, {
-  title: 'Aug 23',
-  date: '',
-  value: 403092,
-  isCurrent: false
-}, {
-  title: 'Sep 23',
-  date: '',
-  value: 600184,
-  isCurrent: false
-}, {
-  title: 'Okt 23',
-  date: '',
-  value: 415317,
-  isCurrent: false
-}, {
-  title: 'Now 23',
-  date: '',
-  value: 403092,
-  isCurrent: false
-}, {
-  title: 'Dec 23',
-  date: '',
-  value: 600184,
-  isCurrent: false
-}, {
-  title: 'Fall Friends & Thanksgiving 2024',
-  date: '',
-  value: 415317,
-  isCurrent: true
-}];
-const arrDataIsPercent = [{
-  title: 'Food Lion',
-  date: '',
-  value: 23.356
-}, {
-  title: 'Hannaford',
-  date: '',
-  value: 19.254
-}, {
-  title: 'The Giant Company',
-  date: '',
-  value: 11.5477
-}, {
-  title: 'Giant Food',
-  date: '',
-  value: 9.54545
-}, {
-  title: 'Stop&Shop',
-  date: '',
-  value: 7.545877,
-  isCurrent: true
-}];
-var _default = exports.default = {
-  title: 'SAG BI/BarChart',
-  component: _BarChart.BarChart,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title on top of the component'
-    },
-    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)'
-    },
-    barSize: {
-      name: 'barSize',
-      control: {
-        type: 'text'
-      },
-      description: 'barSize of the control (in number ex: 60)'
-    },
-    barFontSizeValue: {
-      name: 'Top Bar Font Size',
-      control: {
-        type: 'text'
-      },
-      description: 'Top bar value font size'
-    },
-    barChartColor: {
-      name: 'barChartColor',
-      description: 'Sets the area chart 1 color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    barChartData: {
-      description: 'array [] of objects: {title: string, value:number } to fill the area data. '
-    },
-    showDollarSign: {
-      name: 'showDollarSign',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show Dollar sign on top of bar'
-    },
-    isDollar: {
-      name: 'isDollar',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show values as Dollar'
-    },
-    showLegend: {
-      name: 'showLegend',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show bottom legend'
-    },
-    showReferenceLine: {
-      name: 'showReferenceLine',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show reference line'
-    },
-    referenceLinePoint: {
-      name: 'referenceLinePoint',
-      control: {
-        type: 'number'
-      },
-      description: 'reference line point'
-    },
-    referenceLineColor: {
-      name: 'referenceLineColor',
-      control: {
-        type: 'color'
-      },
-      description: 'reference line color'
-    },
-    referenceLineDashed: {
-      name: 'referenceLineDashed',
-      control: {
-        type: 'number'
-      },
-      description: 'reference line dashed'
-    },
-    showCurrentCampaignStyle: {
-      name: 'showCurrentCampaignStyle',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show Cartesian Grid'
-    },
-    isPercent: {
-      name: 'isPercent',
-      control: {
-        type: 'boolean'
-      },
-      description: 'is Percent - display "%" next to value. when checked, the Dollar sign will be hidden'
-    }
-  }
-};
-const Template = args => <_BarChart.BarChart {...args} />;
-const SalesDollars = exports.SalesDollars = Template.bind({});
-SalesDollars.args = {
-  title: 'Sales $',
-  barChartData: arrData,
-  barSize: 60,
-  barFontSizeValue: '12px',
-  width: '800px',
-  height: '500px',
-  barChartColor: '#1F7677',
-  yAxisCounter: 10,
-  isPercentValue: false,
-  showLegend: true,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }],
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#D0D0D0',
-  referenceLineDashed: '0'
-};
-const currentCampaignStyle = exports.currentCampaignStyle = Template.bind({});
-currentCampaignStyle.args = {
-  title: 'My current campaign performance in comparison to previous',
-  barChartData: arrDataCurrentCampaign,
-  barSize: 60,
-  barFontSizeValue: '12px',
-  width: '1568px',
-  height: '500px',
-  barChartColor: '#90CE9C',
-  yAxisCounter: 10,
-  isPercentValue: false,
-  showLegend: false,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }],
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#D0D0D0',
-  referenceLineDashed: '0',
-  currentBarColor: '#C7E7CD',
-  showCurrentCampaignStyle: true
-};
-const currentCampaignStyleWithPercent = exports.currentCampaignStyleWithPercent = Template.bind({});
-currentCampaignStyleWithPercent.args = {
-  title: 'Current Campaign Style With Percent',
-  barChartData: arrDataIsPercent,
-  barSize: 60,
-  barFontSizeValue: '12px',
-  width: '800px',
-  height: '500px',
-  barChartColor: '#90CE9C',
-  yAxisCounter: 10,
-  isPercentValue: false,
-  showLegend: false,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }],
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#D0D0D0',
-  referenceLineDashed: '0',
-  currentBarColor: '#C7E7CD',
-  showCurrentCampaignStyle: true,
-  isPercent: true
-};

package/dist/components/BarChart/BarChart.style.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  color: #212121;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  min-width: 250px;
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  height: 100%;
-  width: 100%;
-  background: white;
-  display: flex;
-  flex-direction: column;
-`;
-const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div`
-  border-radius: 5px;
-  padding: 8px 12px;
-  background: white;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  margin: 0;
-`;
-const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 400;
-  width: fit-content;
-`;
-const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 600;
-`;
-const Title = exports.Title = _styledComponents.default.h5`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 20px;
-  margin: 0 0 30px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-    margin: 0 0 20px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
-  font-size: 0.7em;
-`;
-const LabelText = exports.LabelText = _styledComponents.default.tspan`
-  font-size: 0.6em;
-`;