@telus-uds/components-web 2.12.0 → 2.13.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 28 Jun 2023 23:16:56 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Jul 2023 19:17:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.13.0
+
+Fri, 07 Jul 2023 19:17:02 GMT
+
+### Minor changes
+
+- Refactored Table for proper standardization (wlsdud194@hotmail.com)
+- New prop labelPosition added to the Spinner and SpinnerContent components (35577399+JoshHC@users.noreply.github.com)
+- standardization for terms and conditions (mauricio.batresmontejo@telus.com)
+- Loading component updated inside autocomplete to use the label as a prop of spinner (35577399+JoshHC@users.noreply.github.com)
+- Navigation bar item tokenized (akshay.pandey1@telus.com)
+- add state to videopickerthumbnail (evander.owusu@telus.com)
+- added types for BaseProvider (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.54.0
+- Bump @telus-uds/system-theme-tokens to v2.37.0
+
+### Patches
+
+- Fix an issue where `DatePicker` is unable to reset `date` programmatically (shahzaibkhalidmalik@outlook.com)
+
 ## 2.12.0
 
-Wed, 28 Jun 2023 23:16:56 GMT
+Wed, 28 Jun 2023 23:27:23 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -3067,6 +3067,13 @@
           },
           "required": true,
           "description": "Communicates a message to assistive technology while visible. This same message\nwill appear underneath the spinner when its `size` is `large`."
+        },
+        "labelPosition": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": "Determine where the label of the spinner should be placed, left, right, bottom or top."
         }
       },
       "attributes": {}
