@conveyorhq/arrow-ds 1.144.0 → 1.146.0

package/package.json

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

package/public/components/Banner/Banner.d.ts

@@ -1,9 +1,26 @@
-import { FC } from "react";
+import React from "react";
 import { BoxProps } from "../Box";
+import { HeadingProps } from "../Heading";
 import { STATUS_VARIANT } from "../../types";
-export interface BannerProps extends BoxProps {
-    title?: string;
+import { StatusIconProps } from "../Icon";
+import { CloseButtonProps } from "../CloseButton";
+interface SharedBannerRootProps extends BoxProps {
     variant?: STATUS_VARIANT;
+}
+export interface BannerProps extends SharedBannerRootProps {
+    title?: string;
     withIcon?: boolean;
 }
-export declare const Banner: FC<BannerProps>;
+export interface BannerRootProps extends SharedBannerRootProps {
+    children: React.ReactNode;
+}
+export type BannerIconProps = StatusIconProps;
+export type BannerTitleProps = HeadingProps;
+export type BannerDismissProps = CloseButtonProps;
+declare const CompoundBanner: React.ForwardRefExoticComponent<Omit<BannerProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<Omit<BannerRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<Omit<StatusIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Title: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    Dismiss: React.ForwardRefExoticComponent<CloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export { CompoundBanner as Banner };

package/public/components/Banner/Banner.js

@@ -36,15 +36,40 @@ const bem_1 = require("../../utilities/bem");
 const types_1 = require("../../types");
 const Icon_1 = require("../Icon");
 const Flex_1 = require("../Flex");
-const cn = "Banner";
-exports.Banner = (0, react_1.forwardRef)((props, ref) => {
-    const { variant = types_1.STATUS_VARIANT.DEFAULT, title, className, children, withIcon = false, ...rest } = props;
-    const classes = (0, classnames_1.default)((0, bem_1.bem)(cn), (0, bem_1.bem)(cn, { m: variant }), className);
+const CloseButton_1 = require("../CloseButton");
+const cn = (0, bem_1.bemHOF)("Banner");
+const BannerRoot = (0, react_1.forwardRef)(function BannerRoot(props, ref) {
+    const { children, variant = types_1.STATUS_VARIANT.DEFAULT, className, ...rest } = props;
     return (react_1.default.createElement(status_1.StatusContext.Provider, { value: variant },
-        react_1.default.createElement(Box_1.Box, { ref: ref, className: classes, role: "alert", ...rest },
-            react_1.default.createElement(Flex_1.Flex, { className: "w-full gap-x-2" },
-                withIcon && react_1.default.createElement(Icon_1.StatusIcon, { className: (0, bem_1.bem)(cn, { e: "icon" }) }),
-                title ? (react_1.default.createElement(Flex_1.Flex, { className: "flex-col gap-y-1 w-full" },
-                    react_1.default.createElement(Heading_1.Heading.H5, null, title),
-                    react_1.default.createElement(Box_1.Box, { className: "w-full" }, children))) : (react_1.default.createElement(Box_1.Box, { className: "w-full" }, children))))));
+        react_1.default.createElement(Flex_1.Flex, { ref: ref, "data-component": "banner", className: (0, classnames_1.default)(cn(), cn({ m: variant }), className), role: "alert", ...rest }, children)));
+});
+const BannerIcon = (0, react_1.forwardRef)(function BannerIcon(props, ref) {
+    const { className, ...rest } = props;
+    return (react_1.default.createElement(Icon_1.StatusIcon, { ref: ref, className: (0, classnames_1.default)(cn({ e: "icon" }), className), ...rest }));
+});
+const BannerTitle = (0, react_1.forwardRef)(function BannerTitle({ children, ...props }, ref) {
+    return (react_1.default.createElement(Heading_1.Heading.H5, { ref: ref, ...props }, children));
+});
+const BannerDismiss = (0, react_1.forwardRef)(function BannerDismiss({ className, ...props }, ref) {
+    return (react_1.default.createElement(CloseButton_1.CloseButton, { ref: ref, className: (0, classnames_1.default)([
+            "text-gray-800 hover:text-gray-700",
+            "flex-shrink-0",
+            "text-h5",
+            className,
+        ]), ...props }));
+});
+const Banner = (0, react_1.forwardRef)(function Banner(props, ref) {
+    const { variant = types_1.STATUS_VARIANT.DEFAULT, title, className, children, withIcon = false, ...rest } = props;
+    return (react_1.default.createElement(BannerRoot, { ref: ref, className: className, variant: variant, ...rest },
+        withIcon && react_1.default.createElement(BannerIcon, null),
+        title ? (react_1.default.createElement(Flex_1.Flex, { className: "flex-col gap-y-1 w-full" },
+            react_1.default.createElement(BannerTitle, null, title),
+            react_1.default.createElement(Box_1.Box, { className: "w-full" }, children))) : (react_1.default.createElement(Box_1.Box, { className: "w-full" }, children))));
+});
+const CompoundBanner = Object.assign(Banner, {
+    Root: BannerRoot,
+    Icon: BannerIcon,
+    Title: BannerTitle,
+    Dismiss: BannerDismiss,
 });
+exports.Banner = CompoundBanner;

package/public/components/Heading/Heading.d.ts

@@ -1,11 +1,13 @@
-import React, { HTMLProps } from "react";
-export type HeadingProps = HTMLProps<HTMLHeadingElement>;
-export declare const Heading: {
-    (props: HeadingProps): React.JSX.Element;
-    H1: (props: HeadingProps) => React.JSX.Element;
-    H2: (props: HeadingProps) => React.JSX.Element;
-    H3: (props: HeadingProps) => React.JSX.Element;
-    H4: (props: HeadingProps) => React.JSX.Element;
-    H5: (props: HeadingProps) => React.JSX.Element;
-    H6: (props: HeadingProps) => React.JSX.Element;
+import React, { HTMLAttributes } from "react";
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: string;
+}
+declare const CompoundHeading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>> & {
+    H1: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    H2: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    H3: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    H4: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    H5: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+    H6: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
 };
+export { CompoundHeading as Heading };

package/public/components/Heading/Heading.js

@@ -1,47 +1,72 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Text_1 = require("../Text");
 const bem_1 = require("../../utilities/bem");
-const cn = "Heading";
-const Heading = (props) => {
+const cn = (0, bem_1.bemHOF)("Heading");
+const Heading = (0, react_1.forwardRef)((props, ref) => {
     const { children, className, ...rest } = props;
-    const classes = (0, classnames_1.default)((0, bem_1.bem)(cn), className);
-    return (react_1.default.createElement(Text_1.Text, { className: classes, ...rest }, children));
-};
-exports.Heading = Heading;
-const H1 = (props) => {
+    const classes = (0, classnames_1.default)(cn(), className);
+    return (react_1.default.createElement(Text_1.Text, { ref: ref, className: classes, ...rest }, children));
+});
+const H1 = (0, react_1.forwardRef)((props, ref) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(exports.Heading, { as: "h1", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { m: "h1" }), className), ...rest }));
-};
-const H2 = (props) => {
+    return (react_1.default.createElement(Heading, { as: "h1", ref: ref, className: (0, classnames_1.default)(cn({ m: "h1" }), className), ...rest }));
+});
+const H2 = (0, react_1.forwardRef)((props, ref) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(exports.Heading, { as: "h2", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { m: "h2" }), className), ...rest }));
-};
-const H3 = (props) => {
+    return (react_1.default.createElement(Heading, { as: "h2", ref: ref, className: (0, classnames_1.default)(cn({ m: "h2" }), className), ...rest }));
+});
+const H3 = (0, react_1.forwardRef)((props, ref) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(exports.Heading, { as: "h3", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { m: "h3" }), className), ...rest }));
-};
-const H4 = (props) => {
+    return (react_1.default.createElement(Heading, { as: "h3", ref: ref, className: (0, classnames_1.default)(cn({ m: "h3" }), className), ...rest }));
+});
+const H4 = (0, react_1.forwardRef)((props, ref) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(exports.Heading, { as: "h4", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { m: "h4" }), className), ...rest }));
-};
-const H5 = (props) => {
+    return (react_1.default.createElement(Heading, { as: "h4", ref: ref, className: (0, classnames_1.default)(cn({ m: "h4" }), className), ...rest }));
+});
+const H5 = (0, react_1.forwardRef)((props, ref) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(exports.Heading, { as: "h5", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { m: "h5" }), className), ...rest }));
-};
-const H6 = (props) => {
+    return (react_1.default.createElement(Heading, { as: "h5", ref: ref, className: (0, classnames_1.default)(cn({ m: "h5" }), className), ...rest }));
+});
+const H6 = (0, react_1.forwardRef)((props, ref) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(exports.Heading, { as: "h6", className: (0, classnames_1.default)((0, bem_1.bem)(cn, { m: "h6" }), className), ...rest }));
-};
-exports.Heading.H1 = H1;
-exports.Heading.H2 = H2;
-exports.Heading.H3 = H3;
-exports.Heading.H4 = H4;
-exports.Heading.H5 = H5;
-exports.Heading.H6 = H6;
+    return (react_1.default.createElement(Heading, { as: "h6", ref: ref, className: (0, classnames_1.default)(cn({ m: "h6" }), className), ...rest }));
+});
+const CompoundHeading = Object.assign(Heading, {
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+});
+exports.Heading = CompoundHeading;

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

