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

package/lib/esm/CheckboxCardGroup/CheckboxCardGroup.js

@@ -1,15 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
-import StackView, { StackWrap } from '../StackView';
-import CheckboxCard from '../CheckboxCard';
-import Fieldset from '../Fieldset';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { containUniqueFields } from '../utils/containUniqueFields';
+import { focusHandlerProps } from '../utils/props/handlerProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useMultipleInputValues } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { StackView } from '../StackView/StackView';
+import { StackWrap } from '../StackView/StackWrap';
+import { CheckboxCard } from '../CheckboxCard/CheckboxCard';
+import { Fieldset } from '../Fieldset/Fieldset';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const CheckboxCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CheckboxCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens,
@@ -202,5 +210,4 @@ CheckboxCardGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
   name: PropTypes.string
-};
-export default CheckboxCardGroup;
+};

package/lib/esm/ColourToggle/ColourBubble.js

@@ -4,8 +4,9 @@ import View from "react-native-web/dist/exports/View";
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import { resolvePressableTokens } from '../utils/pressability';
-import { applyShadowToken } from '../ThemeProvider';
-import { getTokensPropType } from '../utils';
+import { applyShadowToken } from '../ThemeProvider/utils/styles';
+import { getTokensPropType } from '../utils/props/tokens';
+import { Tooltip } from '../Tooltip/Tooltip.native';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectGeneralBubbleTokens = _ref => {
   let {
@@ -62,21 +63,22 @@ const selectBorderBubbleTokens = _ref3 => {
     borderRadius: bubbleBorderRadius
   };
 };
-const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     tokens = {},
     id,
     colourHexCode,
     colourName,
     isSelected,
-    onPress
+    onPress,
+    showTooltip
   } = _ref4;
   const defaultTokens = tokens({
     selected: isSelected
   });
   const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, pressState, {});
   const themeTokens = React.useMemo(() => tokens(), [tokens]);
-  return /*#__PURE__*/_jsx(Pressable, {
+  const pressable = /*#__PURE__*/_jsx(Pressable, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
     accessible: true,
@@ -93,6 +95,14 @@ const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       }]
     })
   });
+  if (showTooltip) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      content: colourName,
+      activateOnHover: true,
+      children: pressable
+    });
+  }
+  return pressable;
 });
 ColourBubble.displayName = 'ColourBubble';
 ColourBubble.propTypes = {
@@ -121,6 +131,9 @@ ColourBubble.propTypes = {
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: PropTypes.func
-};
-export default ColourBubble;
+  onPress: PropTypes.func,
+  /**
+   * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
+   */
+  showTooltip: PropTypes.bool
+};

package/lib/esm/ColourToggle/ColourToggle.js

@@ -1,20 +1,25 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { StackWrap } from '../StackView';
-import Typography from '../Typography';
-import ColourBubble from './ColourBubble';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { StackWrap } from '../StackView/StackWrap';
+import { Typography } from '../Typography/Typography';
+import { ColourBubble } from './ColourBubble';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
     defaultColourId,
     items,
     onChange,
+    showTooltips,
     ...rest
   } = _ref;
   const [currentColourId, setCurrentColourId] = React.useState(defaultColourId);
@@ -54,7 +59,8 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           isSelected: id === currentColourId,
           colourHexCode: colourHexCode,
           colourName: colourName,
-          onPress: handleChangeColour
+          onPress: handleChangeColour,
+          showTooltip: showTooltips
         }, colourBubbleId);
       })
     })]
@@ -86,6 +92,9 @@ ColourToggle.propTypes = {
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
    */
-  onChange: PropTypes.func
-};
-export default ColourToggle;
+  onChange: PropTypes.func,
+  /**
+   * When true, displays each colour's name as a tooltip on hover (web only).
+   */
+  showTooltips: PropTypes.bool
+};

package/lib/esm/Divider/Divider.js

@@ -3,9 +3,14 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { useThemeTokens } from '../ThemeProvider';
-import Spacer from '../Spacer';
-import { a11yProps, getTokensPropType, selectSystemProps, spacingProps, variantProp, viewProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { Spacer } from '../Spacer/Spacer';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { spacingProps } from '../utils/props/spacingProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -50,7 +55,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Divider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
     vertical = false,
@@ -127,5 +132,4 @@ const styles = StyleSheet.create({
   divider: {
     alignSelf: 'stretch'
   }
-});
-export default Divider;
+});

package/lib/esm/DownloadApp/DownloadApp.js