@@ -3155,6 +3162,13 @@
     "docs": {
       "description": "Use `Table` to display tabular data.\n\n- Takes an optional `spacing` variant (compact)\n- Available in 2 text styles (medium, small)\n- When `Table` exceeds viewport, the first column becomes sticky, enabling horizontal scrolling\n- Right-align prices and numbers that display decimal points\n\n### Building up a `Table`\n- Use `Table.Header` and `Table.Body` as direct children of `Table`\n- Use `Table.SubHeading` to render an intermediate data heading row\n- Use `Table.Row` and `Table.Cell` to build up the tabular data\n- Use `Cell`'s `type` prop to visually mark it as a row heading (`type=\"rowHeading\"`)",
       "props": {
+        "spacing": {
+          "defaultValue": {
+            "value": "'default'",
+            "computed": false
+          },
+          "required": false
+        },
         "fullWidth": {
           "defaultValue": {
             "value": "true",
@@ -3257,59 +3271,55 @@
       "docs": {
         "description": "",
         "props": {
-          "type": {
+          "align": {
             "defaultValue": {
-              "value": "'default'",
+              "value": "'left'",
               "computed": false
             },
             "type": {
               "name": "enum",
               "value": [
                 {
-                  "value": "'default'",
-                  "computed": false
-                },
-                {
-                  "value": "'heading'",
+                  "value": "'left'",
                   "computed": false
                 },
                 {
-                  "value": "'subHeading'",
+                  "value": "'center'",
                   "computed": false
                 },
                 {
-                  "value": "'rowHeading'",
+                  "value": "'right'",
                   "computed": false
                 }
               ]
             },
             "required": false,
-            "description": "Defines the visual styles of a cell, and whether it should be a `td` or `th` element"
+            "description": "Defines the text alignment within the cell"
           },
-          "align": {
-            "defaultValue": {
-              "value": "'left'",
-              "computed": false
-            },
+          "type": {
             "type": {
               "name": "enum",
               "value": [
                 {
-                  "value": "'left'",
+                  "value": "'default'",
                   "computed": false
                 },
                 {
-                  "value": "'center'",
+                  "value": "'heading'",
                   "computed": false
                 },
                 {
-                  "value": "'right'",
+                  "value": "'subHeading'",
+                  "computed": false
+                },
+                {
+                  "value": "'rowHeading'",
                   "computed": false
                 }
               ]
             },
             "required": false,
-            "description": "Defines the text alignment within the cell"
+            "description": ""
           },
           "tokens": {
             "type": {
@@ -6952,7 +6962,19 @@
                 "borderRadius": "radius",
                 "borderWidth": "border",
                 "expandDividerColor": "color",
-                "expandDividerWidth": "size"
+                "expandDividerWidth": "size",
+                "contentPanelBackgroundColor": "color",
+                "contentPanelPaddingLeft": "size",
+                "contentPanelPaddingRight": "size",
+                "contentPanelPaddingTop": "size",
+                "contentPanelPaddingBottom": "size",
+                "contentPanelBorderWidth": "border",
+                "contentPanelBorderColor": "color",
+                "contentPanelFontName": "fontName",
+                "contentPanelFontSize": "fontSize",
+                "contentPanelFontColor": "color",
+                "contentPanelFontWeight": "fontWeight",
+                "contentPanelLineHeight": "lineHeight"
               }
             },
             "required": false,
@@ -6969,7 +6991,7 @@
             "type": {
               "name": "func"
             },
-            "required": true,
+            "required": false,
             "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
           },
           "onPress": {
@@ -6997,10 +7019,10 @@
           "control": {
             "type": {
               "name": "custom",
-              "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+              "raw": "ExpandCollapseControl.propTypes.children"
             },
             "required": false,
-            "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+            "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
           },
           "controlTokens": {
             "type": {
@@ -7038,6 +7060,13 @@
             },
             "required": false,
             "description": "An optional ref to be attached to the control"
+          },
+          "content": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
           }
         },
         "attributes": {
@@ -11255,7 +11284,12 @@
               "outlineWidth": "border",
               "paddingHorizontal": "size",
               "paddingVertical": "size",
-              "borderRadius": "radius"
+              "borderRadius": "radius",
+              "textLine": "textLine",
+              "fontName": "fontName",
+              "fontWeight": "fontWeight",
+              "fontSize": "fontSize",
+              "lineHeight": "lineHeight"
             }
           },
           "required": false,
@@ -13517,6 +13551,7 @@
             "name": "custom",
             "raw": {
               "fontName": "fontName",
+              "superScriptFontSize": "fontSize",
               "fontWeight": "fontWeight",
               "fontSize": "fontSize",
               "color": "color",

package/lib/Autocomplete/Loading.js

@@ -23,23 +23,18 @@ const Loading = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
     space: 3,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.StackView, {
       direction: "row",
       space: 2,
       tokens: {
         alignItems: 'center'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
         inline: true,
         show: true,
-        size: "small"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-        variant: {
-          size: 'small'
-        },
-        accessibilityLiveRegion: "polite",
-        children: label
-      })]
+        label: label,
+        labelPosition: "right"
+      })
     })
   });
 };

package/lib/Autocomplete/dictionary.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 var _default = {
   en: {
     hasResults: 'Some results are available',
-    loading: 'Loading suggestions...',
+    loading: 'Searching...',
     noResults: 'No results found'
   },
   fr: {
     hasResults: 'Quelques suggestions sont disponible',
-    loading: 'Chargement en cours...',
+    loading: 'Recherche...',
     noResults: 'Aucun résultat trouvé'
   }
 };

package/lib/DatePicker/DatePicker.js

@@ -136,6 +136,12 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     dictionary: _dictionary.default,
     copy
   });
+  (0, _react.useEffect)(() => {
+    if (!(0, _moment.default)(date).isSame(inputDate)) {
+      setInputDate(date);
+      setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
+    }
+  }, [date, inputDate]);
 
   const onFocusChange = _ref2 => {
     let {

package/lib/NavigationBar/NavigationSubMenu.js

@@ -115,22 +115,18 @@ const NavigationSubMenu = _ref => {
       onClick: handleClick,
       icon: icoMenu,
       children: _ref2 => {
-        var _textStyles$, _textStyles$2;
+        var _textStyles$;
 
         let {
           textStyles
         } = _ref2;
-        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
-          space: 1,
-          direction: "row"
-        }, `${id}_spacer`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
           icon: icoMenu,
           variant: {
-            size: 'small'
+            size: 'micro'
           },
           tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color,
-            size: (_textStyles$2 = textStyles[0]) === null || _textStyles$2 === void 0 ? void 0 : _textStyles$2.fontSize
+            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
           }
         }, `${id}_icon`)];
       }

