@televet/kibble-ui 1.14.6 → 1.14.7-beta.37pzzaj.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/MediaAndIcons/Avatar/avatar.component.d.ts +8 -2
- package/build/components/MediaAndIcons/Avatar/components/AvatarBadge/avatarBadge.component.d.ts +20 -0
- package/build/components/MediaAndIcons/Icon/icon.types.d.ts +1 -1
- package/build/components/Overlay/Modal/index.d.ts +1 -1
- package/build/index.js +172 -71
- package/build/index.js.map +1 -1
- package/build/utils/index.d.ts +1 -0
- package/build/utils/sizes.d.ts +2 -0
- package/package.json +2 -2
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { AvatarProps as CAvatarProps, Placement } from '@chakra-ui/react';
|
|
2
|
+
import { IconName } from 'components/MediaAndIcons/Icon';
|
|
2
3
|
import React, { CSSProperties } from 'react';
|
|
3
4
|
import { AvatarSize } from './avatar.types';
|
|
5
|
+
import { AvatarBadgeProps } from './components/AvatarBadge/avatarBadge.component';
|
|
4
6
|
export declare enum AvatarVariant {
|
|
5
7
|
Green = "green",
|
|
6
8
|
Red = "red",
|
|
@@ -8,7 +10,8 @@ export declare enum AvatarVariant {
|
|
|
8
10
|
Comet = "comet",
|
|
9
11
|
Number = "number",
|
|
10
12
|
Dashed = "dashed",
|
|
11
|
-
Image = "image"
|
|
13
|
+
Image = "image",
|
|
14
|
+
Icon = "icon"
|
|
12
15
|
}
|
|
13
16
|
export interface AvatarProps extends CAvatarProps {
|
|
14
17
|
name: string;
|
|
@@ -21,6 +24,9 @@ export interface AvatarProps extends CAvatarProps {
|
|
|
21
24
|
showRemoveButton?: boolean;
|
|
22
25
|
handleRemoveButtonClick?: React.MouseEventHandler<HTMLDivElement>;
|
|
23
26
|
variant?: AvatarVariant;
|
|
27
|
+
iconName?: IconName;
|
|
24
28
|
tooltipText?: string;
|
|
29
|
+
showBadge?: boolean;
|
|
30
|
+
badgeProps?: AvatarBadgeProps;
|
|
25
31
|
}
|
|
26
|
-
export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, tooltipText, ...rest }: AvatarProps) => JSX.Element;
|
|
32
|
+
export declare const Avatar: ({ name, src, isClinic, size, showTooltip, tooltipPlacement, style, handleClick, showRemoveButton, handleRemoveButtonClick, variant, iconName, tooltipText, showBadge, badgeProps, ...rest }: AvatarProps) => JSX.Element;
|
package/build/components/MediaAndIcons/Avatar/components/AvatarBadge/avatarBadge.component.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { IconName } from 'components/MediaAndIcons/Icon';
|
|
2
|
+
import { AvatarSize } from '../../avatar.types';
|
|
3
|
+
export declare enum AvatarBadgePosition {
|
|
4
|
+
TopLeft = "topLeft",
|
|
5
|
+
TopRight = "topRight",
|
|
6
|
+
BottomLeft = "bottomLeft",
|
|
7
|
+
BottomRight = "bottomRight"
|
|
8
|
+
}
|
|
9
|
+
export interface AvatarBadgeProps {
|
|
10
|
+
badgeIconName?: IconName;
|
|
11
|
+
badgeBackgroundColor?: string;
|
|
12
|
+
badgeBorderColor?: string;
|
|
13
|
+
badgeIconColor?: string;
|
|
14
|
+
badgePosition?: AvatarBadgePosition;
|
|
15
|
+
}
|
|
16
|
+
interface AvatarBadgeComponentProps extends AvatarBadgeProps {
|
|
17
|
+
avatarSize: AvatarSize;
|
|
18
|
+
}
|
|
19
|
+
declare const AvatarBadge: ({ avatarSize, badgeIconName, badgeBackgroundColor, badgeBorderColor, badgeIconColor, badgePosition, }: AvatarBadgeComponentProps) => JSX.Element;
|
|
20
|
+
export default AvatarBadge;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export declare type IconName = 'alertCircle' | 'animalBird' | 'animalCat' | 'animalCow' | 'animalDog' | 'animalHorse' | 'arrowCircle' | 'arrowDown' | 'arrowDownRight' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowsIn' | 'arrowsOut' | 'article' | 'asterisk' | 'award' | 'bell' | 'bone' | 'bellRinging' | 'bookmarkFilled' | 'bookmarkOutlined' | 'brush' | 'bulkSelect' | 'buttons' | 'caduceus' | 'calendarDate' | 'calendarCheck' | 'calendarInfo' | 'calendarPen' | 'calendarOutlined' | 'camera' | 'cameraFlip' | 'cameraOff' | 'cancel' | 'cellphone' | 'cellphoneAlert' | 'chainLink' | 'chatBubbleFilled' | 'chatBubbleOutlined' | 'checkmark' | 'checkmarkBox' | 'checkmarkCircle' | 'checkmarkList' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronUpDown' | 'circleDotted' | 'clockGear' | 'clock' | 'close' | 'closeCircle' | 'closedSign' | 'code' | 'conversation' | 'creditCardHand' | 'crossClipboard' | 'crossPaw' | 'crossHatPerson' | 'dogHouse' | 'dogHouseOutlined' | 'dollar' | 'dollarCircle' | 'dotsCircle' | 'dotsHorizontal' | 'dotsVertical' | 'doubleArrowCircle' | 'download' | 'dragDrop' | 'emailSend' | 'envelopeFilled' | 'envelopeOutlined' | 'eyedropper' | 'eyeOpen' | 'eyeSlash' | 'externalLink' | 'faceScreen' | 'formsFilled' | 'formsOutlined' | 'funnelFilled' | 'funnelOutlined' | 'gear' | 'grid' | 'horizontalLines' | 'house' | 'infoCircleFilled' | 'infoCircleOutlined' | 'input' | 'invoice' | 'invoiceOutlined' | 'kanbanBoard' | 'largeTextInput' | 'list' | 'locationMarker' | 'locationMarkerGround' | 'lockRectangle' | 'lockRound' | 'loudspeaker' | 'magnifyingGlass' | 'mailbox' | 'manHeadset' | 'mergeTags' | 'message' | 'messages' | 'messageClipboard' | 'messageEllipses' | 'messageGearOutlined' | 'messageGear' | 'messageLink' | 'microphone' | 'microphoneMute' | 'minus' | 'moveLeft' | 'moveRight' | 'multipleChoice' | 'notification' | 'paperAirplane' | 'paperAirplane2' | 'paperAirplaneRight' | 'paperclip' | 'paperPen' | 'paw' | 'paw2' | 'pawMagnifyingGlass' | 'pawOutlined' | 'pdfLogo' | 'pen' | 'penSquare' | 'person' | 'personAdd' | 'phone' | 'phoneButtons' | 'phoneDown' | 'phoneRing' | 'pill' | 'pillHand' | 'playingCards' | 'plus' | 'questionMark' | 'questionMarkCircle' | 'quilInk' | 'reactLogo' | 'record' | 'report' | 'robot' | 'robotLink' | 'robotOutlined' | 'smileyFace' | 'smileyFacePlus' | 'sort' | 'star' | 'star2' | 'star2Outlined' | 'starCircle' | 'stop' | 'stopRecording' | 'team' | 'televetV' | 'textEdit' | 'thumbsUp' | 'trashcan' | 'twoSquares' | 'upload' | 'videoCamera' | 'warningSign' | 'website' | 'wrench';
|
|
1
|
+
export declare type IconName = 'alertCircle' | 'animalBird' | 'animalCat' | 'animalCow' | 'animalDog' | 'animalHorse' | 'animalMouse' | 'animalPig' | 'animalSnake' | 'arrowCircle' | 'arrowDown' | 'arrowDownRight' | 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowsIn' | 'arrowsOut' | 'article' | 'asterisk' | 'award' | 'bell' | 'bone' | 'bellRinging' | 'bookmarkFilled' | 'bookmarkOutlined' | 'brush' | 'bulkSelect' | 'buttons' | 'caduceus' | 'calendarDate' | 'calendarCheck' | 'calendarInfo' | 'calendarPen' | 'calendarOutlined' | 'camera' | 'cameraFlip' | 'cameraOff' | 'cancel' | 'cellphone' | 'cellphoneAlert' | 'chainLink' | 'chatBubbleFilled' | 'chatBubbleOutlined' | 'checkmark' | 'checkmarkBox' | 'checkmarkCircle' | 'checkmarkList' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronUpDown' | 'circleDotted' | 'clockGear' | 'clock' | 'close' | 'closeCircle' | 'closedSign' | 'code' | 'conversation' | 'creditCardHand' | 'crossClipboard' | 'crossPaw' | 'crossHatPerson' | 'dogHouse' | 'dogHouseOutlined' | 'dollar' | 'dollarCircle' | 'dotsCircle' | 'dotsHorizontal' | 'dotsVertical' | 'doubleArrowCircle' | 'download' | 'dragDrop' | 'emailSend' | 'envelopeFilled' | 'envelopeOutlined' | 'eyedropper' | 'eyeOpen' | 'eyeSlash' | 'externalLink' | 'faceScreen' | 'formsFilled' | 'formsOutlined' | 'funnelFilled' | 'funnelOutlined' | 'gear' | 'grid' | 'horizontalLines' | 'house' | 'infoCircleFilled' | 'infoCircleOutlined' | 'input' | 'invoice' | 'invoiceOutlined' | 'kanbanBoard' | 'largeTextInput' | 'list' | 'locationMarker' | 'locationMarkerGround' | 'lockRectangle' | 'lockRound' | 'loudspeaker' | 'magnifyingGlass' | 'mailbox' | 'manHeadset' | 'mergeTags' | 'message' | 'messages' | 'messageClipboard' | 'messageEllipses' | 'messageGearOutlined' | 'messageGear' | 'messageLink' | 'microphone' | 'microphoneMute' | 'minus' | 'moveLeft' | 'moveRight' | 'multipleChoice' | 'notification' | 'paperAirplane' | 'paperAirplane2' | 'paperAirplaneRight' | 'paperclip' | 'paperPen' | 'paw' | 'paw2' | 'pawMagnifyingGlass' | 'pawOutlined' | 'pdfLogo' | 'pen' | 'penSquare' | 'person' | 'personAdd' | 'phone' | 'phoneButtons' | 'phoneDown' | 'phoneRing' | 'pill' | 'pillHand' | 'playingCards' | 'plus' | 'questionMark' | 'questionMarkCircle' | 'quilInk' | 'reactLogo' | 'record' | 'report' | 'robot' | 'robotLink' | 'robotOutlined' | 'smileyFace' | 'smileyFacePlus' | 'sort' | 'star' | 'star2' | 'star2Outlined' | 'starCircle' | 'stop' | 'stopRecording' | 'team' | 'televetV' | 'textEdit' | 'thumbsUp' | 'trashcan' | 'twoSquares' | 'upload' | 'videoCamera' | 'warningSign' | 'website' | 'wrench';
|
|
2
2
|
export declare type IconsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
3
3
|
export declare type IconColor = 'default' | 'subtle' | 'inactive' | 'active' | 'success' | 'warning' | 'error' | 'currentColor';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from './modal.types';
|
|
2
|
-
export *
|
|
2
|
+
export * from './modal.component';
|
|
3
3
|
export * from './components/ModalHeader/modalHeader.component';
|
|
4
4
|
export * from './components/ModalCloseButton/modalCloseButton.component';
|
|
5
5
|
export * from './components/ModalBody/modalBody.component';
|
package/build/index.js
CHANGED
|
@@ -620,27 +620,39 @@ var NotificationCounter = function (_a) {
|
|
|
620
620
|
|
|
621
621
|
const SvgAlertCircle = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
622
622
|
React__namespace.createElement("path", { d: "M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Zm.9 12.6a.9.9 0 1 1-1.8 0 .9.9 0 0 1 1.8 0Zm0-3.15a.9.9 0 1 1-1.8 0V8.4a.9.9 0 1 1 1.8 0v4.05Z", fill: color })));
|
|
623
|
-
const ForwardRef$
|
|
623
|
+
const ForwardRef$2H = React.forwardRef(SvgAlertCircle);
|
|
624
624
|
|
|
625
625
|
const SvgAnimalBird = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
626
626
|
React__namespace.createElement("path", { d: "M20.217 3a.782.782 0 0 0-.17.018c-2.389.07-6.78 1.674-7.36 1.913-.882.363-1.154 1.095-1.323 1.365-.672 1.069-.958 1.614-1.131 1.48-.199-.156-.743-.616-1.147-.764-.403-.147-.688-.054-.993.043-.315-.197-1.313-.275-1.313-.275s.078.998.275 1.313c-.096.305-.19.588-.043.992.146.404.608.95.763 1.148.134.173-.41.459-1.48 1.13-.27.17-1 .44-1.365 1.323-.239.58-1.843 4.976-1.912 7.365a.783.783 0 0 0 .818.946c.658.003 2.814.078 4.034-1.064 1.324-1.24 1.136-4.155 2.956-5.975.685 0 1.176.596 1.612 1.371.282.501.736 1.758.736 3.323a.783.783 0 0 0 .876.777c1.548-.074 3.428-1.95 3.428-1.95s1.864-1.868 1.95-3.414a.786.786 0 0 0 .007-.1v-.008a.783.783 0 0 0-.783-.783c-1.565 0-2.822-.454-3.323-.735-.776-.436-1.371-.927-1.371-1.613 1.82-1.82 4.737-1.632 5.977-2.956C21.07 6.657 21 4.523 20.997 3.85a.782.782 0 0 0-.78-.851Z", fill: color })));
|
|
627
|
-
const ForwardRef$
|
|
627
|
+
const ForwardRef$2G = React.forwardRef(SvgAnimalBird);
|
|
628
628
|
|
|
629
629
|
const SvgAnimalCat = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
630
630
|
React__namespace.createElement("path", { d: "M18.346 9.555c.29-.908.573-2.172.653-3.79a.73.73 0 0 0-.889-.746c-1.413.33-2.458.816-3.21 1.285A7.25 7.25 0 0 0 12 5.7a7.25 7.25 0 0 0-2.9.604c-.753-.469-1.797-.954-3.21-1.285a.73.73 0 0 0-.89.746c.081 1.618.363 2.882.655 3.79A6.343 6.343 0 0 0 5 12.35C5 16.023 9.2 19 12 19s7-2.977 7-6.65c0-1-.239-1.944-.654-2.795Zm-7.973 3.006c-.177.068-.45.14-.818.14-1.364 0-1.679-1.088-1.75-1.59a.347.347 0 0 1 .223-.373c.177-.067.45-.138.818-.138 1.363 0 1.678 1.087 1.75 1.589a.343.343 0 0 1-.223.372Zm2.934 2.128c-.324.335-.827.62-1.105.762a.443.443 0 0 1-.403 0c-.278-.143-.782-.428-1.105-.762-.222-.23-.022-.59.315-.59h1.982c.337 0 .537.36.315.59h.001Zm1.138-1.99c-.368 0-.64-.07-.818-.14a.344.344 0 0 1-.224-.37c.072-.502.387-1.59 1.75-1.59.369 0 .642.07.819.14.155.06.246.21.224.373-.072.501-.387 1.588-1.75 1.588h-.001Z", fill: color })));
|
|
631
|
-
const ForwardRef$
|
|
631
|
+
const ForwardRef$2F = React.forwardRef(SvgAnimalCat);
|
|
632
632
|
|
|
633
633
|
const SvgAnimalCow = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
634
634
|
React__namespace.createElement("path", { d: "M16.313 5c-.4 1.155.26 2 .31 2.103.195.295.258.445.498.838.49.8-.48 1.412-.918.64-1.051-1.851-1.16-2.317-2.351-2.317-.385 0-2.736.382-4.445.382-2.41 0-3.703-.382-5.185-.382-.834 0-1.481.806-1.481 1.526v3.816a.752.752 0 0 0-.741.763c0 .986.74 1.526.74 1.526s.741-.516.741-1.526V9.336c.37.897.741 2.042.741 3.033 0 2.072-.74 2.635-.74 3.288v3.58c0 .421.331.763.74.763h.741c0-1.961.301-3.3.68-4.216.33.261.724.4 1.143.4.92 0 1.684-.684 1.846-1.584.918.4 2.098.821 2.998.821h1.564c.38 0 .704.284.766.67l.53 3.271c.06.369.368.638.73.638h.854s-.156-2.407-.265-4.275c-.059-1.008 1.396-.813 1.752-1.86.448-1.312.735-3.022 1.476-3.022h1.923c.441 0 1.04-1.14 1.04-1.527 0-.386-.887-1.478-1.198-1.799-.185-.19-.67-1.418-1.186-1.418-.274 0-1.298.172-1.689.32-.257.098.038-1.433-1.614-1.419ZM11.63 16.566v2.47c0 .532.419.964.936.964h.516l.17-1.316-.342-2.118h-1.28Zm-3.658.504a2.878 2.878 0 0 1-1.638.225c-.017.074-.028.156-.043.232l.35 1.75c.085.42.444.723.861.723h.887c-.13-.546-.369-1.7-.417-2.93Z", fill: color })));
|
|
635
|
-
const ForwardRef$
|
|
635
|
+
const ForwardRef$2E = React.forwardRef(SvgAnimalCow);
|
|
636
636
|
|
|
637
637
|
const SvgAnimalDog = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
638
638
|
React__namespace.createElement("path", { d: "M14.4 3v2.429L12.842 8.58c-.271.55-.826.895-1.431.895H6.72L5.359 8.101a.766.766 0 0 0-1.119 0 .787.787 0 0 0 0 1.132L5.6 10.61v2.914l-.693 1.4a1.65 1.65 0 0 0-.148.46l-.586 3.561A.902.902 0 0 0 5.056 20a.9.9 0 0 0 .881-.738l.462-2.5 1.6-1.62h5.246l1.625 4.305a.852.852 0 0 0 .794.553.858.858 0 0 0 .817-1.097l-.881-3.1v-.66l1.031-2.087c.111-.224.169-.473.169-.724V8.667h.606c.637 0 1.247-.256 1.697-.712L20 7.048V5.833a.403.403 0 0 0-.4-.404h-1.2l-.566-.573a.793.793 0 0 0-.565-.237h-.87l-.72-.97A1.586 1.586 0 0 0 14.4 3Z", fill: color })));
|
|
639
|
-
const ForwardRef$
|
|
639
|
+
const ForwardRef$2D = React.forwardRef(SvgAnimalDog);
|
|
640
640
|
|
|
641
641
|
const SvgAnimalHorse = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
642
642
|
React__namespace.createElement("path", { d: "M17.435 3c-3.343 0-4.448 3.664-4.677 4.627-.247.08-.749.204-1.48.204-.515 0-.9-.083-1.354-.18-.528-.115-1.139-.253-2.018-.253-1.872 0-2.947 1.102-2.947 3.024 0 .721.721 2.516.915 2.988l-.188 1.71a.45.45 0 0 0 .013.145l1.003 4.024c.132.441.502.711.965.711h.928a.42.42 0 0 0 .326-.145.385.385 0 0 0 .076-.337l-.916-3.964a9.075 9.075 0 0 0 1.317-2.024c.505.223 1.44.53 2.834.53.69 0 1.427-.072 2.194-.217l.777 5.169a.983.983 0 0 0 .978.952H16.871c.23 0 .414-.176.414-.398a.389.389 0 0 0-.013-.096c-.028-.708-.218-5.52-.338-6.687.77-1.025.818-2.418.852-3.542.011-.342.022-.727.063-1.036.49.446 1.216.596 1.78.494.424-.077.997.176 1.166.265a.418.418 0 0 0 .49-.06l.438-.434a.958.958 0 0 0 .063-1.277l-1.893-2.097.576-.698a.401.401 0 0 0 .088-.338.404.404 0 0 0-.213-.277C19.3 3.262 18.324 3 17.435 3ZM4.645 8.373C3.468 8.914 2 10.29 2 13.747c0 .169.11.316.276.373l2.119.735a.513.513 0 0 0 .15.024c.093 0 .176-.039.251-.096a.385.385 0 0 0 .15-.217l.013-.096c0-.015.002-.033 0-.048-.058-.473-.09-.961-.1-1.434-.33-.869-.702-1.95-.702-2.566 0-.794.18-1.48.489-2.049Zm13.705 3.17a4.61 4.61 0 0 1-.589 1.433c.019.229.03.524.05.855l.778.253-.339 1.928a1.12 1.12 0 0 0 .74 1.301l.476.193a.44.44 0 0 0 .163.036c.065 0 .129-.02.188-.048a.4.4 0 0 0 .214-.265L20.833 14c.176-.672-.141-1.354-.74-1.614l-1.743-.844Zm-8.563 2.963c-.3.526-.602.941-.84 1.241l.764 3.277c.218.154.474.253.74.253l.69.036h.025a.424.424 0 0 0 .426-.41.386.386 0 0 0-.063-.204l-1.14-3.048.651-.904a8.068 8.068 0 0 1-1.253-.241Z", fill: color })));
|
|
643
|
-
const ForwardRef$
|
|
643
|
+
const ForwardRef$2C = React.forwardRef(SvgAnimalHorse);
|
|
644
|
+
|
|
645
|
+
const SvgAnimalMouse = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
646
|
+
React__namespace.createElement("path", { d: "M17.775 14.492c1.167 1.058.392 3.008-1.175 3.008H9.217A4.2 4.2 0 0 1 5 13.283v-.041a4.155 4.155 0 0 1-3.333-4.075A4.163 4.163 0 0 1 5.833 5h2.084c.25 0 .416-.192.416-.417a.407.407 0 0 0-.416-.416H5.833V2.5h2.084A2.09 2.09 0 0 1 10 4.583a2.079 2.079 0 0 1-2.083 2.084H5.833a2.491 2.491 0 0 0-2.5 2.5c0 1.141.767 2.083 1.784 2.391.466-1.833 2.108-3.225 4.1-3.225.666 0 1.333.184 1.916.459-1.175.658-1.966 1.875-1.966 3.291a3.64 3.64 0 0 0 1.108 2.642l.583-.583c-.541-.509-.858-1.25-.858-2.059 0-2.158 1.95-2.916 2.917-2.916 1.733 0 3.291 1.575 2.866 3.525l1.992 1.8ZM15 15.833a.825.825 0 0 0 .833-.833.825.825 0 0 0-.833-.833.825.825 0 0 0-.833.833c0 .467.366.833.833.833Z", fill: color })));
|
|
647
|
+
const ForwardRef$2B = React.forwardRef(SvgAnimalMouse);
|
|
648
|
+
|
|
649
|
+
const SvgAnimalPig = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
650
|
+
React__namespace.createElement("path", { d: "m16.525 6.25-1.892-1.892c.059-.35.15-.675.267-.958a1.248 1.248 0 0 0-1.15-1.733 4.163 4.163 0 0 0-3.333 1.666H6.25a4.58 4.58 0 0 0-4.583 4.584c0 2.533 2.083 9.583 2.083 9.583h4.583v-1.667H10V17.5h4.583l1.4-4.658 2.35-.784V6.25h-1.808Zm-3.192 2.917a.836.836 0 0 1-.833-.834c0-.458.375-.833.833-.833.459 0 .834.375.834.833a.836.836 0 0 1-.834.834Z", fill: color })));
|
|
651
|
+
const ForwardRef$2A = React.forwardRef(SvgAnimalPig);
|
|
652
|
+
|
|
653
|
+
const SvgAnimalSnake = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
654
|
+
React__namespace.createElement("path", { d: "M1.238 3.279c-.867 4.334 6.227 1.448 6.39 2.057.095.348-6.108 1.402-6.388 3.727-.644 5.351 12.545.027 12.647.347.215.695-8.54 1.813-5.852 6.16 1.551 2.508 4.485 1.25 6.41 1.305 1.028 1.656 2.598 2.363 3.75 1.875 1.082-.457.578-1.781.059-2.988l-.555.613.301-1.121c-1.574-2.469-7.129-.242-7.355-.777-.399-.942 8.445-1.622 7.039-6.2-1.133-3.68-12.996.829-13.004.239-.008-.817 7.347-1.97 6.539-3.707-1.34-2.884-8.212 1.593-8.787-1.312-.205-1.034 3.048-1.833 2.736-2.12-1.012-.934-3.687.69-3.93 1.902Zm13.91 11.987 1.403 1.312-1.7-.484.297-.828Z", fill: color })));
|
|
655
|
+
const ForwardRef$2z = React.forwardRef(SvgAnimalSnake);
|
|
644
656
|
|
|
645
657
|
const SvgArrowCircle = ({ color = "currentColor", height = "24px", width = "24px" }, ref) => (React__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, ref: ref },
|
|
646
658
|
React__namespace.createElement("path", { d: "M12 3c-4.962 0-9 4.038-9 9s4.038 9 9 9 9-4.038 9-9h-1.8c0 3.97-3.23 7.2-7.2 7.2S4.8 15.97 4.8 12 8.03 4.8 12 4.8c1.986 0 3.783.81 5.085 2.115L14.7 9.3H21V3l-2.646 2.646A8.949 8.949 0 0 0 12 3Z", fill: color })));
|
|
@@ -1376,12 +1388,15 @@ const SvgWrench = ({ color = "currentColor", height = "24px", width = "24px" },
|
|
|
1376
1388
|
const ForwardRef = React.forwardRef(SvgWrench);
|
|
1377
1389
|
|
|
1378
1390
|
var IconMap = {
|
|
1379
|
-
alertCircle: ForwardRef$
|
|
1380
|
-
animalBird: ForwardRef$
|
|
1381
|
-
animalCat: ForwardRef$
|
|
1382
|
-
animalCow: ForwardRef$
|
|
1383
|
-
animalDog: ForwardRef$
|
|
1384
|
-
animalHorse: ForwardRef$
|
|
1391
|
+
alertCircle: ForwardRef$2H,
|
|
1392
|
+
animalBird: ForwardRef$2G,
|
|
1393
|
+
animalCat: ForwardRef$2F,
|
|
1394
|
+
animalCow: ForwardRef$2E,
|
|
1395
|
+
animalDog: ForwardRef$2D,
|
|
1396
|
+
animalHorse: ForwardRef$2C,
|
|
1397
|
+
animalMouse: ForwardRef$2B,
|
|
1398
|
+
animalPig: ForwardRef$2A,
|
|
1399
|
+
animalSnake: ForwardRef$2z,
|
|
1385
1400
|
arrowCircle: ForwardRef$2y,
|
|
1386
1401
|
arrowDown: ForwardRef$2w,
|
|
1387
1402
|
arrowDownRight: ForwardRef$2x,
|
|
@@ -1604,6 +1619,39 @@ var toTitleCase = function (s) {
|
|
|
1604
1619
|
.join('');
|
|
1605
1620
|
};
|
|
1606
1621
|
|
|
1622
|
+
var getNextIconSize = function (size, larger, count) {
|
|
1623
|
+
if (larger === void 0) { larger = true; }
|
|
1624
|
+
if (count === void 0) { count = 1; }
|
|
1625
|
+
var nextSize;
|
|
1626
|
+
switch (size) {
|
|
1627
|
+
case 'xs':
|
|
1628
|
+
nextSize = larger ? 'sm' : 'xs';
|
|
1629
|
+
break;
|
|
1630
|
+
case 'sm':
|
|
1631
|
+
nextSize = larger ? 'md' : 'xs';
|
|
1632
|
+
break;
|
|
1633
|
+
case 'md':
|
|
1634
|
+
nextSize = larger ? 'lg' : 'sm';
|
|
1635
|
+
break;
|
|
1636
|
+
case 'lg':
|
|
1637
|
+
nextSize = larger ? 'xl' : 'md';
|
|
1638
|
+
break;
|
|
1639
|
+
case 'xl':
|
|
1640
|
+
nextSize = larger ? '2xl' : 'lg';
|
|
1641
|
+
break;
|
|
1642
|
+
case '2xl':
|
|
1643
|
+
nextSize = larger ? '2xl' : 'xl';
|
|
1644
|
+
break;
|
|
1645
|
+
default:
|
|
1646
|
+
nextSize = size;
|
|
1647
|
+
break;
|
|
1648
|
+
}
|
|
1649
|
+
if (count > 1) {
|
|
1650
|
+
nextSize = getNextIconSize(nextSize, larger, count - 1);
|
|
1651
|
+
}
|
|
1652
|
+
return nextSize;
|
|
1653
|
+
};
|
|
1654
|
+
|
|
1607
1655
|
var Button = React.forwardRef(function (props, ref) {
|
|
1608
1656
|
var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights, radii = _a.radii;
|
|
1609
1657
|
var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
|
|
@@ -2063,59 +2111,6 @@ var TooltipConfig = {
|
|
|
2063
2111
|
},
|
|
2064
2112
|
};
|
|
2065
2113
|
|
|
2066
|
-
exports.AvatarVariant = void 0;
|
|
2067
|
-
(function (AvatarVariant) {
|
|
2068
|
-
AvatarVariant["Green"] = "green";
|
|
2069
|
-
AvatarVariant["Red"] = "red";
|
|
2070
|
-
AvatarVariant["Blue"] = "blue";
|
|
2071
|
-
AvatarVariant["Comet"] = "comet";
|
|
2072
|
-
AvatarVariant["Number"] = "number";
|
|
2073
|
-
AvatarVariant["Dashed"] = "dashed";
|
|
2074
|
-
AvatarVariant["Image"] = "image";
|
|
2075
|
-
})(exports.AvatarVariant || (exports.AvatarVariant = {}));
|
|
2076
|
-
var getAvatarVariant = function (charCode) {
|
|
2077
|
-
if (charCode >= 65 && charCode <= 71) {
|
|
2078
|
-
return exports.AvatarVariant.Blue;
|
|
2079
|
-
}
|
|
2080
|
-
else if (charCode >= 72 && charCode <= 77) {
|
|
2081
|
-
return exports.AvatarVariant.Red;
|
|
2082
|
-
}
|
|
2083
|
-
else if (charCode >= 78 && charCode <= 84) {
|
|
2084
|
-
return exports.AvatarVariant.Green;
|
|
2085
|
-
}
|
|
2086
|
-
else {
|
|
2087
|
-
return exports.AvatarVariant.Comet;
|
|
2088
|
-
}
|
|
2089
|
-
};
|
|
2090
|
-
var Avatar = function (_a) {
|
|
2091
|
-
var name = _a.name, src = _a.src, _b = _a.isClinic, isClinic = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.showTooltip, showTooltip = _d === void 0 ? true : _d, _e = _a.tooltipPlacement, tooltipPlacement = _e === void 0 ? 'bottom' : _e, style = _a.style, handleClick = _a.handleClick, showRemoveButton = _a.showRemoveButton, handleRemoveButtonClick = _a.handleRemoveButtonClick, variant = _a.variant, tooltipText = _a.tooltipText, rest = __rest(_a, ["name", "src", "isClinic", "size", "showTooltip", "tooltipPlacement", "style", "handleClick", "showRemoveButton", "handleRemoveButtonClick", "variant", "tooltipText"]);
|
|
2092
|
-
var theme = useTheme();
|
|
2093
|
-
var _f = __read(React.useState(!!src), 2), isSrcValid = _f[0], setIsSrcValid = _f[1];
|
|
2094
|
-
var _g = __read(React.useState(false), 2), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
|
|
2095
|
-
var _h = __read(React.useState(false), 2), isHoveringRemoveButton = _h[0], setIsHoveringRemoveButton = _h[1];
|
|
2096
|
-
var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
|
|
2097
|
-
var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
|
|
2098
|
-
if (isSrcValid) {
|
|
2099
|
-
_variant = 'image';
|
|
2100
|
-
}
|
|
2101
|
-
var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
|
|
2102
|
-
var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({}, rest, { name: name, src: src, size: size, style: avatarDynamicStyles, variant: variant || _variant, onClick: handleClick, onError: function () { return setIsSrcValid(false); }, onMouseEnter: function () { return setIsHoveringAvatar(true); }, onMouseLeave: function () { return setIsHoveringAvatar(false); } }), showRemoveButton && isHoveringAvatar && !shouldHideRemoveButton && (React__default["default"].createElement(react.Box, { backgroundColor: theme.colors.white, borderRadius: "9999px", cursor: "pointer", position: "absolute", top: "-4px", right: "-4px", onClick: handleRemoveButtonClick, onMouseEnter: function () { return setIsHoveringRemoveButton(true); }, onMouseLeave: function () { return setIsHoveringRemoveButton(false); } },
|
|
2103
|
-
React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', color: "default" })))));
|
|
2104
|
-
if (showTooltip) {
|
|
2105
|
-
return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
|
|
2106
|
-
}
|
|
2107
|
-
return avatarMarkup;
|
|
2108
|
-
};
|
|
2109
|
-
|
|
2110
|
-
var AvatarGroup = function (_a) {
|
|
2111
|
-
var avatars = _a.avatars, _b = _a.max, max = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, handleAddButtonClick = _a.handleAddButtonClick, _d = _a.showAddButton, showAddButton = _d === void 0 ? true : _d, addButtonTooltipText = _a.addButtonTooltipText, _e = _a.showRemoveAvatarButton, showRemoveAvatarButton = _e === void 0 ? false : _e, handleRemoveButtonClick = _a.handleRemoveButtonClick;
|
|
2112
|
-
var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
|
|
2113
|
-
var spacing = size === 'lg' || size === 'md' ? -2 : -1;
|
|
2114
|
-
return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
|
|
2115
|
-
avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Number, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
|
|
2116
|
-
showAddButton && (React__default["default"].createElement(Avatar, { name: "", variant: exports.AvatarVariant.Dashed, icon: React__default["default"].createElement(Icon, { name: "plus", color: "subtle", size: size }), onClick: handleAddButtonClick, tooltipText: addButtonTooltipText, size: size }))));
|
|
2117
|
-
};
|
|
2118
|
-
|
|
2119
2114
|
var AvatarConfig = {
|
|
2120
2115
|
baseStyle: {
|
|
2121
2116
|
container: {
|
|
@@ -2267,9 +2262,120 @@ var AvatarConfig = {
|
|
|
2267
2262
|
},
|
|
2268
2263
|
},
|
|
2269
2264
|
},
|
|
2265
|
+
icon: {
|
|
2266
|
+
container: {
|
|
2267
|
+
border: 0,
|
|
2268
|
+
color: adaptiveColors.icon.light.default,
|
|
2269
|
+
backgroundColor: coreColors.comet[50],
|
|
2270
|
+
opacity: 1,
|
|
2271
|
+
_hover: {
|
|
2272
|
+
backgroundColor: coreColors.comet[100],
|
|
2273
|
+
},
|
|
2274
|
+
_active: {
|
|
2275
|
+
backgroundColor: coreColors.comet[200],
|
|
2276
|
+
},
|
|
2277
|
+
},
|
|
2278
|
+
},
|
|
2270
2279
|
},
|
|
2271
2280
|
};
|
|
2272
2281
|
|
|
2282
|
+
var AvatarBadgePosition;
|
|
2283
|
+
(function (AvatarBadgePosition) {
|
|
2284
|
+
AvatarBadgePosition["TopLeft"] = "topLeft";
|
|
2285
|
+
AvatarBadgePosition["TopRight"] = "topRight";
|
|
2286
|
+
AvatarBadgePosition["BottomLeft"] = "bottomLeft";
|
|
2287
|
+
AvatarBadgePosition["BottomRight"] = "bottomRight";
|
|
2288
|
+
})(AvatarBadgePosition || (AvatarBadgePosition = {}));
|
|
2289
|
+
var AvatarBadge = function (_a) {
|
|
2290
|
+
var avatarSize = _a.avatarSize, badgeIconName = _a.badgeIconName, badgeBackgroundColor = _a.badgeBackgroundColor, badgeBorderColor = _a.badgeBorderColor, badgeIconColor = _a.badgeIconColor, badgePosition = _a.badgePosition;
|
|
2291
|
+
var useSmallBadge = React.useMemo(function () { return avatarSize === 'xs' || !badgeIconName; }, [badgeIconName, avatarSize]);
|
|
2292
|
+
var getBadgeTransform = function (position) {
|
|
2293
|
+
var _a, _b, _c;
|
|
2294
|
+
// type is actually SystemStyleInterpolation, which Chakra doesn't export, so use any instead
|
|
2295
|
+
var parentSizeString = (_c = (_b = (_a = AvatarConfig.sizes) === null || _a === void 0 ? void 0 : _a[avatarSize]) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.height;
|
|
2296
|
+
var parentSize = parentSizeString.replace('px', '');
|
|
2297
|
+
var translation = parentSize / 2;
|
|
2298
|
+
switch (position) {
|
|
2299
|
+
case AvatarBadgePosition.TopLeft:
|
|
2300
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
2301
|
+
? "translate(".concat(translation * -1.35, "px, ").concat(translation * -1.35, "px)")
|
|
2302
|
+
: "translate(".concat(translation * -1.2, "px, ").concat(translation * -1.2, "px)");
|
|
2303
|
+
case AvatarBadgePosition.TopRight:
|
|
2304
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
2305
|
+
? "translate(".concat(translation / 10, "px, ").concat(translation * -1.35, "px)")
|
|
2306
|
+
: "translate(".concat(translation / 5, "px, ").concat(translation * -1.2, "px)");
|
|
2307
|
+
case AvatarBadgePosition.BottomLeft:
|
|
2308
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
2309
|
+
? "translate(".concat(translation * -1.35, "px, ").concat(translation / 10, "px)")
|
|
2310
|
+
: "translate(".concat(translation * -1.2, "px, ").concat(translation / 5, "px)");
|
|
2311
|
+
default:
|
|
2312
|
+
return useSmallBadge && avatarSize !== 'xs'
|
|
2313
|
+
? "translate(".concat(translation / 10, "px, ").concat(translation / 10, "px)")
|
|
2314
|
+
: "translate(".concat(translation / 3, "px, ").concat(translation / 3, "px)");
|
|
2315
|
+
}
|
|
2316
|
+
};
|
|
2317
|
+
return (React__default["default"].createElement(react.AvatarBadge, { color: badgeIconColor || adaptiveColors.icon.light.active, borderColor: badgeBorderColor || coreColors.white, borderWidth: "1px", bg: badgeBackgroundColor || semanticColors.background.info, boxSize: useSmallBadge ? '10px' : '18px', transform: getBadgeTransform(badgePosition || AvatarBadgePosition.BottomRight) }, !useSmallBadge && badgeIconName && React__default["default"].createElement(Icon, { name: badgeIconName, size: 'xs' })));
|
|
2318
|
+
};
|
|
2319
|
+
|
|
2320
|
+
exports.AvatarVariant = void 0;
|
|
2321
|
+
(function (AvatarVariant) {
|
|
2322
|
+
AvatarVariant["Green"] = "green";
|
|
2323
|
+
AvatarVariant["Red"] = "red";
|
|
2324
|
+
AvatarVariant["Blue"] = "blue";
|
|
2325
|
+
AvatarVariant["Comet"] = "comet";
|
|
2326
|
+
AvatarVariant["Number"] = "number";
|
|
2327
|
+
AvatarVariant["Dashed"] = "dashed";
|
|
2328
|
+
AvatarVariant["Image"] = "image";
|
|
2329
|
+
AvatarVariant["Icon"] = "icon";
|
|
2330
|
+
})(exports.AvatarVariant || (exports.AvatarVariant = {}));
|
|
2331
|
+
var getAvatarVariant = function (charCode) {
|
|
2332
|
+
if (charCode >= 65 && charCode <= 71) {
|
|
2333
|
+
return exports.AvatarVariant.Blue;
|
|
2334
|
+
}
|
|
2335
|
+
else if (charCode >= 72 && charCode <= 77) {
|
|
2336
|
+
return exports.AvatarVariant.Red;
|
|
2337
|
+
}
|
|
2338
|
+
else if (charCode >= 78 && charCode <= 84) {
|
|
2339
|
+
return exports.AvatarVariant.Green;
|
|
2340
|
+
}
|
|
2341
|
+
else {
|
|
2342
|
+
return exports.AvatarVariant.Comet;
|
|
2343
|
+
}
|
|
2344
|
+
};
|
|
2345
|
+
var Avatar = function (_a) {
|
|
2346
|
+
var name = _a.name, src = _a.src, _b = _a.isClinic, isClinic = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.showTooltip, showTooltip = _d === void 0 ? true : _d, _e = _a.tooltipPlacement, tooltipPlacement = _e === void 0 ? 'bottom' : _e, style = _a.style, handleClick = _a.handleClick, showRemoveButton = _a.showRemoveButton, handleRemoveButtonClick = _a.handleRemoveButtonClick, variant = _a.variant, iconName = _a.iconName, tooltipText = _a.tooltipText, showBadge = _a.showBadge, badgeProps = _a.badgeProps, rest = __rest(_a, ["name", "src", "isClinic", "size", "showTooltip", "tooltipPlacement", "style", "handleClick", "showRemoveButton", "handleRemoveButtonClick", "variant", "iconName", "tooltipText", "showBadge", "badgeProps"]);
|
|
2347
|
+
var theme = useTheme();
|
|
2348
|
+
var _f = __read(React.useState(!!src), 2), isSrcValid = _f[0], setIsSrcValid = _f[1];
|
|
2349
|
+
var _g = __read(React.useState(false), 2), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
|
|
2350
|
+
var _h = __read(React.useState(false), 2), isHoveringRemoveButton = _h[0], setIsHoveringRemoveButton = _h[1];
|
|
2351
|
+
var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
|
|
2352
|
+
var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
|
|
2353
|
+
if (isSrcValid) {
|
|
2354
|
+
_variant = exports.AvatarVariant.Image;
|
|
2355
|
+
}
|
|
2356
|
+
if (iconName) {
|
|
2357
|
+
_variant = exports.AvatarVariant.Icon;
|
|
2358
|
+
}
|
|
2359
|
+
var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
|
|
2360
|
+
var avatarMarkup = (React__default["default"].createElement(react.Avatar, __assign({}, rest, { name: iconName ? '' : name, src: src, size: size, style: avatarDynamicStyles, variant: variant || _variant, icon: iconName && React__default["default"].createElement(Icon, { name: iconName, size: getNextIconSize(size, true, size === 'sm' || size === 'xs' ? 2 : 1) }), onClick: handleClick, onError: function () { return setIsSrcValid(false); }, onMouseEnter: function () { return setIsHoveringAvatar(true); }, onMouseLeave: function () { return setIsHoveringAvatar(false); } }),
|
|
2361
|
+
showRemoveButton && isHoveringAvatar && !shouldHideRemoveButton && (React__default["default"].createElement(react.Box, { backgroundColor: theme.colors.white, borderRadius: "9999px", cursor: "pointer", position: "absolute", top: "-4px", right: "-4px", onClick: handleRemoveButtonClick, onMouseEnter: function () { return setIsHoveringRemoveButton(true); }, onMouseLeave: function () { return setIsHoveringRemoveButton(false); } },
|
|
2362
|
+
React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', color: "default" }))),
|
|
2363
|
+
showBadge && (React__default["default"].createElement(AvatarBadge, { avatarSize: size, badgeIconName: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeIconName, badgeBackgroundColor: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeBackgroundColor, badgeBorderColor: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeBorderColor, badgeIconColor: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgeIconColor, badgePosition: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.badgePosition }))));
|
|
2364
|
+
if (showTooltip) {
|
|
2365
|
+
return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
|
|
2366
|
+
}
|
|
2367
|
+
return avatarMarkup;
|
|
2368
|
+
};
|
|
2369
|
+
|
|
2370
|
+
var AvatarGroup = function (_a) {
|
|
2371
|
+
var avatars = _a.avatars, _b = _a.max, max = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, handleAddButtonClick = _a.handleAddButtonClick, _d = _a.showAddButton, showAddButton = _d === void 0 ? true : _d, addButtonTooltipText = _a.addButtonTooltipText, _e = _a.showRemoveAvatarButton, showRemoveAvatarButton = _e === void 0 ? false : _e, handleRemoveButtonClick = _a.handleRemoveButtonClick;
|
|
2372
|
+
var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
|
|
2373
|
+
var spacing = size === 'lg' || size === 'md' ? -2 : -1;
|
|
2374
|
+
return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
|
|
2375
|
+
avatars.length > max ? (React__default["default"].createElement(Avatar, { name: "".concat(avatars.length), size: size, variant: exports.AvatarVariant.Number, tooltipText: mergedNames })) : (avatars.map(function (avatar) { return (React__default["default"].createElement(Avatar, __assign({}, avatar, { key: avatar.name, size: size, showRemoveButton: showRemoveAvatarButton, handleRemoveButtonClick: handleRemoveButtonClick }))); })),
|
|
2376
|
+
showAddButton && (React__default["default"].createElement(Avatar, { name: "", variant: exports.AvatarVariant.Dashed, icon: React__default["default"].createElement(Icon, { name: "plus", color: "subtle", size: size }), onClick: handleAddButtonClick, tooltipText: addButtonTooltipText, size: size }))));
|
|
2377
|
+
};
|
|
2378
|
+
|
|
2273
2379
|
var _path$k, _path2$7;
|
|
2274
2380
|
|
|
2275
2381
|
function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
|
|
@@ -7019,11 +7125,6 @@ var Modal = function (_a) {
|
|
|
7019
7125
|
return withDarkMode$1(Modal, !!darkMode);
|
|
7020
7126
|
};
|
|
7021
7127
|
|
|
7022
|
-
var modal_component = /*#__PURE__*/Object.freeze({
|
|
7023
|
-
__proto__: null,
|
|
7024
|
-
Modal: Modal
|
|
7025
|
-
});
|
|
7026
|
-
|
|
7027
7128
|
var ModalHeader = function (_a) {
|
|
7028
7129
|
var _b = _a.size, size = _b === void 0 ? 'md' : _b, children = _a.children, rest = __rest(_a, ["size", "children"]);
|
|
7029
7130
|
return (React__default["default"].createElement(react.ModalHeader, __assign({ px: 6, pt: 6, pb: 2 }, rest),
|
|
@@ -9919,7 +10020,6 @@ exports.Avatar = Avatar;
|
|
|
9919
10020
|
exports.AvatarConfig = AvatarConfig;
|
|
9920
10021
|
exports.AvatarGroup = AvatarGroup;
|
|
9921
10022
|
exports.BetaMenu = BetaMenu;
|
|
9922
|
-
exports.BetaModal = modal_component;
|
|
9923
10023
|
exports.Button = Button;
|
|
9924
10024
|
exports.ButtonSizeConfig = ButtonSizeConfig;
|
|
9925
10025
|
exports.ButtonVariantConfig = ButtonVariantConfig;
|
|
@@ -9935,6 +10035,7 @@ exports.Logo = Logo;
|
|
|
9935
10035
|
exports.MenuConfig = MenuConfig;
|
|
9936
10036
|
exports.MenuContext = MenuContext;
|
|
9937
10037
|
exports.MenuItemConfig = MenuItemConfig;
|
|
10038
|
+
exports.Modal = Modal;
|
|
9938
10039
|
exports.ModalBody = ModalBody;
|
|
9939
10040
|
exports.ModalCloseButton = ModalCloseButton;
|
|
9940
10041
|
exports.ModalFooter = ModalFooter;
|