@conveyorhq/arrow-ds 1.38.0 → 1.40.1

package/package.json

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

package/public/components/Avatar/Avatar.js

@@ -42,11 +42,11 @@ const cn = bem_1.bemHOF("Avatar");
 const { color } = tokens_1.tokens;
 const SystemIcon = (props) => {
     return (react_1.default.createElement(Svg_1.Svg, Object.assign({ viewBox: "0 0 32 32" }, props),
-        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z" }),
-        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z" }),
-        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z" }),
-        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z" }),
-        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z" })));
+        react_1.default.createElement("path", { fill: "currentColor", d: "M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z" })));
 };
 const SystemIconConveyor = (props) => (react_1.default.createElement(SystemIcon, Object.assign({}, props)));
 exports.SystemIconConveyor = SystemIconConveyor;

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

@@ -25,6 +25,8 @@ export declare enum ICON_TYPE {
     CALENDAR = "calendar",
     CALCULATOR = "calculator",
     CARET_DOWN = "caret-down",
+    CARET_LEFT = "caret-left",
+    CARET_RIGHT = "caret-right",
     CARET_UP = "caret-up",
     CHART_LINE = "chart-line",
     CHECK = "check",

package/public/components/Icon/Icon.js

@@ -52,6 +52,8 @@ const faBolt_1 = require("@fortawesome/free-solid-svg-icons/faBolt");
 const faCalculator_1 = require("@fortawesome/free-solid-svg-icons/faCalculator");
 const faCalendar_1 = require("@fortawesome/free-solid-svg-icons/faCalendar");
 const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
+const faCaretLeft_1 = require("@fortawesome/free-solid-svg-icons/faCaretLeft");
+const faCaretRight_1 = require("@fortawesome/free-solid-svg-icons/faCaretRight");
 const faCaretUp_1 = require("@fortawesome/free-solid-svg-icons/faCaretUp");
 const faChartLine_1 = require("@fortawesome/free-solid-svg-icons/faChartLine");
 const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
@@ -144,7 +146,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, faChartLine_1.faChartLine, 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, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends, faUserShield_1.faUserShield);
+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, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, 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, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends, faUserShield_1.faUserShield);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -180,6 +182,8 @@ var ICON_TYPE;
     ICON_TYPE["CALENDAR"] = "calendar";
     ICON_TYPE["CALCULATOR"] = "calculator";
     ICON_TYPE["CARET_DOWN"] = "caret-down";
+    ICON_TYPE["CARET_LEFT"] = "caret-left";
+    ICON_TYPE["CARET_RIGHT"] = "caret-right";
     ICON_TYPE["CARET_UP"] = "caret-up";
     ICON_TYPE["CHART_LINE"] = "chart-line";
     ICON_TYPE["CHECK"] = "check";

package/public/components/Kbd/Kbd.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from "react";
+export declare type KbdProps = HTMLAttributes<HTMLElement>;
+export declare const Kbd: ({ className, ...rest }: KbdProps) => JSX.Element;

package/public/components/Kbd/Kbd.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.Kbd = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const bem_1 = require("../../utilities/bem");
+const cn = bem_1.bemHOF("Kbd");
+const Kbd = ({ className, ...rest }) => {
+    return react_1.default.createElement("kbd", Object.assign({ className: classnames_1.default(cn(), className) }, rest));
+};
+exports.Kbd = Kbd;

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

@@ -0,0 +1 @@
+export * from "./Kbd";

package/public/components/Kbd/index.js

@@ -0,0 +1,13 @@
+"use strict";
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./Kbd"), exports);

package/public/components/ScrollSpy/ScrollSpy.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, Context, MutableRefObject, Dispatch, SetStateAction, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, KeyboardEvent, FocusEvent } from "react";
+import React, { ReactNode, Context, MutableRefObject, Dispatch, SetStateAction, HTMLAttributes, ReactElement, AnchorHTMLAttributes, MouseEvent, ChangeEvent, KeyboardEvent, FocusEvent, InputHTMLAttributes } from "react";
 declare type ScrollSpyContextType = {
     currentIndex: number;
     setCurrentIndex: Dispatch<SetStateAction<number>>;
@@ -18,6 +18,8 @@ declare type ScrollSpyContextType = {
 };
 export declare const ScrollSpyContext: Context<ScrollSpyContextType>;
 export declare function useScrollSpyContext(): ScrollSpyContextType;
+export declare type ScrollSpyInputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const ScrollSpyInput: React.ForwardRefExoticComponent<ScrollSpyInputProps & React.RefAttributes<HTMLInputElement>>;
 export interface ScrollSpyPageProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactElement;
     threshold: number | number[] | undefined;

package/public/components/ScrollSpy/ScrollSpy.js

@@ -22,11 +22,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollSpyRoot = exports.ScrollSpyAnchor = exports.useScrollSpyAnchorProps = exports.ScrollSpyPage = exports.useScrollSpyPageProps = exports.useScrollSpyContext = exports.ScrollSpyContext = void 0;
+exports.ScrollSpyRoot = exports.ScrollSpyAnchor = exports.useScrollSpyAnchorProps = exports.ScrollSpyPage = exports.useScrollSpyPageProps = exports.ScrollSpyInput = exports.useScrollSpyContext = exports.ScrollSpyContext = void 0;
 const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const auto_id_1 = require("@reach/auto-id");
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../utilities");
 const hooks_1 = require("../../hooks");
+const cn = utilities_1.bemHOF("ScrollSpy");
 const defaultRootContext = {
     currentIndex: 0,
     setCurrentIndex: (index) => index,
@@ -52,6 +55,9 @@ function useScrollSpyContext() {
     return context;
 }
 exports.useScrollSpyContext = useScrollSpyContext;
+exports.ScrollSpyInput = react_1.forwardRef(({ className, ...rest }, forwardedRef) => {
+    return (react_1.default.createElement("input", Object.assign({ className: classnames_1.default(cn({ e: "input" }), className), ref: forwardedRef, type: "number" }, rest)));
+});
 const useScrollSpyPageProps = ({ index, id } = { index: 0 }) => {
     const { id: rootId } = useScrollSpyContext();
     const pageId = `${rootId}-page-${index + 1}`;

package/public/css/styles.css

@@ -1473,9 +1473,9 @@ span.CodeMirror-selectedtext { background: none; }
   align-items: center;
   justify-content: center;
   --tw-bg-opacity: 1;
-  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
+  background-color: rgb(51 198 159 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(253 181 21 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 /* Double class selector to increase specificity and
@@ -3974,6 +3974,27 @@ override built-in Image component classes */
   color: rgb(242 93 84 / var(--tw-text-opacity));
 }
 
+.ads-Kbd {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 3px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(222 231 238 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 251 252 / var(--tw-bg-opacity));
+  font-size: 12px;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(71 104 125 / var(--tw-text-opacity));
+
+  padding: 2px 5px;
+}
+
+.ads-Kbd .svg-inline--fa {
+  width: auto !important;
+}
+
 .ads-Label {
   display: block;
   font-weight: 500;
@@ -5264,6 +5285,10 @@ override built-in Image component classes */
   overflow-y: auto;
 }
 
+.ads-ScrollSpy-input::-webkit-inner-spin-button {
+  display: none;
+}
+
 .ads-SearchFilter {
   position: relative;
   display: inline-flex;