package/lib/Spinner/Spinner.js

@@ -109,6 +109,7 @@ const Spinner = _ref3 => {
     fullScreen = false,
     inline = false,
     label,
+    labelPosition,
     show = false,
     isStatic = false,
     tokens,
@@ -141,6 +142,7 @@ const Spinner = _ref3 => {
           ...selectProps(rest),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
             label: label,
+            labelPosition: labelPosition,
             overlay: true,
             size: size,
             thickness: thickness,
@@ -160,6 +162,7 @@ const Spinner = _ref3 => {
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
         label: label,
+        labelPosition: labelPosition,
         overlay: true,
         size: size,
         thickness: thickness,
@@ -185,6 +188,7 @@ const Spinner = _ref3 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, { ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
       label: label,
+      labelPosition: labelPosition,
       size: size,
       thickness: thickness,
       sizeVariant: sizeVariant,
@@ -232,7 +236,12 @@ Spinner.propTypes = { ...selectedSystemPropTypes,
   /**
    * If true, it should render a static spinner
    */
-  isStatic: _propTypes.default.bool
+  isStatic: _propTypes.default.bool,
+
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: _propTypes.default.string
 };
 var _default = Spinner;
 exports.default = _default;

package/lib/Spinner/SpinnerContent.js

@@ -47,6 +47,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const SpinnerContent = _ref2 => {
   let {
     label,
+    labelPosition,
     overlay = false,
     sizeVariant,
     size,
@@ -54,6 +55,12 @@ const SpinnerContent = _ref2 => {
     isStatic,
     ...rest
   } = _ref2;
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     overlay: overlay,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
@@ -61,6 +68,7 @@ const SpinnerContent = _ref2 => {
       tokens: {
         alignItems: 'center'
       },
+      direction: labelMapping[labelPosition],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ActivityIndicator, {
         label: label,
         tokens: {

package/lib/Table/Cell.js

@@ -23,94 +23,77 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const stickyStyles = /*#__PURE__*/(0, _styledComponents.css)(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);&::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], _ref => {
+const HEADER_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  ROWHEADING: 'rowHeading'
+};
+
+const stickyStyles = _ref => {
   let {
-    cellStickyShadow
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref;
-  return cellStickyShadow;
-});
+  return (0, _styledComponents.css)(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
+};
+
 const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 => {
   let {
     isSticky,
-    cellBoxShadowColor,
     align,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
-    cellMinWidth
+    cellMinWidth,
+    cellBackground,
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref2;
-  return (0, _styledComponents.css)(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+    type,
+    cellStickyShadow,
+    stickyBackgroundColor
+  }));
 });
 
-const StyledHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
-  displayName: "Cell__StyledHeading",
+const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
+  displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
-})(["", ";", ""], sharedStyles, _ref3 => {
+})(["", ";box-shadow:", ";"], sharedStyles, _ref3 => {
   let {
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor
+    cellBoxShadowColor,
+    type
   } = _ref3;
-  return `
-  background-color: ${cellHeadingBackground};
-  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`;
+  return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
 });
 
-const StyledSubHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
-  displayName: "Cell__StyledSubHeading",
-  componentId: "components-web__sc-ltgfic-1"
-})(["", ";background-color:", ";"], sharedStyles, _ref4 => {
-  let {
-    cellSubheadingBackground
-  } = _ref4;
-  return cellSubheadingBackground;
-});
+const StyledHeaderCell = createStyledCell('th');
+const StyledDataCell = createStyledCell('td');
 
-const StyledCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
-  displayName: "Cell__StyledCell",
-  componentId: "components-web__sc-ltgfic-2"
-})(["", ";background-color:", ";"], sharedStyles, _ref5 => {
-  let {
-    cellBackground
-  } = _ref5;
-  return cellBackground;
-});
-
-const StyledRowHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
-  displayName: "Cell__StyledRowHeading",
-  componentId: "components-web__sc-ltgfic-3"
-})(["", ";background-color:", ";"], sharedStyles, _ref6 => {
-  let {
-    cellRowHeadingBackground
-  } = _ref6;
-  return cellRowHeadingBackground;
-});
-
-const Cell = _ref7 => {
+const Cell = _ref4 => {
   let {
     children,
-    type = 'default',
     isFirstInRow,
     align = 'left',
-    tokens: cellTokens
-  } = _ref7;
+    tokens: cellTokens,
+    type
+  } = _ref4;
   const {
     text,
     isScrollable: isTableScrollable,
-    variant,
-    tokens: tableTokens
+    tokens: tableTokens,
+    spacing
   } = (0, _Table.useTableContext)();
   const themeTokens = { ...tableTokens,
     ...cellTokens
   };
   const {
     cellMinWidth,
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor,
     cellBoxShadowColor,
-    cellSubheadingBackground,
     cellBackground,
-    cellRowHeadingBackground,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -118,80 +101,72 @@ const Cell = _ref7 => {
     cellPaddingBottom,
     fontName,
     fontWeight,
-    fontSize
-  } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, variant);
+    fontSize,
+    lineHeight,
+    stickyBackgroundColor
+  } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, {
+    spacing,
+    type,
+    text
+  });
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellBackground,
     cellMinWidth,
