@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Typography/Typography.js

@@ -1,266 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider';
-import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag, StyleSheet, createMediaQueryStyles } from '../utils';
-import { useViewport } from '../ViewportProvider';
-/**
- * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
-const selectTextStyles = (_ref, themeOptions) => {
-  let {
-    fontWeight,
-    fontSize,
-    color,
-    lineHeight,
-    fontName,
-    textAlign,
-    textTransform,
-    letterSpacing,
-    textDecorationLine,
-    gradient
-  } = _ref;
-  return applyTextStyles({
-    fontWeight,
-    fontSize,
-    color,
-    lineHeight,
-    fontName,
-    themeOptions,
-    textAlign,
-    textTransform,
-    letterSpacing,
-    textDecorationLine,
-    gradient
-  });
-};
-const HALF_FONT_SIZE = 2;
-const QUARTER_FONT_SIZE = 4;
-const selectMobileSubSupStyles = (_ref2, type) => {
-  let {
-    fontSize
-  } = _ref2;
-  return {
-    fontSize: fontSize / HALF_FONT_SIZE,
-    lineHeight: fontSize,
-    position: 'relative',
-    top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
-  };
-};
-
-// General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    children,
-    variant,
-    heading,
-    tag = typeof heading === 'string' ? heading : undefined,
-    accessibilityRole = heading === true ? 'header' : undefined,
-    block = false,
-    align = undefined,
-    tokens,
-    dataSet,
-    strikeThrough = false,
-    ...rest
-  } = _ref3;
-  const viewport = useViewport();
-  const {
-    themeOptions
-  } = useTheme();
-  const {
-    enableMediaQueryStyleSheet
-  } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
-  const themeTokens = useTokens('Typography', tokens, variant, !enableMediaQueryStyleSheet && {
-    viewport
-  });
-  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
-  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
-  const generateGradientString = gradientObj => {
-    let gradientStr = '';
-    const {
-      type,
-      angle,
-      stops: [stopOne, stopTwo],
-      specification
-    } = gradientObj;
-    if (type === 'radial') {
-      gradientStr = `radial-gradient(${specification}`;
-      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
-    } else if (type === 'linear') {
-      gradientStr = `linear-gradient(${angle}deg`;
-      if (angle === 135) {
-        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
-      } else {
-        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
-      }
-    }
-    gradientStr += ')';
-    return gradientStr;
-  };
-  const getStyleWithGradient = styles => {
-    return styles.gradient ? {
-      ...styles,
-      color: 'transparent',
-      backgroundImage: generateGradientString(styles.gradient),
-      backgroundClip: 'text'
-    } : styles;
-  };
-  let textStyles;
-  let mediaIds;
-  if (enableMediaQueryStyleSheet) {
-    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
-      let [vp, viewportTokens] = _ref4;
-      acc[vp] = selectTextStyles({
-        textAlign: align,
-        textDecorationLine,
-        ...viewportTokens
-      }, themeOptions);
-      if (themeTokens[vp].gradient) {
-        const tokensWithGradient = {
-          ...acc[vp],
-          color: 'transparent',
-          backgroundImage: generateGradientString(themeTokens[vp].gradient),
-          backgroundClip: 'text'
-        };
-        return {
-          ...acc,
-          [vp]: tokensWithGradient
-        };
-      }
-      return acc;
-    }, {});
-    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
-    const {
-      ids,
-      styles
-    } = StyleSheet.create({
-      text: mediaQueryStyles
-    });
-    textStyles = styles.text;
-    mediaIds = ids.text;
-  } else {
-    textStyles = selectTextStyles({
-      textAlign: align,
-      textDecorationLine,
-      ...themeTokens
-    }, themeOptions);
-  }
-  const resolvedTextProps = {
-    ...selectTextProps(rest),
-    maxFontSizeMultiplier
-  };
-  const containerProps = {
-    accessibilityRole,
-    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...selectContainerProps(rest)
-  };
-  const resetTagStyling = child => {
-    var _child$props;
-    if (typeof child !== 'object' || !((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
-      return child;
-    }
-    const childStyles = (child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
-    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
-    const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
-    const isSubSup = (child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup';
-    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child === null || child === void 0 ? void 0 : child.type) : {};
-    const defaultStyles = !isMobile && isSubSup ? {
-      fontSize: supFontSize,
-      lineHeight: 0
-    } : {};
-    const sanitizedChild = /*#__PURE__*/React.cloneElement(isMobile && isSubSup ? /*#__PURE__*/_jsx(View, {
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [childStyles, mobileStyles],
-        children: child.props.children
-      })
-    }) : child, {
-      style: {
-        ...childStyles,
-        ...defaultStyles
-      }
-    });
-    return sanitizedChild;
-  };
-  const sanitizeChildren = () => {
-    if (Array.isArray(children)) {
-      return children.map(resetTagStyling);
-    }
-    return resetTagStyling(children);
-  };
-  const dataSetValue = mediaIds ? {
-    media: mediaIds,
-    ...dataSet
-  } : dataSet;
-  return block ? /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    ...containerProps,
-    children: /*#__PURE__*/_jsx(Text, {
-      ...resolvedTextProps,
-      style: getStyleWithGradient(textStyles),
-      dataSet: dataSetValue,
-      children: sanitizeChildren(children)
-    })
-  }) : /*#__PURE__*/_jsx(Text, {
-    ref: ref,
-    ...containerProps,
-    ...resolvedTextProps,
-    style: getStyleWithGradient(textStyles),
-    dataSet: dataSetValue,
-    children: sanitizeChildren(children)
-  });
-});
-Typography.displayName = 'Typography';
-Typography.propTypes = {
-  ...selectedContainerPropTypes,
-  ...selectedTextPropTypes,
-  tokens: getTokensPropType('Typography'),
-  variant: variantProp.propType,
-  /**
-   * Renders the text with "text-decoration: 'line-through'" applied.
-   */
-  strikeThrough: PropTypes.bool,
-  /**
-   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
-   *
-   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
-   * Use both `heading` and `variant` props to render semantic headings that look like headings.
-   *
-   * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  heading: PropTypes.oneOf([...headingTags, true]),
-  /**
-   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
-   *
-   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
-   *
-   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  tag: PropTypes.oneOf(textTags),
-  /**
-   * If true, forces the element to behave as a View block even if nested in other text
-   */
-  block: PropTypes.bool,
-  /**
-   * Works the same as css text-align, note that RN doesn't support "start" or "end" (see https://reactnative.dev/docs/text-style-props#textalign)
-   * Justify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)
-   */
-  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
-  /**
-   * Same children allowed as a React Native <Text> node
-   */
-  children: PropTypes.node,
-  /**
-   * Data attributes to be added to the element
-   */
-  dataSet: PropTypes.object
-};
-export default Typography;

