@spaced-out/ui-design-system 0.1.85 → 0.1.87-beta.0

package/lib/components/ColumnChart/ColumnChart.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
+var _charts = require("../../utils/charts");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _ColumnChartModule = _interopRequireDefault(require("./ColumnChart.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; }
+
+//$FlowFixMe[untyped-import]
+
+//$FlowFixMe[untyped-import]
+
+const ColumnChart = _ref => {
+  let {
+    classNames,
+    cardTitle,
+    customExportOptions,
+    series,
+    drilldown,
+    headerActions,
+    ...userOptions
+  } = _ref;
+  const chartRef = /*#__PURE__*/React.createRef();
+  const columnChartSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    color: (0, _charts.getDataVizColor)(index),
+    pointWidth: _charts.columnPlotWidth
+  }));
+  const addColorToDrilldownSeries = series => series?.map(seriesItem => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: (0, _charts.getDataVizColor)(index),
+      pointWidth: _charts.columnPlotWidth
+    }))
+  }));
+  const columnDrilldown = drilldown ? {
+    ...drilldown,
+    series: addColorToDrilldownSeries(drilldown.series)
+  } : {};
+  const defaultColumnChartOptions = (0, _charts.getColumnChartOptions)();
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = (0, _charts.mergeChartUserOptions)(defaultColumnChartOptions, {
+    series: columnChartSeries,
+    drilldown: columnDrilldown,
+    ...userOptions
+  });
+  const {
+    highChart,
+    ...wrapperClassNames
+  } = classNames || {};
+  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    title: cardTitle,
+    ref: chartRef,
+    classNames: wrapperClassNames,
+    customExportOptions: customExportOptions,
+    headerActions: headerActions
+  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
+    highcharts: _highcharts.default,
+    containerProps: {
+      className: (0, _classify.default)(_ColumnChartModule.default.columnChartContainer, highChart)
+    },
+    ref: chartRef,
+    options: chartOptions
+  }));
+};
+exports.ColumnChart = ColumnChart;

package/lib/components/ColumnChart/ColumnChart.js.flow

