@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.
@@ -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;
@@ -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 * as BetaModal from './modal.component';
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$2E = React.forwardRef(SvgAlertCircle);
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$2D = React.forwardRef(SvgAnimalBird);
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$2C = React.forwardRef(SvgAnimalCat);
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$2B = React.forwardRef(SvgAnimalCow);
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$2A = React.forwardRef(SvgAnimalDog);
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$2z = React.forwardRef(SvgAnimalHorse);
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$2E,
1380
- animalBird: ForwardRef$2D,
1381
- animalCat: ForwardRef$2C,
1382
- animalCow: ForwardRef$2B,
1383
- animalDog: ForwardRef$2A,
1384
- animalHorse: ForwardRef$2z,
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;