@conveyorhq/arrow-ds 1.193.0 → 1.195.0

package/package.json

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

package/public/components/Chip/Chip.d.ts

@@ -5,7 +5,7 @@ export interface ChipProps {
     style?: React.CSSProperties;
 }
 export declare const ChipDefault: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
-declare const integrationNames: readonly ["jira", "salesforce", "service_now", "zendesk"];
+declare const integrationNames: readonly ["front", "jira", "salesforce", "service_now", "slack", "zendesk"];
 export declare const ChipIntegration: React.ForwardRefExoticComponent<ChipProps & {
     integration: (typeof integrationNames)[number];
 } & React.RefAttributes<HTMLDivElement>>;

package/public/components/Chip/Chip.js

@@ -37,16 +37,20 @@ exports.ChipDefault = (0, react_1.forwardRef)(function Chip({ children, classNam
     return (react_1.default.createElement(Box_1.Box, { as: "span", ref: ref, style: style, className: (0, classnames_1.default)(cn(), cn({ m: "default" }), className) }, children));
 });
 const integrationNames = [
+    "front",
     "jira",
     "salesforce",
     "service_now",
+    "slack",
     "zendesk",
 ];
 exports.ChipIntegration = (0, react_1.forwardRef)(function ChipIntegration({ children, integration, className, style }, ref) {
     const integrationClassNames = {
+        front: "text-[#a857f1] bg-[#a857f1]/15",
         jira: "text-[#2684ff] bg-[#2684ff]/15",
         salesforce: "text-blue-400 bg-blue-300/15",
-        service_now: "text-[#62d84e] bg-[#62d84e]/15",
+        service_now: "text-[#62d84e] bg-[#62d84e]/10",
+        slack: "text-[#4a154b] bg-[#4a154b]/15",
         zendesk: "text-[#04363d] bg-[#04363d]/5",
     };
     return (react_1.default.createElement(Box_1.Box, { as: "span", ref: ref, style: style, className: (0, classnames_1.default)(cn(), integrationClassNames[integration], className) },

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

@@ -7,11 +7,13 @@ export declare enum CUSTOM_ICON_TYPE {
     ARROW_TO_RIGHT = "arrow-to-right",
     BADGE_CHECK = "badge-check",
     BRAND_CONFLUENCE = "brand-confluence",
+    BRAND_FRONT = "brand-front",
     BRAND_GOOGLE_DRIVE = "brand-google-drive",
     BRAND_JIRA = "brand-jira",
     BRAND_MICROSOFT_TEAMS = "brand-microsoft-teams",
-    BRAND_ZENDESK = "brand-zendesk",
     BRAND_SALESFORCE = "brand-salesforce",
+    BRAND_SLACK = "brand-slack",
+    BRAND_ZENDESK = "brand-zendesk",
     COMMENT_ALT_CHECK = "comment-alt-check",
     CONVEYOR_LOGO = "conveyor-logo",
     DIALOG_CHECK = "dialog-check",
@@ -193,6 +195,7 @@ export declare enum ICON_TYPE {
     SQUARE = "square",
     STAMP = "stamp",
     STAR = "star",
+    STOPWATCH = "stopwatch",
     SUITCASE_ROLLING = "suitcase-rolling",
     SYNC = "sync",
     TABLE = "table",

package/public/components/Icon/Icon.js

@@ -213,6 +213,7 @@ const faSpinner_1 = require("@fortawesome/free-solid-svg-icons/faSpinner");
 const faSquare_1 = require("@fortawesome/free-solid-svg-icons/faSquare");
 const faStamp_1 = require("@fortawesome/free-solid-svg-icons/faStamp");
 const faStar_2 = require("@fortawesome/free-solid-svg-icons/faStar");
+const faStopwatch_1 = require("@fortawesome/free-solid-svg-icons/faStopwatch");
 const faSuitcaseRolling_1 = require("@fortawesome/free-solid-svg-icons/faSuitcaseRolling");
 const faSync_1 = require("@fortawesome/free-solid-svg-icons/faSync");
 const faTable_1 = require("@fortawesome/free-solid-svg-icons/faTable");
@@ -247,10 +248,8 @@ const svg_1 = require("./svg");
 const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
-const ShieldCheck_1 = require("./svg/ShieldCheck");
-const BrandZendesk_1 = require("./svg/BrandZendesk");
 const cn = (0, utilities_1.bemHOF)("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClipboardCheck_1.faClipboardCheck, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCodeBranch_1.faCodeBranch, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDownload_1.faDownload, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFeatherAlt_1.faFeatherAlt, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGavel_1.faGavel, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMinusCircle_1.faMinusCircle, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTag_1.faTag, 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, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUniversalAccess_1.faUniversalAccess, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserClock_1.faUserClock, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClipboardCheck_1.faClipboardCheck, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCodeBranch_1.faCodeBranch, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDownload_1.faDownload, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFeatherAlt_1.faFeatherAlt, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGavel_1.faGavel, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMinusCircle_1.faMinusCircle, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faStopwatch_1.faStopwatch, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTag_1.faTag, 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, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUniversalAccess_1.faUniversalAccess, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserClock_1.faUserClock, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -258,11 +257,13 @@ var CUSTOM_ICON_TYPE;
     CUSTOM_ICON_TYPE["ARROW_TO_RIGHT"] = "arrow-to-right";
     CUSTOM_ICON_TYPE["BADGE_CHECK"] = "badge-check";
     CUSTOM_ICON_TYPE["BRAND_CONFLUENCE"] = "brand-confluence";
+    CUSTOM_ICON_TYPE["BRAND_FRONT"] = "brand-front";
     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_ZENDESK"] = "brand-zendesk";
     CUSTOM_ICON_TYPE["BRAND_SALESFORCE"] = "brand-salesforce";
+    CUSTOM_ICON_TYPE["BRAND_SLACK"] = "brand-slack";
+    CUSTOM_ICON_TYPE["BRAND_ZENDESK"] = "brand-zendesk";
     CUSTOM_ICON_TYPE["COMMENT_ALT_CHECK"] = "comment-alt-check";
     CUSTOM_ICON_TYPE["CONVEYOR_LOGO"] = "conveyor-logo";
     CUSTOM_ICON_TYPE["DIALOG_CHECK"] = "dialog-check";
@@ -284,11 +285,13 @@ const CustomIcons = {
     [CUSTOM_ICON_TYPE.ARROW_TO_RIGHT]: svg_1.ArrowToRight,
     [CUSTOM_ICON_TYPE.BADGE_CHECK]: svg_1.BadgeCheck,
     [CUSTOM_ICON_TYPE.BRAND_CONFLUENCE]: svg_1.BrandConfluenceIcon,
+    [CUSTOM_ICON_TYPE.BRAND_FRONT]: svg_1.BrandFront,
     [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_SALESFORCE]: svg_1.BrandSalesforce,
-    [CUSTOM_ICON_TYPE.BRAND_ZENDESK]: BrandZendesk_1.BrandZendesk,
+    [CUSTOM_ICON_TYPE.BRAND_SLACK]: svg_1.BrandSlack,
+    [CUSTOM_ICON_TYPE.BRAND_ZENDESK]: svg_1.BrandZendesk,
     [CUSTOM_ICON_TYPE.COMMENT_ALT_CHECK]: svg_1.CommentAltCheck,
     [CUSTOM_ICON_TYPE.CONVEYOR_LOGO]: svg_1.ConveyorLogoIcon,
     [CUSTOM_ICON_TYPE.DIALOG_CHECK]: svg_1.DialogCheck,
@@ -299,7 +302,7 @@ const CustomIcons = {
     [CUSTOM_ICON_TYPE.INSERT_MIDDLE]: svg_1.InsertMiddle,
     [CUSTOM_ICON_TYPE.INSERT_START]: svg_1.InsertStart,
     [CUSTOM_ICON_TYPE.SCROLL]: svg_1.Scroll,
-    [CUSTOM_ICON_TYPE.SHIELD_CHECK]: ShieldCheck_1.SheildCheck,
+    [CUSTOM_ICON_TYPE.SHIELD_CHECK]: svg_1.ShieldCheck,
     [CUSTOM_ICON_TYPE.SPARKLE]: svg_1.Sparkle,
     [CUSTOM_ICON_TYPE.TRIANGLE_DOWN]: svg_1.TriangleDown,
     [CUSTOM_ICON_TYPE.TRIANGLE_UP]: svg_1.TriangleUp,
@@ -471,6 +474,7 @@ var ICON_TYPE;
     ICON_TYPE["SQUARE"] = "square";
     ICON_TYPE["STAMP"] = "stamp";
     ICON_TYPE["STAR"] = "star";
+    ICON_TYPE["STOPWATCH"] = "stopwatch";
     ICON_TYPE["SUITCASE_ROLLING"] = "suitcase-rolling";
     ICON_TYPE["SYNC"] = "sync";
     ICON_TYPE["TABLE"] = "table";

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandFront = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const BrandFront = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, { width: "32", height: "32", viewBox: "0 0 65 65", fill: "none", ...props },
+        react_1.default.createElement("path", { fill: "currentColor", d: "M0 63.6152H21.3918V21.3008H64.0428V-0.00341797H0V63.6152Z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M45.5945 64.8878C56.2523 64.8878 64.8922 56.2479 64.8922 45.5901C64.8922 34.9323 56.2523 26.2925 45.5945 26.2925C34.9367 26.2925 26.2969 34.9323 26.2969 45.5901C26.2969 56.2479 34.9367 64.8878 45.5945 64.8878Z" })));
+};
+exports.BrandFront = BrandFront;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandSlack = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const BrandSlack = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", ...props },
+        react_1.default.createElement("path", { fill: "currentColor", d: "M6.813 20.181c0 1.832-1.497 3.329-3.329 3.329s-3.329-1.497-3.329-3.329c0-1.832 1.497-3.329 3.329-3.329h3.329v3.329z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M8.49 20.181c0-1.832 1.497-3.329 3.329-3.329s3.329 1.497 3.329 3.329v8.335c0 1.832-1.497 3.329-3.329 3.329s-3.329-1.497-3.329-3.329v-8.335z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M11.819 6.813c-1.832 0-3.329-1.497-3.329-3.329s1.497-3.329 3.329-3.329c1.832 0 3.329 1.497 3.329 3.329v3.329h-3.329z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M11.819 8.49c1.832 0 3.329 1.497 3.329 3.329s-1.497 3.329-3.329 3.329h-8.335c-1.832 0-3.329-1.497-3.329-3.329s1.497-3.329 3.329-3.329h8.335z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M25.187 11.819c0-1.832 1.497-3.329 3.329-3.329s3.329 1.497 3.329 3.329c0 1.832-1.497 3.329-3.329 3.329h-3.329v-3.329z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M23.51 11.819c0 1.832-1.497 3.329-3.329 3.329s-3.329-1.497-3.329-3.329v-8.335c0-1.832 1.497-3.329 3.329-3.329s3.329 1.497 3.329 3.329v8.335z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M20.181 25.187c1.832 0 3.329 1.497 3.329 3.329s-1.497 3.329-3.329 3.329c-1.832 0-3.329-1.497-3.329-3.329v-3.329h3.329z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M20.181 23.51c-1.832 0-3.329-1.497-3.329-3.329s1.497-3.329 3.329-3.329h8.335c1.832 0 3.329 1.497 3.329 3.329s-1.497 3.329-3.329 3.329h-8.335z" })));
+};
+exports.BrandSlack = BrandSlack;

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

@@ -7,7 +7,7 @@ exports.BrandZendesk = void 0;
 const react_1 = __importDefault(require("react"));
 const Svg_1 = require("../../Svg");
 const BrandZendesk = (props) => {
-    return (react_1.default.createElement(Svg_1.Svg, { width: "32", height: "32", viewBox: "0 0 32 32", fill: "#04363d", ...props },
-        react_1.default.createElement("path", { d: "M24.068 20.44c-0.001 0-0.002 0-0.003 0-3.823 0-6.923 3.1-6.923 6.923 0 0.001 0 0.003 0 0.004v-0h13.854c0-0 0-0 0-0 0-3.825-3.101-6.926-6.926-6.926-0 0-0 0-0 0h0zM14.858 10.643l-13.854 16.724h13.854zM1.004 4.636c0 3.826 3.101 6.927 6.927 6.927s6.927-3.101 6.927-6.927v0zM17.142 4.633v16.728l13.854-16.726h-13.854z" })));
+    return (react_1.default.createElement(Svg_1.Svg, { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", ...props },
+        react_1.default.createElement("path", { fill: "currentColor", d: "M24.068 20.44c-0.001 0-0.002 0-0.003 0-3.823 0-6.923 3.1-6.923 6.923 0 0.001 0 0.003 0 0.004v-0h13.854c0-0 0-0 0-0 0-3.825-3.101-6.926-6.926-6.926-0 0-0 0-0 0h0zM14.858 10.643l-13.854 16.724h13.854zM1.004 4.636c0 3.826 3.101 6.927 6.927 6.927s6.927-3.101 6.927-6.927v0zM17.142 4.633v16.728l13.854-16.726h-13.854z" })));
 };
 exports.BrandZendesk = BrandZendesk;

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

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

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

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SheildCheck = void 0;
+exports.ShieldCheck = void 0;
 const react_1 = __importDefault(require("react"));
 const Svg_1 = require("../../Svg");
-const SheildCheck = (props) => {
+const ShieldCheck = (props) => {
     return (react_1.default.createElement(Svg_1.Svg, { width: "30", height: "32", viewBox: "0 0 30 32", ...props },
         react_1.default.createElement("path", { fill: "currentColor", d: "M26.885 4.846l-11.077-4.615c-0.288-0.115-0.75-0.173-1.038-0.173-0.346 0-0.808 0.058-1.096 0.173l-11.077 4.615c-1.038 0.462-1.673 1.442-1.673 2.538 0 11.481 6.577 19.385 12.75 21.981 0.692 0.288 1.442 0.288 2.135 0 4.962-2.077 12.808-9.173 12.808-21.981 0-1.096-0.692-2.077-1.731-2.538zM24.173 11.423l-10.615 10.615c-0.346 0.404-0.981 0.404-1.327 0l-6-6c-0.346-0.346-0.346-0.923 0-1.269l1.327-1.327c0.346-0.346 0.923-0.346 1.269 0l4.096 4.038 8.654-8.654c0.346-0.346 0.923-0.346 1.269 0l1.327 1.327c0.346 0.346 0.346 0.923 0 1.269z" })));
 };
-exports.SheildCheck = SheildCheck;
+exports.ShieldCheck = ShieldCheck;

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

@@ -3,10 +3,13 @@ export * from "./ArrowToLeft";
 export * from "./ArrowToRight";
 export * from "./BadgeCheck";
 export * from "./BrandConfluenceIcon";
+export * from "./BrandFront";
 export * from "./BrandGoogleDriveIcon";
 export * from "./BrandJira";
 export * from "./BrandMicrosoftTeams";
 export * from "./BrandSalesforce";
+export * from "./BrandSlack";
+export * from "./BrandZendesk";
 export * from "./CommentAltCheck";
 export * from "./ConveyorLogoIcon";
 export * from "./DialogCheck";
@@ -17,5 +20,6 @@ export * from "./InsertEnd";
 export * from "./InsertMiddle";
 export * from "./InsertStart";
 export * from "./Scroll";
+export * from "./ShieldCheck";
 export * from "./Sparkle";
 export * from "./Triangle";

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

@@ -19,10 +19,13 @@ __exportStar(require("./ArrowToLeft"), exports);
 __exportStar(require("./ArrowToRight"), exports);
 __exportStar(require("./BadgeCheck"), exports);
 __exportStar(require("./BrandConfluenceIcon"), exports);
+__exportStar(require("./BrandFront"), exports);
 __exportStar(require("./BrandGoogleDriveIcon"), exports);
 __exportStar(require("./BrandJira"), exports);
 __exportStar(require("./BrandMicrosoftTeams"), exports);
 __exportStar(require("./BrandSalesforce"), exports);
+__exportStar(require("./BrandSlack"), exports);
+__exportStar(require("./BrandZendesk"), exports);
 __exportStar(require("./CommentAltCheck"), exports);
 __exportStar(require("./ConveyorLogoIcon"), exports);
 __exportStar(require("./DialogCheck"), exports);
@@ -33,5 +36,6 @@ __exportStar(require("./InsertEnd"), exports);
 __exportStar(require("./InsertMiddle"), exports);
 __exportStar(require("./InsertStart"), exports);
 __exportStar(require("./Scroll"), exports);
+__exportStar(require("./ShieldCheck"), exports);
 __exportStar(require("./Sparkle"), exports);
 __exportStar(require("./Triangle"), 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", "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", "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

@@ -15,6 +15,7 @@ exports.integrationLogoNames = [
     "deploy",
     "docusign",
     "events-api",
+    "front",
     "gcp",
     "github",
     "gitlab",

package/public/components/IntegrationLogo/IntegrationLogoSvg.js

@@ -23,6 +23,8 @@ const IntegrationLogoSvg = ({ logo, ...rest }) => {
             return react_1.default.createElement(svg_1.DocuSignSvg, { ...rest });
         case "events-api":
             return react_1.default.createElement(svg_1.EventsAPI, { ...rest });
+        case "front":
+            return react_1.default.createElement(svg_1.FrontSvg, { ...rest });
         case "gcp":
             return react_1.default.createElement(svg_1.GcpSvg, { ...rest });
         case "github":

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrontSvg = void 0;
+const react_1 = __importDefault(require("react"));
+const wrapper_1 = require("./wrapper");
+const FrontSvg = ({ color, square, ...rest }) => (react_1.default.createElement(wrapper_1.IntegrationLogoSvgWrapper, { viewBox: square ? "0 0 65 65" : "0 0 283 65", ...rest },
+    react_1.default.createElement("title", null, "Front integration logo"),
+    react_1.default.createElement("g", null,
+        react_1.default.createElement("path", { d: "M0 63.6152H21.3918V21.3008H64.0428V-0.00341797H0V63.6152Z", fill: color || "#a857f1" }),
+        react_1.default.createElement("path", { d: "M45.5945 64.8878C56.2523 64.8878 64.8922 56.2479 64.8922 45.5901C64.8922 34.9323 56.2523 26.2925 45.5945 26.2925C34.9367 26.2925 26.2969 34.9323 26.2969 45.5901C26.2969 56.2479 34.9367 64.8878 45.5945 64.8878Z", fill: color || "#a857f1" })),
+    !square && (react_1.default.createElement("g", null,
+        react_1.default.createElement("path", { d: "M259.657 62.7285C255.717 62.7285 252.686 61.6893 250.564 59.6108C248.485 57.5323 247.446 54.5012 247.446 50.5174V31.6812H239.457V20.7041H247.446V6.41455H260.762V20.7041H272.128V31.6812H260.762V47.7245C260.762 49.0668 261.108 50.0844 261.801 50.7773C262.494 51.4701 263.511 51.8165 264.854 51.8165H272.128V62.7285H259.657Z", fill: color || "#300c41" }),
+        react_1.default.createElement("path", { d: "M195.352 20.7035H207.433V24.211C208.818 22.6954 210.507 21.5263 212.499 20.7035C214.534 19.8375 216.786 19.3828 219.254 19.3395C221.679 19.2962 223.952 19.7076 226.074 20.5736C228.196 21.4397 230.036 22.6521 231.595 24.211C233.154 25.8131 234.345 27.7834 235.168 30.1217C236.034 32.4167 236.467 35.2313 236.467 38.5655V62.7279H223.086V39.9295C223.086 38.1975 222.913 36.8551 222.567 35.9025C222.264 34.9065 221.766 34.0621 221.073 33.3693C219.817 32.1569 218.107 31.5506 215.942 31.5506C213.776 31.5506 212.066 32.1569 210.81 33.3693C210.074 34.0621 209.533 34.9065 209.186 35.9025C208.883 36.8551 208.732 38.1975 208.732 39.9295V62.7279H195.352V20.7035Z", fill: color || "#300c41" }),
+        react_1.default.createElement("path", { d: "M167.21 63.8325C162.836 63.8325 158.852 62.8582 155.258 60.9096C151.708 59.0043 148.893 56.3412 146.814 52.9204C144.779 49.5429 143.762 45.7972 143.762 41.6836C143.762 37.5699 144.779 33.8026 146.814 30.3818C148.893 26.961 151.708 24.2762 155.258 22.3277C158.852 20.3358 162.836 19.3398 167.21 19.3398C171.583 19.3398 175.545 20.3358 179.096 22.3277C182.69 24.2762 185.505 26.961 187.54 30.3818C189.575 33.8026 190.593 37.5699 190.593 41.6836C190.593 45.7972 189.575 49.5429 187.54 52.9204C185.505 56.3412 182.69 59.0043 179.096 60.9096C175.545 62.8582 171.583 63.8325 167.21 63.8325ZM167.21 52.0111C169.028 52.0111 170.652 51.5564 172.081 50.6471C173.553 49.7377 174.701 48.5036 175.524 46.9447C176.346 45.3859 176.758 43.6322 176.758 41.6836C176.758 39.735 176.346 37.9813 175.524 36.4224C174.701 34.8635 173.553 33.6511 172.081 32.7851C170.652 31.8757 169.028 31.421 167.21 31.421C165.348 31.421 163.681 31.8757 162.208 32.7851C160.779 33.6511 159.653 34.8635 158.831 36.4224C158.008 37.9813 157.597 39.735 157.597 41.6836C157.597 43.6322 158.008 45.3859 158.831 46.9447C159.653 48.5036 160.801 49.7377 162.273 50.6471C163.746 51.5564 165.391 52.0111 167.21 52.0111Z", fill: color || "#300c41" }),
+        react_1.default.createElement("path", { d: "M114.129 20.7037H126.145V25.7051C127.574 23.9297 129.285 22.5657 131.276 21.613C133.312 20.6604 135.498 20.1841 137.837 20.1841C139.352 20.1841 140.824 20.314 142.253 20.5738V33.1746C141.214 32.7849 139.785 32.59 137.967 32.59C134.762 32.59 132.229 33.5643 130.367 35.5129C129.371 36.5089 128.613 37.7213 128.094 39.1503C127.617 40.5792 127.379 42.4196 127.379 44.6713V62.7281H114.129V20.7037Z", fill: color || "#300c41" }),
+        react_1.default.createElement("path", { d: "M75.8164 -0.665527H109.852V12.0002H89.5214V24.4062H109.462V36.6173H89.5214V62.7283H75.8164V-0.665527Z", fill: color || "#300c41" })))));
+exports.FrontSvg = FrontSvg;

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

@@ -7,6 +7,7 @@ export { DefaultSvg } from "./default";
 export { DeploySvg } from "./deploy";
 export { DocuSignSvg } from "./docusign";
 export { EventsAPI } from "./events-api";
+export { FrontSvg } from "./front";
 export { GcpSvg } from "./gcp";
 export { GithubSvg } from "./github";
 export { GitlabSvg } from "./gitlab";

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.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.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");
@@ -33,6 +33,8 @@ var docusign_1 = require("./docusign");
 Object.defineProperty(exports, "DocuSignSvg", { enumerable: true, get: function () { return docusign_1.DocuSignSvg; } });
 var events_api_1 = require("./events-api");
 Object.defineProperty(exports, "EventsAPI", { enumerable: true, get: function () { return events_api_1.EventsAPI; } });
+var front_1 = require("./front");
+Object.defineProperty(exports, "FrontSvg", { enumerable: true, get: function () { return front_1.FrontSvg; } });
 var gcp_1 = require("./gcp");
 Object.defineProperty(exports, "GcpSvg", { enumerable: true, get: function () { return gcp_1.GcpSvg; } });
 var github_1 = require("./github");

package/public/components/LoadingDots/LoadingDots.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 export interface LoadingDotsProps {
+    size?: number;
+    spacing?: number;
+    bounce?: boolean;
     className?: string;
     style?: React.CSSProperties;
 }

package/public/components/LoadingDots/LoadingDots.js

@@ -32,12 +32,16 @@ const classnames_1 = __importDefault(require("classnames"));
 const utilities_1 = require("../../utilities");
 const Box_1 = require("../Box");
 const cn = (0, utilities_1.bemHOF)("LoadingDots");
-const LoadingDot = ({ delay }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "dot" }), style: {
-        animation: `loadingDot 1s ease-in-out ${delay}ms infinite`,
+const LoadingDot = ({ size = 4 }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "dot" }), style: {
+        height: `${size}px`,
+        width: `${size}px`,
     } }));
-exports.LoadingDots = (0, react_1.forwardRef)(({ className, style }, ref) => {
-    return (react_1.default.createElement(Box_1.Box, { ref: ref, className: (0, classnames_1.default)(cn(), className), style: style },
-        react_1.default.createElement(LoadingDot, { delay: 0 }),
-        react_1.default.createElement(LoadingDot, { delay: 160 }),
-        react_1.default.createElement(LoadingDot, { delay: 320 })));
+exports.LoadingDots = (0, react_1.forwardRef)(({ size = 4, spacing = 2, bounce = false, className, style }, ref) => {
+    return (react_1.default.createElement(Box_1.Box, { ref: ref, className: (0, classnames_1.default)(cn(), bounce && cn({ m: "bounce" }), className), style: {
+            ...style,
+            gap: `${spacing}px`,
+        } },
+        react_1.default.createElement(LoadingDot, { size: size }),
+        react_1.default.createElement(LoadingDot, { size: size }),
+        react_1.default.createElement(LoadingDot, { size: size })));
 });

package/public/components/Markdown/directives/chip.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
+export declare const MarkdownDirectiveChipFront: ({ children, }: {
+    children: string;
+}) => React.JSX.Element;
 export declare const MarkdownDirectiveChipJira: ({ children, }: {
     children: string;
 }) => React.JSX.Element;
@@ -8,6 +11,9 @@ export declare const MarkdownDirectiveChipSalesforce: ({ children, }: {
 export declare const MarkdownDirectiveChipServiceNow: ({ children, }: {
     children: string;
 }) => React.JSX.Element;
+export declare const MarkdownDirectiveChipSlack: ({ children, }: {
+    children: string;
+}) => React.JSX.Element;
 export declare const MarkdownDirectiveChipZendesk: ({ children, }: {
     children: string;
 }) => React.JSX.Element;

package/public/components/Markdown/directives/chip.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MarkdownDirectiveChipInfo = exports.MarkdownDirectiveChipConveyor = exports.MarkdownDirectiveChipZendesk = exports.MarkdownDirectiveChipServiceNow = exports.MarkdownDirectiveChipSalesforce = exports.MarkdownDirectiveChipJira = void 0;
+exports.MarkdownDirectiveChipInfo = exports.MarkdownDirectiveChipConveyor = exports.MarkdownDirectiveChipZendesk = exports.MarkdownDirectiveChipSlack = exports.MarkdownDirectiveChipServiceNow = exports.MarkdownDirectiveChipSalesforce = exports.MarkdownDirectiveChipJira = exports.MarkdownDirectiveChipFront = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const tokens_1 = require("../../../style-dictionary/dist/tokens");
@@ -15,6 +15,10 @@ const sharedProps = {
         verticalAlign: "text-bottom",
     },
 };
+const MarkdownDirectiveChipFront = ({ children, }) => {
+    return (react_1.default.createElement(Chip_1.Chip.Integration, { integration: "front", className: (0, classnames_1.default)("uppercase", sharedProps.className), style: sharedProps.style }, children));
+};
+exports.MarkdownDirectiveChipFront = MarkdownDirectiveChipFront;
 const MarkdownDirectiveChipJira = ({ children, }) => {
     return (react_1.default.createElement(Chip_1.Chip.Integration, { integration: "jira", className: (0, classnames_1.default)("uppercase", sharedProps.className), style: sharedProps.style }, children));
 };
@@ -27,6 +31,10 @@ const MarkdownDirectiveChipServiceNow = ({ children, }) => {
     return (react_1.default.createElement(Chip_1.Chip.Integration, { integration: "service_now", className: (0, classnames_1.default)("uppercase", sharedProps.className), style: sharedProps.style }, children));
 };
 exports.MarkdownDirectiveChipServiceNow = MarkdownDirectiveChipServiceNow;
+const MarkdownDirectiveChipSlack = ({ children, }) => {
+    return (react_1.default.createElement(Chip_1.Chip.Integration, { integration: "slack", className: (0, classnames_1.default)("uppercase", sharedProps.className), style: sharedProps.style }, children));
+};
+exports.MarkdownDirectiveChipSlack = MarkdownDirectiveChipSlack;
 const MarkdownDirectiveChipZendesk = ({ children, }) => {
     return (react_1.default.createElement(Chip_1.Chip.Integration, { integration: "zendesk", className: (0, classnames_1.default)("uppercase", sharedProps.className), style: sharedProps.style }, children));
 };

package/public/css/styles.css

@@ -4483,12 +4483,46 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   }
 }
 
+@-webkit-keyframes loadingDotBounce {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  40% {
+    -webkit-transform: translateY(-4px);
+            transform: translateY(-4px);
+    opacity: 0.4;
+  }
+  60% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes loadingDotBounce {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  40% {
+    -webkit-transform: translateY(-4px);
+            transform: translateY(-4px);
+    opacity: 0.4;
+  }
+  60% {
+    opacity: 0.6;
+  }
+}
+
 .ads-LoadingDots {
   display: inline-flex;
-  width: 24px;
   justify-content: space-between;
   align-self: center;
-  padding: 4px;
   text-align: center;
   vertical-align: middle;
 
@@ -4497,12 +4531,39 @@ button.ads-DateRangePicker-preset--isSelected:hover {
 
 .ads-LoadingDots-dot {
   display: inline-block;
-  height: 4px;
-  width: 4px;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(134 163 181 / var(--tw-bg-opacity));
+  background-color: rgb(185 200 210 / var(--tw-bg-opacity));
   vertical-align: top;
+
+  -webkit-animation: loadingDot 1.2s infinite ease-in-out;
+
+          animation: loadingDot 1.2s infinite ease-in-out;
+}
+
+.ads-LoadingDots-dot:nth-child(2) {
+  -webkit-animation-delay: 160ms;
+          animation-delay: 160ms;
+}
+
+.ads-LoadingDots-dot:nth-child(3) {
+  -webkit-animation-delay: 320ms;
+          animation-delay: 320ms;
+}
+
+.ads-LoadingDots--bounce .ads-LoadingDots-dot {
+  -webkit-animation-name: loadingDotBounce;
+          animation-name: loadingDotBounce;
+}
+
+.ads-LoadingDots--bounce .ads-LoadingDots-dot:nth-child(1) {
+  -webkit-animation-delay: -320ms;
+          animation-delay: -320ms;
+}
+
+.ads-LoadingDots--bounce .ads-LoadingDots-dot:nth-child(2) {
+  -webkit-animation-delay: -160ms;
+          animation-delay: -160ms;
 }
 
 .ads-Markdown {
@@ -8700,6 +8761,10 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   background-color: rgb(222 231 238 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#a857f1\]\/15 {
+  background-color: rgb(168 87 241 / 0.15);
+}
+
 .bg-\[\#2684ff\]\/15 {
   background-color: rgb(38 132 255 / 0.15);
 }
@@ -8708,8 +8773,12 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   background-color: rgb(62 158 245 / 0.15);
 }
 
-.bg-\[\#62d84e\]\/15 {
-  background-color: rgb(98 216 78 / 0.15);
+.bg-\[\#62d84e\]\/10 {
+  background-color: rgb(98 216 78 / 0.1);
+}
+
+.bg-\[\#4a154b\]\/15 {
+  background-color: rgb(74 21 75 / 0.15);
 }
 
 .bg-\[\#04363d\]\/5 {
@@ -8881,6 +8950,11 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   color: rgb(32 65 86 / var(--tw-text-opacity));
 }
 
+.text-\[\#a857f1\] {
+  --tw-text-opacity: 1;
+  color: rgb(168 87 241 / var(--tw-text-opacity));
+}
+
 .text-\[\#2684ff\] {
   --tw-text-opacity: 1;
   color: rgb(38 132 255 / var(--tw-text-opacity));
@@ -8896,6 +8970,11 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   color: rgb(98 216 78 / var(--tw-text-opacity));
 }
 
+.text-\[\#4a154b\] {
+  --tw-text-opacity: 1;
+  color: rgb(74 21 75 / var(--tw-text-opacity));
+}
+
 .text-\[\#04363d\] {
   --tw-text-opacity: 1;
   color: rgb(4 54 61 / var(--tw-text-opacity));
@@ -8992,10 +9071,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   transition-duration: 150ms;
 }
 
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 @-webkit-keyframes fadeIn {
   from {
     opacity: 0;