@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/Feedback/Feedback.js

@@ -3,26 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Feedback = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _StackView = _interopRequireDefault(require("../StackView"));
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _StackView = require("../StackView/StackView");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const selectStyles = tokens => (0, _tokens.selectTokens)('Feedback', tokens);
 const selectTitleTextStyles = (_ref, themeOptions) => {
   let {
     titleFontSize,
     ...tokens
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
-    ...(0, _utils.selectTokens)('Typography', {
+  return (0, _styles.applyTextStyles)({
+    ...(0, _tokens.selectTokens)('Typography', {
       ...tokens,
       fontSize: titleFontSize,
       themeOptions
@@ -35,8 +41,8 @@ const selectContentTextStyles = (_ref2, themeOptions) => {
     contentFontSize,
     ...tokens
   } = _ref2;
-  return (0, _ThemeProvider.applyTextStyles)({
-    ...(0, _utils.selectTokens)('Typography', {
+  return (0, _styles.applyTextStyles)({
+    ...(0, _tokens.selectTokens)('Typography', {
       ...tokens,
       fontSize: contentFontSize
     }),
@@ -80,7 +86,7 @@ const selectIconContainerStyles = _ref4 => {
  * ### Accessibility
  * All accessibility props set on this component will be applied to the outer container.
  */
-const Feedback = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Feedback = exports.Feedback = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     title,
     children,
@@ -90,7 +96,7 @@ const Feedback = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     variant,
     ...rest
   } = _ref5;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Feedback', tokens, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Feedback', tokens, {
     ...variant,
     validation
   });
@@ -102,7 +108,7 @@ const Feedback = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   } = themeTokens;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions);
   const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions);
   const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
@@ -118,7 +124,7 @@ const Feedback = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     style: selectStyles(themeTokens),
     nativeID: id,
     ...selectedProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
       space: space,
       children: [title !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: staticStyles.title,
@@ -155,10 +161,9 @@ Feedback.propTypes = {
   validation: _propTypes.default.oneOf(['error', 'success']),
   /** @ignore */
   id: _propTypes.default.string,
-  tokens: (0, _utils.getTokensPropType)('Feedback'),
-  variant: _utils.variantProp.propType
+  tokens: (0, _tokens.getTokensPropType)('Feedback'),
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = Feedback;
 const staticStyles = _StyleSheet.default.create({
   title: {
     display: 'flex',

package/lib/cjs/Fieldset/Fieldset.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Fieldset = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Feedback = _interopRequireDefault(require("../Feedback"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _FieldsetContainer = _interopRequireDefault(require("./FieldsetContainer"));
-var _StackView = require("../StackView");
-var _InputLabel = _interopRequireDefault(require("../InputLabel"));
-var _useInputSupports = _interopRequireDefault(require("../InputSupports/useInputSupports"));
+var _Feedback = require("../Feedback/Feedback");
+var _tokens = require("../utils/props/tokens");
+var _spacingProps = require("../utils/props/spacingProps");
+var _variantProp = require("../utils/props/variantProp");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _FieldsetContainer = require("./FieldsetContainer");
+var _getStackedContent = require("../StackView/getStackedContent");
+var _InputLabel = require("../InputLabel/InputLabel");
+var _useInputSupports = require("../InputSupports/useInputSupports");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -20,7 +22,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * wrapped in a `<fieldset>` tag, with label content displated in a `<legend>` tag.
  *
  * Follows the same theming and most of the same props as InputSupports.
- */const Fieldset = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const Fieldset = exports.Fieldset = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     space,
@@ -44,7 +47,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   /* Fieldset tokenization:
   - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
    */
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Fieldset', tokens, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('Fieldset', tokens, {
     error: validation === 'error' && showErrorBorder,
     ...variant
   });
@@ -53,13 +56,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     hintId,
     feedbackId,
     a11yProps
-  } = (0, _useInputSupports.default)({
+  } = (0, _useInputSupports.useInputSupports)({
     feedback,
     hint,
     label: legend,
     validation
   });
-  const legendContent = legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+  const legendContent = legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.InputLabel, {
     copy: copy,
     label: legend,
     hint: hint,
@@ -67,7 +70,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     hintId: hintId,
     tooltip: tooltip
   });
-  const feedbackContent = feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+  const feedbackContent = feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.Feedback, {
     id: feedbackId,
     title: feedback,
     validation: validation,
@@ -110,15 +113,21 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between
   // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
-  const childContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+  const childContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
     children: typeof children === 'function' ? children(a11yProps) : children
-  });
-  const orderedContent = feedbackPosition === 'bottom' ? [legendContent, feedbackContent, childContent] : [legendContent, childContent, feedbackContent];
-  const stackedContent = (0, _StackView.getStackedContent)(orderedContent, {
+  }, "fieldset-children");
+  const legendWithKey = legendContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: legendContent
+  }, "fieldset-legend") : null;
+  const feedbackWithKey = feedbackContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: feedbackContent
+  }, "fieldset-feedback") : null;
+  const orderedContent = feedbackPosition === 'bottom' ? [legendWithKey, feedbackWithKey, childContent].filter(Boolean) : [legendWithKey, childContent, feedbackWithKey].filter(Boolean);
+  const stackedContent = (0, _getStackedContent.getStackedContent)(orderedContent, {
     space,
     preserveFragments: true
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldsetContainer.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldsetContainer.FieldsetContainer, {
     ref: ref,
     inactive: inactive,
     accessibilityRole: accessibilityRole,
@@ -131,8 +140,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 });
 Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Fieldset'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Fieldset'),
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   /**
    * Whether the English or French copy will be used (e.g. for accessibility labels).
@@ -148,7 +157,7 @@ Fieldset.propTypes = {
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
-  space: _utils.spacingProps.types.spacingValue,
+  space: _spacingProps.spacingProps.types.spacingValue,
   /**
    * The text for the fieldset's legend, describing the fieldset content.
    */
@@ -194,5 +203,4 @@ Fieldset.propTypes = {
    * Use to show border in case of error for a group of components
    */
   showErrorBorder: _propTypes.default.bool
-};
-var _default = exports.default = Fieldset;
+};

package/lib/cjs/Fieldset/FieldsetContainer.js

@@ -3,19 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FieldsetContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _cssReset = _interopRequireDefault(require("./cssReset"));
-var _utils = require("../utils");
+var _cssReset = require("./cssReset");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _a11yProps = require("../utils/props/a11yProps");
+var _htmlAttrs = require("../utils/htmlAttrs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _htmlAttrs.htmlAttrs]);
 
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FieldsetContainer = exports.FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     inactive,
@@ -27,7 +29,7 @@ const FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     ...rest
   } = _ref;
   // If needs border for error design or reset the component style
-  const styleContainer = showBorderStyle && borderStyle ? borderStyle : _cssReset.default;
+  const styleContainer = showBorderStyle && borderStyle ? borderStyle : _cssReset.cssReset;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
     ref: ref,
     disabled: inactive,
@@ -51,5 +53,4 @@ FieldsetContainer.propTypes = {
   showBorderStyle: _propTypes.default.bool,
   borderStyle: _propTypes.default.object,
   style: _propTypes.default.object
-};
-var _default = exports.default = FieldsetContainer;
+};

package/lib/cjs/Fieldset/FieldsetContainer.native.js

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FieldsetContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _utils = require("../utils");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _a11yProps = require("../utils/props/a11yProps");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FieldsetContainer = exports.FieldsetContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     accessibilityRole,
@@ -35,5 +37,4 @@ FieldsetContainer.propTypes = {
   children: _propTypes.default.node,
   accessibilityRole: _propTypes.default.string,
   style: _propTypes.default.object
-};
-var _default = exports.default = FieldsetContainer;
+};

package/lib/cjs/Fieldset/Legend.js

@@ -3,27 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Legend = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _cssReset = _interopRequireDefault(require("./cssReset"));
+var _cssReset = require("./cssReset");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
- */const Legend = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const Legend = exports.Legend = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
     ref: ref,
-    style: _cssReset.default,
+    style: _cssReset.cssReset,
     children: children
   });
 });
 Legend.displayName = 'Legend';
 Legend.propTypes = {
   children: _propTypes.default.node
-};
-var _default = exports.default = Legend;
+};

package/lib/cjs/Fieldset/Legend.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Legend = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -13,7 +13,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /**
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
- */const Legend = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const Legend = exports.Legend = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -32,5 +33,4 @@ const staticStyles = _StyleSheet.default.create({
     width: '100%',
     flexGrow: 1
   }
-});
-var _default = exports.default = Legend;
+});

