@conveyorhq/arrow-ds 1.37.0 → 1.40.0

package/package.json

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

package/public/components/Accordion/Accordion.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 import { BoxProps } from "../Box";
 import { StackProps } from "../Stack";
 import type { AccordionOwnProps, AccordionItemOwnProps, AccordionDisclosureProps, AccordionGroupOwnProps } from "./types";
-export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing">;
-export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing" | "className">;
+export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
 export declare type AccordionItemProps = AccordionItemOwnProps & BoxProps;
 export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
 declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
@@ -25,7 +25,7 @@ export declare const AccordionContent: ({ children, maxHeight, style, className,
 export declare type AccordionProps = AccordionOwnProps & BoxProps;
 export declare const Accordion: {
     (props: AccordionProps): JSX.Element;
-    Group: ({ children, spacing, defaultValue, disableAnimation, ...rest }: AccordionGroupProps) => JSX.Element;
+    Group: ({ children, spacing, defaultValue, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
     Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Content: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;

package/public/components/Accordion/Accordion.js

@@ -20,9 +20,10 @@ const Heading_1 = require("../Heading");
 const Icon_1 = require("../Icon");
 const context_1 = require("./context");
 const cn = utilities_1.bemHOF("Accordion");
-const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, ...rest }) => {
-    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue, disableAnimation } },
-        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing }, rest), children)));
+const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, className, ...rest }) => {
+    const totalItems = react_1.default.Children.count(children);
+    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue, disableAnimation, totalItems } },
+        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing, className: className }, rest), children)));
 };
 exports.AccordionGroup = AccordionGroup;
 const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }) => {
@@ -31,7 +32,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
     const defaultIsOpen = typeof defaultIsOpenProp === "undefined"
         ? hasDefaultValue
         : defaultIsOpenProp;
-    const { isOpen, onToggle } = hooks_1.useDisclosure(defaultIsOpen);
+    const { isOpen, onToggle, onClose } = hooks_1.useDisclosure(defaultIsOpen);
     const id = `accordion-${auto_id_1.useId()}`;
     const buttonId = `${id}-button`;
     const contentId = `${id}-content`;
@@ -39,8 +40,10 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
             defaultIsOpen,
             isOpen,
             onToggle,
+            onClose,
             buttonId,
             contentId,
+            value,
         } },
         react_1.default.createElement(Box_1.Box, Object.assign({ "data-component": "accordion", className: classnames_1.default(cn(), className, {
                 [cn({ m: "isOpen" })]: isOpen,
@@ -49,7 +52,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
 exports.AccordionItem = AccordionItem;
 exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
     const { children, className, onClick, disabled = false, ...rest } = props;
-    const { buttonId, contentId, isOpen, onToggle } = context_1.useAccordionItemContext();
+    const { buttonId, contentId, isOpen, onToggle, onClose, } = context_1.useAccordionItemContext();
     const buttonRef = react_1.default.useRef(null);
     const ref = react_merge_refs_1.default([forwardedRef, buttonRef]);
     return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
@@ -59,7 +62,9 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
             if (onToggle) {
                 onToggle();
             }
-        } }, rest), typeof children === "function" ? children({ isOpen }) : children));
+        } }, rest), typeof children === "function"
+        ? children({ isOpen, onClose })
+        : children));
 });
 const AccordionContent = ({ children, maxHeight, style, className, ...rest }) => {
     const { disableAnimation } = context_1.useAccordionGroupContext();
@@ -73,7 +78,7 @@ const AccordionContent = ({ children, maxHeight, style, className, ...rest }) =>
     const { height } = component_size_1.default(childrenRef);
     const heightObj = { height };
     const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
-    return (react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0 }, enter: { height }, leave: { height: 0 }, update: heightObj, onRest: () => {
+    return (react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0, opacity: 0 }, enter: { height, opacity: 1 }, leave: { height: 0, opacity: 0 }, update: heightObj, onRest: () => {
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }

package/public/components/Accordion/context.d.ts

@@ -1,8 +1,10 @@
 import { Context } from "react";
 import type { AccordionGroupOwnProps, AccordionItemOwnProps, AccordionDisclosureProps } from "./types";
-declare type AccordionGroupContextType = AccordionGroupOwnProps;
+declare type AccordionGroupContextType = {
+    totalItems?: number;
+} & AccordionGroupOwnProps;
 export declare const AccordionGroupContext: Context<AccordionGroupContextType>;
-export declare function useAccordionGroupContext(): AccordionGroupOwnProps;
+export declare function useAccordionGroupContext(): AccordionGroupContextType;
 declare type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclosureProps & {
     buttonId: string;
     contentId: string;

package/public/components/Accordion/context.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const defaultGroupContext = {
     defaultValue: undefined,
     disableAnimation: false,
+    totalItems: 0,
 };
 exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
 function useAccordionGroupContext() {
@@ -18,6 +19,7 @@ const defaultContext = {
     defaultIsOpen: false,
     isOpen: false,
     onToggle: () => { },
+    onClose: () => { },
     buttonId: "accordion-0-button",
     contentId: "accordion-0-content",
 };

package/public/components/Accordion/types.d.ts

@@ -15,4 +15,4 @@ export declare type AccordionOwnProps = Pick<AccordionItemOwnProps, "defaultIsOp
     iconSlot?: ReactNode;
     removePadding?: ReactNode;
 };
-export declare type AccordionDisclosureProps = Pick<DisclosureProps, "isOpen" | "onToggle">;
+export declare type AccordionDisclosureProps = Pick<DisclosureProps, "isOpen" | "onToggle" | "onClose">;

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",
@@ -112,7 +114,8 @@ export declare enum ICON_TYPE {
     USER_ASTRONAUT = "user-astronaut",
     USER_PLUS = "user-plus",
     USERS = "users",
-    USER_FRIENDS = "user-friends"
+    USER_FRIENDS = "user-friends",
+    USER_SHIELD = "user-shield"
 }
 export declare enum ICON_STYLE_PREFIX {
     SOLID = "fas",

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");
@@ -138,12 +140,13 @@ const faUserAstronaut_1 = require("@fortawesome/free-solid-svg-icons/faUserAstro
 const faUserPlus_1 = require("@fortawesome/free-solid-svg-icons/faUserPlus");
 const faUsers_1 = require("@fortawesome/free-solid-svg-icons/faUsers");
 const faUserFriends_1 = require("@fortawesome/free-solid-svg-icons/faUserFriends");
+const faUserShield_1 = require("@fortawesome/free-solid-svg-icons/faUserShield");
 const svg_1 = require("./svg");
 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);
+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";
@@ -179,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";
@@ -267,6 +272,7 @@ var ICON_TYPE;
     ICON_TYPE["USER_PLUS"] = "user-plus";
     ICON_TYPE["USERS"] = "users";
     ICON_TYPE["USER_FRIENDS"] = "user-friends";
+    ICON_TYPE["USER_SHIELD"] = "user-shield";
 })(ICON_TYPE = exports.ICON_TYPE || (exports.ICON_TYPE = {}));
 var ICON_STYLE_PREFIX;
 (function (ICON_STYLE_PREFIX) {

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

@@ -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;