@telus-uds/components-web 2.16.1 → 2.17.1

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 02 Aug 2023 18:10:10 GMT and should not be manually modified.
+This log was last generated on Mon, 21 Aug 2023 19:02:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.17.1
+
+Mon, 21 Aug 2023 19:02:53 GMT
+
+### Patches
+
+- Synced up event propagation to the relevant element taking `id` (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.59.1
+
+## 2.17.0
+
+Wed, 09 Aug 2023 00:02:59 GMT
+
+### Minor changes
+
+- Assign default type to Cell (wlsdud194@hotmail.com)
+- Fix linting in QuantitySelector (kyle.king2@telus.com)
+- Koodo rebranding for PriceLockup (wlsdud194@hotmail.com)
+- Koodo rebrand for OptimizeImage (wlsdud194@hotmail.com)
+- Bump @telus-uds/components-base to v1.59.0
+- Bump @telus-uds/system-theme-tokens to v2.41.0
+
 ## 2.16.1
 
-Wed, 02 Aug 2023 18:10:10 GMT
+Wed, 02 Aug 2023 18:13:48 GMT
 
 ### Patches
 

package/component-docs.json

@@ -847,6 +847,17 @@
           "required": false,
           "description": "Function to call on pressing the panel's control, which should open or close the panel."
         },
+        "nativeID": {
+          "defaultValue": {
+            "value": "''",
+            "computed": false
+          },
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": "ID for DOM element on web"
+        },
         "onPress": {
           "type": {
             "name": "func"
@@ -2404,7 +2415,8 @@
               "footnoteLinkColor": "color",
               "footnoteLinkFontName": "fontName",
               "footnoteLinkFontWeight": "fontWeight",
-              "footnoteLinkFontSize": "fontSize"
+              "footnoteLinkFontSize": "fontSize",
+              "footnoteLinkLineHeight": "lineHeight"
             }
           },
           "required": false,
@@ -3309,6 +3321,10 @@
             "description": "Defines the text alignment within the cell"
           },
           "type": {
+            "defaultValue": {
+              "value": "'default'",
+              "computed": false
+            },
             "type": {
               "name": "enum",
               "value": [
@@ -8561,6 +8577,28 @@
           "required": false,
           "description": "If provided sets maxHeight to be active"
         },
+        "onConfirm": {
+          "defaultValue": {
+            "value": "() => {}",
+            "computed": false
+          },
+          "type": {
+            "name": "func"
+          },
+          "required": false,
+          "description": "If provided, this function is called when the selection is confirmed."
+        },
+        "onCancel": {
+          "defaultValue": {
+            "value": "() => {}",
+            "computed": false
+          },
+          "type": {
+            "name": "func"
+          },
+          "required": false,
+          "description": "If provided, this function is called when `MultiSelectFilter` is closed."
+        },
         "copy": {
           "defaultValue": {
             "value": "'en'",
@@ -8615,6 +8653,29 @@
           "required": false,
           "description": "Sets the maximum number of items in one column. If number of items are more\nthan the `rowLimit`, they will be rendered in 2 columns."
         },
+        "dictionary": {
+          "defaultValue": {
+            "value": "{\n  en: {\n    filterByLabel: 'Filter by %{filterCategory}:',\n    applyButtonLabel: 'Apply',\n    clearButtonLabel: 'Clear'\n  },\n  fr: {\n    filterByLabel: 'Filtrer par %{filterCategory}:',\n    applyButtonLabel: 'Appliquer',\n    clearButtonLabel: 'Effacer'\n  }\n}",
+            "computed": false
+          },
+          "type": {
+            "name": "shape",
+            "value": {
+              "en": {
+                "name": "custom",
+                "raw": "dictionaryContentShape",
+                "required": false
+              },
+              "fr": {
+                "name": "custom",
+                "raw": "dictionaryContentShape",
+                "required": false
+              }
+            }
+          },
+          "required": false,
+          "description": "Custom dictionary containing the labels"
+        },
         "label": {
           "type": {
             "name": "string"
@@ -10646,6 +10707,13 @@
           },
           "required": false,
           "description": ""
+        },
+        "nativeSubmitBtnID": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": "ID for Submit button element on web"
         }
       },
       "attributes": {

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -26,6 +26,7 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children,
     onToggle,
     tokens,
+    nativeID,
     ...rest
   } = _ref;
 
@@ -57,6 +58,7 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         ...rest
       }),
       controlRef: ref,
