@telus-uds/components-base 1.93.0 → 1.94.0

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -8,6 +8,10 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _SafeAreaView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/SafeAreaView"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
@@ -22,7 +26,6 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _Link = require("../Link");
 var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
-var _Modal = _interopRequireDefault(require("../Modal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const {
@@ -37,21 +40,54 @@ const selectSubTitleTokens = _ref => {
     color: subtitleColor
   };
 };
-const selectDividerToknes = _ref2 => {
+const selectDividerTokens = _ref2 => {
   let {
-    dividerColor,
-    width,
-    decorative = true,
-    weight = 'thin'
+    dividerColor
   } = _ref2;
   return {
-    color: dividerColor,
-    width,
-    decorative,
-    weight
+    color: dividerColor
   };
 };
-const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const selectHeaderTokens = _ref3 => {
+  let {
+    contentMarginLeft,
+    contentMarginRight,
+    contentMarginTop,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref3;
+  return {
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    marginTop: contentMarginTop,
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight,
+    flexGrow: 1
+  };
+};
+const selectControlsTokens = _ref4 => {
+  let {
+    contentMarginBottom,
+    contentMarginLeft,
+    contentMarginRight,
+    contentPaddingLeft,
+    contentPaddingRight
+  } = _ref4;
+  return {
+    marginBottom: contentMarginBottom,
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight
+  };
+};
+const selectContainerStyle = (windowHeight, windowWidth) => ({
+  height: windowHeight,
+  width: windowWidth
+});
+const TOTAL_COLUMNS = 12;
+const MAX_ITEMS_THRESHOLD = 12;
+const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     label,
     subtitle,
@@ -73,7 +109,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     rowLimit = 12,
     dictionary = _dictionary.default,
     ...rest
-  } = _ref3;
+  } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     currentValues,
@@ -117,7 +153,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     maxWidthSize,
     subHeaderLineHeight,
     minHeight,
-    minWidth
+    minWidth,
+    ...restTokens
   } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, {
     ...variant,
     maxHeight,
@@ -195,21 +232,35 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     offsets,
     align
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
-      ref: sourceRef,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
-      isOpen: isOpen,
-      onClose: onClose,
-      ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+  const [isScrolling, setIsScrolling] = _react.default.useState(false);
+  const [scrollViewHeight, setScrollViewHeight] = _react.default.useState(0);
+  const [rowHeight, setRowHeight] = _react.default.useState(0);
+  const modalRef = (0, _utils.useScrollBlocking)(isOpen);
+  const windowWidth = _Dimensions.default.get('window').width;
+  const windowHeight = _Dimensions.default.get('window').height;
+  _react.default.useEffect(() => {
+    if (rowHeight > scrollViewHeight) {
+      setIsScrolling(true);
+    } else {
+      setIsScrolling(false);
+    }
+  }, [scrollViewHeight, rowHeight]);
+  const handleScrollViewLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setScrollViewHeight(height);
+  };
+  const handleRowLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setRowHeight(height);
+  };
+  const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [selectHeaderTokens(restTokens), styles.container],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           tokens: {
             ...headerStyles,
@@ -217,26 +268,30 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
-      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-          space: 5
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
+      })
+    }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          tokens: {
+            ...subeHeaderStyles,
+            lineHeight: subHeaderLineHeight
+          },
+          children: subtitle
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        scroll: true,
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: styles.options,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+        onLayout: handleScrollViewLayout,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
           distribute: "between",
+          onLayout: handleRowLayout,
           children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
-            xs: 12 / colSize,
+            xs: TOTAL_COLUMNS / colSize,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
               items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
@@ -246,13 +301,18 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
             })]
           }, i))
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+      })
+    })]
+  });
+  const controlsContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isScrolling ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      tokens: selectDividerTokens(themeTokens),
+      space: 4
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      space: 4
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectControlsTokens(restTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
           direction: buttonDirection,
@@ -266,7 +326,6 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             onPress: () => onApply(checkedIds),
             variant: {
-              size: 'small',
               priority: 'high',
               ...(viewport === 'xs' && {
                 width: 'full'
@@ -280,105 +339,85 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
             })
           })]
         })
-      })]
+      })
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+      ref: sourceRef,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalOverlay.default, {
+      overlaidPosition: {
+        top: 0,
+        left: 0
+      },
+      onClose: onClose,
+      maxHeight: true,
+      maxHeightSize: windowHeight,
+      maxWidthSize: windowWidth,
+      minHeight: windowHeight,
+      minWidth: windowWidth,
+      tokens: {
+        ...tokens,
+        maxWidth: true
+      },
+      copy: copy,
+      isReady: isReady,
+      onLayout: onTargetLayout,
+      ref: modalRef,
+      enableFullscreen: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SafeAreaView.default, {
+        style: [selectContainerStyle(windowHeight, windowWidth), styles.content],
+        ref: ref,
+        children: [headerContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: styles.controls,
+          children: controlsContent
+        })]
+      })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
       overlaidPosition: overlaidPosition,
       onClose: onClose,