@@ -0,0 +1,108 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+
+import type {Drilldown} from '../../types/charts';
+import {
+  columnPlotWidth,
+  getColumnChartOptions,
+  getDataVizColor,
+  mergeChartUserOptions,
+} from '../../utils/charts';
+import classify from '../../utils/classify';
+import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {ChartWrapper} from '../ChartWrapper';
+
+import css from './ColumnChart.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+}>;
+
+type ColumnSeriesItem = {
+  name: string,
+  data: [],
+};
+
+export type ColumnChartProps = {
+  classNames?: ClassNames,
+  cardTitle?: string,
+  customExportOptions?: Array<ExportOptionType> | null,
+  series: Array<ColumnSeriesItem>,
+  drilldown: Drilldown,
+  headerActions?: React.Node,
+  ...
+};
+
+export const ColumnChart = ({
+  classNames,
+  cardTitle,
+  customExportOptions,
+  series,
+  drilldown,
+  headerActions,
+  ...userOptions
+}: ColumnChartProps): React.Node => {
+  const chartRef = React.createRef();
+
+  const columnChartSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    color: getDataVizColor(index),
+    pointWidth: columnPlotWidth,
+  }));
+
+  const addColorToDrilldownSeries = (series) =>
+    series?.map((seriesItem) => ({
+      ...seriesItem,
+      data: seriesItem.data.map((dataItem, index) => ({
+        ...dataItem,
+        color: getDataVizColor(index),
+        pointWidth: columnPlotWidth,
+      })),
+    }));
+
+  const columnDrilldown = drilldown
+    ? {
+      ...drilldown,
+      series: addColorToDrilldownSeries(drilldown.series),
+    }
+    : {};
+
+  const defaultColumnChartOptions = getColumnChartOptions();
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultColumnChartOptions, {
+    series: columnChartSeries,
+    drilldown: columnDrilldown,
+    ...userOptions,
+  });
+
+  const {highChart, ...wrapperClassNames} = classNames || {};
+
+  return (
+    <ChartWrapper
+      title={cardTitle}
+      ref={chartRef}
+      classNames={wrapperClassNames}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.columnChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

package/lib/components/ColumnChart/ColumnChart.module.css

@@ -0,0 +1,12 @@
+@value (colorFillPrimary) from '../../styles/variables/_color.css';
+@value (size400, size660, sizeFluid) from  '../../styles/variables/_size.css';
+
+.columnChartContainer {
+  width: sizeFluid;
+  min-width: size660;
+  min-height: size400;
+  max-height: size400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/ColumnChart/index.js

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

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './ColumnChart';

package/lib/components/DonutChart/DonutChart.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DonutChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
+var _charts = require("../../utils/charts");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+var _DonutChartModule = _interopRequireDefault(require("./DonutChart.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; }
+
+//$FlowFixMe[untyped-import]
+
+//$FlowFixMe[untyped-import]
+
+const DonutChart = _ref => {
+  let {
+    classNames,
+    cardTitle,
+    customExportOptions,
+    headerActions,
+    series,
+    drilldown,
+    legend,
+    centerText,
+    centerSubtext,
+    ...userOptions
+  } = _ref;
+  const chartRef = React.useRef();
+  const {
+    highChart,
+    subtitleClassNames,
+    ...wrapperClassNames
+  } = classNames || {};
+  const defaultCenterHTML = `<span class=${(0, _classify.default)(_DonutChartModule.default.subtitleWrap, subtitleClassNames?.wrapper)}>
+    <span class="${(0, _classify.default)(_typographyModule.default.jumboMedium, _DonutChartModule.default.subtitleText, subtitleClassNames?.text)}">
+      ${centerText ? centerText : ''}
+    </span>
+    <span class="${(0, _classify.default)(_typographyModule.default.bodySmall, _DonutChartModule.default.subtitleSubtext, subtitleClassNames?.subtext)}">
+      ${centerSubtext ? centerSubtext : ''}
+    </span>
+  <span>`;
+  const donutChartSeries = series.map(seriesItem => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: (0, _charts.getDataVizColor)(index)
+    }))
+  }));
+  const addColorToDrilldownSeries = series => series?.map(seriesItem => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: (0, _charts.getDataVizColor)(index)
+    }))
+  }));
+  const donutDrilldown = drilldown ? {
+    ...drilldown,
+    series: addColorToDrilldownSeries(drilldown.series)
+  } : {};
+  const defaultLineChartOptions = (0, _charts.getDonutChartOptions)({
+    legend,
+    defaultCenterHTML
+  });
+  const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
+    series: donutChartSeries,
+    drilldown: donutDrilldown,
+    ...userOptions
+  });
+  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    title: cardTitle
+    //$FlowFixMe[incompatible-type]
+    ,
+    ref: chartRef,
+    customExportOptions: customExportOptions,
+    headerActions: headerActions,
+    classNames: wrapperClassNames
+  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
+    highcharts: _highcharts.default,
+    containerProps: {
+      className: (0, _classify.default)(_DonutChartModule.default.donutChartContainer, highChart)
+    },
+    ref: chartRef,
+    options: chartOptions
+  }));
+};
+exports.DonutChart = DonutChart;

package/lib/components/DonutChart/DonutChart.js.flow

