@conveyorhq/arrow-ds 1.19.1 → 1.21.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.19.1",
+  "version": "1.21.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Frame/Frame.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-declare type FrameAreaName = "appbar" | "topbar" | "main" | "bottombar";
+declare type FrameAreaName = "navbar" | "appbar" | "topbar" | "main" | "bottombar";
 interface FrameProps {
     children: ReactNode;
 }

package/public/components/Icon/Icon.d.ts

@@ -87,6 +87,7 @@ export declare enum ICON_TYPE {
     SEARCH = "search",
     SHARE_ALT = "share-alt",
     SHIELD_ALT = "shield-alt",
+    SIGN_OUT_ALT = "sign-out-alt",
     SIGNATURE = "signature",
     SLIDERS_H = "sliders-h",
     SORT = "sort",

package/public/components/Icon/Icon.js

@@ -114,6 +114,7 @@ const faScroll_1 = require("@fortawesome/free-solid-svg-icons/faScroll");
 const faSearch_1 = require("@fortawesome/free-solid-svg-icons/faSearch");
 const faShareAlt_1 = require("@fortawesome/free-solid-svg-icons/faShareAlt");
 const faShieldAlt_1 = require("@fortawesome/free-solid-svg-icons/faShieldAlt");
+const faSignOutAlt_1 = require("@fortawesome/free-solid-svg-icons/faSignOutAlt");
 const faSignature_1 = require("@fortawesome/free-solid-svg-icons/faSignature");
 const faSlidersH_1 = require("@fortawesome/free-solid-svg-icons/faSlidersH");
 const faSort_1 = require("@fortawesome/free-solid-svg-icons/faSort");
@@ -140,7 +141,7 @@ const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -237,6 +238,7 @@ var ICON_TYPE;
     ICON_TYPE["SEARCH"] = "search";
     ICON_TYPE["SHARE_ALT"] = "share-alt";
     ICON_TYPE["SHIELD_ALT"] = "shield-alt";
+    ICON_TYPE["SIGN_OUT_ALT"] = "sign-out-alt";
     ICON_TYPE["SIGNATURE"] = "signature";
     ICON_TYPE["SLIDERS_H"] = "sliders-h";
     ICON_TYPE["SORT"] = "sort";

package/public/components/Input/Input.js

@@ -36,18 +36,18 @@ var INPUT_ICON_POSITION;
     INPUT_ICON_POSITION["RIGHT"] = "right";
 })(INPUT_ICON_POSITION = exports.INPUT_ICON_POSITION || (exports.INPUT_ICON_POSITION = {}));
 const cn = "TextInput";
-const Input = react_1.forwardRef(({ as: Component = "input", className, wrapperClassName, icon, iconPosition = INPUT_ICON_POSITION.LEFT, iconProps = {}, id: idProp, type, variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, theme: themeProp, ...rest }, ref) => {
+const Input = react_1.forwardRef(({ as: Component = "input", className, wrapperClassName, icon, iconPosition = INPUT_ICON_POSITION.LEFT, iconProps = {}, id: idProp, type, variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, theme: themeProp, disabled, ...rest }, ref) => {
     const isTextInput = type !== "radio" && type !== "checkbox";
     const { id: idContext, variant: variantContext, theme: themeContext, } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;
     const theme = themeProp || themeContext;
-    const inputClasses = classnames_1.default(isTextInput && bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), icon && bem_1.bem(cn, { m: `icon-${iconPosition}` }), className);
+    const inputClasses = classnames_1.default(isTextInput && bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), disabled && bem_1.bem(cn, { m: "disabled" }), icon && bem_1.bem(cn, { m: `icon-${iconPosition}` }), className);
     const wrapperClasses = classnames_1.default(bem_1.bem(cn, { e: "wrapper" }), wrapperClassName);
     const { className: iconClassName, ...iconPropsRest } = iconProps;
     const iconClasses = classnames_1.default(bem_1.bem(cn, { e: "icon" }), bem_1.bem(cn, { e: "icon", m: iconPosition }), iconClassName);
     return isTextInput && icon ? (react_1.default.createElement(Box_1.Box, { className: wrapperClasses },
-        react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type }, rest)),
-        react_1.default.createElement(Icon_1.Icon, Object.assign({ icon: icon, className: iconClasses }, iconPropsRest)))) : (react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type }, rest)));
+        react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type, disabled: disabled }, rest)),
+        react_1.default.createElement(Icon_1.Icon, Object.assign({ icon: icon, className: iconClasses }, iconPropsRest)))) : (react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type, disabled: disabled }, rest)));
 });
 exports.Input = Input;

package/public/components/Table/Table.d.ts