@@ -3,9 +3,18 @@ import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, linkProps, hrefAttrsProp, viewProps, getTokensPropType, resolvePressableTokens, variantProp, copyPropTypes, selectSystemProps, useCopy } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import defaultDictionary from './dictionary';
+import { a11yProps } from '../utils/props/a11yProps';
+import { linkProps } from '../utils/props/linkProps';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { viewProps } from '../utils/props/viewProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { resolvePressableTokens } from '../utils/pressability';
+import { variantProp } from '../utils/props/variantProp';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useCopy } from '../utils/useCopy';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { dictionary as defaultDictionary } from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 const selectOuterStyles = _ref => {
@@ -25,7 +34,7 @@ const selectOuterStyles = _ref => {
     padding
   };
 };
-const DownloadApp = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const DownloadApp = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     dictionary = defaultDictionary,
@@ -156,5 +165,4 @@ const staticImageSizes = {
       height: 48
     }
   }
-};
-export default DownloadApp;
+};

package/lib/esm/DownloadApp/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     altTextAndroid: 'Get it on Google Play',
     altTextIos: 'Download on the App Store'

package/lib/esm/ExpandCollapse/ExpandCollapse.js

@@ -2,8 +2,15 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps, contentfulProps, useUniqueId } from '../utils';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useMultipleInputValues } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+import { useUniqueId } from '../utils/useUniqueId';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 const selectWrapperStyles = _ref => {
@@ -27,10 +34,10 @@ const selectWrapperStyles = _ref => {
  * Flexible base component for lists where some or all items are collapsible headers.
  *
  * Pass a render function as `children` which takes and passes `openIds` and `onToggle` props to
- * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
+ * <ExpandCollapsePanel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -82,7 +89,7 @@ ExpandCollapse.propTypes = {
   /**
    * ExpandCollapse usually takes a render function to which it passes an object with properties
    * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
-   * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
+   * onToggle (function) will usually be passed to `<ExpandCollapsePanel>`
    */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   /**
@@ -103,7 +110,6 @@ ExpandCollapse.propTypes = {
    */
   initialOpen: PropTypes.arrayOf(PropTypes.string)
 };
-export default ExpandCollapse;
 const staticStyles = StyleSheet.create({
   container: {
     display: 'flex'

package/lib/esm/ExpandCollapse/ExpandCollapseAccordion.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ExpandCollapse } from './ExpandCollapse';
+
+/**
+ * 'ExpandCollapseAccordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ExpandCollapseAccordion = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(ExpandCollapse, {
+  ref: ref,
+  ...props,
+  maxOpen: 1
+}));
+ExpandCollapseAccordion.displayName = 'ExpandCollapseAccordion';
+ExpandCollapseAccordion.propTypes = ExpandCollapse.propTypes;

package/lib/esm/ExpandCollapse/{Control.js → ExpandCollapseControl.js}

@@ -4,8 +4,13 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { verticalAlignRow } from '../ThemeProvider/utils/styles';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 function selectContainerStyles(_ref) {
@@ -66,11 +71,15 @@ function selectIconContainerStyles(_ref2) {
 }
 function selectTextContainerStyles(_ref3) {
   let {
-    textLine
+    textLine,
+    controlAlign
   } = _ref3;
   return {
     textDecorationLine: textLine,
-    flex: 1
+    flex: 1,
+    ...(controlAlign && {
+      alignItems: controlAlign
+    })
   };
 }
 function selectIconTokens(tokens) {
@@ -79,12 +88,13 @@ function selectIconTokens(tokens) {
     size: tokens.iconSize
   };
 }
-const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     onPress,
     isExpanded,
     children,
     tokens,
+    controlAlign,
     accessibilityRole = 'button',
     variant,
     ...rest
@@ -135,7 +145,12 @@ const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
             ...selectIconTokens(themeTokens)
           })
         }), /*#__PURE__*/_jsx(View, {
-          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
+          style: [selectTextContainerStyles({
+            ...themeTokens,
+            ...(controlAlign && {
+              controlAlign
+            })
+          }), staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(getControlState(pressableState)) : children
         })]
       });
@@ -161,9 +176,12 @@ ExpandCollapseControl.propTypes = {
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: PropTypes.bool,
+  /**
+   * Optional alignment for control content. Overrides token-driven alignment.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * Function called when the ExpandCollapse is pressed.
    */
   onPress: PropTypes.func.isRequired
-};
-export default ExpandCollapseControl;
+};

package/lib/esm/ExpandCollapse/{Panel.js → ExpandCollapsePanel.js}

@@ -6,11 +6,16 @@ import Text from "react-native-web/dist/exports/Text";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
 import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import ExpandCollapseControl from './Control';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps, useCopy } from '../utils';