+      nativeID: nativeID,
       children: children
     })
   });
@@ -68,10 +70,16 @@ ExpandCollapseMini.propTypes = { ..._ExpandCollapseMiniControl.default.propTypes
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
   onToggle: _propTypes.default.func,
+
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: _propTypes.default.string,
   children: _propTypes.default.node.isRequired
 };
 ExpandCollapseMini.defaultProps = {
-  onToggle: () => {}
+  onToggle: () => {},
+  nativeID: ''
 };
 var _default = ExpandCollapseMini;
 exports.default = _default;

package/lib/Footnote/FootnoteLink.js

@@ -40,7 +40,7 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
     cursor: 'pointer',
     // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
     fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight,
+    lineHeight: `${fontSize * lineHeight}px`,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,

package/lib/PriceLockup/PriceLockup.js

@@ -114,12 +114,14 @@ const selectFootnoteLinkStyles = _ref10 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
-    footnoteLinkFontWeight
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight
   } = _ref10;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
-    fontWeight: footnoteLinkFontWeight
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight: footnoteLinkLineHeight
   };
 };
 

package/lib/QuantitySelector/QuantitySelector.js

@@ -147,6 +147,10 @@ const QuantitySelector = _ref => {
     accessibilityValueNow: number
   });
 
+  const flexOrder = order => ({
+    order
+  });
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
     space: 2,
     testID: testID,
@@ -156,9 +160,7 @@ const QuantitySelector = _ref => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
         children: renderTextInput()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          order: 0
-        },
+        style: flexOrder(0),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
           isEnabled: isDecreaseEnabled,
           onPress: () => updateNumber(number - 1),
@@ -172,9 +174,7 @@ const QuantitySelector = _ref => {
           accessibilityDisabled: !isDecreaseEnabled
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          order: 2
-        },
+        style: flexOrder(2),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
           isEnabled: isIncreaseEnabled,
           onPress: () => updateNumber(number + 1),

package/lib/Table/Cell.js

@@ -79,7 +79,7 @@ const Cell = _ref4 => {
     isFirstInRow,
     align = 'left',
     tokens: cellTokens,
-    type
+    type = 'default'
   } = _ref4;
   const {
     text,
@@ -103,7 +103,8 @@ const Cell = _ref4 => {
     fontWeight,
     fontSize,
     lineHeight,
-    stickyBackgroundColor
+    stickyBackgroundColor,
+    fontColor
   } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, {
     spacing,
     type,
@@ -126,7 +127,8 @@ const Cell = _ref4 => {
     fontName,
     fontWeight,
     fontSize,
-    lineHeight
+    lineHeight,
+    color: fontColor
   };
 
   switch (type) {

package/lib/Table/Table.js

@@ -30,17 +30,17 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
 const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Table__StyledContainer",
   componentId: "components-web__sc-10d9q3m-0"
-})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? props.tablePaddingBottom : 0);
+})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0);
 
 const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;width:", ";"], _ref => {
+})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
   let {
     tableWidth
   } = _ref;
   return `${tableWidth}px`;
-});
+}, props => `${props.borderWidth}px solid ${props.borderColor}`);
 
 const TableContext = /*#__PURE__*/_react.default.createContext({});
 
@@ -74,7 +74,9 @@ const Table = _ref2 => {
     ...rest
   } = _ref2;
   const {
-    tablePaddingBottom
+    tablePaddingBottom,
+    borderColor,
+    borderWidth
   } = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
   const containerRef = (0, _react.useRef)();
   const tableRef = (0, _react.useRef)();
