@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/es6/tabs/lib/TabsPanel.js

@@ -1,58 +1,33 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
 import styled from '@emotion/styled';
 import { createSubcomponent, useMountLayout, createElemPropsHook, hideMouseFocus, } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { useTabsModel } from './useTabsModel';
-var StyledTabsPanel = styled(Box)(hideMouseFocus);
-export var useTabsPanel = createElemPropsHook(useTabsModel)(function (_a, _, elemProps) {
-    var _b;
-    var state = _a.state, events = _a.events;
-    if (elemProps === void 0) { elemProps = {}; }
-    var _c = React.useState(elemProps['data-id'] || ((_b = elemProps.item) === null || _b === void 0 ? void 0 : _b.id) || ''), localId = _c[0], setLocalId = _c[1];
-    useMountLayout(function () {
-        var defaultId = state.panelIndexRef.current;
-        var itemId = localId || String(defaultId);
+const StyledTabsPanel = styled(Box)(hideMouseFocus);
+export const useTabsPanel = createElemPropsHook(useTabsModel)(({ state, events }, _, elemProps = {}) => {
+    var _a;
+    const [localId, setLocalId] = React.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
+    useMountLayout(() => {
+        const defaultId = state.panelIndexRef.current;
+        const itemId = localId || String(defaultId);
         events.registerPanel({ item: { id: itemId }, textValue: '' });
         setLocalId(itemId);
-        return function () {
+        return () => {
             events.unregisterPanel({ id: itemId });
         };
     });
     return {
         role: 'tabpanel',
-        'aria-labelledby': state.id + "-" + localId,
+        'aria-labelledby': `${state.id}-${localId}`,
         hidden: !!localId && localId !== state.selectedIds[0],
-        id: "tabpanel-" + state.id + "-" + localId,
+        id: `tabpanel-${state.id}-${localId}`,
         tabIndex: 0,
     };
 });
-export var TabsPanel = createSubcomponent('div')({
+export const TabsPanel = createSubcomponent('div')({
     displayName: 'Tabs.Panel',
     modelHook: useTabsModel,
     elemPropsHook: useTabsPanel,
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(StyledTabsPanel, __assign({ as: Element }, elemProps), children));
+})(({ children, ...elemProps }, Element) => {
+    return (React.createElement(StyledTabsPanel, Object.assign({ as: Element }, elemProps), children));
 });

package/dist/es6/tabs/lib/TabsPanels.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { useListRenderItems } from '@workday/canvas-kit-react/collection';
 import { useTabsModel } from './useTabsModel';
-export var TabsPanels = createSubcomponent()({
+export const TabsPanels = createSubcomponent()({
     displayName: 'Tabs.Panels',
     modelHook: useTabsModel,
-})(function (_a, _, model) {
-    var children = _a.children;
+})(({ children }, _, model) => {
     return React.createElement(React.Fragment, null, useListRenderItems(model, children));
 });

package/dist/es6/tabs/lib/useTabsModel.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { createModelHook, useModalityType } from '@workday/canvas-kit-react/common';
 import { defaultGetId, useListModel, useOverflowListModel, } from '@workday/canvas-kit-react/collection';
@@ -29,38 +18,41 @@ import { useMenuModel } from '@workday/canvas-kit-react/menu';
  * <Tabs model={model}>{Tabs child components}</Tabs>
  * ```
  */
-export var useTabsModel = createModelHook({
-    defaultConfig: __assign(__assign({}, useOverflowListModel.defaultConfig), { 
+export const useTabsModel = createModelHook({
+    defaultConfig: {
+        ...useOverflowListModel.defaultConfig,
         /**
          * Optional id for the whole `Tabs` group. The `aria-controls` of the `Tab.Item` and `id` of the
          * `Tab.Panel` will automatically derived from this id. If not provided, a unique id will be
          * created.
          * @default useUniqueId()
          */
-        id: '', 
+        id: '',
         /**
          * An initially selected tab. This value must match the `name` of the `Tab.Item` component. If
          * not provided, the first tab will be selected.
          */
-        initialTab: '', 
+        initialTab: '',
         /**
          * The default Tabs sub-components only handle rendering of tabs in a horizontal orientation, but
          * the sub-components could be replaced to handle vertical orientations.
          * @default 'horizontal'
          */
-        orientation: 'horizontal', menuConfig: {} }),
+        orientation: 'horizontal',
+        menuConfig: {},
+    },
     requiredConfig: useOverflowListModel.requiredConfig,
-})(function (config) {
+})(config => {
     var _a;
-    var initialSelectedRef = React.useRef(config.initialTab);
-    var getId = config.getId || defaultGetId;
-    var modality = useModalityType();
-    var items = config.items;
-    var model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
+    const initialSelectedRef = React.useRef(config.initialTab);
+    const getId = config.getId || defaultGetId;
+    const modality = useModalityType();
+    const items = config.items;
+    const model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
         shouldCalculateOverflow: modality !== 'touch',
         orientation: config.orientation || 'horizontal',
-        items: items,
-        onRegisterItem: function (data) {
+        items,
+        onRegisterItem(data) {
             if (!initialSelectedRef.current) {
                 initialSelectedRef.current = getId(data.item);
                 events.select({ id: initialSelectedRef.current });
@@ -73,44 +65,53 @@ export var useTabsModel = createModelHook({
                 : [],
         shouldVirtualize: false,
     }));
-    var panels = useListModel();
-    var state = __assign(__assign({}, model.state), { getId: getId, orientation: config.orientation || 'horizontal', 
+    const panels = useListModel();
+    const state = {
+        ...model.state,
+        getId,
+        orientation: config.orientation || 'horizontal',
         /**
          * A list of panels. Uses `ListModel`
          */
-        panels: panels.state.items, 
+        panels: panels.state.items,
         /**
          * A React.Ref of the current item index. A ref is used to allow for updating outside the normal
          * React state cycle to ensure accurate index tracking as items are registered within the same
          * state setting phase.
          */
-        panelIndexRef: panels.state.indexRef });
-    var overflowItems = React.useMemo(function () { return (items ? items.filter(function (item) { return state.hiddenIds.includes(getId(item)); }) : undefined); }, 
+        panelIndexRef: panels.state.indexRef,
+    };
+    const overflowItems = React.useMemo(() => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.hiddenIds, items]);
-    var events = __assign(__assign({}, model.events), { 
+    const events = {
+        ...model.events,
         /**
          * This event registers panels with state.panels. Called when a panel is mounted.
          */
-        registerPanel: panels.events.registerItem, 
+        registerPanel: panels.events.registerItem,
         /**
          * This event unregisters panels with state.panels. Called when a panel is unmounted.
          */
-        unregisterPanel: panels.events.unregisterItem });
-    var menu = useMenuModel(useMenuModel.mergeConfig(config.menuConfig, {
-        id: "menu-" + model.state.id,
+        unregisterPanel: panels.events.unregisterItem,
+    };
+    const menu = useMenuModel(useMenuModel.mergeConfig(config.menuConfig, {
+        id: `menu-${model.state.id}`,
         items: overflowItems,
-        nonInteractiveIds: state.nonInteractiveIds.filter(function (key) { return !state.hiddenIds.includes(key); }),
-        onSelect: function (data) {
+        nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+        onSelect(data) {
             menu.events.hide();
             events.select(data);
         },
-        onShow: function () {
+        onShow() {
             // Always select the first item when the menu is opened
             menu.events.goToFirst();
         },
     }));
-    return __assign(__assign({}, model), { state: state,
-        events: events,
-        menu: menu });
+    return {
+        ...model,
+        state,
+        events,
+        menu,
+    };
 });

package/dist/es6/testing/lib/ComponentStatesTable.js

@@ -1,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { styled } from '@workday/canvas-kit-react/common';
-var Table = styled('table')({
+const Table = styled('table')({
     width: '100%',
     thead: {
         textAlign: 'left',
@@ -24,18 +13,20 @@ var Table = styled('table')({
         textAlign: 'left',
     },
 });
-export var ComponentStatesTable = function (_a) {
-    var rowProps = _a.rowProps, columnProps = _a.columnProps, children = _a.children;
+export const ComponentStatesTable = ({ rowProps, columnProps, children, }) => {
     return (React.createElement(Table, null,
         React.createElement("thead", null,
             React.createElement("tr", null,
                 React.createElement("th", null, "Variants"),
-                columnProps.map(function (col) { return (React.createElement("th", { key: "component-table-heading-" + col.label.toLowerCase().replace(' ', ',') }, col.label)); }))),
-        React.createElement("tbody", null, rowProps.map(function (row) {
+                columnProps.map(col => (React.createElement("th", { key: `component-table-heading-${col.label.toLowerCase().replace(' ', ',')}` }, col.label))))),
+        React.createElement("tbody", null, rowProps.map(row => {
             return (React.createElement("tr", { key: row.label.toLowerCase().replace(' ', '-') },
                 React.createElement("td", null, row.label),
-                columnProps.map(function (col) {
-                    return (React.createElement("td", { key: col.label.toLowerCase().replace(' ', '-') }, children(__assign(__assign({}, row.props), col.props))));
+                columnProps.map(col => {
+                    return (React.createElement("td", { key: col.label.toLowerCase().replace(' ', '-') }, children({
+                        ...row.props,
+                        ...col.props,
+                    })));
                 })));
         }))));
 };

package/dist/es6/testing/lib/StaticStates.js

@@ -1,34 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { useTheme, CanvasProvider, } from '@workday/canvas-kit-react/common';
-export var convertToStaticStates = function (obj) {
+export const convertToStaticStates = obj => {
     if (!obj) {
         return obj;
     }
-    return Object.keys(obj).reduce(function (result, key) {
-        var _a;
-        var newKey = key
+    return Object.keys(obj).reduce((result, key) => {
+        const newKey = key
             .replace(/^:/, '&:') // handle shorthand like ":focus"
             .replace(/,(\s+):/g, ',$1&:') // handle selectors like ":focus, :hover"
             .replace(/:(focus|hover|active)/g, '.$1');
@@ -36,14 +13,13 @@ export var convertToStaticStates = function (obj) {
         if (/data-whatinput/.test(key)) {
             return result;
         }
-        var value = typeof obj[key] === 'object' ? convertToStaticStates(obj[key]) : obj[key];
-        var newObj = __assign(__assign({}, result), (_a = {}, _a[newKey] = value, _a));
+        const value = typeof obj[key] === 'object' ? convertToStaticStates(obj[key]) : obj[key];
+        const newObj = { ...result, [newKey]: value };
         return newObj;
     }, {});
 };
-export var StaticStates = function (_a) {
-    var children = _a.children, theme = _a.theme, elemProps = __rest(_a, ["children", "theme"]);
-    var localTheme = useTheme(theme);
+export const StaticStates = ({ children, theme, ...elemProps }) => {
+    const localTheme = useTheme(theme);
     localTheme._styleRewriteFn = convertToStaticStates;
-    return (React.createElement(CanvasProvider, __assign({ theme: localTheme }, elemProps), children));
+    return (React.createElement(CanvasProvider, Object.assign({ theme: localTheme }, elemProps), children));
 };

package/dist/es6/testing/lib/permutateProps.js

@@ -1,41 +1,28 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-export var permutateProps = function (allProps, filter, remainingProps, values) {
-    if (remainingProps === void 0) { remainingProps = Object.keys(allProps); }
-    if (values === void 0) { values = {}; }
+export const permutateProps = (allProps, filter, remainingProps = Object.keys(allProps), values = {}) => {
     // When there are no more props to combine with, return result
-    var prop = remainingProps[0];
+    const prop = remainingProps[0];
     if (!prop) {
-        var props_1 = {};
-        Object.keys(values).forEach(function (prop) {
+        const props = {};
+        Object.keys(values).forEach(prop => {
             var _a;
-            props_1[prop] = (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.value;
+            props[prop] = (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.value;
         });
-        if (filter && !filter(props_1)) {
+        if (filter && !filter(props)) {
             return [];
         }
-        var label = Object.keys(values)
-            .map(function (prop) { var _a; return (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.label; })
+        const label = Object.keys(values)
+            .map(prop => { var _a; return (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.label; })
             .join(' ');
         return [
             {
-                label: label,
-                props: props_1,
+                label,
+                props,
             },
         ];
     }
-    var possiblePropValues = allProps[prop];
-    var permutations = possiblePropValues === null || possiblePropValues === void 0 ? void 0 : possiblePropValues.map(function (value) {
-        var newValues = __assign({}, values); // Required so we don't overwrite previous references
+    const possiblePropValues = allProps[prop];
+    const permutations = possiblePropValues === null || possiblePropValues === void 0 ? void 0 : possiblePropValues.map((value) => {
+        const newValues = { ...values }; // Required so we don't overwrite previous references
         newValues[prop] = value;
         return permutateProps(allProps, filter, remainingProps.slice(1, remainingProps.length), newValues);
     });

package/dist/es6/text/lib/LabelText.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Text } from './Text';
@@ -41,10 +19,9 @@ import { inputColors } from '@workday/canvas-kit-react/tokens';
  * );
  * ```
  */
-export var LabelText = createComponent('label')({
+export const LabelText = createComponent('label')({
     displayName: 'Label',
-    Component: function (_a, ref, Element) {
-        var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant, elemProps = __rest(_a, ["cursor", "disabled", "variant"]);
-        return (React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: "subtext.large", color: disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined, cursor: cursor && !disabled ? cursor : 'default', opacity: disabled && variant === 'inverse' ? '.4' : '1', variant: variant }, elemProps)));
+    Component: ({ cursor, disabled, variant, ...elemProps }, ref, Element) => {
+        return (React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: "subtext.large", color: disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined, cursor: cursor && !disabled ? cursor : 'default', opacity: disabled && variant === 'inverse' ? '.4' : '1', variant: variant }, elemProps)));
     },
 });

package/dist/es6/text/lib/Text.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 // type changes no need
@@ -28,10 +6,9 @@ import { Box } from '@workday/canvas-kit-react/layout';
 /**
  * Function returns updated props by token and variant values
 */
-var validateProps = function (_a) {
-    var typeLevel = _a.typeLevel, variant = _a.variant, props = __rest(_a, ["typeLevel", "variant"]);
-    var updatedProps = props;
-    var tokenPropNames = [
+const validateProps = ({ typeLevel, variant, ...props }) => {
+    let updatedProps = props;
+    const tokenPropNames = [
         'color',
         'fontFamily',
         'fontSize',
@@ -45,17 +22,17 @@ var validateProps = function (_a) {
     by replacing them by token value
     */
     if (typeLevel) {
-        var _b = typeLevel.split('.'), level = _b[0], size = _b[1];
-        var tokenProps_1 = type.levels[level][size];
-        tokenPropNames.forEach(function (item) {
+        const [level, size] = typeLevel.split('.');
+        const tokenProps = type.levels[level][size];
+        tokenPropNames.forEach(item => {
             if (!props[item]) {
-                updatedProps[item] = tokenProps_1[item];
+                updatedProps[item] = tokenProps[item];
             }
         });
     }
     // If variant provided it updates color value by variant color
     if (variant) {
-        updatedProps = __assign(__assign({}, updatedProps), type.variants[variant]);
+        updatedProps = { ...updatedProps, ...type.variants[variant] };
     }
     return updatedProps;
 };
@@ -90,10 +67,7 @@ var validateProps = function (_a) {
  * );
  * ```
 */
-export var Text = createComponent('span')({
+export const Text = createComponent('span')({
     displayName: 'Text',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Box, __assign({ ref: ref, as: Element }, validateProps(elemProps)), children));
-    },
+    Component: ({ children, ...elemProps }, ref, Element) => (React.createElement(Box, Object.assign({ ref: ref, as: Element }, validateProps(elemProps)), children)),
 });

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Text } from './Text';
@@ -47,12 +25,11 @@ import { Text } from './Text';
  * );
  * ```
  */
-export var Subtext = createComponent('p')({
+export const Subtext = createComponent('p')({
     displayName: 'Subtext',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "subtext." + size;
-        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `subtext.${size}`;
+        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
 /**
@@ -79,12 +56,11 @@ export var Subtext = createComponent('p')({
  * );
  * ```
  */
-export var BodyText = createComponent('p')({
+export const BodyText = createComponent('p')({
     displayName: 'BodyText',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "body." + size;
-        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `body.${size}`;
+        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
 /**
@@ -111,12 +87,11 @@ export var BodyText = createComponent('p')({
  * );
  * ```
  */
-export var Heading = createComponent('h2')({
+export const Heading = createComponent('h2')({
     displayName: 'Heading',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "heading." + size;
-        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `heading.${size}`;
+        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
 /**
@@ -143,11 +118,10 @@ export var Heading = createComponent('h2')({
  * );
  * ```
  */
-export var Title = createComponent('h1')({
+export const Title = createComponent('h1')({
     displayName: 'Title',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "title." + size;
-        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `title.${size}`;
+        return React.createElement(Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });