@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

package/lib/ThemeProvider/useThemeTokens.js

@@ -1,6 +1,18 @@
-import { useCallback } from 'react';
-import useTheme from './useTheme';
-import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } from './utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeTokensCallback = exports.useThemeTokens = void 0;
+
+var _react = require("react");
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
@@ -11,28 +23,78 @@ import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } fr
  * Returns a complete set of theme tokens for a component based on which of the
  * component's theme rules apply to the current set of theme appearances.
  *
+ * When applying theme tokens as styles to a component, don't spread the theme tokens
+ * object, explicitly select each property. This way, if new theme tokens are added to the
+ * component's theme in a minor or patch release of the theme package, the appearance
+ * of the component in sites and apps will only change when the component itself is updated.
+ *
+ * @example
+ * const seletContainerTokens = ({ color, width, height }) => ({
+ *   backgroundColor: color, width, height
+ * })
+ * const MyComponent = ({ tokens, variant, children }) => {
+ *   const viewport = useViewport()
+ *   const themeTokens = useThemeTokens('MyComponent', tokens, variant, { viewport })
+ *   const style = seletContainerTokens(themeTokens)
+ *   return <View style={style}>{children}</View>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept an optional `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - every themed component should accept an optional `variants` prop specifying theme variants
  * @param {AppearanceSet} [states] - optional object containing current theme appearances dictated by user action or context
  * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
  */
-
-export const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const themeTokens = getThemeTokens(componentTheme, tokens, variants, states);
+const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const themeTokens = (0, _utils.getThemeTokens)(componentTheme, tokens, variants, states);
   return themeTokens;
 };
 /**
  * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
- * Scenarios where useThemeTokensCallback should be used instead of useThemeTokens include:
+ * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
  *
- * - Where tokens to be obtained from state accessible only in scopes like callbacks and render functions,
- *   where calling useThemeTokens directly would be disallowed by React's hook rules.
+ * - Where tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useThemeTokens directly would be disallowed by React's hook rules.
  * - Passing a tokens getter down via a child component's `tokens` prop, applying rules using the
  *   child component's current state. Consider wrapping the returned tokens in `selectTokens()`.
  *
+ * The function returned by `useThemeTokens` may be called with an object of state appearances to get an object
+ * of tokens, or may be passed as a `tokens` prop to other themed components or `useThemeTokens`/`useThemeTokensCallback`
+ * hooks.
+ *
+ * @example
+ * // Resolving tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getTokens = useThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const { color, width, height } = getTokens({ pressed })
+ *     return { backgroundColor: color, width, height }
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getTokens = useThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @example
+ * // Chaining multiple themes together, sharing the same variants and state
+ * const GlowingLink = ({ tokens, variant, children }) => {
+ *   // applies a small theme for a glowing effect, using same variants and states as "link"
+ *   const getGlowTokens = useThemeCallback('GlowingLink', tokens, variant)
+ *   // applies link state to get "Link" theme tokens and merge "GlowingLink" tokens on top
+ *   const getTokens = useThemeCallback('Link', getGlowTokens, variant)
+ *   // renders a link with both themes applied, both based on current link state
+ *   return <LinkBase tokens={getTokens}>{children}</LinkBase>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
@@ -42,13 +104,18 @@ export const useThemeTokens = (componentName, tokens = {}, variants = {}, states
  *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
  */
 
-export const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const getThemeTokensCallback = useCallback((states, tokenOverrides) => {
-    const appearances = mergeAppearances(variants, states);
-    const resolvedTokens = resolveTokens(tokens, tokenOverrides, appearances);
-    return getThemeTokens(componentTheme, resolvedTokens, appearances);
+
+exports.useThemeTokens = useThemeTokens;
+
+const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const getThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
+    const appearances = (0, _utils.mergeAppearances)(variants, states);
+    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, appearances, tokenOverrides);
+    return (0, _utils.getThemeTokens)(componentTheme, resolvedTokens, appearances);
   }, [componentTheme, tokens, variants]);
   return getThemeTokensCallback;
-};
+};
+
+exports.useThemeTokensCallback = useThemeTokensCallback;

package/lib/ThemeProvider/utils/index.js

@@ -1,2 +1,31 @@
-export * from './styles';
-export * from './theme-tokens';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _styles = require("./styles");
+
+Object.keys(_styles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _styles[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _styles[key];
+    }
+  });
+});
+
+var _themeTokens = require("./theme-tokens");
+
+Object.keys(_themeTokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _themeTokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _themeTokens[key];
+    }
+  });
+});

package/lib/ThemeProvider/utils/styles.js

@@ -1,12 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyTextStyles = applyTextStyles;
+exports.applyShadowToken = applyShadowToken;
+exports.verticalAlignRow = verticalAlignRow;
+exports.applyOuterBorder = void 0;
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * React-Native specific implementations of style patterns that
  * don't map directly to cross-platform design token values.
  */
-import { Platform } from 'react-native';
-import { fontBasePixels } from '@telus-uds/system-constants'; // Make design tokens fit React Native's text styles' specific requirements and quirks
-
-export function applyTextStyles({
+// Make design tokens fit React Native's text styles' specific requirements and quirks
+function applyTextStyles({
   fontSize,
+  fontScaleCap,
   lineHeight,
   letterSpacing,
   fontWeight = '400',
@@ -24,22 +39,22 @@ export function applyTextStyles({
 
   if (typeof lineHeight === 'number') {
     // React Native expects absolute line heights but multipliers are better as design tokens
-    styles.lineHeight = lineHeight * (fontSize || fontBasePixels);
+    styles.lineHeight = lineHeight * (fontSize || _systemConstants.fontBasePixels);
   }
 
-  if (typeof letterSpacing === 'number') {
+  if (typeof letterSpacing === 'number' && letterSpacing) {
     // Same as for line heights - React Native expects absolute letter spacing value
-    styles.letterSpacing = letterSpacing * (fontSize || fontBasePixels);
+    styles.letterSpacing = letterSpacing * (fontSize || _systemConstants.fontBasePixels);
   }
 
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
+    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
-    styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
+    styles.fontWeight = _Platform.default.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
   } // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
   // Do while implementing advanced typography e.g. paragraph etc
   // https://github.com/telus/universal-design-system/issues/89
@@ -61,13 +76,16 @@ export function applyTextStyles({
  * @return {object}
  */
 
-export function applyShadowToken(shadowToken) {
+
+function applyShadowToken(shadowToken) {
   if (!shadowToken) return {};
-  const applyShadow = Platform.select({
+
+  const applyShadow = _Platform.default.select({
     web: () => applyWebShadow(shadowToken),
     ios: () => applyIosShadow(shadowToken),
     android: () => applyAndroidShadow(shadowToken)
   });
+
   return applyShadow();
 }
 
@@ -81,7 +99,7 @@ function applyWebShadow({
 }) {
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
+    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
   };
   return boxShadow;
 }
@@ -148,12 +166,30 @@ const verticalAlignToFlexRowAlign = {
   middle: 'center',
   bottom: 'flex-end'
 };
-export function verticalAlignRow(verticalAlign, reverse = false) {
+
+function verticalAlignRow(verticalAlign, reverse = false) {
   return {
     flexDirection: reverse ? 'row-reverse' : 'row',
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
   };
-} // React Native Views behave like flex blocks. There's no CSS 'display' and they can't inline themselves
+}
+/**
+ * Use on an outer container to create an outer border with an optional gap around it
+ * that matches the border radius of any inner border.
+ */
+
 
-export function applyLayoutStyles() {// TODO: map design tokens to styles that implement inline, stretch, center, etc
-}
+const applyOuterBorder = ({
+  outerBorderColor,
+  outerBorderWidth = 0,
+  outerBorderGap = 0,
+  borderRadius = 0
+}) => ({
+  margin: 0 - outerBorderWidth - outerBorderGap,
+  padding: outerBorderGap,
+  borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+  borderWidth: outerBorderWidth,
+  borderColor: outerBorderColor
+});
+
+exports.applyOuterBorder = applyOuterBorder;

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -1,3 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toArray = exports.getThemeTokens = exports.mergeAppearances = exports.validateThemeTokens = exports.resolveThemeTokens = exports.doesThemeRuleApply = exports.doesThemeConditionApply = exports.getComponentTheme = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
  * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
@@ -7,44 +18,64 @@
 /**
  * General utilities around working with theme tokens
  */
-export const getComponentTheme = (theme, componentName) => {
+const getComponentTheme = (theme, componentName) => {
+  var _theme$metadata;
+
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
+    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
   }
 
-  const themeName = theme.metadata?.name || '';
+  const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
+    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
+    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
   }
 
   return componentTheme;
 };
-export const doesThemeConditionApply = ([key, value], appearances) => {
+
+exports.getComponentTheme = getComponentTheme;
+
+const doesThemeConditionApply = ([key, value], appearances) => {
+  var _appearances$key;
+
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = appearances[key] ?? null;
+  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
-export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
+
+exports.doesThemeConditionApply = doesThemeConditionApply;
+
+const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
 /**
- * Turns a tokens prop and an optional tokens override prop (either or both of which may be a tokens getter function)
- * into one tokens set object where overrides are applied over the resolved default tokens.
+ * Turns a tokens prop (which may be either a tokens object or a tokens getter function)
+ * into one resolved tokens object, based on current appearances state.
+ *
+ * This is used inside `useThemeTokens` and `useThemeTokensCallback` for handling the `tokens`
+ * props of themed components. It may also be used directly in cases where a non-themed component
+ * needs to resolve a tokens prop that may be a tokens getter function or a resolved tokens object.
+ *
+ * A second tokens prop of tokens overrides may optionally be passed; it will be resolved to an object
+ * based on provided appearance state and then shallow-merged over the first set of tokens.
  *
  * @param {TokensProp} defaultTokens - a set of tokens or tokens getter function which may be overridden
- * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
  * @param {AppearanceSet} [appearances] - optional appearance set to pass to tokens getter functions
+ * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
  * @returns {TokensSet} - object containing resolved tokens with overrides applied
  */
 
-export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) => {
+
+exports.doesThemeRuleApply = doesThemeRuleApply;
+
+const resolveThemeTokens = (defaultTokens, appearances = {}, tokenOverrides) => {
   const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
 
   if (!tokenOverrides) return resolve(defaultTokens);
@@ -52,6 +83,30 @@ export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) =
     [tokenName]: tokenValue
   }, resolve(defaultTokens));
 };
+/**
+ * Gives a prop types error if a set of resolved tokens doesn't match a provided prop
+ * types validator.
+ *
+ * In production, this is a no-op (PropTypes.checkPropTypes is automatically replaced
+ * with a no-op function).
+ *
+ * @param {TokensSet} themeTokens - object containing resolved theme tokens
+ * @param {function} validator - PropTypes validator function
+ * @param {string} componentName - identifier to display in PropType error messages
+ */
+
+
+exports.resolveThemeTokens = resolveThemeTokens;
+
+const validateThemeTokens = (themeTokens, validator, componentName) => {
+  _propTypes.default.checkPropTypes({
+    tokens: validator
+  }, {
+    tokens: themeTokens
+  }, 'resolved token', componentName);
+
+  return themeTokens;
+};
 /**
  * Merges variants over states. Must be merged in that order to allow static showcases of a state,
  * e.g. `<Button variant={{ pressed: true }} />` where button's pressed state is `false` by default.
@@ -62,10 +117,28 @@ export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) =
  * @returns {AppearanceSet}
  */
 
-export const mergeAppearances = (variants = {}, states) => states ? { ...states,
+
+exports.validateThemeTokens = validateThemeTokens;
+
+const mergeAppearances = (variants = {}, states) => states ? { ...states,
   ...variants
 } : variants;
-export const getThemeTokens = ({
+/**
+ * Get a set of theme tokens by applying a theme's component rules based on a component's variants and state.
+ *
+ * This is used internally in `useThemeTokens` and `useThemeTokensCallback` and should not normally be called directly.
+ *
+ * @param {object} componentTheme - object containing a theme's `tokens` and `rules` for a component
+ * @param {object|function} [tokensProp] - UDS tokens prop containing theming overrides
+ * @param {object} [variants] - UDS variant prop containing the variant options for this component instance
+ * @param {object} [states] - object containing current state options for this component instance
+ * @returns {object} Set of resolved theme tokens
+ */
+
+
+exports.mergeAppearances = mergeAppearances;
+
+const getThemeTokens = ({
   rules = [],
   tokens: defaultThemeTokens = {}
 }, tokensProp, variants = {}, states) => {
@@ -75,6 +148,11 @@ export const getThemeTokens = ({
   const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? { ...mergedTokens,
     ...rule.tokens
   } : mergedTokens, defaultThemeTokens);
-  return resolveTokens(themeTokens, tokensProp, appearances);
+  return resolveThemeTokens(themeTokens, appearances, tokensProp);
 };
-export const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
+
+exports.getThemeTokens = getThemeTokens;
+
+const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
+
+exports.toArray = toArray;

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -1,12 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Platform, View, StyleSheet } from 'react-native';
-import ButtonBase from '../Button/ButtonBase';
-import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/propTypes';
-import { useInputValue } from '../utils/input';
-
-const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _input = require("../utils/input");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectButtonTokens = tokens => (0, _propTypes2.selectTokens)('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
   width: null
 }); // Map and rename icon-specific tokens to name used within Icon
@@ -14,10 +35,8 @@ const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
 
 const selectIconTokens = ({
   iconSize,
-  iconColor,
-  iconOpacity
+  iconColor
 }) => ({
-  opacity: iconOpacity,
   size: iconSize,
   color: iconColor
 });
@@ -48,8 +67,8 @@ const selectSwitchStyles = ({
   borderWidth: switchBorderWidth,
   borderColor: switchBorderColor,
   borderRadius: switchBorderRadius,
-  ...applyShadowToken(switchShadow),
-  ...Platform.select({
+  ...(0, _ThemeProvider.applyShadowToken)(switchShadow),
+  ..._Platform.default.select({
     // TODO: https://github.com/telus/universal-design-system/issues/487
     web: {
       transition: 'transform 200ms'
@@ -66,11 +85,11 @@ const ToggleSwitch = ({
   variant,
   accessibilityRole = 'switch'
 }) => {
-  const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const {
     currentValue,
     setValue
-  } = useInputValue({
+  } = (0, _input.useInputValue)({
     value,
     initialValue,
     onChange
@@ -80,7 +99,7 @@ const ToggleSwitch = ({
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
-  return /*#__PURE__*/React.createElement(ButtonBase, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     selected: currentValue,
     inactive: inactive,
     tokens: getButtonTokens,
@@ -88,66 +107,69 @@ const ToggleSwitch = ({
     accessibilityState: {
       checked: currentValue
     },
-    onPress: handlePress
-  }, buttonState => {
-    const themeTokens = getTokens(buttonState);
-    const IconComponent = themeTokens.icon;
-    const switchStyles = selectSwitchStyles(themeTokens);
-    const trackStyles = selectTrackStyles(themeTokens);
-    const iconTokens = selectIconTokens(themeTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-    // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-
-    const slideStart = 0;
-    const slideEnd = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
-    const switchOffset = buttonState.selected ? slideEnd : slideStart;
-    const switchPositionStyle = {
-      transform: [{
-        translateX: switchOffset
-      }]
-    };
-    return /*#__PURE__*/React.createElement(View, {
-      style: [staticStyles.track, trackStyles]
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [staticStyles.switch, switchStyles, switchPositionStyle]
-    }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
-      tokens: iconTokens
-    })));
+    onPress: handlePress,
+    children: buttonState => {
+      const themeTokens = getTokens(buttonState);
+      const IconComponent = themeTokens.icon;
+      const switchStyles = selectSwitchStyles(themeTokens);
+      const trackStyles = selectTrackStyles(themeTokens);
+      const iconTokens = selectIconTokens(themeTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
+      // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
+
+      const slideStart = 0;
+      const slideEnd = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
+      const switchOffset = buttonState.selected ? slideEnd : slideStart;
+      const switchPositionStyle = {
+        transform: [{
+          translateX: switchOffset
+        }]
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.track, trackStyles],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.switch, switchStyles, switchPositionStyle],
+          children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+          })
+        })
+      });
+    }
   });
 };
 
-ToggleSwitch.propTypes = { ...a11yProps.propTypes,
-  ...pressProps.propTypes,
-  tokens: getTokensPropType('ToggleSwitch'),
-  variant: variantProp.propType,
+ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
+  ..._propTypes2.pressProps.propTypes,
+  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
+  variant: _propTypes2.variantProp.propType,
 
   /**
    * If this is a "controlled" component and a parent handles its selected state,
    * tells the switch if it is on (true) or off (false).
    */
-  value: PropTypes.bool,
+  value: _propTypes.default.bool,
 
   /**
    * If this is an "uncontrolled" component that handles its own selected state,
    * optionally tells the switch if it should default to on (true) or off (false).
    */
-  initialValue: PropTypes.bool,
+  initialValue: _propTypes.default.bool,
 
   /**
    * Function called when the switch is toggled, with one boolean argument that is the
    * new position of the switch, on (true) or off (false). For "controlled" components,
    * this should always be passed and used to control the state of the switch.
    */
-  onChange: PropTypes.func,
+  onChange: _propTypes.default.func,
 
   /**
    * If passed, the switch does not respond to user input and may recieve different
    * theme tokens if the theme supports inactive appearance.
    */
-  inactive: PropTypes.bool
+  inactive: _propTypes.default.bool
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   track: {
-    flex: 1,
+    flexGrow: 1,
     alignSelf: 'stretch',
     flexDirection: 'row'
   },
@@ -156,4 +178,6 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'center'
   }
 });
-export default ToggleSwitch;
+
+var _default = ToggleSwitch;
+exports.default = _default;