@@ -104,8 +106,7 @@ const Table = _ref2 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledContainer, {
     ref: containerRef,
     isScrollable: isScrollable,
-    tablePaddingBottom: `${tablePaddingBottom}px`,
-    ...selectProps(rest),
+    tablePaddingBottom: tablePaddingBottom,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
       value: {
         text,
@@ -114,9 +115,12 @@ const Table = _ref2 => {
         spacing
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
+        borderColor: borderColor,
+        borderWidth: borderWidth,
         tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
+        ...selectProps(rest),
         children: children
       })
     })

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -8,6 +8,7 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     onToggle,
     tokens,
+    nativeID,
     ...rest
   } = _ref;
 
@@ -39,6 +40,7 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
         ...rest
       }),
       controlRef: ref,
+      nativeID: nativeID,
       children: children
     })
   });
@@ -50,9 +52,15 @@ ExpandCollapseMini.propTypes = { ...ExpandCollapseMiniControl.propTypes,
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
   onToggle: PropTypes.func,
+
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string,
   children: PropTypes.node.isRequired
 };
 ExpandCollapseMini.defaultProps = {
-  onToggle: () => {}
+  onToggle: () => {},
+  nativeID: ''
 };
 export default ExpandCollapseMini;

package/lib-module/Footnote/FootnoteLink.js

@@ -24,7 +24,7 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
     cursor: 'pointer',
     // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
     fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight,
+    lineHeight: `${fontSize * lineHeight}px`,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,

package/lib-module/PriceLockup/PriceLockup.js

@@ -91,12 +91,14 @@ const selectFootnoteLinkStyles = _ref10 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
-    footnoteLinkFontWeight
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight
   } = _ref10;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
-    fontWeight: footnoteLinkFontWeight
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight: footnoteLinkLineHeight
   };
 };
 

package/lib-module/QuantitySelector/QuantitySelector.js

@@ -128,6 +128,10 @@ const QuantitySelector = _ref => {
     accessibilityValueNow: number
   });
 
