@telus-uds/components-base 0.0.2-prerelease.9 → 1.0.0

package/lib/TextInput/TextInputBase.js

@@ -130,7 +130,7 @@ const selectIconContainerStyles = ({
   paddingBottom
 });
 
-function TextInputBase({
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   height,
   initialValue,
@@ -145,7 +145,7 @@ function TextInputBase({
   tokens,
   variant = {},
   ...remainingProps
-}) {
+}, ref) => {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = event => {
@@ -181,9 +181,12 @@ function TextInputBase({
     readOnly
   });
 
-  const handleChangeText = text => {
-    setValue(text);
-    if (typeof onChangeText === 'function') onChangeText(text);
+  const handleChangeText = event => {
+    var _event$nativeEvent, _event$target;
+
+    const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+    setValue(text, event);
+    if (typeof onChangeText === 'function') onChangeText(text, event);
   };
 
   const states = {
@@ -201,7 +204,7 @@ function TextInputBase({
     onBlur: handleBlur,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
-    onChangeText: handleChangeText,
+    onChange: handleChangeText,
     defaultValue: initialValue,
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
@@ -213,6 +216,7 @@ function TextInputBase({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: ref,
       style: nativeInputStyle,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -223,8 +227,8 @@ function TextInputBase({
       })
     })]
   });
-}
-
+});
+TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = {
   value: _propTypes.default.string,
   height: _propTypes.default.number,

package/lib/ThemeProvider/ThemeProvider.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.themeType = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
+exports.default = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("./utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,18 +23,18 @@ const uninitialisedError = new Error('Theme context used outside of ThemeProvide
 exports.uninitialisedError = uninitialisedError;
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
 exports.ThemeContext = ThemeContext;
-const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // TODO: develop this as theme metadata is added
-// https://github.com/telus/universal-design-system/issues/92
-
+const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
 exports.ThemeSetterContext = ThemeSetterContext;
-const themeType = _propTypes.default.object;
-exports.themeType = themeType;
 
 const ThemeProvider = ({
   children,
   defaultTheme
 }) => {
-  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
+  // This will intentionally break the application when attempting to use an invalid theme.
+  // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
+
+  (0, _utils.validateThemeTokensVersion)(theme);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
@@ -43,10 +45,12 @@ const ThemeProvider = ({
 };
 
 ThemeProvider.propTypes = {
-  // TODO: implement a custom propType that validates schema version
-  // https://github.com/telus/universal-design-system/issues/92
   children: _propTypes.default.node.isRequired,
-  defaultTheme: themeType.isRequired
+  defaultTheme: _propTypes.default.shape({
+    metadata: _propTypes.default.shape({
+      themeTokensVersion: _propTypes.default.string.isRequired
+    }).isRequired
+  }).isRequired
 };
 var _default = ThemeProvider;
 exports.default = _default;

package/lib/ThemeProvider/useSetTheme.js

@@ -11,7 +11,12 @@ var _ThemeProvider = require("./ThemeProvider");
 
 const useSetTheme = () => {
   // Replace current theme with provided object
-  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Merge provided object into current theme
+  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Fail fast if dev uses useSetTheme outside of ThemeProvider
+
+  if (setTheme instanceof Error) {
+    throw setTheme;
+  } // Merge provided object into current theme
+
 
   const editTheme = (0, _react.useCallback)(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
     ...newTheme

package/lib/ThemeProvider/utils/styles.js

@@ -50,7 +50,7 @@ function applyTextStyles({
   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 = "".concat(fontName).concat(fontWeight).concat(fontStyle);
+    styles.fontFamily = `${fontName}${fontWeight}${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'.
@@ -99,7 +99,7 @@ function applyWebShadow({
 }) {
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
+    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
   };
   return boxShadow;
 }

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

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toArray = exports.getThemeTokens = exports.mergeAppearances = exports.validateThemeTokens = exports.resolveThemeTokens = exports.doesThemeRuleApply = exports.doesThemeConditionApply = exports.getComponentTheme = void 0;
+exports.validateThemeTokensVersion = exports.toArray = exports.getThemeTokens = exports.mergeAppearances = exports.validateThemeTokens = exports.resolveThemeTokens = exports.doesThemeRuleApply = exports.doesThemeConditionApply = exports.getComponentTheme = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _satisfies = _interopRequireDefault(require("semver/functions/satisfies"));
+
+var _package = _interopRequireDefault(require("../../../package.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -24,19 +28,19 @@ 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 \"".concat(componentName, "\" with no theme provided"));
+    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
   }
 
   const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
+    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
+    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
   }
 
   return componentTheme;
@@ -45,10 +49,8 @@ const getComponentTheme = (theme, componentName) => {
 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 = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
+  const appearanceValue = appearances[key] ?? null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 
@@ -154,5 +156,34 @@ const getThemeTokens = ({
 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 => {
+  var _theme$metadata2;
+
+  const expectedThemeTokensVersion = _package.default.dependencies['@telus-uds/system-theme-tokens'];
+  const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.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/packages/docs-uds/docs/multi-brand-usage.md`);
+  }
+};
 
-exports.toArray = toArray;
+exports.validateThemeTokensVersion = validateThemeTokensVersion;

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,6 +27,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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
@@ -76,7 +80,7 @@ const selectSwitchStyles = ({
   })
 });
 
-const ToggleSwitch = ({
+const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
@@ -84,7 +88,7 @@ const ToggleSwitch = ({
   tokens,
   variant,
   accessibilityRole = 'switch'
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const {
     currentValue,
@@ -95,11 +99,12 @@ const ToggleSwitch = ({
     onChange
   });
 
-  const handlePress = () => setValue(!currentValue);
+  const handlePress = event => setValue(!currentValue, event);
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
     selected: currentValue,
     inactive: inactive,
     tokens: getButtonTokens,
@@ -134,8 +139,8 @@ const ToggleSwitch = ({
       });
     }
   });
-};
-
+});
+ToggleSwitch.displayName = 'ToggleSwitch';
 ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
   ..._propTypes2.pressProps.propTypes,
   tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),

package/lib/Tooltip/Backdrop.js

@@ -19,7 +19,15 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
+  node.style.cssText = `
+  position: absolute; 
+  top: ${window.scrollY}px;
+  left: ${window.scrollX}px; 
+  right: 0; 
+  bottom: 0; 
+  z-index: 9999; 
+  pointer-events: none;
+  `;
   document.body.appendChild(node);
   return node;
 }
@@ -39,7 +47,7 @@ function Backdrop({
 }) {
   const [portalNode, setPortalNode] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    const nodeId = "tooltip-backdrop-".concat(Date.now());
+    const nodeId = `tooltip-backdrop-${Date.now()}`;
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {

package/lib/Tooltip/Tooltip.js

@@ -161,14 +161,14 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime
  */
 
 
-const Tooltip = ({
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   content,
   position = 'auto',
   copy = 'en',
   tokens,
   variant
-}) => {
+}, ref) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)();
   const [controlLayout, setControlLayout] = (0, _react.useState)(null);
@@ -292,6 +292,7 @@ const Tooltip = ({
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
       onPress: close,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        ref: ref,
         style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
         tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
         ],
@@ -309,8 +310,8 @@ const Tooltip = ({
       })
     })]
   });
