@conveyorhq/arrow-ds 1.195.0 → 1.197.0

package/package.json

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

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

@@ -11,6 +11,7 @@ export declare enum CUSTOM_ICON_TYPE {
     BRAND_GOOGLE_DRIVE = "brand-google-drive",
     BRAND_JIRA = "brand-jira",
     BRAND_MICROSOFT_TEAMS = "brand-microsoft-teams",
+    BRAND_NOTION = "brand-notion",
     BRAND_SALESFORCE = "brand-salesforce",
     BRAND_SLACK = "brand-slack",
     BRAND_ZENDESK = "brand-zendesk",

package/public/components/Icon/Icon.js

@@ -261,6 +261,7 @@ var CUSTOM_ICON_TYPE;
     CUSTOM_ICON_TYPE["BRAND_GOOGLE_DRIVE"] = "brand-google-drive";
     CUSTOM_ICON_TYPE["BRAND_JIRA"] = "brand-jira";
     CUSTOM_ICON_TYPE["BRAND_MICROSOFT_TEAMS"] = "brand-microsoft-teams";
+    CUSTOM_ICON_TYPE["BRAND_NOTION"] = "brand-notion";
     CUSTOM_ICON_TYPE["BRAND_SALESFORCE"] = "brand-salesforce";
     CUSTOM_ICON_TYPE["BRAND_SLACK"] = "brand-slack";
     CUSTOM_ICON_TYPE["BRAND_ZENDESK"] = "brand-zendesk";
@@ -289,6 +290,7 @@ const CustomIcons = {
     [CUSTOM_ICON_TYPE.BRAND_GOOGLE_DRIVE]: svg_1.BrandGoogleDriveIcon,
     [CUSTOM_ICON_TYPE.BRAND_JIRA]: svg_1.BrandJira,
     [CUSTOM_ICON_TYPE.BRAND_MICROSOFT_TEAMS]: svg_1.BrandMicrosoftTeams,
+    [CUSTOM_ICON_TYPE.BRAND_NOTION]: svg_1.BrandNotion,
     [CUSTOM_ICON_TYPE.BRAND_SALESFORCE]: svg_1.BrandSalesforce,
     [CUSTOM_ICON_TYPE.BRAND_SLACK]: svg_1.BrandSlack,
     [CUSTOM_ICON_TYPE.BRAND_ZENDESK]: svg_1.BrandZendesk,

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SvgProps } from "../../Svg";
+export declare const BrandNotion: (props: SvgProps) => React.JSX.Element;

package/public/components/Icon/svg/BrandNotion.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandNotion = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const BrandNotion = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, { width: "32", height: "32", viewBox: "0 0 30 30", fill: "none", ...props },
+        react_1.default.createElement("path", { fill: "currentColor", d: "M18.403.068 1.805 1.291C.466 1.406 0 2.28 0 3.326v18.155c0 .816.29 1.513.99 2.444l3.902 5.063c.64.815 1.223.99 2.447.93l19.275-1.163c1.63-.116 2.097-.873 2.097-2.153V6.178c0-.662-.262-.853-1.034-1.416a89.567 89.567 0 0 1-.132-.097L22.247.941C20.966.011 20.44-.107 18.403.068ZM7.776 5.843c-1.574.106-1.931.13-2.825-.596L2.678 3.443c-.232-.233-.115-.524.467-.581l15.957-1.164c1.339-.117 2.038.35 2.562.756l2.737 1.979c.116.058.407.407.058.407l-16.48.99-.203.013ZM5.94 26.427V9.087c0-.756.233-1.105.932-1.164l18.926-1.105c.642-.058.933.35.933 1.105v17.223c0 .758-.117 1.398-1.166 1.456L7.455 27.65c-1.05.058-1.515-.29-1.515-1.223Zm17.88-16.41c.116.525 0 1.049-.526 1.108l-.872.174v12.8c-.758.408-1.457.64-2.039.64-.932 0-1.165-.29-1.864-1.163l-5.707-8.96v8.67l1.806.407s0 1.047-1.458 1.047l-4.017.233c-.117-.233 0-.815.408-.931l1.048-.29V12.287l-1.456-.117c-.116-.524.174-1.28.99-1.338l4.31-.29 5.94 9.077v-8.03l-1.514-.174c-.117-.641.349-1.107.931-1.164l4.02-.234Z" })));
+};
+exports.BrandNotion = BrandNotion;

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