-      maxHeight: maxHeight,
+      maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
       minHeight: minHeight,
       minWidth: minWidth,
       tokens: {
         ...tokens,
-        maxWidth
+        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth
       },
       copy: copy,
       isReady: isReady,
       onLayout: onTargetLayout,
       ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: styles.textContainerStyle,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            tokens: {
-              ...headerStyles,
-              lineHeight: headerLineHeight
-            },
-            children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
-          })
-        })
-      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-          space: 5
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            tokens: {
-              ...subeHeaderStyles,
-              lineHeight: subHeaderLineHeight
-            },
-            children: subtitle
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-        space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        scroll: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-          distribute: "between",
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
-            xs: 12 / colSize,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
-              items: items.slice(i * rowLength, (i + 1) * rowLength),
-              checkedIds: checkedIds,
-              onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-              size: 4
-            })]
-          }, i))
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        variant: selectDividerToknes({
-          ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-          direction: buttonDirection,
-          space: 3,
-          tokens: {
-            alignItems: 'center',
-            ...(viewport === 'xs' && {
-              flexGrow: 1
-            })
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            onPress: () => onApply(checkedIds),
-            variant: {
-              size: 'small',
-              priority: 'high',
-              ...(viewport === 'xs' && {
-                width: 'full'
-              })
-            },
-            children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
-              onPress: onClear,
-              children: getCopy('clearButtonLabel')
-            })
-          })]
-        })
-      })]
+      children: [headerContent, controlsContent]
     })]
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 const styles = _StyleSheet.default.create({
-  textContainerStyle: {
-    marginRight: 52
+  container: {
+    flex: 1
+  },
+  controls: _Platform.default.select({
+    web: {},
+    default: {
+      flex: 0.35
+    }
+  }),
+  content: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent'
+  },
+  options: {
+    flex: 1
   }
 });
 

package/lib/Notification/Notification.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
@@ -182,7 +183,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
 const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      flexDirection: system === true && viewport === 'xl' || _Platform.default.OS === 'android' ? 'row' : 'inherit',
       ...selectContainerStyles(themeTokens)
     }
   },
@@ -287,6 +288,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    onDismiss,
     ...rest
   } = _ref6;
   const [isDismissed, setIsDismissed] = _react.default.useState(false);
@@ -346,7 +348,10 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     dismissIcon: DismissIconComponent,
     dismissIconColor
   } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
-  const onDismissPress = () => setIsDismissed(true);
+  const onDismissPress = () => {
+    setIsDismissed(true);
+    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: notificationComponentRef.current.containerStyles.container,
@@ -420,6 +425,10 @@ Notification.propTypes = {
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
     dismiss: _propTypes.default.string
   })]),
+  /**
+   * Callback function called when the dismiss button is clicked
+   */
+  onDismiss: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Notification'),
   variant: _utils.variantProp.propType
 };

package/lib/Status/Status.js

@@ -80,7 +80,8 @@ const selectTextStyles = _ref3 => {
     textLineHeight,
     fontName,
     fontSize,
-    fontWeight
+    fontWeight,
+    marginLeft
   } = _ref3;
   return (0, _ThemeProvider.applyTextStyles)({
     fontColor: textColor,
@@ -88,7 +89,7 @@ const selectTextStyles = _ref3 => {
     fontSize,
     fontWeight,
     lineHeight: _Platform.default.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
-    marginLeft: 8
+    marginLeft
   });
 };
 
@@ -100,6 +101,7 @@ const selectTextStyles = _ref3 => {
  * @param {string} variant - The variant of the status component.
  * @param {ReactNode} children - The content to be displayed inside the status component.
  * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {elementType} customGradient - Defines an icon to be rendered.
  * @param {object} rest - The rest of the props to be applied to the status component.
  * @param {React.Ref} ref - The ref to be applied to the status component.
  * @returns {ReactNode} The rendered status component.
@@ -113,14 +115,17 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     ...rest
   } = _ref4;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Status', tokens, variant);
+  const {
+    icon
+  } = themeTokens;
   const containerStyles = {
     ...selectContainerStyles(themeTokens),
     ...staticStyles.container
   };
   let content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       ...selectIconProps(themeTokens)
