@telus-uds/components-base 2.5.0 → 3.0.0

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

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateThemeTokensVersion = exports.validateThemeTokens = exports.toArray = exports.resolveThemeTokens = exports.mergeAppearances = exports.getThemeTokens = exports.getComponentTheme = exports.doesThemeRuleApply = exports.doesThemeConditionApply = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _satisfies = _interopRequireDefault(require("semver/functions/satisfies"));
+var _package = _interopRequireDefault(require("../../../package.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../../utils/props/tokens.js').TokensSet} TokensSet
+ */
+
+/**
+ * General utilities around working with theme tokens
+ */
+
+const getComponentTheme = (theme, componentName) => {
+  // 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`);
+  }
+  const themeName = theme.metadata?.name || '';
+  if (!theme.components) {
+    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
+  }
+  const componentTheme = theme.components[componentName];
+  if (!componentTheme) {
+    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
+  }
+  return componentTheme;
+};
+exports.getComponentTheme = getComponentTheme;
+const doesThemeConditionApply = (_ref, appearances) => {
+  let [key, value] = _ref;
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+exports.doesThemeConditionApply = doesThemeConditionApply;
+const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
+
+/**
+ * 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 {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
+ */
+exports.doesThemeRuleApply = doesThemeRuleApply;
+const resolveThemeTokens = function (defaultTokens) {
+  let appearances = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let tokenOverrides = arguments.length > 2 ? arguments[2] : undefined;
+  const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
+  if (!tokenOverrides) return resolve(defaultTokens);
+  return Object.entries(resolve(tokenOverrides)).reduce((mergedTokens, _ref2) => {
+    let [tokenName, tokenValue] = _ref2;
+    return tokenValue === undefined ? mergedTokens : {
+      ...mergedTokens,
+      [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.
+ * Returns an empty object if both variants and states are undefined.
+ *
+ * @param {AppearanceSet} [variants]
+ * @param {AppearanceSet} [states]
+ * @returns {AppearanceSet}
+ */
+exports.validateThemeTokens = validateThemeTokens;
+const mergeAppearances = function () {
+  let variants = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let states = arguments.length > 1 ? arguments[1] : undefined;
+  return states ? {
+    ...states,
+    ...variants
+  } : variants;
+};
+
+/**
+ * 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 = function (_ref3, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref3;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = mergeAppearances(variants, states);
+  // TODO: if in dev mode, validate the appearances and provided propTokens
+
+  // Get the theme's default tokens set and merge tokens from applicable theme rules over it
+  const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? {
+    ...mergedTokens,
+    ...rule.tokens
+  } : mergedTokens, defaultThemeTokens);
+  return resolveThemeTokens(themeTokens, appearances, tokensProp);
+};
+exports.getThemeTokens = getThemeTokens;
+const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
+
+/**
+ * Throws an error if the theme was built with an incompatible version of @telus-uds/system-theme-tokens
+ *
+ * This is used internally by the ThemeProvider to force a fast failure when an incompatible version is detected.
+ *
+ * Version compatibility is calculated with semver.satisfies.
+ * Refer to https://github.com/npm/node-semver and https://semver.npmjs.com/ for details about how
+ * semver compatibility.
+ *
+ * @param {object} theme - UDS theme built for react-native
+ */
+exports.toArray = toArray;
+const validateThemeTokensVersion = theme => {
+  const expectedThemeTokensVersion = _package.default.dependencies['@telus-uds/system-theme-tokens'];
+  const actualThemeTokensVersion = theme?.metadata?.themeTokensVersion;
+  if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
+    throw new Error(`Invalid UDS token schema version detected.
+
+The UDS base components ${_package.default.name} v${_package.default.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
+
+If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md`);
+  }
+};
+exports.validateThemeTokensVersion = validateThemeTokensVersion;

package/lib/cjs/Timeline/Timeline.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectDotStyles = _ref => {
+  let {
+    dotWidth,
+    timelineColor,
+    dotBorderWidth,
+    dotColor
+  } = _ref;
+  return {
+    width: dotWidth,
+    height: dotWidth,
+    borderRadius: dotWidth / 2,
+    backgroundColor: dotColor,
+    borderWidth: dotBorderWidth,
+    borderColor: timelineColor
+  };
+};
+const selectConnectorStyles = _ref2 => {
+  let {
+    timelineConnectorColor,
+    connectorHeight,
+    connectorWidth
+  } = _ref2;
+  return {
+    width: connectorWidth,
+    height: connectorHeight,
+    backgroundColor: timelineConnectorColor
+  };
+};
+const selectTimelineContainerStyle = _ref3 => {
+  let {
+    timelineContainerDirection
+  } = _ref3;
+  return {
+    flexDirection: timelineContainerDirection
+  };
+};
+const selectLineItemStyles = _ref4 => {
+  let {
+    lineItemAlign,
+    lineItemDirection,
+    lineItemMarginBottom,
+    lineItemMarginRight
+  } = _ref4;
+  return {
+    alignItems: lineItemAlign,
+    flexDirection: lineItemDirection,
+    marginBottom: lineItemMarginBottom,
+    marginRight: lineItemMarginRight,
+    overflow: 'hidden'
+  };
+};
+const selectLineItemContainer = _ref5 => {
+  let {
+    lineItemContainerDirection,
+    lineContainerFlexSize
+  } = _ref5;
+  return {
+    flexDirection: lineItemContainerDirection,
+    flex: lineContainerFlexSize
+  };
+};
+const selectItemContentStyles = (_ref6, isLastChild) => {
+  let {
+    itemContentFlexSize,
+    itemContentMarginBottom,
+    itemContentMarginRight
+  } = _ref6;
+  return {
+    flex: itemContentFlexSize,
+    marginBottom: !isLastChild && itemContentMarginBottom,
+    marginRight: !isLastChild && itemContentMarginRight
+  };
+};
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+/**
+ * Timeline is a component that displays either a horizontal or vertical list of the
+ * children components passed by props
+ *
+ * ## Component API
+ *
+ * - `horizontal` In order to display the Component list horizontally
+ *
+ *
+ * ## A11y guidelines
+ * Timeline link supports all the common a11y props.
+ */
+const Timeline = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+  let {
+    tokens,
+    variant = {},
+    children,
+    accessibilityLabel,
+    tag = 'ul',
+    childrenTag = 'li',
+    ...rest
+  } = _ref7;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Timeline', tokens, variant, {
+    viewport
+  });
+  const containerProps = {
+    ...selectProps(rest),
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole || 'list'),
+    accessibilityLabel
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...containerProps,
+    ref: ref,
+    style: selectTimelineContainerStyle(themeTokens),
+    children: children.map((child, index) => {
+      const accessibilityRole = _Platform.default.OS !== 'android' ? 'listitem' : undefined;
+      const childrenProps = {
+        ...(0, _utils.getA11yPropsFromHtmlTag)(childrenTag, child?.props?.accessibilityRole || accessibilityRole)
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectLineItemContainer(themeTokens)
+        // eslint-disable-next-line react/no-array-index-key
+        ,
+        ...childrenProps,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: selectLineItemStyles(themeTokens),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectDotStyles(themeTokens)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectConnectorStyles(themeTokens)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
+          children: child
+        })]
+      }, `timeline-${index}-${child.displayName}`);
+    })
+  });
+});
+Timeline.displayName = 'Timeline';
+Timeline.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('Timeline'),
+  variant: _utils.variantProp.propType,
+  /**
+   * A list of components that will be rendered either horizontally or vertically
+   */
+  children: _propTypes.default.arrayOf(_propTypes.default.node).isRequired,
+  /**
+   * A required accessibility label that needs to be passed to be used on List
+   * which is applied as normal for a React Native accessibilityLabel prop.
+   */
+  accessibilityLabel: _propTypes.default.string.isRequired,
+  /**
+   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
+   * and `'ul'` for the container
+   *
+   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
+   *
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  childrenTag: _propTypes.default.oneOf(_utils.layoutTags)
+};
+var _default = exports.default = Timeline;

package/lib/cjs/Timeline/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Timeline = _interopRequireDefault(require("./Timeline"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Timeline.default;

package/lib/cjs/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,286 @@
+"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+var _StackView = _interopRequireDefault(require("../StackView"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _input = require("../utils/input");
+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.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+
+// We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
+const selectButtonTokens = (_ref, _ref2) => {
+  let {
+    icon: _,
+    ...tokens
+  } = _ref;
+  let {
+    trackHeight,
+    outerBorderGapButton
+  } = _ref2;
+  return (0, _utils.selectTokens)('Button', {
+    ...tokens,
+    // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    outerBorderGap: outerBorderGapButton,
+    height: trackHeight,
+    width: null
+  });
+};
+
+// Map and rename icon-specific tokens to name used within Icon
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
+const selectTrackSwitchStyles = _ref4 => {
+  let {
+    switchSize,
+    width,
+    trackHeight
+  } = _ref4;
+  return {
+    width,
+    height: Math.max(switchSize, trackHeight)
+  };
+};
+const selectTrackStyles = _ref5 => {
+  let {
+    trackBorderWidth,
+    trackBorderColor,
+    trackBorderRadius,
+    width
+  } = _ref5;
+  return {
+    borderWidth: trackBorderWidth,
+    borderColor: trackBorderColor,
+    borderRadius: trackBorderRadius,
+    width
+  };
+};
+const selectSwitchStyles = _ref6 => {
+  let {
+    switchSize,
+    switchColor,
+    switchBorderWidth,
+    switchBorderColor,
+    switchBorderRadius,
+    switchShadow
+  } = _ref6;
+  return {
+    position: 'absolute',
+    width: switchSize,
+    height: switchSize,
+    backgroundColor: switchColor,
+    borderWidth: switchBorderWidth,
+    borderColor: switchBorderColor,
+    borderRadius: switchBorderRadius,
+    ...(0, _ThemeProvider.applyShadowToken)(switchShadow),
+    ..._Platform.default.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: {
+        transition: 'transform 200ms'
+      }
+    })
+  };
+};
+const selectLabelStyles = _ref7 => {
+  let {
+    labelMarginLeft
+  } = _ref7;
+  return {
+    marginLeft: labelMarginLeft
+  };
+};
+const selectLabelTokens = _ref8 => {
+  let {
+    labelColor,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelLineHeight
+  } = _ref8;
+  return {
+    color: labelColor,
+    fontName: labelFontName,
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight
+  };
+};
+const ToggleSwitch = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
+  let {
+    copy = 'en',
+    value,
+    initialValue,
+    onChange,
+    id,
+    label,
+    inactive,
+    tokens,
+    tooltip,
+    variant,
+    accessibilityRole = 'switch',
+    accessibilityLabel = label,
+    ...rest
+  } = _ref9;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
+  const themeTokens = getTokens();
+  const {
+    currentValue,
+    setValue
+  } = (0, _input.useInputValue)({
+    value,
+    initialValue,
+    onChange
+  });
+  const handlePress = event => setValue(!currentValue, event);
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState), getTokens(themeTokens));
+  const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
+  const inputId = id ?? uniqueId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: themeTokens.space,
+    direction: "row",
+    tokens: {
+      alignItems: 'center'
+    },
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [selectLabelStyles(themeTokens), staticStyles.containText],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        copy: copy,
+        forId: inputId,
+        label: label,
+        tokens: selectLabelTokens(themeTokens),
+        tooltip: tooltip
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      id: id,
+      ref: ref,
+      selected: currentValue,
+      inactive: inactive,
+      tokens: getButtonTokens,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: accessibilityRole,
+      accessibilityState: {
+        checked: currentValue
+      },
+      onPress: handlePress,
+      ...selectProps(rest),
+      children: buttonState => {
+        const stateTokens = getTokens(buttonState);
+        const IconComponent = stateTokens.icon;
+        const switchStyles = selectSwitchStyles(stateTokens);
+        const trackStyles = selectTrackStyles(stateTokens);
+        const iconTokens = selectIconTokens(stateTokens);
+        const trackSwitchStyles = selectTrackSwitchStyles(stateTokens);
+        const {
+          switchSize,
+          trackHeight,
+          width,
+          trackBorderWidth
+        } = stateTokens;
+        // 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.
+        // Two different translates depending on the switchSize and trackSize relationship.
+        const isSwitchTallerThanTrack = switchSize >= trackHeight;
+        const slideStart = isSwitchTallerThanTrack ? 0 : trackBorderWidth;
+        const slideEnd = isSwitchTallerThanTrack ? width - switchSize : width - switchSize - trackBorderWidth;
+        const switchOffset = buttonState.selected ? slideEnd : slideStart;
+        const switchPositionStyle = {
+          transform: [{
+            translateX: switchOffset
+          }]
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          nativeID: "trackSwitch",
+          style: [trackSwitchStyles, staticStyles.trackSwitch],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.track, trackStyles]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.switch, switchStyles, switchPositionStyle],
+            children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+              ...iconTokens
+            })
+          })]
+        });
+      }
+    })]
+  });
+});
+ToggleSwitch.displayName = 'ToggleSwitch';
+ToggleSwitch.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
+  variant: _utils.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.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.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.default.func,
+  /**
+   * Input ID.
+   */
+  id: _propTypes.default.string,
+  /**
+   * An optional label.
+   */
+  label: _propTypes.default.string,
+  /**
+   * If passed, the switch does not respond to user input and may recieve different
+   * theme tokens if the theme supports inactive appearance.
+   */
+  inactive: _propTypes.default.bool,
+  /**
+   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string
+};
+const staticStyles = _StyleSheet.default.create({
+  track: {
+    flexDirection: 'row'
+  },
+  switch: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  containText: {
+    flexShrink: 1
+  },
+  trackSwitch: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+var _default = exports.default = ToggleSwitch;