package/lib/Validator/Validator.js

@@ -1,226 +0,0 @@
-import React from 'react';
-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 { inputSupportsProps, selectSystemProps } from '../utils';
-import { TextInput } from '../TextInput';
-import StackView from '../StackView';
-import InputSupports from '../InputSupports';
-import { useThemeTokens } from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps]);
-const selectCodeTextInputTokens = _ref => {
-  let {
-    outerBorderColor,
-    outerBackgroundColor
-  } = _ref;
-  return {
-    outerBorderColor,
-    outerBackgroundColor,
-    icon: null
-  };
-};
-const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    value = '',
-    inactive,
-    mask = '',
-    onChange,
-    tokens = {},
-    variant = {},
-    ...rest
-  } = _ref2;
-  const defaultRef = React.useRef();
-  const codeRef = ref ?? defaultRef;
-  const {
-    supportsProps
-  } = selectProps(rest);
-  const strValidation = supportsProps.validation;
-  const [individualCodes, setIndividualCodes] = React.useState({});
-  const [text, setText] = React.useState(value);
-  const validatorsLength = 6;
-  const prefix = 'code';
-  const sufixValidation = 'Validation';
-  const [isHover, setIsHover] = React.useState(false);
-  const handleMouseOver = () => {
-    setIsHover(true);
-  };
-  const handleMouseOut = () => {
-    setIsHover(false);
-  };
-  const themeTokens = useThemeTokens('TextInput', tokens, variant, {
-    hover: isHover
-  });
-  const [codeReferences, singleCodes] = React.useMemo(() => {
-    const codes = [];
-    const valueCodes = {};
-    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-      codes[prefix + i] = /*#__PURE__*/React.createRef();
-      valueCodes[prefix + i] = '';
-      valueCodes[prefix + i + sufixValidation] = '';
-    }
-    return [codes, valueCodes];
-  }, []);
-  const handleSingleCodes = (codeId, val, validation) => {
-    singleCodes[codeId] = val;
-    singleCodes[codeId + sufixValidation] = validation;
-    /* eslint-disable no-unused-expressions */
-    setIndividualCodes({
-      ...individualCodes,
-      [codeId]: val
-    });
-  };
-  const changeDataMasking = boxElement => {
-    let charMasking = '';
-    const element = boxElement;
-    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
-    if (charMasking) element.value = charMasking;
-  };
-  const handleChangeCode = () => {
-    let code = '';
-    for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
-    if (typeof onChange === 'function') onChange(code, singleCodes);
-  };
-  const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value;
-    const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
-    const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    if (Number(val).toString() === 'NaN') {
-      codeElement.value = singleCodes[codeId] ?? '';
-      return;
-    }
-    handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
-    handleChangeCode();
-    if (nextIndex === validatorsLength) {
-      codeElement.blur();
-      changeDataMasking(codeElement);
-      return;
-    }
-    if ((codeElement === null || codeElement === void 0 || (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
-      codeReferences[prefix + nextIndex].current.focus();
-      changeDataMasking(codeElement);
-    }
-  };
-  const handleKeyPress = (event, currentIndex, previousIndex) => {
-    if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
-    if (currentIndex > 0) {
-      codeReferences[prefix + currentIndex].current.value = '';
-      codeReferences[prefix + previousIndex].current.focus();
-    }
-    handleSingleCodes(prefix + currentIndex, '', '');
-    handleChangeCode();
-  };
-  const getCodeComponents = () => {
-    const components = [];
-    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
-      const codeId = prefix + i;
-      const codeInputProps = {
-        nativeID: codeId,
-        keyboardType: 'numeric',
-        ref: codeReferences[codeId] ?? null,
-        validation: strValidation || singleCodes[codeId + sufixValidation],
-        tokens: selectCodeTextInputTokens(themeTokens),
-        onFocus: () => {
-          var _codeReferences$codeI2;
-          return ((_codeReferences$codeI2 = codeReferences[codeId]) === null || _codeReferences$codeI2 === void 0 || (_codeReferences$codeI2 = _codeReferences$codeI2.current) === null || _codeReferences$codeI2 === void 0 ? void 0 : _codeReferences$codeI2.select()) ?? null;
-        },
-        onKeyPress: event => handleKeyPress(event, i, i - 1),
-        onMouseOver: handleMouseOver,
-        onMouseOut: handleMouseOut,
-        inactive
-      };
-      codeInputProps.validation || delete codeInputProps.validation;
-      components.push(/*#__PURE__*/_jsx(View, {
-        style: staticStyles.codeInputWidth,
-        children: /*#__PURE__*/_jsx(TextInput, {
-          ...codeInputProps
-        })
-      }, codeId));
-    }
-    return components;
-  };
-  React.useEffect(() => {
-    /* eslint-disable no-unused-expressions */
-    if (Number(value).toString() !== 'NaN') setText(value);
-  }, [value]);
-
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(() => {
-    for (let i = 0; i < validatorsLength; i += 1) {
-      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
-      handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
-    }
-  }, [text]);
-
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(() => {
-    const handlePasteCode = event => {
-      setText('');
-      const clipBoardText = event.clipboardData.getData('text');
-      if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText);
-    };
-    const handleCopy = event => {
-      let clipBoardText = '';
-      for (let i = 0; i < validatorsLength; i += 1) singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i]);
-      event.clipboardData.setData('text/plain', clipBoardText);
-      event.preventDefault();
-    };
-    if (Platform.OS === 'web') {
-      for (let i = 0; i < validatorsLength; i += 1) {
-        codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode);
-        codeReferences[prefix + i].current.addEventListener('copy', handleCopy);
-        codeReferences[prefix + i].current.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
-      }
-    }
-    return () => {
-      if (Platform.oldValue === 'web') {
-        for (let i = 0; i < validatorsLength; i += 1) {
-          var _codeReferences, _codeReferences2, _codeReferences3;
-          (_codeReferences = codeReferences[prefix + i]) === null || _codeReferences === void 0 || (_codeReferences = _codeReferences.current) === null || _codeReferences === void 0 || _codeReferences.removeEventListener('paste', handlePasteCode);
-          (_codeReferences2 = codeReferences[prefix + i]) === null || _codeReferences2 === void 0 || (_codeReferences2 = _codeReferences2.current) === null || _codeReferences2 === void 0 || _codeReferences2.removeEventListener('copy', handleCopy);
-          (_codeReferences3 = codeReferences[prefix + i]) === null || _codeReferences3 === void 0 || (_codeReferences3 = _codeReferences3.current) === null || _codeReferences3 === void 0 || _codeReferences3.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
-        }
-      }
-    };
-  }, []);
-  return /*#__PURE__*/_jsx(InputSupports, {
-    ...supportsProps,
-    feedbackProps: {
-      ...(rest === null || rest === void 0 ? void 0 : rest.feedbackProps),
-      showFeedbackIcon: true
-    },
-    children: /*#__PURE__*/_jsx(StackView, {
-      space: 2,
-      direction: "row",
-      ref: codeRef,
-      children: getCodeComponents()
-    })
-  });
-});
-Validator.displayName = 'Validator';
-Validator.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
-   */
-  value: PropTypes.string,
-  /**
-   * If true, the component is inactive and non editable.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * Show masked characters and obscure the actual input. For example: '*'
-   */
-  mask: PropTypes.string,
-  /**
-   * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
-   */
-  onChange: PropTypes.func
-};
-export default Validator;
-const staticStyles = StyleSheet.create({
-  codeInputWidth: {
-    width: 43
-  }
-});