@@ -43,6 +43,7 @@ export declare enum ICON_TYPE {
     BULLHORN = "bullhorn",
     CALENDAR = "calendar",
     CALCULATOR = "calculator",
+    CAMERA = "camera",
     CARET_DOWN = "caret-down",
     CARET_LEFT = "caret-left",
     CARET_RIGHT = "caret-right",
@@ -69,6 +70,7 @@ export declare enum ICON_TYPE {
     COMPASS = "compass",
     COMPRESS = "compress",
     COMPRESS_ARROWS_ALT = "compress-arrows-alt",
+    CROSSHAIRS = "crosshairs",
     CROWN = "crown",
     COPY = "copy",
     DOOR_CLOSED = "door-closed",

package/public/components/Icon/Icon.js

@@ -68,6 +68,7 @@ const faBug_1 = require("@fortawesome/free-solid-svg-icons/faBug");
 const faBullhorn_1 = require("@fortawesome/free-solid-svg-icons/faBullhorn");
 const faCalculator_1 = require("@fortawesome/free-solid-svg-icons/faCalculator");
 const faCalendar_1 = require("@fortawesome/free-solid-svg-icons/faCalendar");
+const faCamera_1 = require("@fortawesome/free-solid-svg-icons/faCamera");
 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");
@@ -95,6 +96,7 @@ const faCompass_1 = require("@fortawesome/free-solid-svg-icons/faCompass");
 const faCompress_1 = require("@fortawesome/free-solid-svg-icons/faCompress");
 const faCompressArrowsAlt_1 = require("@fortawesome/free-solid-svg-icons/faCompressArrowsAlt");
 const faCopy_1 = require("@fortawesome/free-solid-svg-icons/faCopy");
+const faCrosshairs_1 = require("@fortawesome/free-solid-svg-icons/faCrosshairs");
 const faCrown_1 = require("@fortawesome/free-solid-svg-icons/faCrown");
 const faDoorClosed_1 = require("@fortawesome/free-solid-svg-icons/faDoorClosed");
 const faEdit_1 = require("@fortawesome/free-solid-svg-icons/faEdit");
@@ -224,7 +226,7 @@ const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const ShieldCheck_1 = require("./svg/ShieldCheck");
 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, faBug_1.faBug, faBullhorn_1.faBullhorn, faCalculator_1.faCalculator, faCalendar_1.faCalendar, 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, faClock_1.faClock, faClock_2.faClock, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, 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, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, 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, 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, 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, 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, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, 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, faBug_1.faBug, faBullhorn_1.faBullhorn, 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, faClock_1.faClock, faClock_2.faClock, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, 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, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, 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, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, 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, 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, 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, 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, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faWrench_1.faWrench, faAward_1.faAward);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -287,6 +289,7 @@ var ICON_TYPE;
     ICON_TYPE["BULLHORN"] = "bullhorn";
     ICON_TYPE["CALENDAR"] = "calendar";
     ICON_TYPE["CALCULATOR"] = "calculator";
+    ICON_TYPE["CAMERA"] = "camera";
     ICON_TYPE["CARET_DOWN"] = "caret-down";
     ICON_TYPE["CARET_LEFT"] = "caret-left";
     ICON_TYPE["CARET_RIGHT"] = "caret-right";
@@ -313,6 +316,7 @@ var ICON_TYPE;
     ICON_TYPE["COMPASS"] = "compass";
     ICON_TYPE["COMPRESS"] = "compress";
     ICON_TYPE["COMPRESS_ARROWS_ALT"] = "compress-arrows-alt";
+    ICON_TYPE["CROSSHAIRS"] = "crosshairs";
     ICON_TYPE["CROWN"] = "crown";
     ICON_TYPE["COPY"] = "copy";
     ICON_TYPE["DOOR_CLOSED"] = "door-closed";
@@ -465,7 +469,6 @@ exports.Icon = (0, react_1.forwardRef)((props, ref) => {
     const { icon, style, className, spin = false, color, prefix: prefixProp, flip, ...rest } = props;
     const iconSetDefaults = {
         [ICON_TYPE.FILE_ALT]: ICON_STYLE_PREFIX.REGULAR,
-        [ICON_TYPE.TIMES_CIRCLE]: ICON_STYLE_PREFIX.REGULAR,
         [ICON_TYPE.CLOCK]: ICON_STYLE_PREFIX.REGULAR,
         [ICON_TYPE.KEYBOARD]: ICON_STYLE_PREFIX.REGULAR,
         [ICON_TYPE.STAR]: ICON_STYLE_PREFIX.REGULAR,

package/public/css/styles.css

@@ -1811,15 +1811,18 @@ override built-in Image component classes */
 }
 
 .ads-Banner {
+  -webkit-column-gap: 8px;
+          column-gap: 8px;
   border-radius: 4px;
   padding: 8px;
   font-size: 12px;
-  line-height: 1.5;
+  line-height: 1.35;
   --tw-text-opacity: 1;
   color: rgb(32 65 86 / var(--tw-text-opacity));
 }
 
 .ads-Banner-icon {
+  flex-shrink: 0;
   padding-top: 3px;
 }
 
@@ -2401,7 +2404,8 @@ override built-in Image component classes */
   --tw-text-opacity: 1;
   color: rgb(134 163 181 / var(--tw-text-opacity));
 
-  transition: box-shadow 0.2s ease, color 0.2s ease;
+  transition: box-shadow 0.2s ease, color 0.2s ease, background-color 0.2s ease,
+    opacity 0.2s ease;
 }
 
 .ads-CloseButton:hover, 
@@ -8442,11 +8446,6 @@ override built-in Image component classes */
   justify-content: space-between;
 }
 
-.gap-x-2 {
-  -webkit-column-gap: 8px;
-          column-gap: 8px;
-}
-
 .gap-y-1 {
   row-gap: 4px;
 }
@@ -8704,6 +8703,11 @@ override built-in Image component classes */
   color: rgb(185 200 210 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(32 65 86 / var(--tw-text-opacity));
+}
+
 .text-placeholder {
   --tw-text-opacity: 1;
   color: rgb(134 163 181 / var(--tw-text-opacity));
@@ -8739,11 +8743,6 @@ override built-in Image component classes */
   color: rgb(13 125 228 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(32 65 86 / var(--tw-text-opacity));
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;