-import dictionary from './dictionary';
+import { ExpandCollapseControl } from './ExpandCollapseControl';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useVerticalExpandAnimation } from '../utils/animation/useVerticalExpandAnimation';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useCopy } from '../utils/useCopy';
+import { dictionary } from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -89,7 +94,7 @@ const selectControlPanelStyles = _ref4 => {
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     openIds = [],
     panelId,
@@ -97,6 +102,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     onPress,
     control,
     controlTokens,
+    controlAlign,
     children,
     tokens,
     variant,
@@ -166,6 +172,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         ...selectedProps,
         isExpanded: isExpanded,
         tokens: controlTokens,
+        controlAlign: controlAlign,
         variant: variant,
         onPress: handleControlPress,
         ref: controlRef,
@@ -265,10 +272,16 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: ABBPropTypes.ref(),
+  controlRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */
@@ -277,5 +290,4 @@ ExpandCollapsePanel.propTypes = {
    * A boolean prop to disable the extra scroll buffer on mobile devices (only applicable on iOS/Android, ignored on web)
    */
   disableMobileScrollBuffer: PropTypes.bool
-};
-export default ExpandCollapsePanel;
+};

package/lib/esm/ExpandCollapse/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     panel: 'Panel',
     subPanel: 'SubPanel'

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,12 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType, selectSystemProps, contentfulProps, useUniqueId } from '../utils';
-import { variantProp } from '../utils/props';
-import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
+import { ExpandCollapse } from '../ExpandCollapse/ExpandCollapse';
+import { ExpandCollapsePanel } from '../ExpandCollapse/ExpandCollapsePanel';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { contentfulProps } from '../utils/props/contentfulProps';
+import { useUniqueId } from '../utils/useUniqueId';
+import { variantProp } from '../utils/props/variantProp';
+import { ExpandCollapseMiniControl } from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
-const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
+export const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     onToggle = () => {},
@@ -14,6 +23,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     nativeID,
     initialOpen = false,
     dataSet,
+    align,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel');
@@ -29,7 +39,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
     ...selectContainerProps(rest),
     dataSet: dataSet,
-    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapsePanel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
       variant: {
@@ -41,12 +51,14 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         textLine: tokens.textLine ?? 'none',
         backgroundColor: 'transparent'
-      }
+      },
+      controlAlign: align && alignMap[align]
       // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
       control: pressableState => /*#__PURE__*/_jsx(ExpandCollapseMiniControl, {
         pressableState: pressableState,
+        align: align,
         ...rest
       }),
       controlRef: ref,
@@ -86,6 +98,9 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: PropTypes.object
-};
-export default ExpandCollapseMini;
+  dataSet: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
+};

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -1,11 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import { Link } from '../Link';
-import { useThemeTokens } from '../ThemeProvider';
-import { htmlAttrs, viewProps, selectSystemProps } from '../utils';
+import { Link } from '../Link/Link';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { htmlAttrs } from '../utils/htmlAttrs';
+import { viewProps } from '../utils/props/viewProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
 
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
@@ -16,7 +23,7 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -24,6 +31,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconPosition = 'right',
     tokens,
     variant = {},
+    align,
     ...rest
   } = _ref;
   const {
@@ -92,7 +100,10 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...getTokens(linkState),
       iconSize,
       blockFontSize: fontSize,
-      blockLineHeight: lineHeight
+      blockLineHeight: lineHeight,
+      ...(align && {
+        alignSelf: alignSelfMap[align]
+      })
     }),
     ref: ref,
     ...presentationOnly,
@@ -123,6 +134,9 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: PropTypes.object
-};
-export default ExpandCollapseMiniControl;
+  variant: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
+};

package/lib/esm/Feedback/Feedback.js

@@ -3,9 +3,15 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
-import StackView from '../StackView';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { StackView } from '../StackView/StackView';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectStyles = tokens => selectTokens('Feedback', tokens);
@@ -73,7 +79,7 @@ const selectIconContainerStyles = _ref4 => {
  * ### Accessibility
  * All accessibility props set on this component will be applied to the outer container.
  */
-const Feedback = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const Feedback = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     title,
     children,
@@ -151,7 +157,6 @@ Feedback.propTypes = {
   tokens: getTokensPropType('Feedback'),
   variant: variantProp.propType
 };
-export default Feedback;
 const staticStyles = StyleSheet.create({
   title: {
     display: 'flex',