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

package/dist/commonjs/table/lib/Table.js

@@ -1,30 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -44,29 +18,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = exports.cellBorder = exports.borderColor = exports.borderWidth = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 exports.borderWidth = 1;
 exports.borderColor = tokens_1.colors.soap400;
-exports.cellBorder = exports.borderWidth + "px solid " + exports.borderColor;
-var TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.large, {
+exports.cellBorder = `${exports.borderWidth}px solid ${exports.borderColor}`;
+const TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.large, {
     width: '100%',
     border: exports.cellBorder,
     borderSpacing: 0,
@@ -75,15 +38,10 @@ var TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.larg
         borderSpacing: 0,
     },
 });
-var Table = /** @class */ (function (_super) {
-    __extends(Table, _super);
-    function Table() {
-        return _super !== null && _super.apply(this, arguments) || this;
+class Table extends React.Component {
+    render() {
+        const { children, ...elemProps } = this.props;
+        return React.createElement(TableComponent, Object.assign({}, elemProps), children);
     }
-    Table.prototype.render = function () {
-        var _a = this.props, children = _a.children, elemProps = __rest(_a, ["children"]);
-        return React.createElement(TableComponent, __assign({}, elemProps), children);
-    };
-    return Table;
-}(React.Component));
+}
 exports.Table = Table;

package/dist/commonjs/table/lib/TableRow.js

@@ -1,15 +1,4 @@
 "use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,28 +18,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableRow = exports.TableRowState = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var polished_1 = require("polished");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Table_1 = require("./Table");
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const polished_1 = require("polished");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const Table_1 = require("./Table");
 var TableRowState;
 (function (TableRowState) {
     TableRowState[TableRowState["Error"] = 0] = "Error";
@@ -60,10 +38,10 @@ var TableRowState;
     TableRowState[TableRowState["Hover"] = 4] = "Hover";
     TableRowState[TableRowState["Selected"] = 5] = "Selected";
 })(TableRowState = exports.TableRowState || (exports.TableRowState = {}));
-var errorColor = tokens_1.statusColors.error;
-var errorColorLight = tokens_1.colors.cinnamon200;
-var alertColor = tokens_1.statusColors.warning;
-var alertColorLight = tokens_1.colors.cantaloupe200;
+const errorColor = tokens_1.statusColors.error;
+const errorColorLight = tokens_1.colors.cinnamon200;
+const alertColor = tokens_1.statusColors.warning;
+const alertColorLight = tokens_1.colors.cantaloupe200;
 function makeColoredRow(_bgColor, _borderColor) {
     return {
         backgroundColor: _bgColor,
@@ -74,7 +52,7 @@ function makeColoredRow(_bgColor, _borderColor) {
             left: 0,
             top: -Table_1.borderWidth,
             content: '""',
-            width: "calc(100% + " + Table_1.borderWidth + "px)",
+            width: `calc(100% + ${Table_1.borderWidth}px)`,
             height: Table_1.borderWidth,
             backgroundColor: _borderColor,
         },
@@ -83,10 +61,10 @@ function makeColoredRow(_bgColor, _borderColor) {
             bottom: -Table_1.borderWidth,
         },
         '&:first-of-type': {
-            boxShadow: "inset " + Table_1.borderWidth + "px 0 0 " + _borderColor,
+            boxShadow: `inset ${Table_1.borderWidth}px 0 0 ${_borderColor}`,
         },
         '&:last-child': {
-            boxShadow: "inset -" + Table_1.borderWidth + "px 0 0 " + _borderColor,
+            boxShadow: `inset -${Table_1.borderWidth}px 0 0 ${_borderColor}`,
             '&:before, &:after': {
                 width: '100%',
             },
@@ -94,7 +72,7 @@ function makeColoredRow(_bgColor, _borderColor) {
     };
 }
 function makeColoredRowStyle(_bgColor, _borderColor) {
-    var lightenedBg = polished_1.rgba(_bgColor, 0.2);
+    const lightenedBg = polished_1.rgba(_bgColor, 0.2);
     return {
         'th, td': [
             makeColoredRow(lightenedBg, _bgColor),
@@ -117,10 +95,10 @@ function makeBorderlessStyle(_bgColor) {
         },
     };
 }
-var StyledTableRow = styled_1.default('tr')({
+const StyledTableRow = styled_1.default('tr')({
     'th, td': {
         backgroundColor: tokens_1.colors.frenchVanilla100,
-        padding: tokens_1.space.xs + " " + tokens_1.space.xxs,
+        padding: `${tokens_1.space.xs} ${tokens_1.space.xxs}`,
         fontSize: 13,
         borderRight: Table_1.cellBorder,
         borderBottom: Table_1.cellBorder,
@@ -144,36 +122,32 @@ var StyledTableRow = styled_1.default('tr')({
             borderBottom: 'none',
         },
     },
-}, function (_a) {
-    var header = _a.header;
-    return header && {
-        '&:last-child': {
-            'th, td': {
-                borderBottom: '1px solid transparent',
-            },
-        },
+}, ({ header }) => header && {
+    '&:last-child': {
         'th, td': {
-            position: 'relative',
-            backgroundColor: tokens_1.colors.frenchVanilla100,
-            verticalAlign: 'middle',
+            borderBottom: '1px solid transparent',
+        },
+    },
+    'th, td': {
+        position: 'relative',
+        backgroundColor: tokens_1.colors.frenchVanilla100,
+        verticalAlign: 'middle',
+        '&:after': {
+            position: 'absolute',
+            left: 0,
+            bottom: -Table_1.borderWidth,
+            content: '""',
+            width: `calc(100% + ${Table_1.borderWidth}px)`,
+            height: Table_1.borderWidth,
+            backgroundColor: Table_1.borderColor,
+        },
+        '&:last-child': {
             '&:after': {
-                position: 'absolute',
-                left: 0,
-                bottom: -Table_1.borderWidth,
-                content: '""',
-                width: "calc(100% + " + Table_1.borderWidth + "px)",
-                height: Table_1.borderWidth,
-                backgroundColor: Table_1.borderColor,
-            },
-            '&:last-child': {
-                '&:after': {
-                    width: '100%',
-                },
+                width: '100%',
             },
         },
-    };
-}, function (_a) {
-    var state = _a.state;
+    },
+}, ({ state }) => {
     switch (state) {
         case TableRowState.InputError:
             return makeBorderlessStyle(errorColor);
@@ -217,9 +191,8 @@ var StyledTableRow = styled_1.default('tr')({
 });
 exports.TableRow = common_1.createComponent('tr')({
     displayName: 'TableRow',
-    Component: function (_a, ref, Element) {
-        var state = _a.state, header = _a.header, children = _a.children, elemProps = __rest(_a, ["state", "header", "children"]);
-        return (React.createElement(StyledTableRow, __assign({ as: Element, ref: ref, state: state, header: header }, elemProps), children));
+    Component: ({ state, header, children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledTableRow, Object.assign({ as: Element, ref: ref, state: state, header: header }, elemProps), children));
     },
     subComponents: {
         State: TableRowState,

package/dist/commonjs/tabs/lib/Tabs.js

@@ -4,16 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var menu_1 = require("@workday/canvas-kit-react/menu");
-var TabsItem_1 = require("./TabsItem");
-var TabsList_1 = require("./TabsList");
-var TabsPanel_1 = require("./TabsPanel");
-var useTabsModel_1 = require("./useTabsModel");
-var TabsOverflowButton_1 = require("./TabsOverflowButton");
-var TabsMenuPopper_1 = require("./TabsMenuPopper");
-var TabsPanels_1 = require("./TabsPanels");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const menu_1 = require("@workday/canvas-kit-react/menu");
+const TabsItem_1 = require("./TabsItem");
+const TabsList_1 = require("./TabsList");
+const TabsPanel_1 = require("./TabsPanel");
+const useTabsModel_1 = require("./useTabsModel");
+const TabsOverflowButton_1 = require("./TabsOverflowButton");
+const TabsMenuPopper_1 = require("./TabsMenuPopper");
+const TabsPanels_1 = require("./TabsPanels");
 /**
  * `Tabs` is a container component that is responsible for creating a {@link TabsModel} and sharing
  * it with its subcomponents using React context. It does not represent a real element.
@@ -130,7 +130,6 @@ exports.Tabs = common_1.createContainer()({
         // JSDoc of `Menu` instead of `Tabs.Menu`
         Menu: menu_1.Menu,
     },
-})(function (_a, _, model) {
-    var children = _a.children;
+})(({ children }, _, model) => {
     return react_1.default.createElement(menu_1.Menu, { model: model.menu }, children);
 });

package/dist/commonjs/tabs/lib/TabsItem.d.ts

@@ -53,7 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
      */
     tabIndex?: number;
 }
-export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
+export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/dist/commonjs/tabs/lib/TabsItem.js

@@ -1,15 +1,4 @@
 "use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,97 +18,104 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsItem = exports.useTabsItem = exports.StyledTabItem = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useTabsModel_1 = require("./useTabsModel");
-exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: tokens_1.space.xs + " " + tokens_1.space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), common_1.hideMouseFocus), { '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useTabsModel_1 = require("./useTabsModel");
+exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(({ theme }) => ({
+    ...tokens_1.type.levels.subtext.large,
+    fontWeight: tokens_1.type.properties.fontWeights.medium,
+    border: 'none',
+    backgroundColor: 'transparent',
+    flex: '0 0 auto',
+    alignItems: 'center',
+    padding: `${tokens_1.space.xs} ${tokens_1.space.s}`,
+    height: 52,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: tokens_1.colors.licorice300,
+    position: 'relative',
+    borderRadius: `${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0px 0px`,
+    transition: 'background 150ms ease, color 150ms ease',
+    ...common_1.hideMouseFocus,
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        fill: tokens_1.iconColors.active,
+    },
+    '&:hover, &:focus': {
+        backgroundColor: tokens_1.colors.soap200,
+        color: tokens_1.colors.blackPepper400,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: tokens_1.iconColors.hover,
+        },
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: tokens_1.iconColors.active,
-        }, '&:hover, &:focus': {
-            backgroundColor: tokens_1.colors.soap200,
-            color: tokens_1.colors.blackPepper400,
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: tokens_1.iconColors.hover,
-            },
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: tokens_1.iconColors.active,
-            },
-        }, '&:focus': __assign({ outline: "none" }, common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme)), '&:disabled, &[aria-disabled]': {
-            color: tokens_1.colors.licorice100,
+        },
+    },
+    '&:focus': {
+        outline: `none`,
+        ...common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
+    },
+    '&:disabled, &[aria-disabled]': {
+        color: tokens_1.colors.licorice100,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: tokens_1.iconColors.disabled,
+        },
+        '&:hover': {
+            cursor: 'auto',
+            backgroundColor: `transparent`,
             '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: tokens_1.iconColors.disabled,
             },
-            '&:hover': {
-                cursor: 'auto',
-                backgroundColor: "transparent",
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.disabled,
-                },
-            },
-        }, '&[aria-selected=true]': {
+        },
+    },
+    '&[aria-selected=true]': {
+        color: theme.canvas.palette.primary.main,
+        cursor: 'default',
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: theme.canvas.palette.primary.main,
+        },
+        '&:after': {
+            position: 'absolute',
+            height: tokens_1.space.xxxs,
+            borderRadius: `${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0px 0px`,
+            backgroundColor: theme.canvas.palette.primary.main,
+            bottom: 0,
+            content: `''`,
+            left: 0,
+            marginTop: '-2px',
+            width: '100%',
+        },
+        '&:hover, &:focus': {
+            backgroundColor: `transparent`,
             color: theme.canvas.palette.primary.main,
-            cursor: 'default',
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: theme.canvas.palette.primary.main,
-            },
-            '&:after': {
-                position: 'absolute',
-                height: tokens_1.space.xxxs,
-                borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
-                backgroundColor: theme.canvas.palette.primary.main,
-                bottom: 0,
-                content: "''",
-                left: 0,
-                marginTop: '-2px',
-                width: '100%',
-            },
-            '&:hover, &:focus': {
-                backgroundColor: "transparent",
-                color: theme.canvas.palette.primary.main,
-            },
-        } }));
-}, function (_a) {
-    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? tokens_1.space.xxs : _b;
+        },
+    },
+}), ({ children, gap = tokens_1.space.xxs }) => {
     if (typeof children === 'string') {
         return common_1.ellipsisStyles;
     }
     else {
         return {
             display: 'flex',
-            gap: gap,
+            gap,
         };
     }
 });