package/lib/ViewportProvider/useViewportListener.js

@@ -1,37 +0,0 @@
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import { viewports } from '@telus-uds/system-constants';
-import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
-
-// Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
-// to update on every pixel change during window resize; but we only want rerenders to occur
-// when a viewport threshold has been crossed.
-const lookupViewport = () => viewports.select(Dimensions.get('window').width);
-
-/**
- * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
- * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
- * is shown to the user. Then bind events to update the viewport if it changes.
- */
-const useViewportListener = setViewport => {
-  useSafeLayoutEffect(() => {
-    setViewport(lookupViewport());
-    const onChange = _ref => {
-      let {
-        window
-      } = _ref;
-      return setViewport(viewports.select(window.width));
-    };
-    const listener = Dimensions.addEventListener('change', onChange);
-    return () => {
-      if (typeof (listener === null || listener === void 0 ? void 0 : listener.remove) === 'function') {
-        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
-        // See https://github.com/facebook/react-native/issues/34508
-        listener.remove();
-        // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
-      } else if (typeof Dimensions.removeEventListener === 'function') {
-        Dimensions.removeEventListener('change', onChange);
-      }
-    };
-  }, [setViewport]);
-};
-export default useViewportListener;

package/lib/index.js

@@ -1,71 +0,0 @@
-export { default as A11yText } from './A11yText';
-export { default as ActionCard } from './ActionCard';
-export { default as ActivityIndicator } from './ActivityIndicator';
-export { default as Autocomplete } from './Autocomplete';
-export { default as Box } from './Box';
-export { default as Badge } from './Badge';
-export * from './Button';
-export { default as Card, PressableCardBase } from './Card';
-export { default as CardGroup } from './CardGroup';
-export * from './Carousel';
-export { default as FileUpload } from './FileUpload';
-export { default as Listbox } from './Listbox';
-export { default as Checkbox } from './Checkbox';
-export * from './Checkbox';
-export { default as CheckboxCard } from './CheckboxCard';
-export { default as CheckboxCardGroup } from './CheckboxCardGroup';
-export { default as ColourToggle } from './ColourToggle';
-export { default as DownloadApp } from './DownloadApp';
-export { default as Divider } from './Divider';
-export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
-export { default as Feedback } from './Feedback';
-export { default as Fieldset } from './Fieldset';
-export { default as FlexGrid } from './FlexGrid';
-export { default as Footnote } from './Footnote';
-export { default as HorizontalScroll, horizontalScrollUtils, HorizontalScrollButton } from './HorizontalScroll';
-export { default as Icon, IconText, iconComponentPropTypes } from './Icon';
-export { default as IconButton } from './IconButton';
-export { default as InputLabel } from './InputLabel';
-export { default as InputSupports } from './InputSupports';
-export * from './Link';
-export { default as List, ListItem, ListBase } from './List';
-export { default as Modal } from './Modal';
-export { default as MultiSelectFilter } from './MultiSelectFilter';
-export { default as Notification } from './Notification';
-export { default as OrderedList } from './OrderedList';
-export { default as Pagination } from './Pagination';
-export { default as PriceLockup } from './PriceLockup';
-export { default as ProductCard } from './ProductCard';
-export { default as ProductCardGroup } from './ProductCardGroup';
-export { default as Progress } from './Progress';
-export { default as QuickLinks } from './QuickLinks';
-export { default as QuickLinksFeature } from './QuickLinksFeature';
-export { default as Radio, RadioGroup } from './Radio';
-export { default as RadioCard, RadioCardGroup } from './RadioCard';
-export { default as Responsive } from './Responsive';
-export { default as Search } from './Search';
-export { default as Select } from './Select';
-export { default as SideNav } from './SideNav';
-export { default as Skeleton } from './Skeleton';
-export { default as SkipLink } from './SkipLink';
-export { default as Spacer } from './Spacer';
-export { default as StackView, StackWrap, getStackedContent } from './StackView';
-export { default as Status } from './Status';
-export { default as StepTracker } from './StepTracker';
-export { default as Tabs } from './Tabs';
-export { default as TabBar } from './TabBar';
-export { default as Tags } from './Tags';
-export * from './TextInput';
-export { default as Timeline } from './Timeline';
-export * from './ToggleSwitch';
-export { default as Tooltip } from './Tooltip';
-export { default as TooltipButton } from './TooltipButton';
-export { default as Typography } from './Typography';
-export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
-export { default as BaseProvider } from './BaseProvider';
-export { useHydrationContext } from './BaseProvider/HydrationContext';
-export { default as Validator } from './Validator';
-export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens } from './ThemeProvider';
-export * from './utils';
-export { default as Portal } from './Portal';