-};
-
+});
+Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the

package/lib/Typography/Typography.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,15 +25,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
- * If passed a string like 'h1', 'h2' etc, returns the heading number as a string,
- * else returns false
+ * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
-function getHeadingLevel(heading) {
-  const match = typeof heading === 'string' && heading.match(/^h(\d)$/);
-  return match && match[1];
-}
-
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -55,16 +53,18 @@ const selectTextStyles = ({
 }); // General-purpose flexible theme-neutral base component for text
 
 
-const Typography = ({
+const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant,
   heading,
+  tag = typeof heading === 'string' ? heading : undefined,
+  accessibilityRole = heading === true ? 'header' : undefined,
   block = false,
   align = undefined,
-  accessibilityRole = heading ? 'header' : 'text',
   tokens,
+  dataSet,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
@@ -73,34 +73,50 @@ const Typography = ({
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
     } : themeTokens),
+    dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const headingLevel = getHeadingLevel(heading);
-  const a11y = { ..._utils2.a11yProps.select(rest),
-    accessibilityRole,
-    // On React Native Web, `accessibilityLevel` controls which heading tag (h1, h2 etc) is used.
-    ...(headingLevel && {
-      accessibilityLevel: headingLevel
-    })
+  const a11y = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils2.a11yProps.select(rest)
   };
-  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...a11y,
+  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...a11y,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
       children: children
     })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    ref: ref,
+    ...textProps,
     ...a11y,
     children: children
   });
-};
-
+});
+Typography.displayName = 'Typography';
 Typography.propTypes = { ..._utils2.a11yProps.types,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 
   /**
-   * If truthy, will render a heading; if a html heading tag is provided, uses that tag on Web
+   * 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.default.oneOf([..._utils2.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".
    */
-  heading: _propTypes.default.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  tag: _propTypes.default.oneOf(_utils2.textTags),
 
   /**
    * If true, forces the element to behave as a View block even if nested in other text

package/lib/index.js

@@ -16,6 +16,7 @@ var _exportNames = {
   Feedback: true,
   Fieldset: true,
   FlexGrid: true,
+  HorizontalScroll: true,
   Icon: true,
   IconButton: true,
   InputLabel: true,
@@ -122,6 +123,12 @@ Object.defineProperty(exports, "FlexGrid", {
     return _FlexGrid.default;
   }
 });
+Object.defineProperty(exports, "HorizontalScroll", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalScroll.default;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () {
@@ -367,6 +374,20 @@ var _Fieldset = _interopRequireDefault(require("./Fieldset"));
 
 var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
 
+var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
+
+Object.keys(_HorizontalScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HorizontalScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HorizontalScroll[key];
+    }
+  });
+});
+
 var _Icon = _interopRequireWildcard(require("./Icon"));
 
 Object.keys(_Icon).forEach(function (key) {

package/lib/utils/a11y/index.js

@@ -15,4 +15,17 @@ Object.keys(_textSize).forEach(function (key) {
       return _textSize[key];
     }
   });
+});
+
+var _semantics = require("./semantics");
+
+Object.keys(_semantics).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _semantics[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _semantics[key];
+    }
+  });
 });