-exports.useTabsItem = common_1.composeHooks(common_1.createElemPropsHook(useTabsModel_1.useTabsModel)(function (_a, _, elemProps) {
-    var state = _a.state;
-    if (elemProps === void 0) { elemProps = {}; }
-    var name = elemProps['data-id'] || '';
-    var selected = !!elemProps['data-id'] && collection_1.isSelected(name, state);
+exports.useTabsItem = common_1.composeHooks(common_1.createElemPropsHook(useTabsModel_1.useTabsModel)(({ state }, _, elemProps = {}) => {
+    const name = elemProps['data-id'] || '';
+    const selected = !!elemProps['data-id'] && collection_1.isSelected(name, state);
     return {
         type: 'button',
         role: 'tab',
-        id: state.id + "-" + name,
+        id: `${state.id}-${name}`,
         'aria-selected': selected,
-        'aria-controls': "tabpanel-" + state.id + "-" + name,
+        'aria-controls': `tabpanel-${state.id}-${name}`,
     };
 }), collection_1.useListItemSelect, collection_1.useOverflowListItemMeasure, collection_1.useListItemRovingFocus, collection_1.useListItemRegister);
 exports.TabsItem = common_1.createSubcomponent('button')({
@@ -130,9 +126,8 @@ exports.TabsItem = common_1.createSubcomponent('button')({
         Icon: icon_1.SystemIcon,
         Text: common_1.EllipsisText,
     },
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    var modality = common_1.useModalityType();
+})(({ children, ...elemProps }, Element) => {
+    const modality = common_1.useModalityType();
     return (React.createElement(tooltip_1.OverflowTooltip, null,
-        React.createElement(exports.StyledTabItem, __assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
+        React.createElement(exports.StyledTabItem, Object.assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
 });