package/lib/cjs/Fieldset/cssReset.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.cssReset = void 0;
 // React Native Web has no built-in `fieldset` or `legend` support.
 // This reset makes them consistent with other RNW views.
 // Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
 // Using CSS `all` doesn't work well as an inline style.
 // https://github.com/necolas/react-native-web/issues/1385
-var _default = exports.default = {
+const cssReset = exports.cssReset = {
   margin: 'unset',
   padding: 'unset',
   float: 'unset',

package/lib/cjs/FileUpload/FileUpload.js

@@ -3,23 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FileUpload = 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");
-var _InputLabel = _interopRequireDefault(require("../InputLabel"));
-var _Button = require("../Button");
-var _Notification = _interopRequireDefault(require("../Notification"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _NotificationContent = _interopRequireDefault(require("./NotificationContent"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _convertFromMegaByteToByte = require("../utils/convertFromMegaByteToByte");
+var _InputLabel = require("../InputLabel/InputLabel");
+var _Button = require("../Button/Button");
+var _Notification = require("../Notification/Notification");
+var _Spacer = require("../Spacer/Spacer");
+var _StackView = require("../StackView/StackView");
+var _NotificationContent = require("./NotificationContent");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const getHintFromFileTypes = fileTypes => {
   const acceptedFileTypes = fileTypes.map(type => type.toUpperCase());
   return acceptedFileTypes.reduce((acc, curr, index) => {
@@ -88,7 +95,7 @@ const selectComponentTokens = (tokens, componentIdentifier) => {
  * @param {any} props.rest - Additional props to be spread to the component.
  * @returns {JSX.Element} The rendered FileUpload component.
  */
-const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const FileUpload = exports.FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -102,14 +109,14 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onUpload,
     onDelete,
     documentPicker,
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref2;
   if (minFilesCount <= 0) {
     throw new Error('minFilesCount should be greater than 0');
   }
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('FileUpload', tokens, variant);
-  const getCopy = (0, _utils.useCopy)({
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('FileUpload', tokens, variant);
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
@@ -136,12 +143,12 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const areFileSizesWithinLimit = files => {
     const invalidFiles = files.filter(file => {
       const fileSize = file.size;
-      return fileSize < (0, _utils.convertFromMegaByteToByte)(minFileSize) || fileSize > (0, _utils.convertFromMegaByteToByte)(maxFileSize);
+      return fileSize < (0, _convertFromMegaByteToByte.convertFromMegaByteToByte)(minFileSize) || fileSize > (0, _convertFromMegaByteToByte.convertFromMegaByteToByte)(maxFileSize);
     });
     if (invalidFiles.length > 0) {
       const invalidFile = invalidFiles[0];
       const fileSize = invalidFile.size;
-      if (fileSize < (0, _utils.convertFromMegaByteToByte)(minFileSize)) {
+      if (fileSize < (0, _convertFromMegaByteToByte.convertFromMegaByteToByte)(minFileSize)) {
         setFilesStatus([{
           description: getCopy('fileTooSmall').replace('%{size}', minFileSize),
           style: 'error'
@@ -179,7 +186,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       const currentFilesStatus = files.map((file, index) => {
         if (results[index].error) {
           return {
-            description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+            description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
               file: file,
               color: selectComponentTokens(themeTokens, 'notification').color,
               children: ` ${getCopy('uploadError')} ${results[index].error}.`
@@ -188,7 +195,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           };
         }
         return {
-          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
             file: file,
             color: selectComponentTokens(themeTokens, 'notification').color,
             children: ` ${getCopy('uploadSuccess')}`
@@ -212,7 +219,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       setFilesStatus(prevStatus => {
         const filteredFilesStatus = prevStatus.filter(f => f.file && f.file.name !== file.name);
         return result.error ? [...filteredFilesStatus, {
-          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
             file: file,
             color: selectComponentTokens(themeTokens, 'notification').color,
             children: ` ${getCopy('uploadSuccess')}`
@@ -221,7 +228,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           file,
           onDismiss: () => handleFileDeletion(file)
         }, {
-          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
             file: file,
             color: selectComponentTokens(themeTokens, 'notification').color,
             children: ` ${getCopy('deleteProblem')} ${result.error}.`
@@ -232,7 +239,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       });
     } catch (error) {
       setFilesStatus([{
-        description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+        description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
           file: file,
           color: selectComponentTokens(themeTokens, 'notification').color,
           children: ` ${getCopy('problemDeleting')}`
@@ -280,11 +287,11 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.InputLabel, {
       label: getCopy('label'),
       hint: fileTypes && getCopy('allowedFileTypes').replace('%{fileTypes}', getHintFromFileTypes(fileTypes)),
       hintPosition: "below"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       space: 4
     }), _Platform.default.OS === 'web' && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "file",
@@ -298,9 +305,9 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       tokens: selectComponentTokens(themeTokens, 'button'),
       children: getCopy('buttonLabel')
     }), filesStatus.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
         space: 4,
         children: filesStatus.map((_ref3, index) => {
           let {
@@ -308,7 +315,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
             style,
             onDismiss
           } = _ref3;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.Notification, {
             variant: {
               style
             },
@@ -346,12 +353,12 @@ const dictionaryEntryShape = _propTypes.default.shape({
 });
 FileUpload.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('FileUpload'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('FileUpload'),
+  variant: _variantProp.variantProp.propType,
   /**
    * To define the locale of the copy
    */
-  copy: _utils.copyPropTypes,
+  copy: _copyPropTypes.copyPropTypes,
   /**
    * The file types allowed for upload. Example: fileTypes={['pdf', 'docx']}.
    */
@@ -395,5 +402,4 @@ FileUpload.propTypes = {
     en: dictionaryEntryShape,
     fr: dictionaryEntryShape
   })
-};
-var _default = exports.default = FileUpload;
+};

package/lib/cjs/FileUpload/NotificationContent.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NotificationContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _Typography = require("../Typography/Typography");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -19,18 +19,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @param {string} props.color - The color of the typography.
  * @param {React.Ref} ref - The ref to be forwarded to the Typography component.
  * @returns {JSX.Element} The rendered NotificationContent component.
- */const NotificationContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const NotificationContent = exports.NotificationContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     file,
     color,
     children
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.Typography, {
     tokens: {
       color
     },
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
       variant: {
         bold: true
       },
@@ -55,5 +56,4 @@ NotificationContent.propTypes = {
    * The color of the typography.
    */
   color: _propTypes.default.string
-};
-var _default = exports.default = NotificationContent;
+};

package/lib/cjs/FileUpload/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     label: 'Upload files',
     buttonLabel: 'Choose files',