@@ -7,6 +7,7 @@ export * from "./BrandFront";
 export * from "./BrandGoogleDriveIcon";
 export * from "./BrandJira";
 export * from "./BrandMicrosoftTeams";
+export * from "./BrandNotion";
 export * from "./BrandSalesforce";
 export * from "./BrandSlack";
 export * from "./BrandZendesk";

package/public/components/Icon/svg/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./BrandFront"), exports);
 __exportStar(require("./BrandGoogleDriveIcon"), exports);
 __exportStar(require("./BrandJira"), exports);
 __exportStar(require("./BrandMicrosoftTeams"), exports);
+__exportStar(require("./BrandNotion"), exports);
 __exportStar(require("./BrandSalesforce"), exports);
 __exportStar(require("./BrandSlack"), exports);
 __exportStar(require("./BrandZendesk"), exports);

package/public/components/IntegrationLogo/IntegrationLogo.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SvgProps } from "../Svg";
-export declare const integrationLogoNames: readonly ["addigy", "aws", "bamboohr", "bitbucket", "conveyor", "deploy", "docusign", "events-api", "front", "gcp", "github", "gitlab", "google_drive", "gsuite", "hubspot", "jamf", "jira", "jumpcloud", "microsoft_teams", "okta", "onelogin", "service_now", "salesforce", "slack", "zendesk", "zoom"];
+export declare const integrationLogoNames: readonly ["addigy", "aws", "bamboohr", "bitbucket", "conveyor", "deploy", "docusign", "events-api", "front", "gcp", "github", "gitlab", "google_drive", "gsuite", "hubspot", "jamf", "jira", "jumpcloud", "microsoft_teams", "notion", "okta", "onelogin", "service_now", "salesforce", "slack", "zendesk", "zoom"];
 export type IntegrationLogoName = typeof integrationLogoNames[number];
 export interface IntegrationLogoProps extends SvgProps {
     logo?: IntegrationLogoName | string;

package/public/components/IntegrationLogo/IntegrationLogo.js

@@ -26,6 +26,7 @@ exports.integrationLogoNames = [
     "jira",
     "jumpcloud",
     "microsoft_teams",
+    "notion",
     "okta",
     "onelogin",
     "service_now",

package/public/components/IntegrationLogo/IntegrationLogoSvg.js

@@ -45,6 +45,8 @@ const IntegrationLogoSvg = ({ logo, ...rest }) => {
             return react_1.default.createElement(svg_1.JumpcloudSvg, { ...rest });
         case "microsoft_teams":
             return react_1.default.createElement(svg_1.MicrosoftTeamsSvg, { ...rest });
+        case "notion":
+            return react_1.default.createElement(svg_1.NotionSvg, { ...rest });
         case "okta":
             return react_1.default.createElement(svg_1.OktaSvg, { ...rest });
         case "onelogin":

package/public/components/IntegrationLogo/svg/index.d.ts

@@ -18,6 +18,7 @@ export { JamfSvg } from "./jamf";
 export { JiraSvg } from "./jira";
 export { JumpcloudSvg } from "./jumpcloud";
 export { MicrosoftTeamsSvg } from "./microsoft-teams";
+export { NotionSvg } from "./notion";
 export { OktaSvg } from "./okta";
 export { OneLoginSvg } from "./onelogin";
 export { ServiceNowSvg } from "./servicenow";

package/public/components/IntegrationLogo/svg/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomSvg = exports.ZendeskSvg = exports.SlackSvg = exports.SalesforceSvg = exports.ServiceNowSvg = exports.OneLoginSvg = exports.OktaSvg = exports.MicrosoftTeamsSvg = exports.JumpcloudSvg = exports.JiraSvg = exports.JamfSvg = exports.HubspotSvg = exports.GsuiteSvg = exports.GoogleDriveSvg = exports.GitlabSvg = exports.GithubSvg = exports.GcpSvg = exports.FrontSvg = exports.EventsAPI = exports.DocuSignSvg = exports.DeploySvg = exports.DefaultSvg = exports.ConveyorSvg = exports.BitbucketSvg = exports.BambooHrSvg = exports.AwsSvg = exports.AddigySvg = void 0;
+exports.ZoomSvg = exports.ZendeskSvg = exports.SlackSvg = exports.SalesforceSvg = exports.ServiceNowSvg = exports.OneLoginSvg = exports.OktaSvg = exports.NotionSvg = exports.MicrosoftTeamsSvg = exports.JumpcloudSvg = exports.JiraSvg = exports.JamfSvg = exports.HubspotSvg = exports.GsuiteSvg = exports.GoogleDriveSvg = exports.GitlabSvg = exports.GithubSvg = exports.GcpSvg = exports.FrontSvg = exports.EventsAPI = exports.DocuSignSvg = exports.DeploySvg = exports.DefaultSvg = exports.ConveyorSvg = exports.BitbucketSvg = exports.BambooHrSvg = exports.AwsSvg = exports.AddigySvg = void 0;
 var addigy_1 = require("./addigy");
 Object.defineProperty(exports, "AddigySvg", { enumerable: true, get: function () { return addigy_1.AddigySvg; } });
 var aws_1 = require("./aws");
@@ -55,6 +55,8 @@ var jumpcloud_1 = require("./jumpcloud");
 Object.defineProperty(exports, "JumpcloudSvg", { enumerable: true, get: function () { return jumpcloud_1.JumpcloudSvg; } });
 var microsoft_teams_1 = require("./microsoft-teams");
 Object.defineProperty(exports, "MicrosoftTeamsSvg", { enumerable: true, get: function () { return microsoft_teams_1.MicrosoftTeamsSvg; } });
+var notion_1 = require("./notion");
+Object.defineProperty(exports, "NotionSvg", { enumerable: true, get: function () { return notion_1.NotionSvg; } });
 var okta_1 = require("./okta");
 Object.defineProperty(exports, "OktaSvg", { enumerable: true, get: function () { return okta_1.OktaSvg; } });
 var onelogin_1 = require("./onelogin");

package/public/components/IntegrationLogo/svg/notion.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SvgLogoProps } from "./wrapper";
+export declare const NotionSvg: ({ color, square, ...rest }: SvgLogoProps) => React.JSX.Element;

package/public/components/IntegrationLogo/svg/notion.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotionSvg = void 0;
+const react_1 = __importDefault(require("react"));
+const wrapper_1 = require("./wrapper");
+const NotionSvg = ({ color = "#000", square, ...rest }) => {
+    const viewBox = square ? "0 0 30 30" : "0 0 105 30";
+    return (react_1.default.createElement(wrapper_1.IntegrationLogoSvgWrapper, { viewBox: viewBox, ...rest },
+        react_1.default.createElement("title", null, "Notion integration logo"),
+        react_1.default.createElement("path", { fill: color, d: "M18.403.068 1.805 1.291C.466 1.406 0 2.28 0 3.326v18.155c0 .816.29 1.513.99 2.444l3.902 5.063c.64.815 1.223.99 2.447.93l19.275-1.163c1.63-.116 2.097-.873 2.097-2.153V6.178c0-.662-.262-.853-1.034-1.416a89.567 89.567 0 0 1-.132-.097L22.247.941C20.966.011 20.44-.107 18.403.068ZM7.776 5.843c-1.574.106-1.931.13-2.825-.596L2.678 3.443c-.232-.233-.115-.524.467-.581l15.957-1.164c1.339-.117 2.038.35 2.562.756l2.737 1.979c.116.058.407.407.058.407l-16.48.99-.203.013ZM5.94 26.427V9.087c0-.756.233-1.105.932-1.164l18.926-1.105c.642-.058.933.35.933 1.105v17.223c0 .758-.117 1.398-1.166 1.456L7.455 27.65c-1.05.058-1.515-.29-1.515-1.223Zm17.88-16.41c.116.525 0 1.049-.526 1.108l-.872.174v12.8c-.758.408-1.457.64-2.039.64-.932 0-1.165-.29-1.864-1.163l-5.707-8.96v8.67l1.806.407s0 1.047-1.458 1.047l-4.017.233c-.117-.233 0-.815.408-.931l1.048-.29V12.287l-1.456-.117c-.116-.524.174-1.28.99-1.338l4.31-.29 5.94 9.077v-8.03l-1.514-.174c-.117-.641.349-1.107.931-1.164l4.02-.234Z" }),
+        !square && (react_1.default.createElement("path", { fill: color, d: "M50.995 7.02V23.23h-2.587L40.739 12.14h-.134V23.23h-2.913V7.02h2.612l7.652 11.087h.15V7.021h2.89Zm7.715 16.446c-1.187 0-2.216-.261-3.087-.784a5.269 5.269 0 0 1-2.018-2.192c-.474-.939-.712-2.036-.712-3.292 0-1.256.237-2.356.712-3.3s1.148-1.678 2.018-2.2c.87-.522 1.9-.784 3.087-.784 1.182 0 2.208.262 3.078.784.87.522 1.544 1.256 2.018 2.2.48.944.72 2.044.72 3.3 0 1.256-.24 2.353-.72 3.292a5.269 5.269 0 0 1-2.018 2.193c-.87.522-1.896.783-3.078.783Zm.008-2.28c.654 0 1.197-.176 1.63-.53.433-.358.757-.838.973-1.44.217-.607.325-1.282.325-2.026 0-.744-.108-1.419-.325-2.026-.216-.607-.54-1.09-.973-1.448-.433-.364-.976-.546-1.63-.546-.66 0-1.209.182-1.646.546-.438.359-.765.841-.982 1.448-.21.607-.316 1.282-.316 2.026 0 .744.105 1.42.316 2.026.217.602.544 1.082.982 1.44.438.354.986.53 1.646.53ZM72.33 11.074v2.2h-6.964v-2.2h6.964ZM67.09 8.16h2.842v11.42c0 .385.058.68.174.887.121.205.28.345.475.419.195.074.414.11.657.11a2.8 2.8 0 0 0 .49-.039c.148-.026.264-.05.349-.071l.474 2.224a6.49 6.49 0 0 1-.648.174c-.28.063-.623.1-1.03.11-.712.022-1.355-.086-1.93-.324a3.04 3.04 0 0 1-1.361-1.116c-.333-.506-.496-1.142-.491-1.907V8.16Zm6.983 15.069V11.073h2.85v12.156h-2.85Zm1.433-13.89c-.454 0-.842-.15-1.164-.45a1.456 1.456 0 0 1-.483-1.093c0-.427.161-.791.483-1.092a1.645 1.645 0 0 1 1.163-.459c.454 0 .842.153 1.164.46.327.3.49.664.49 1.091 0 .422-.163.786-.49 1.092-.322.301-.71.452-1.163.452Zm8.99 14.127c-1.187 0-2.216-.261-3.087-.784a5.268 5.268 0 0 1-2.018-2.192c-.474-.939-.712-2.036-.712-3.292 0-1.256.238-2.356.712-3.3.475-.944 1.148-1.678 2.018-2.2.871-.522 1.9-.784 3.087-.784 1.182 0 2.208.262 3.078.784.871.522 1.544 1.256 2.019 2.2.48.944.72 2.044.72 3.3 0 1.256-.24 2.353-.72 3.292a5.267 5.267 0 0 1-2.019 2.193c-.87.522-1.896.783-3.078.783Zm.008-2.28c.654 0 1.197-.176 1.63-.53.433-.358.757-.838.974-1.44.216-.607.324-1.282.324-2.026 0-.744-.108-1.419-.324-2.026-.217-.607-.541-1.09-.974-1.448-.433-.364-.976-.546-1.63-.546-.66 0-1.208.182-1.646.546-.438.359-.765.841-.982 1.448-.21.607-.316 1.282-.316 2.026 0 .744.105 1.42.316 2.026.217.602.544 1.082.982 1.44.438.354.986.53 1.646.53Zm10.406-5.088v7.13h-2.848V11.074h2.722v2.057h.143a3.48 3.48 0 0 1 1.337-1.614c.617-.401 1.38-.602 2.288-.602.833 0 1.561.18 2.184.539a3.63 3.63 0 0 1 1.456 1.559c.348.68.522 1.506.522 2.477v7.74h-2.84v-7.305c0-.813-.212-1.448-.634-1.907-.423-.464-1.006-.697-1.75-.697-.5 0-.946.111-1.337.333-.39.216-.696.532-.918.95-.216.41-.325.91-.325 1.495Z" }))));
+};
+exports.NotionSvg = NotionSvg;

package/public/components/TopBar/TopBar.d.ts

@@ -2,12 +2,15 @@ import React, { ReactNode } from "react";
 import { BoxProps } from "../Box";
 export interface TopBarProps extends BoxProps {
     leftSlot: ReactNode;
+    leftSlotClassName?: string;
     middleSlot?: ReactNode;
+    middleSlotClassName?: string;
     rightSlot?: ReactNode;
+    rightSlotClassName?: string;
     removePadding?: boolean;
 }
 declare const TopBar: {
-    ({ leftSlot, middleSlot, rightSlot, removePadding, className, ...rest }: TopBarProps): React.JSX.Element;
+    ({ leftSlot, leftSlotClassName, middleSlot, middleSlotClassName, rightSlot, rightSlotClassName, removePadding, className, ...rest }: TopBarProps): React.JSX.Element;
     SubNav: (props: BoxProps) => React.JSX.Element;
     SubNavItem: (props: import("./TopBarSubNavItem").SubNavItemProps) => React.JSX.Element;
     Breadcrumbs: (props: import("./TopBarBreadcrumbs").BreadcrumbsProps) => React.JSX.Element;

package/public/components/TopBar/TopBar.js

@@ -12,11 +12,11 @@ const TopBarSubNavItem_1 = require("./TopBarSubNavItem");
 const TopBarSubNav_1 = require("./TopBarSubNav");
 const TopBarBreadcrumbs_1 = require("./TopBarBreadcrumbs");
 const b = (0, bem_1.bemHOF)("TopBar");
-const TopBar = ({ leftSlot, middleSlot, rightSlot, removePadding = false, className, ...rest }) => {
+const TopBar = ({ leftSlot, leftSlotClassName, middleSlot, middleSlotClassName, rightSlot, rightSlotClassName, removePadding = false, className, ...rest }) => {
     return (react_1.default.createElement(Flex_1.Flex, { className: (0, classnames_1.default)(b(), className), ...rest },
-        react_1.default.createElement(Flex_1.Flex, { className: (0, classnames_1.default)(b({ e: "left-slot" }), !removePadding && "pl-8") }, leftSlot),
-        middleSlot && (react_1.default.createElement(Flex_1.Flex, { className: b({ e: "middle-slot" }) }, middleSlot)),
-        rightSlot && (react_1.default.createElement(Flex_1.Flex, { className: (0, classnames_1.default)(b({ e: "right-slot" }), !removePadding && "pr-8") }, rightSlot))));
+        react_1.default.createElement(Flex_1.Flex, { className: (0, classnames_1.default)(b({ e: "left-slot" }), !removePadding && "pl-8", leftSlotClassName) }, leftSlot),
+        middleSlot && (react_1.default.createElement(Flex_1.Flex, { className: (0, classnames_1.default)(b({ e: "middle-slot" }), middleSlotClassName) }, middleSlot)),
+        rightSlot && (react_1.default.createElement(Flex_1.Flex, { className: (0, classnames_1.default)(b({ e: "right-slot" }), !removePadding && "pr-8", rightSlotClassName) }, rightSlot))));
 };
 exports.TopBar = TopBar;
 TopBar.SubNav = TopBarSubNav_1.TopBarSubNav;

package/src/components/Icon/Icon.tsx

@@ -231,6 +231,7 @@ import {
   BrandGoogleDriveIcon,
   BrandJira,
   BrandMicrosoftTeams,
+  BrandNotion,
   BrandSalesforce,
   BrandSlack,
   BrandZendesk,
@@ -483,6 +484,7 @@ export enum CUSTOM_ICON_TYPE {
   BRAND_GOOGLE_DRIVE = "brand-google-drive",
   BRAND_JIRA = "brand-jira",
   BRAND_MICROSOFT_TEAMS = "brand-microsoft-teams",
+  BRAND_NOTION = "brand-notion",
   BRAND_SALESFORCE = "brand-salesforce",
   BRAND_SLACK = "brand-slack",
   BRAND_ZENDESK = "brand-zendesk",
@@ -516,6 +518,7 @@ const CustomIcons: CustomIconPaths = {
   [CUSTOM_ICON_TYPE.BRAND_GOOGLE_DRIVE]: BrandGoogleDriveIcon,
   [CUSTOM_ICON_TYPE.BRAND_JIRA]: BrandJira,
   [CUSTOM_ICON_TYPE.BRAND_MICROSOFT_TEAMS]: BrandMicrosoftTeams,
+  [CUSTOM_ICON_TYPE.BRAND_NOTION]: BrandNotion,
   [CUSTOM_ICON_TYPE.BRAND_SALESFORCE]: BrandSalesforce,
   [CUSTOM_ICON_TYPE.BRAND_SLACK]: BrandSlack,
   [CUSTOM_ICON_TYPE.BRAND_ZENDESK]: BrandZendesk,

package/src/components/Icon/svg/BrandNotion.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Svg, SvgProps } from "../../Svg";
+
+export const BrandNotion = (props: SvgProps) => {
+  return (
+    <Svg width="32" height="32" viewBox="0 0 30 30" fill="none" {...props}>
+      <path
+        fill="currentColor"
+        d="M18.403.068 1.805 1.291C.466 1.406 0 2.28 0 3.326v18.155c0 .816.29 1.513.99 2.444l3.902 5.063c.64.815 1.223.99 2.447.93l19.275-1.163c1.63-.116 2.097-.873 2.097-2.153V6.178c0-.662-.262-.853-1.034-1.416a89.567 89.567 0 0 1-.132-.097L22.247.941C20.966.011 20.44-.107 18.403.068ZM7.776 5.843c-1.574.106-1.931.13-2.825-.596L2.678 3.443c-.232-.233-.115-.524.467-.581l15.957-1.164c1.339-.117 2.038.35 2.562.756l2.737 1.979c.116.058.407.407.058.407l-16.48.99-.203.013ZM5.94 26.427V9.087c0-.756.233-1.105.932-1.164l18.926-1.105c.642-.058.933.35.933 1.105v17.223c0 .758-.117 1.398-1.166 1.456L7.455 27.65c-1.05.058-1.515-.29-1.515-1.223Zm17.88-16.41c.116.525 0 1.049-.526 1.108l-.872.174v12.8c-.758.408-1.457.64-2.039.64-.932 0-1.165-.29-1.864-1.163l-5.707-8.96v8.67l1.806.407s0 1.047-1.458 1.047l-4.017.233c-.117-.233 0-.815.408-.931l1.048-.29V12.287l-1.456-.117c-.116-.524.174-1.28.99-1.338l4.31-.29 5.94 9.077v-8.03l-1.514-.174c-.117-.641.349-1.107.931-1.164l4.02-.234Z"
+      />
+    </Svg>
+  );
+};

package/src/components/Icon/svg/index.ts

@@ -7,6 +7,7 @@ export * from "./BrandFront";
 export * from "./BrandGoogleDriveIcon";
 export * from "./BrandJira";
 export * from "./BrandMicrosoftTeams";
+export * from "./BrandNotion";
 export * from "./BrandSalesforce";
 export * from "./BrandSlack";
 export * from "./BrandZendesk";

package/src/components/IntegrationLogo/IntegrationLogo.stories.mdx

@@ -32,6 +32,7 @@ export const logos = [
   "jira",
   "jumpcloud",
   "microsoft_teams",
+  "notion",
   "okta",
   "onelogin",
   "service_now",

package/src/components/IntegrationLogo/IntegrationLogo.tsx

@@ -22,6 +22,7 @@ export const integrationLogoNames = [
   "jira",
   "jumpcloud",
   "microsoft_teams",
+  "notion",
   "okta",
   "onelogin",
   "service_now",

package/src/components/IntegrationLogo/IntegrationLogoSvg.tsx

@@ -22,6 +22,7 @@ import {
   JiraSvg,
   JumpcloudSvg,
   MicrosoftTeamsSvg,
+  NotionSvg,
   OktaSvg,
   OneLoginSvg,
   ServiceNowSvg,
@@ -78,6 +79,8 @@ const IntegrationLogoSvg = ({ logo, ...rest }: IntegrationLogoSvgProps) => {
       return <JumpcloudSvg {...rest} />;
     case "microsoft_teams":
       return <MicrosoftTeamsSvg {...rest} />;
+    case "notion":
+      return <NotionSvg {...rest} />;
     case "okta":
       return <OktaSvg {...rest} />;
     case "onelogin":

package/src/components/IntegrationLogo/svg/index.ts

@@ -18,6 +18,7 @@ export { JamfSvg } from "./jamf";
 export { JiraSvg } from "./jira";
 export { JumpcloudSvg } from "./jumpcloud";
 export { MicrosoftTeamsSvg } from "./microsoft-teams";
+export { NotionSvg } from "./notion";
 export { OktaSvg } from "./okta";
 export { OneLoginSvg } from "./onelogin";
 export { ServiceNowSvg } from "./servicenow";

package/src/components/IntegrationLogo/svg/notion.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { IntegrationLogoSvgWrapper, SvgLogoProps } from "./wrapper";
+
+export const NotionSvg = ({
+  color = "#000",
+  square,
+  ...rest
+}: SvgLogoProps) => {
+  const viewBox = square ? "0 0 30 30" : "0 0 105 30";
+  return (
+    <IntegrationLogoSvgWrapper viewBox={viewBox} {...rest}>
+      <title>Notion integration logo</title>
+      <path
+        fill={color}
+        d="M18.403.068 1.805 1.291C.466 1.406 0 2.28 0 3.326v18.155c0 .816.29 1.513.99 2.444l3.902 5.063c.64.815 1.223.99 2.447.93l19.275-1.163c1.63-.116 2.097-.873 2.097-2.153V6.178c0-.662-.262-.853-1.034-1.416a89.567 89.567 0 0 1-.132-.097L22.247.941C20.966.011 20.44-.107 18.403.068ZM7.776 5.843c-1.574.106-1.931.13-2.825-.596L2.678 3.443c-.232-.233-.115-.524.467-.581l15.957-1.164c1.339-.117 2.038.35 2.562.756l2.737 1.979c.116.058.407.407.058.407l-16.48.99-.203.013ZM5.94 26.427V9.087c0-.756.233-1.105.932-1.164l18.926-1.105c.642-.058.933.35.933 1.105v17.223c0 .758-.117 1.398-1.166 1.456L7.455 27.65c-1.05.058-1.515-.29-1.515-1.223Zm17.88-16.41c.116.525 0 1.049-.526 1.108l-.872.174v12.8c-.758.408-1.457.64-2.039.64-.932 0-1.165-.29-1.864-1.163l-5.707-8.96v8.67l1.806.407s0 1.047-1.458 1.047l-4.017.233c-.117-.233 0-.815.408-.931l1.048-.29V12.287l-1.456-.117c-.116-.524.174-1.28.99-1.338l4.31-.29 5.94 9.077v-8.03l-1.514-.174c-.117-.641.349-1.107.931-1.164l4.02-.234Z"
+      />
+
+      {!square && (
+        <path
+          fill={color}
+          d="M50.995 7.02V23.23h-2.587L40.739 12.14h-.134V23.23h-2.913V7.02h2.612l7.652 11.087h.15V7.021h2.89Zm7.715 16.446c-1.187 0-2.216-.261-3.087-.784a5.269 5.269 0 0 1-2.018-2.192c-.474-.939-.712-2.036-.712-3.292 0-1.256.237-2.356.712-3.3s1.148-1.678 2.018-2.2c.87-.522 1.9-.784 3.087-.784 1.182 0 2.208.262 3.078.784.87.522 1.544 1.256 2.018 2.2.48.944.72 2.044.72 3.3 0 1.256-.24 2.353-.72 3.292a5.269 5.269 0 0 1-2.018 2.193c-.87.522-1.896.783-3.078.783Zm.008-2.28c.654 0 1.197-.176 1.63-.53.433-.358.757-.838.973-1.44.217-.607.325-1.282.325-2.026 0-.744-.108-1.419-.325-2.026-.216-.607-.54-1.09-.973-1.448-.433-.364-.976-.546-1.63-.546-.66 0-1.209.182-1.646.546-.438.359-.765.841-.982 1.448-.21.607-.316 1.282-.316 2.026 0 .744.105 1.42.316 2.026.217.602.544 1.082.982 1.44.438.354.986.53 1.646.53ZM72.33 11.074v2.2h-6.964v-2.2h6.964ZM67.09 8.16h2.842v11.42c0 .385.058.68.174.887.121.205.28.345.475.419.195.074.414.11.657.11a2.8 2.8 0 0 0 .49-.039c.148-.026.264-.05.349-.071l.474 2.224a6.49 6.49 0 0 1-.648.174c-.28.063-.623.1-1.03.11-.712.022-1.355-.086-1.93-.324a3.04 3.04 0 0 1-1.361-1.116c-.333-.506-.496-1.142-.491-1.907V8.16Zm6.983 15.069V11.073h2.85v12.156h-2.85Zm1.433-13.89c-.454 0-.842-.15-1.164-.45a1.456 1.456 0 0 1-.483-1.093c0-.427.161-.791.483-1.092a1.645 1.645 0 0 1 1.163-.459c.454 0 .842.153 1.164.46.327.3.49.664.49 1.091 0 .422-.163.786-.49 1.092-.322.301-.71.452-1.163.452Zm8.99 14.127c-1.187 0-2.216-.261-3.087-.784a5.268 5.268 0 0 1-2.018-2.192c-.474-.939-.712-2.036-.712-3.292 0-1.256.238-2.356.712-3.3.475-.944 1.148-1.678 2.018-2.2.871-.522 1.9-.784 3.087-.784 1.182 0 2.208.262 3.078.784.871.522 1.544 1.256 2.019 2.2.48.944.72 2.044.72 3.3 0 1.256-.24 2.353-.72 3.292a5.267 5.267 0 0 1-2.019 2.193c-.87.522-1.896.783-3.078.783Zm.008-2.28c.654 0 1.197-.176 1.63-.53.433-.358.757-.838.974-1.44.216-.607.324-1.282.324-2.026 0-.744-.108-1.419-.324-2.026-.217-.607-.541-1.09-.974-1.448-.433-.364-.976-.546-1.63-.546-.66 0-1.208.182-1.646.546-.438.359-.765.841-.982 1.448-.21.607-.316 1.282-.316 2.026 0 .744.105 1.42.316 2.026.217.602.544 1.082.982 1.44.438.354.986.53 1.646.53Zm10.406-5.088v7.13h-2.848V11.074h2.722v2.057h.143a3.48 3.48 0 0 1 1.337-1.614c.617-.401 1.38-.602 2.288-.602.833 0 1.561.18 2.184.539a3.63 3.63 0 0 1 1.456 1.559c.348.68.522 1.506.522 2.477v7.74h-2.84v-7.305c0-.813-.212-1.448-.634-1.907-.423-.464-1.006-.697-1.75-.697-.5 0-.946.111-1.337.333-.39.216-.696.532-.918.95-.216.41-.325.91-.325 1.495Z"
+        />
+      )}
+    </IntegrationLogoSvgWrapper>
+  );
+};

package/src/components/TopBar/TopBar.tsx

@@ -11,8 +11,11 @@ const b = bemHOF("TopBar");
 
 export interface TopBarProps extends BoxProps {
   leftSlot: ReactNode;
+  leftSlotClassName?: string;
   middleSlot?: ReactNode;
+  middleSlotClassName?: string;
   rightSlot?: ReactNode;
+  rightSlotClassName?: string;
   removePadding?: boolean;
 }
 
@@ -21,8 +24,11 @@ export interface TopBarProps extends BoxProps {
  */
 const TopBar = ({
   leftSlot,
+  leftSlotClassName,
   middleSlot,
+  middleSlotClassName,
   rightSlot,
+  rightSlotClassName,
   removePadding = false,
   className,
   ...rest
@@ -30,18 +36,27 @@ const TopBar = ({
   return (
     <Flex className={classNames(b(), className)} {...rest}>
       <Flex
-        className={classNames(b({ e: "left-slot" }), !removePadding && "pl-8")}
+        className={classNames(
+          b({ e: "left-slot" }),
+          !removePadding && "pl-8",
+          leftSlotClassName,
+        )}
       >
         {leftSlot}
       </Flex>
       {middleSlot && (
-        <Flex className={b({ e: "middle-slot" })}>{middleSlot}</Flex>
+        <Flex
+          className={classNames(b({ e: "middle-slot" }), middleSlotClassName)}
+        >
+          {middleSlot}
+        </Flex>
       )}
       {rightSlot && (
         <Flex
           className={classNames(
             b({ e: "right-slot" }),
             !removePadding && "pr-8",
+            rightSlotClassName,
           )}
         >
           {rightSlot}