@@ -13,9 +13,11 @@ interface TableProps extends React.HTMLProps<HTMLTableElement> {
     stickyColumn?: boolean;
     hasBatchActions?: boolean;
     spaceRows?: boolean;
+    enableGridSizing?: boolean;
+    gridSizing?: string | string[];
 }
 declare const Table: {
-    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, spaceRows, ...rest }: TableProps): JSX.Element;
+    ({ children, className, onSort, outerBorder, sortColumnId, sortDirection, affixHeader, removeSpacerColumn, noResults, renderInModal, enableHorizontalScroll, stickyColumn, hasBatchActions, spaceRows, style, enableGridSizing, gridSizing, ...rest }: TableProps): JSX.Element;
     Body: ({ className, children, ...rest }: React.HTMLProps<HTMLTableSectionElement>) => JSX.Element;
     Row: ({ className, children, selected, ...rest }: import("./TableRow").TableRowProps) => JSX.Element;
     Cell: React.FunctionComponent<import("./TableCell").TableCellProps>;

package/public/components/Table/Table.js

@@ -35,9 +35,9 @@ Object.defineProperty(exports, "SORT_DIRECTION", { enumerable: true, get: functi
 const bem_1 = require("../../utilities/bem");
 const cn = "Table";
 const wrapperCn = "TableWrapper";
-const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, spaceRows = false, ...rest }) => {
+const Table = ({ children, className, onSort = () => { }, outerBorder = false, sortColumnId, sortDirection, affixHeader = false, removeSpacerColumn = false, noResults = false, renderInModal = false, enableHorizontalScroll = false, stickyColumn = false, hasBatchActions = false, spaceRows = false, style, enableGridSizing = false, gridSizing, ...rest }) => {
     const wrapperClasses = classnames_1.default(bem_1.bem(wrapperCn), enableHorizontalScroll && bem_1.bem(wrapperCn, { m: "enable-hscroll" }), spaceRows && bem_1.bem(wrapperCn, { m: "space-rows" }));
-    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), spaceRows && bem_1.bem(cn, { m: "space-rows" }), className);
+    const classes = classnames_1.default(bem_1.bem(cn), removeSpacerColumn && bem_1.bem(cn, { m: "remove-spacer" }), outerBorder && bem_1.bem(cn, { m: "outer-border" }), affixHeader && bem_1.bem(cn, { m: "affix-header" }), noResults && bem_1.bem(cn, { m: "no-results" }), stickyColumn && bem_1.bem(cn, { m: "sticky-column" }), hasBatchActions && bem_1.bem(cn, { m: "batch-actions" }), spaceRows && bem_1.bem(cn, { m: "space-rows" }), enableGridSizing && gridSizing && bem_1.bem(cn, { m: "grid-sizing" }), className);
     return (react_1.default.createElement(TableContext_1.default.Provider, { value: {
             handleSort: onSort,
             sortDirection,
@@ -49,7 +49,14 @@ const Table = ({ children, className, onSort = () => { }, outerBorder = false, s
             hasBatchActions,
         } },
         react_1.default.createElement("div", { className: wrapperClasses },
-            react_1.default.createElement("table", Object.assign({ className: classes }, rest), children))));
+            react_1.default.createElement("table", Object.assign({ className: classes, style: enableGridSizing && gridSizing
+                    ? {
+                        gridTemplateColumns: Array.isArray(gridSizing)
+                            ? gridSizing.join(" ")
+                            : gridSizing,
+                        ...style,
+                    }
+                    : style }, rest), children))));
 };
 exports.Table = Table;
 Table.Body = TableBody_1.default;

package/public/components/Table/TableCell.js

@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
+const Flex_1 = require("../Flex");
 const Skeleton_1 = require("../Skeleton");
 const cn = "TableCell";
 const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoading = false, children, columnWidth, align = "left", style, ...rest }, ref) => {
@@ -32,6 +33,7 @@ const TableCell = react_1.forwardRef(({ className, removePadding = false, isLoad
     if (columnWidth) {
         computedStyle.width = columnWidth;
     }
-    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), align && `text-${align}`, className), ref: ref }, rest), isLoading ? react_1.default.createElement(Skeleton_1.Skeleton, null) : children));
+    return (react_1.default.createElement("td", Object.assign({ style: computedStyle, className: classnames_1.default(bem_1.bem(cn), removePadding && bem_1.bem(cn, { m: "removePadding" }), align && `text-${align}`, className), ref: ref }, rest), isLoading ? (react_1.default.createElement(Flex_1.Flex, { className: "h-full items-center" },
+        react_1.default.createElement(Skeleton_1.Skeleton, { className: "w-full" }))) : (children)));
 });
 exports.default = TableCell;

package/public/components/Table/index.d.ts

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";

package/public/css/styles.css