+  const flexOrder = order => ({
+    order
+  });
+
   return /*#__PURE__*/_jsxs(Box, {
     space: 2,
     testID: testID,
@@ -137,9 +141,7 @@ const QuantitySelector = _ref => {
       children: [/*#__PURE__*/_jsx(InputField, {
         children: renderTextInput()
       }), /*#__PURE__*/_jsx("div", {
-        style: {
-          order: 0
-        },
+        style: flexOrder(0),
         children: /*#__PURE__*/_jsx(SideButton, {
           isEnabled: isDecreaseEnabled,
           onPress: () => updateNumber(number - 1),
@@ -153,9 +155,7 @@ const QuantitySelector = _ref => {
           accessibilityDisabled: !isDecreaseEnabled
         })
       }), /*#__PURE__*/_jsx("div", {
-        style: {
-          order: 2
-        },
+        style: flexOrder(2),
         children: /*#__PURE__*/_jsx(SideButton, {
           isEnabled: isIncreaseEnabled,
           onPress: () => updateNumber(number + 1),

package/lib-module/Table/Cell.js

@@ -60,7 +60,7 @@ const Cell = _ref4 => {
     isFirstInRow,
     align = 'left',
     tokens: cellTokens,
-    type
+    type = 'default'
   } = _ref4;
   const {
     text,
@@ -84,7 +84,8 @@ const Cell = _ref4 => {
     fontWeight,
     fontSize,
     lineHeight,
-    stickyBackgroundColor
+    stickyBackgroundColor,
+    fontColor
   } = useThemeTokens('Table', themeTokens, {
     spacing,
     type,
@@ -107,7 +108,8 @@ const Cell = _ref4 => {
     fontName,
     fontWeight,
     fontSize,
-    lineHeight
+    lineHeight,
+    color: fontColor
   };
 
   switch (type) {

package/lib-module/Table/Table.js

@@ -9,16 +9,16 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Table__StyledContainer",
   componentId: "components-web__sc-10d9q3m-0"
-})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? props.tablePaddingBottom : 0);
+})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0);
 const StyledTable = /*#__PURE__*/styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;width:", ";"], _ref => {
+})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
   let {
     tableWidth
   } = _ref;
   return `${tableWidth}px`;
-});
+}, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => useContext(TableContext);
 /**
@@ -47,7 +47,9 @@ const Table = _ref2 => {
     ...rest
   } = _ref2;
   const {
-    tablePaddingBottom
+    tablePaddingBottom,
+    borderColor,
+    borderWidth
   } = useThemeTokens('Table', tokens, variant);
   const containerRef = useRef();
   const tableRef = useRef();
@@ -77,8 +79,7 @@ const Table = _ref2 => {
   return /*#__PURE__*/_jsx(StyledContainer, {
     ref: containerRef,
     isScrollable: isScrollable,
-    tablePaddingBottom: `${tablePaddingBottom}px`,
-    ...selectProps(rest),
+    tablePaddingBottom: tablePaddingBottom,
     children: /*#__PURE__*/_jsx(TableContext.Provider, {
       value: {
         text,
@@ -87,9 +88,12 @@ const Table = _ref2 => {
         spacing
       },
       children: /*#__PURE__*/_jsx(StyledTable, {
+        borderColor: borderColor,
+        borderWidth: borderWidth,
         tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
+        ...selectProps(rest),
         children: children
       })
     })

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.58.0",
+    "@telus-uds/components-base": "1.59.1",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.40.0",
+    "@telus-uds/system-theme-tokens": "^2.41.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.16.1"
+  "version": "2.17.1"
 }

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { ExpandCollapse } from '@telus-uds/components-base'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
-const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest }, ref) => {
+const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, nativeID, ...rest }, ref) => {
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0
@@ -31,6 +31,7 @@ const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest },
             <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
           )}
           controlRef={ref}
+          nativeID={nativeID}
         >
           {children}
         </ExpandCollapse.Panel>
@@ -46,10 +47,15 @@ ExpandCollapseMini.propTypes = {
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
   onToggle: PropTypes.func,
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string,
   children: PropTypes.node.isRequired
 }
 ExpandCollapseMini.defaultProps = {
-  onToggle: () => {}
+  onToggle: () => {},
+  nativeID: ''
 }
 
 export default ExpandCollapseMini

package/src/Footnote/FootnoteLink.jsx

@@ -20,7 +20,7 @@ const StyledSup = styled.sup(
       cursor: 'pointer',
       // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
       fontSize: fontSize ? `${fontSize}px` : 'smaller',
-      lineHeight,
+      lineHeight: `${fontSize * lineHeight}px`,
       margin: 0,
       paddingVertical: 0,
       paddingLeft,

package/src/PriceLockup/PriceLockup.jsx

@@ -67,12 +67,14 @@ const StrikeThroughContainer = styled.div`
 const selectFootnoteLinkStyles = ({
   footnoteLinkColor,
   footnoteLinkFontName,
-  footnoteLinkFontWeight
+  footnoteLinkFontWeight,
+  footnoteLinkLineHeight
 }) => {
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
-    fontWeight: footnoteLinkFontWeight
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight: footnoteLinkLineHeight
   }
 }
 

package/src/QuantitySelector/QuantitySelector.jsx

@@ -135,13 +135,15 @@ const QuantitySelector = ({
     />
   )
 
+  const flexOrder = (order) => ({ order })
+
   return (
     <Box space={2} testID={testID}>
       {renderLabel()}
       <Spacer space={2} />
       <InputWrapper>
         <InputField>{renderTextInput()}</InputField>
-        <div style={{ order: 0 }}>
+        <div style={flexOrder(0)}>
           <SideButton
             isEnabled={isDecreaseEnabled}
             onPress={() => updateNumber(number - 1)}
@@ -152,7 +154,7 @@ const QuantitySelector = ({
             accessibilityDisabled={!isDecreaseEnabled}
           />
         </div>
-        <div style={{ order: 2 }}>
+        <div style={flexOrder(2)}>
           <SideButton
             isEnabled={isIncreaseEnabled}
             onPress={() => updateNumber(number + 1)}

package/src/Table/Cell.jsx

@@ -63,7 +63,7 @@ const createStyledCell = (htmlElement) => styled[htmlElement]`
 const StyledHeaderCell = createStyledCell('th')
 const StyledDataCell = createStyledCell('td')
 
-const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type }) => {
+const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type = 'default' }) => {
   const { text, isScrollable: isTableScrollable, tokens: tableTokens, spacing } = useTableContext()
   const themeTokens = { ...tableTokens, ...cellTokens }
 
@@ -80,7 +80,8 @@ const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type
     fontWeight,
     fontSize,
     lineHeight,
-    stickyBackgroundColor
+    stickyBackgroundColor,
+    fontColor
   } = useThemeTokens('Table', themeTokens, { spacing, type, text })
 
   const sharedProps = {
@@ -96,11 +97,13 @@ const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type
     stickyBackgroundColor,
     cellBoxShadowColor
   }