-    }), (0, _utils.wrapStringsInText)(children, {
+    }) : null, (0, _utils.wrapStringsInText)(children, {
       style: selectTextStyles(themeTokens)
     })]
   });

package/lib/index.js

@@ -13,6 +13,7 @@ var _exportNames = {
   Card: true,
   PressableCardBase: true,
   CardGroup: true,
+  FileUpload: true,
   Listbox: true,
   Checkbox: true,
   CheckboxCard: true,
@@ -195,6 +196,12 @@ Object.defineProperty(exports, "Fieldset", {
     return _Fieldset.default;
   }
 });
+Object.defineProperty(exports, "FileUpload", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.default;
+  }
+});
 Object.defineProperty(exports, "FlexGrid", {
   enumerable: true,
   get: function () {
@@ -569,6 +576,7 @@ Object.keys(_Carousel).forEach(function (key) {
     }
   });
 });
+var _FileUpload = _interopRequireDefault(require("./FileUpload"));
 var _Listbox = _interopRequireDefault(require("./Listbox"));
 var _Checkbox = _interopRequireWildcard(require("./Checkbox"));
 Object.keys(_Checkbox).forEach(function (key) {

package/lib/utils/convertFromMegaByteToByte.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = convertFromMegaByteToByte;
+/**
+ * Converts a value from megabytes to bytes.
+ *
+ * @param {number} megaByte - The value in megabytes to be converted.
+ * @returns {number} The converted value in bytes.
+ */
+const BYTES_IN_A_MEGABYTE = 1024 * 1024;
+function convertFromMegaByteToByte(megaByte) {
+  return megaByte * BYTES_IN_A_MEGABYTE;
+}

package/lib/utils/formatImageSource.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// react native source for Image and ImageBackground needs proper formatting to work
+// remote sources that start with 'http' and base64 encoded sources that start with 'data:' need be wrapped in uri when passing source prop for Image and ImageBackground ie. source={ uri: image }
+// local source for image can be passed normally without wrapping in uri ie. source={ image }
+
+/**
+ *  example code from react native docs: https://reactnative.dev/docs/imagebackground
+ *
+ *  const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}
+ *
+ *  const App = () => (
+ *    <View style={styles.container}>
+ *      <ImageBackground source={image} resizeMode="cover" style={styles.image}>
+ *        <Text style={styles.text}>Inside</Text>
+ *      </ImageBackground>
+ *    </View>
+ *  )
+ */
+
+/**
+ * Formats the image source for React Native Image and ImageBackground components.
+ * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
+ * @returns {object|string} - The formatted image source.
+ */
+const formatImageSource = source => typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:')) ? {
+  uri: source
+} : source;
+var _default = formatImageSource;
+exports.default = _default;

package/lib/utils/index.js

@@ -17,7 +17,9 @@ var _exportNames = {
   containUniqueFields: true,
   BaseView: true,
   htmlAttrs: true,
-  transformGradient: true
+  transformGradient: true,
+  convertFromMegaByteToByte: true,
+  formatImageSource: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -31,6 +33,18 @@ Object.defineProperty(exports, "containUniqueFields", {
     return _containUniqueFields.default;
   }
 });
+Object.defineProperty(exports, "convertFromMegaByteToByte", {
+  enumerable: true,
+  get: function () {
+    return _convertFromMegaByteToByte.default;
+  }
+});
+Object.defineProperty(exports, "formatImageSource", {
+  enumerable: true,
+  get: function () {
+    return _formatImageSource.default;
+  }
+});
 Object.defineProperty(exports, "htmlAttrs", {
   enumerable: true,
   get: function () {
@@ -224,6 +238,8 @@ var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields
 var _BaseView = _interopRequireDefault(require("./BaseView"));
 var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 var _transformGradient = require("./transformGradient");
+var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMegaByteToByte"));
+var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib-module/Button/ButtonGroup.js

@@ -48,7 +48,11 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const {
     direction,
     space,
-    fieldSpace
+    fieldSpace,
+    borderRadius,
+    backgroundColor,
+    padding,
+    gap
   } = themeTokens;
   const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant);
   const {
@@ -87,12 +91,24 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     accessibilityRole: accessibilityRole,
+    style: {
+      borderRadius,
+      backgroundColor,
+      padding,
+      ...(Platform.OS === 'web' ? {
+        gap,
+        width: 'fit-content'
+      } : {
+        alignSelf: 'flex-start'
+      })
+    },
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(StackWrap, {
       accessibilityRole: innerRole,
       space: space,
       direction: direction,
       tokens: stackTokens,
+      gap: gap,
       ref: ref,
       children: items.map((_ref2, index) => {
         let {