@@ -3881,25 +3881,22 @@ override built-in Image component classes */
 }
 
 .ads-Frame {
-  --tw-bg-opacity: 1;
-  background-color: rgba(249, 251, 252, var(--tw-bg-opacity));
   height: 100vh;
-  grid-template-columns: [full] 1fr;
-  grid-template-rows: [appbar] auto [topbar] auto [main] 1fr [bottombar] auto;
+  grid-template-columns: [navbar] auto [full] 1fr [column-end];
+  grid-template-rows: [appbar] auto [topbar] auto [main] 1fr [bottombar] auto [row-end];
+}
+
+.ads-Frame-navbar {
+  grid-column: navbar;
+  grid-row: appbar / row-end;
 }
 
 .ads-Frame-appbar {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 27, 40, var(--tw-bg-opacity));
-  height: 100%;
   grid-column: full;
   grid-row: appbar;
 }
 
 .ads-Frame-topbar {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  height: 100%;
   grid-column: full;
   grid-row: topbar;
 }
@@ -3912,9 +3909,6 @@ override built-in Image component classes */
 }
 
 .ads-Frame-bottombar {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  height: 100%;
   grid-column: full;
   grid-row: bottombar;
 }
@@ -3982,7 +3976,10 @@ override built-in Image component classes */
   color: rgba(185, 200, 210, var(--tw-text-opacity));
 }
 
-.ads-TextInput--brand:disabled {
+.ads-TextInput--brand.ads-TextInput--disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 27, 40, var(--tw-bg-opacity));
+  border-color: transparent;
   --tw-text-opacity: 1;
   color: rgba(134, 163, 181, var(--tw-text-opacity));
 }
@@ -4015,11 +4012,16 @@ override built-in Image component classes */
   color: rgba(134, 163, 181, var(--tw-text-opacity));
 }
 
-.ads-TextInput--product:disabled {
+/* Not using :disabled pseudo-class here for specificity reasons */
+
+/* Not qualifying with the --product modifier for specificity reasons */
+
+.ads-TextInput--disabled {
   --tw-bg-opacity: 1;
   background-color: rgba(244, 247, 249, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(222, 231, 238, var(--tw-border-opacity));
+  cursor: not-allowed;
   --tw-text-opacity: 1;
   color: rgba(71, 104, 125, var(--tw-text-opacity));
 }
@@ -6683,15 +6685,17 @@ override built-in Image component classes */
   width: 1%;
 }
 
-.ads-TableHeaderCell-InnerWrapper {
+.ads-TableHeaderCell-InnerWrapper, .ads-TableHeaderCell-ChildrenWrapper {
   display: flex;
   align-items: center;
+}
+
+.ads-TableHeaderCell-InnerWrapper {
+  height: 100%;
   padding-top: 1px;
 }
 
 .ads-TableHeaderCell-ChildrenWrapper {
-  display: flex;
-  align-items: center;
   line-height: 1;
 }
 
@@ -6828,6 +6832,7 @@ override built-in Image component classes */
   border-top-width: 1px;
   height: 34px;
   text-align: left;
+  line-height: 18px;
 }
 
 .ads-TableRow:first-of-type .ads-TableCell, .ads-TableCell:only-child {
@@ -7031,6 +7036,48 @@ override built-in Image component classes */
   box-shadow: 1px 0 0 #dee7ee, 3px 0 0 rgb(234, 237, 239);
 }
 
+/* Enable grid sizing */
+
+.ads-Table.ads-Table--grid-sizing {
+  --table-cell-height: 34px;
+  border-bottom-width: 0;
+  display: grid;
+  flex: 1 1 0%;
+  min-width: 100%;
+  width: auto;
+  grid-auto-rows: minmax(var(--table-cell-height), auto);
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableHead,
+.ads-Table.ads-Table--grid-sizing .ads-TableBody,
+.ads-Table.ads-Table--grid-sizing .ads-TableRow {
+  display: contents;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell {
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  height: auto;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableRow:last-of-type .ads-TableCell {
+  border-bottom-color: #dee7ee;
+}
+
+.ads-Table.ads-Table--grid-sizing
+  .ads-TableCell:not(.ads-TableCell--removePadding) {
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell:first-of-type:not(:only-child), .ads-Table.ads-Table--grid-sizing .ads-TableHeaderCell:first-of-type, .ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableCell:first-of-type, .ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableHeaderCell:first-of-type {
+  padding-left: 32px;
+}
+
 .ads-Tag {
   border-radius: 9999px;
   border-width: 1px;
@@ -7540,6 +7587,8 @@ override built-in Image component classes */
 }
 
 .ads-TopBar {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(222, 231, 238, var(--tw-border-opacity));
   border-bottom-width: 1px;