@@ -0,0 +1,146 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+
+import type {
+  Drilldown,
+  LegendOptionsType,
+  SeriesOptionsType,
+} from '../../types/charts';
+import {
+  getDataVizColor,
+  getDonutChartOptions,
+  mergeChartUserOptions,
+} from '../../utils/charts';
+import classify from '../../utils/classify';
+import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {ChartWrapper} from '../ChartWrapper';
+
+import typographyCss from '../../styles/typography.module.css';
+import css from './DonutChart.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+  subtitleClassNames?: SubtitleClassNames,
+}>;
+type DonutChartData = {
+  name: string,
+  value: number,
+};
+
+export type SubtitleClassNames = {
+  wrapper?: string,
+  text?: string,
+  subtext?: string,
+};
+
+export type DonutChartProps = {
+  classNames?: ClassNames,
+  cardTitle?: React.Node,
+  customExportOptions?: Array<ExportOptionType> | null,
+  headerActions?: React.Node,
+  centerText?: string,
+  centerSubtext?: string,
+  series: Array<SeriesOptionsType>,
+  drilldown: Drilldown,
+  legend?: LegendOptionsType,
+};
+
+export const DonutChart = ({
+  classNames,
+  cardTitle,
+  customExportOptions,
+  headerActions,
+  series,
+  drilldown,
+  legend,
+  centerText,
+  centerSubtext,
+  ...userOptions
+}: DonutChartProps): React.Node => {
+  const chartRef = React.useRef();
+
+  const {highChart, subtitleClassNames, ...wrapperClassNames} =
+    classNames || {};
+
+  const defaultCenterHTML = `<span class=${classify(
+    css.subtitleWrap,
+    subtitleClassNames?.wrapper,
+  )}>
+    <span class="${classify(
+    typographyCss.jumboMedium,
+    css.subtitleText,
+    subtitleClassNames?.text,
+  )}">
+      ${centerText ? centerText : ''}
+    </span>
+    <span class="${classify(
+    typographyCss.bodySmall,
+    css.subtitleSubtext,
+    subtitleClassNames?.subtext,
+  )}">
+      ${centerSubtext ? centerSubtext : ''}
+    </span>
+  <span>`;
+
+  const donutChartSeries = series.map((seriesItem) => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: getDataVizColor(index),
+    })),
+  }));
+
+  const addColorToDrilldownSeries = (series) =>
+    series?.map((seriesItem) => ({
+      ...seriesItem,
+      data: seriesItem.data.map((dataItem, index) => ({
+        ...dataItem,
+        color: getDataVizColor(index),
+      })),
+    }));
+
+  const donutDrilldown = drilldown
+    ? {
+      ...drilldown,
+      series: addColorToDrilldownSeries(drilldown.series),
+    }
+    : {};
+
+  const defaultLineChartOptions = getDonutChartOptions({
+    legend,
+    defaultCenterHTML,
+  });
+
+  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
+    series: donutChartSeries,
+    drilldown: donutDrilldown,
+    ...userOptions,
+  });
+
+  return (
+    <ChartWrapper
+      title={cardTitle}
+      //$FlowFixMe[incompatible-type]
+      ref={chartRef}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      classNames={wrapperClassNames}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.donutChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

package/lib/components/DonutChart/DonutChart.module.css

@@ -0,0 +1,65 @@
+@value (
+  fontSize12,
+  fontSize36,
+  fontWeightMedium,
+  fontWeightBook,
+  fontLineHeight100,
+  fontLineHeight130,
+  fontLetterSpacingMinus3,
+  fontLetterSpacing4
+) from  '../../styles/variables/_font.css';
+
+@value (colorTextPrimary, colorTextSecondary) from  '../../styles/variables/_color.css';
+@value (size240, size300, size400, size500, sizeFluid) from  '../../styles/variables/_size.css';
+
+@value (spaceNone, spaceXSmall) from  '../../styles/variables/_space.css';
+
+.wrapper {
+  display: flex;
+}
+
+.donutChartContainer {
+  width: sizeFluid;
+  min-width: size500;
+  min-height: size300;
+  display: block;
+  align-items: center;
+  justify-content: center;
+}
+
+.subtitleWrap {
+  display: flex;
+  gap: spaceXSmall;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: sizeFluid;
+}
+
+.subtitleText {
+  margin: spaceNone;
+  color: colorTextPrimary;
+
+  text-align: center;
+
+  width: sizeFluid;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.subtitleSubtext {
+  margin: spaceNone;
+  color: colorTextSecondary;
+
+  text-align: center;
+
+  width: sizeFluid;
+  overflow: hidden;
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/components/DonutChart/index.js

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

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './DonutChart';

package/lib/components/Grid/Grid.js

@@ -14,16 +14,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const GRID_SYSTEM_MAP = {
   small: 24,
   medium: 12,
-  large: 6
+  large: 6,
+  autoFill: 'auto-fill'
 };
 const Row = _ref => {
   let {
     className,
     children,
     span = 1,
-    gridType = 'medium'
+    gridType = 'medium',
+    repeatTracks = '1fr'
   } = _ref;
-  const GRID_COLUMN_COUNT = GRID_SYSTEM_MAP[gridType];
+  const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
   let columnSpanCount = 0;
   let lastChildColCount = 0;
   const childrenWithProps = React.Children.map(children, child => {
@@ -42,21 +44,30 @@ const Row = _ref => {
       }
       lastChildColCount = columnSpanCount;
       columnSpanCount = lastChildColCount + offset + span;
-      if (columnSpanCount <= GRID_COLUMN_COUNT) {
+      let gridColumnStart = 0,
+        gridColumnEnd = 0;
+      if (gridType === 'autoFill') {
+        gridColumnStart = 'auto';
         return /*#__PURE__*/React.cloneElement(child, {
-          gridColumnStart: lastChildColCount + offset + 1,
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`
+        });
+      } else if (typeof gridRepeatCount === 'number' && columnSpanCount <= gridRepeatCount) {
+        gridColumnStart = lastChildColCount + offset + 1;
+        return /*#__PURE__*/React.cloneElement(child, {
+          gridColumnStart,
           gridColumnEnd: `span ${span}`
         });
       } else {
-        console.error(`number of column exceed ${GRID_COLUMN_COUNT}`);
+        console.error(`number of column exceed ${gridRepeatCount}`);
       }
     }
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "Grid",
-    className: (0, _classify.classify)(_GridModule.default.gridRow, _GridModule.default[`gridRowSpan${span}`], className),
+    className: (0, _classify.classify)(_GridModule.default.gridRow, className),
     style: {
-      gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`
+      gridTemplateColumns: `repeat(${gridRepeatCount}, ${repeatTracks})`
     }
   }, childrenWithProps);
 };

package/lib/components/Grid/Grid.js.flow

@@ -11,13 +11,15 @@ export type RowProps = {
   children?: React.Node,
   span?: number,
   offset?: number,
-  gridType?: 'small' | 'medium' | 'large',
+  gridType?: 'small' | 'medium' | 'large' | 'autoFill',
+  repeatTracks?: string,
 };
 
 const GRID_SYSTEM_MAP = {
   small: 24,
   medium: 12,
   large: 6,
+  autoFill: 'auto-fill',
 };
 
 export const Row = ({
@@ -25,8 +27,9 @@ export const Row = ({
   children,
   span = 1,
   gridType = 'medium',
+  repeatTracks = '1fr',
 }: RowProps): React.Node => {
-  const GRID_COLUMN_COUNT = GRID_SYSTEM_MAP[gridType];
+  const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
   let columnSpanCount = 0;
   let lastChildColCount = 0;
   const childrenWithProps = React.Children.map(children, (child) => {
@@ -42,13 +45,25 @@ export const Row = ({
       }
       lastChildColCount = columnSpanCount;
       columnSpanCount = lastChildColCount + offset + span;
-      if (columnSpanCount <= GRID_COLUMN_COUNT) {
+      let gridColumnStart = 0,
+        gridColumnEnd = 0;
+      if (gridType === 'autoFill') {
+        gridColumnStart = 'auto';
         return React.cloneElement(child, {
-          gridColumnStart: lastChildColCount + offset + 1,
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`,
+        });
+      } else if (
+        typeof gridRepeatCount === 'number' &&
+        columnSpanCount <= gridRepeatCount
+      ) {
+        gridColumnStart = lastChildColCount + offset + 1;
+        return React.cloneElement(child, {
+          gridColumnStart,
           gridColumnEnd: `span ${span}`,
         });
       } else {
-        console.error(`number of column exceed ${GRID_COLUMN_COUNT}`);
+        console.error(`number of column exceed ${gridRepeatCount}`);
       }
     }
   });
@@ -56,8 +71,10 @@ export const Row = ({
   return (
     <div
       data-testid="Grid"
-      className={classify(css.gridRow, css[`gridRowSpan${span}`], className)}
-      style={{gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`}}
+      className={classify(css.gridRow, className)}
+      style={{
+        gridTemplateColumns: `repeat(${gridRepeatCount}, ${repeatTracks})`,
+      }}
     >
       {childrenWithProps}
     </div>