+
   const typographyTokens = {
     fontName,
     fontWeight,
     fontSize,
-    lineHeight
+    lineHeight,
+    color: fontColor
   }
 
   switch (type) {
@@ -144,6 +147,7 @@ Cell.propTypes = {
    * Used internally for making the first column sticky
    */
   isFirstInRow: PropTypes.bool,
+
   /**
    * Defines the text alignment within the cell
    */

package/src/Table/Table.jsx

@@ -9,13 +9,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledContainer = styled.div`
   overflow: auto;
-  padding-bottom: ${(props) => (props.isScrollable ? props.tablePaddingBottom : 0)};
+  padding-bottom: ${(props) => (props.isScrollable ? `${props.tablePaddingBottom}px` : 0)};
 `
 
 const StyledTable = styled.table`
   margin: 0;
   padding: 0;
   width: ${({ tableWidth }) => `${tableWidth}px`};
+  border: ${(props) => `${props.borderWidth}px solid ${props.borderColor}`};
 `
 
 const TableContext = React.createContext({})
@@ -45,7 +46,7 @@ const Table = ({
   variant,
   ...rest
 }) => {
-  const { tablePaddingBottom } = useThemeTokens('Table', tokens, variant)
+  const { tablePaddingBottom, borderColor, borderWidth } = useThemeTokens('Table', tokens, variant)
   const containerRef = useRef()
   const tableRef = useRef()
 
@@ -75,16 +76,21 @@ const Table = ({
   }, [])
 
   const isScrollable = tableWidth > containerWidth
-
   return (
     <StyledContainer
       ref={containerRef}
       isScrollable={isScrollable}
-      tablePaddingBottom={`${tablePaddingBottom}px`}
-      {...selectProps(rest)}
+      tablePaddingBottom={tablePaddingBottom}
     >
       <TableContext.Provider value={{ text, isScrollable, tokens, spacing }}>
-        <StyledTable tableWidth={tableWidth} cellSpacing={0} ref={tableRef}>
+        <StyledTable
+          borderColor={borderColor}
+          borderWidth={borderWidth}
+          tableWidth={tableWidth}
+          cellSpacing={0}
+          ref={tableRef}
+          {...selectProps(rest)}
+        >
           {children}
         </StyledTable>
       </TableContext.Provider>

package/types/common.d.ts

@@ -145,7 +145,7 @@ export type Tokens = Record<string, any>
 
 export type CopyLang = 'en' | 'fr'
 
-export type Variant = Record<string, string | number | boolean>
+export type Variant = Record<string, string | number | boolean | undefined>
 
 export interface PressableState {
   pressed: boolean