-    cellStickyShadow,
+    cellStickyShadow: (0, _componentsBase.applyShadowToken)(cellStickyShadow).boxShadow,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    stickyBackgroundColor,
     cellBoxShadowColor
   };
   const typographyTokens = {
     fontName,
     fontWeight,
-    fontSize
+    fontSize,
+    lineHeight
   };
 
   switch (type) {
-    case 'heading':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeading, {
+    case HEADER_TYPE.HEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "col",
-        cellHeadingBackground: cellHeadingBackground,
-        cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h4'
-          },
           children: children
         })
       });
 
-    case 'subHeading':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSubHeading, {
+    case HEADER_TYPE.SUBHEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "col",
-        cellSubheadingBackground: cellSubheadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h5'
-          },
           children: children
         })
       });
 
-    case 'rowHeading':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledRowHeading, {
+    case HEADER_TYPE.ROWHEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "row",
-        cellRowHeadingBackground: cellRowHeadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: text === 'small' ? 'h5' : 'h4'
-          },
           children: children
         })
       });
 
     default:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCell, {
-        cellBackground: cellBackground,
-        ...sharedProps,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDataCell, { ...sharedProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-          tokens: {
-            fontSize
-          },
-          variant: {
-            size: text
-          },
+          tokens: typographyTokens,
           children: children
         })
       });
@@ -199,14 +174,10 @@ const Cell = _ref7 => {
 };
 
 Cell.propTypes = {
+  type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: _propTypes.default.object,
   children: _propTypes.default.node,
 
-  /**
-   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
-   */
-  type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
-
   /**
    * @ignore
    * Used internally for making the first column sticky

package/lib/Table/Header.js

@@ -25,7 +25,10 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
-      children: _react.default.Children.map(children, child => /*#__PURE__*/(0, _react.cloneElement)(child, {
+      children: _react.default.Children.map(children, child =>
+      /*#__PURE__*/
+      // TO DO: pass type as a variant instead of prop
+      (0, _react.cloneElement)(child, {
         type: 'heading'
       }))
     })

package/lib/Table/SubHeading.js

@@ -24,7 +24,10 @@ const Header = _ref => {
     children
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
-    children: _react.default.Children.map(children, child => /*#__PURE__*/(0, _react.cloneElement)(child, {
+    children: _react.default.Children.map(children, child =>
+    /*#__PURE__*/
+    // TO DO: pass type as a variant instead of prop
+    (0, _react.cloneElement)(child, {
       type: 'subHeading'
     }))
   });

package/lib/Table/Table.js

@@ -66,6 +66,7 @@ exports.useTableContext = useTableContext;
 const Table = _ref2 => {
   let {
     children,
+    spacing = 'default',
     fullWidth = true,
     text = 'medium',
     tokens,
@@ -110,7 +111,7 @@ const Table = _ref2 => {
         text,
         isScrollable,
         tokens,
-        variant
+        spacing
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
         tableWidth: tableWidth,