@televet/kibble-ui 1.14.10 → 1.15.0

package/build/index.js

@@ -1582,6 +1582,8 @@ var Icon = React.forwardRef(function (_a, ref) {
 });
 Icon.displayName = 'Icon';
 
+var useAdaptiveColor = function (color) { return react.useColorModeValue(color.light, color.dark); };
+
 var camelCaseToLabel = function (s) {
     return s.replace(/([A-Z])/g, ' $1').replace(/^\w/, function (c) { return c.toUpperCase(); });
 };
@@ -1619,810 +1621,390 @@ var toTitleCase = function (s) {
         .join('');
 };
 
-var Button = React.forwardRef(function (props, ref) {
-    var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights, radii = _a.radii;
-    var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
-    var modeColor = props.darkMode ? dark : light;
-    var bg = react.useColorModeValue(modeColor.default, dark.default);
-    var color = react.useColorModeValue(modeColor.content, dark.content);
-    var borderColor = react.useColorModeValue(modeColor.border, dark.border);
-    var p = __assign(__assign({}, props), { variant: variant, bg: bg, color: color, borderColor: borderColor });
-    var hoverClass = {
-        bg: react.useColorModeValue(modeColor.hover, dark.hover),
-    };
-    var activeClass = {
-        bg: react.useColorModeValue(modeColor.active, dark.active),
-        transform: 'scale(0.98)',
-    };
-    var iconName = p.iconName; p.darkMode; var iconPosition = p.iconPosition, domProps = __rest(p, ["iconName", "darkMode", "iconPosition"]);
-    if (iconName) {
-        var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size || 'md', name: iconName });
-        if (!domProps.children) {
-            var label = camelCaseToLabel(iconName);
-            return (React__default["default"].createElement(react.IconButton, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon, size: p.size || 'md' }, domProps)));
-        }
-        else {
-            var position = iconPosition === 'right' ? 'rightIcon' : 'leftIcon';
-            domProps[position] = ButtonIcon;
-        }
+var Tooltip = function (_a) {
+    var children = _a.children, label = _a.label, _b = _a.openDelay, openDelay = _b === void 0 ? 350 : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.titleCaseLabel, titleCaseLabel = _d === void 0 ? true : _d, rest = __rest(_a, ["children", "label", "openDelay", "placement", "titleCaseLabel"]);
+    var components = useTheme().components;
+    var bg = useAdaptiveColor(components.Tooltip.color);
+    var l = titleCaseLabel ? toTitleCase(label.toLowerCase()) : label;
+    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: l, bg: bg, openDelay: openDelay, placement: placement }, rest), children));
+};
+
+var TooltipGlobalStyle = {
+    '[id^=tooltip]': {
+        padding: '4px 8px 4px 8px !important',
+        borderRadius: '4px !important',
+    },
+};
+var TooltipConfig = {
+    color: { light: semanticColors.background.dark, dark: semanticColors.background.light },
+    baseStyle: {
+        zIndex: 'tooltipExtra',
+    },
+};
+
+exports.AvatarVariant = void 0;
+(function (AvatarVariant) {
+    AvatarVariant["Green"] = "green";
+    AvatarVariant["Red"] = "red";
+    AvatarVariant["Blue"] = "blue";
+    AvatarVariant["Comet"] = "comet";
+    AvatarVariant["Number"] = "number";
+    AvatarVariant["Dashed"] = "dashed";
+    AvatarVariant["Image"] = "image";
+})(exports.AvatarVariant || (exports.AvatarVariant = {}));
+var getAvatarVariant = function (charCode) {
+    if (charCode >= 65 && charCode <= 71) {
+        return exports.AvatarVariant.Blue;
     }
-    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, size: p.size || 'md', iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
-});
-Button.displayName = 'Button';
+    else if (charCode >= 72 && charCode <= 77) {
+        return exports.AvatarVariant.Red;
+    }
+    else if (charCode >= 78 && charCode <= 84) {
+        return exports.AvatarVariant.Green;
+    }
+    else {
+        return exports.AvatarVariant.Comet;
+    }
+};
+var Avatar = function (_a) {
+    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"]);
+    var theme = useTheme();
+    var _f = __read(React.useState(!!src), 2), isSrcValid = _f[0], setIsSrcValid = _f[1];
+    var _g = __read(React.useState(false), 2), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
+    var _h = __read(React.useState(false), 2), isHoveringRemoveButton = _h[0], setIsHoveringRemoveButton = _h[1];
+    var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
+    var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
+    if (isSrcValid) {
+        _variant = 'image';
+    }
+    var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
+    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); } },
+        React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', color: "default" })))));
+    if (showTooltip) {
+        return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
+    }
+    return avatarMarkup;
+};
 
-var ButtonVariantConfig = {
-    primary: {
-        variant: 'solid',
-        light: {
-            content: colors.text.dark.headline,
-            default: colors.teal['600'],
-            hover: colors.teal['700'],
-            active: colors.teal['800'],
-            border: colors.transparent,
+var AvatarGroup = function (_a) {
+    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;
+    var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
+    var spacing = size === 'lg' || size === 'md' ? -2 : -1;
+    return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
+        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 }))); })),
+        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 }))));
+};
+
+var AvatarConfig = {
+    baseStyle: {
+        container: {
+            backgroundColor: coreColors.white,
+            borderWidth: '2px',
+            boxShadow: "0 0 0 1px ".concat(coreColors.white),
+            _hover: {
+                backgroundColor: coreColors.gray[50],
+                zIndex: 2,
+            },
+            _active: {
+                backgroundColor: coreColors.gray[100],
+            },
         },
-        dark: {
-            content: colors.text.light.headline,
-            default: colors.teal['400'],
-            hover: colors.teal['300'],
-            active: colors.teal['100'],
-            border: colors.transparent,
+        label: {
+            paddingTop: '1px',
         },
     },
-    primaryDestructive: {
-        variant: 'solid',
-        light: {
-            content: colors.text.dark.headline,
-            default: colors.red['500'],
-            hover: colors.red['600'],
-            active: colors.red['700'],
-            border: colors.transparent,
+    sizes: {
+        xs: {
+            container: {
+                height: '24px',
+                width: '24px',
+            },
+            label: {
+                fontSize: '12px',
+                fontWeight: '600',
+                lineHeight: '18px',
+            },
         },
-        dark: {
-            content: colors.text.light.headline,
-            default: colors.red['200'],
-            hover: colors.red['100'],
-            active: colors.red['50'],
-            border: colors.transparent,
+        sm: {
+            container: {
+                height: '32px',
+                width: '32px',
+            },
+            label: {
+                fontSize: '14px',
+                fontWeight: '400',
+                lineHeight: '24px',
+                paddingTop: 0,
+            },
         },
-    },
-    secondary: {
-        variant: 'outline',
-        light: {
-            content: colors.text.light.default,
-            default: colors.transparent,
-            hover: colors.blackAlpha['100'],
-            active: colors.blackAlpha['200'],
-            border: colors.border.light.heavy,
+        md: {
+            container: {
+                height: '36px',
+                width: '36px',
+            },
+            label: {
+                fontSize: '16px',
+                fontWeight: '400',
+                lineHeight: '24px',
+            },
         },
-        dark: {
-            content: colors.white,
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.white,
+        lg: {
+            container: {
+                height: '40px',
+                width: '40px',
+            },
+            label: {
+                fontSize: '16px',
+                fontWeight: '400',
+                lineHeight: '24px',
+            },
         },
     },
-    secondaryDestructive: {
-        variant: 'outline',
-        light: {
-            content: colors.text.light.error,
-            default: colors.transparent,
-            hover: colors.red['50'],
-            active: colors.red['100'],
-            border: colors.border.light.error,
-        },
-        dark: {
-            content: colors.red['300'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.red['300'],
+    variants: {
+        red: {
+            container: {
+                borderColor: coreColors.red[300],
+            },
+            label: {
+                color: coreColors.red[300],
+            },
         },
-    },
-    secondarySubtle: {
-        variant: 'outline',
-        light: {
-            content: colors.text.light.default,
-            default: colors.white,
-            hover: colors.gray['50'],
-            active: colors.gray['100'],
-            border: colors.border.light.default,
+        green: {
+            container: {
+                borderColor: coreColors.green[400],
+            },
+            label: {
+                color: coreColors.green[400],
+            },
         },
-        dark: {
-            content: colors.text.dark.default,
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.text.dark.default,
+        blue: {
+            container: {
+                borderColor: coreColors.blue[300],
+            },
+            label: {
+                color: coreColors.blue[300],
+            },
         },
-    },
-    secondarySubtleDestructive: {
-        variant: 'outline',
-        light: {
-            content: colors.text.light.error,
-            default: colors.white,
-            hover: colors.red['50'],
-            active: colors.red['100'],
-            border: colors.border.light.default,
-        },
-        dark: {
-            content: colors.red['300'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.whiteAlpha['500'],
-        },
-    },
-    tertiary: {
-        variant: 'solid',
-        light: {
-            content: colors.text.light.default,
-            default: colors.gray['100'],
-            hover: colors.gray['200'],
-            active: colors.gray['300'],
-            border: colors.transparent,
-        },
-        dark: {
-            content: colors.text.dark.headline,
-            default: colors.whiteAlpha[200],
-            hover: colors.whiteAlpha[300],
-            active: colors.whiteAlpha[400],
-            border: colors.transparent,
-        },
-    },
-    tertiaryDestructive: {
-        variant: 'solid',
-        light: {
-            content: colors.text.light.error,
-            default: colors.red['100'],
-            hover: colors.red['200'],
-            active: colors.red['300'],
-            border: colors.transparent,
-        },
-        dark: {
-            content: colors.red['300'],
-            default: colors.whiteAlpha['200'],
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
-        },
-    },
-    ghost: {
-        variant: 'ghost',
-        light: {
-            content: colors.text.light.link,
-            default: colors.transparent,
-            hover: colors.teal['100'],
-            active: colors.teal['200'],
-            border: colors.transparent,
-        },
-        dark: {
-            content: colors.teal['400'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
-        },
-    },
-    ghostNeutral: {
-        variant: 'ghost',
-        light: {
-            content: colors.text.light.default,
-            default: colors.transparent,
-            hover: colors.blackAlpha['100'],
-            active: colors.blackAlpha['200'],
-            border: colors.transparent,
+        comet: {
+            container: {
+                backgroundColor: coreColors.comet[50],
+                borderColor: coreColors.comet[400],
+                _hover: {
+                    backgroundColor: coreColors.comet[100],
+                },
+                _active: {
+                    backgroundColor: coreColors.comet[200],
+                },
+            },
+            label: {
+                color: coreColors.comet[800],
+            },
         },
-        dark: {
-            content: colors.text.dark.headline,
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
+        number: {
+            container: {
+                backgroundColor: coreColors.blue[800],
+                border: 0,
+                _hover: {
+                    backgroundColor: coreColors.blue[800], // 700
+                },
+                _active: {
+                    backgroundColor: coreColors.blue[800], // 600
+                },
+            },
+            label: {
+                color: coreColors.white,
+            },
         },
-    },
-    ghostDestructive: {
-        variant: 'ghost',
-        light: {
-            content: colors.text.light.error,
-            default: colors.transparent,
-            hover: colors.red['100'],
-            active: colors.red['200'],
-            border: colors.transparent,
+        dashed: {
+            container: {
+                backgroundColor: coreColors.transparent,
+                border: '1px dashed',
+                borderColor: semanticColors.border.dark,
+                boxShadow: 0,
+                _hover: {
+                    backgroundColor: coreColors.blackAlpha[100],
+                    zIndex: 0,
+                },
+                _active: {
+                    backgroundColor: coreColors.blackAlpha[200],
+                },
+            },
+            label: {
+                color: adaptiveColors.icon.light.subtle,
+            },
         },
-        dark: {
-            content: colors.red['300'],
-            default: colors.transparent,
-            hover: colors.whiteAlpha['300'],
-            active: colors.whiteAlpha['400'],
-            border: colors.transparent,
+        image: {
+            container: {
+                border: 0,
+                _hover: {
+                    backgroundColor: coreColors.black,
+                    img: { opacity: 0.94 },
+                },
+                _active: {
+                    backgroundColor: coreColors.black,
+                    img: { opacity: 0.92 },
+                },
+            },
         },
     },
-};
-var ButtonSizeConfig = {
-    lg: {
-        p: '0 20px',
-    },
-    md: {
-        p: '0 16px',
-    },
-    sm: {
-        p: '0 12px',
-    },
-    xs: {
-        p: '0 8px',
-    },
 };
 
-var AlertButton = function (_a) {
-    var status = _a.status, alignment = _a.alignment, _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, _c = _a.size, size = _c === void 0 ? 'xs' : _c, _d = _a.pairedWithCloseButton, pairedWithCloseButton = _d === void 0 ? false : _d, rest = __rest(_a, ["status", "alignment", "variant", "size", "pairedWithCloseButton"]);
-    return (React__default["default"].createElement(Button, __assign({ backgroundColor: "semanticColors.background.".concat(status), size: size, variant: variant }, rest, (alignment === 'bottom' && { mt: 2, mb: 1 }), (alignment === 'right' && pairedWithCloseButton && { mr: 2 })), rest.children));
+var _path$k, _path2$7;
+
+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); }
+
+var SvgTeal = function SvgTeal(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+    viewBox: "0 0 200 44",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M176.773 35.166c-2.461 4.878-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.135 2.149h-21.749c.313 3.49 3.49 5.996 7.115 5.996 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM192.482 3.929v8.682H200v7.205h-7.518v10.875c0 3.178 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.894v7.563c-1.298.671-3.311 1.208-6.131 1.208-6.221 0-10.069-3.849-10.069-10.427V19.86h-4.207v-7.205h4.207V3.974h8.727v-.045ZM139.047.035c-3.715.18-6.713 3.178-6.892 6.892-.179 4.162 3.133 7.564 7.205 7.564h.179l.134 5.236c0 .492.716.671.94.224 0 0 4.699-8.862 4.744-8.951.895-1.79 1.253-2.327 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.396h-.045L117.521.037h-10.696l17.23 33.52 4.878 9.442 4.922-9.622-4.833-9.98Z",
+    fill: "#050E5F"
+  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 .26h31.193v8.413H20.139v33.564h-9.04V8.673H0V.259ZM58.537 35.166c-2.462 4.879-7.25 7.877-13.74 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.029-.045 1.79-.134 2.148h-21.75c.313 3.49 3.49 5.997 7.115 5.997 3.223 0 4.968-1.388 6.355-3.58l7.385 2.863Zm-7.564-11.009c-.358-3.177-3.043-5.46-6.578-5.46-3.491 0-6.31 2.64-6.668 5.46h13.246ZM73.216.26v41.977h-8.772V.26h8.772ZM107.675 35.166c-2.461 4.879-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.843 0 1.029-.044 1.79-.134 2.148H86.82c.314 3.49 3.491 5.997 7.116 5.997 3.222 0 4.968-1.388 6.355-3.58l7.384 2.863Zm-7.518-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247Z",
+    fill: "#39ADC3"
+  })));
 };
 
-var AlertIcon = function (_a) {
-    var status = _a.status, rest = __rest(_a, ["status"]);
-    return React__default["default"].createElement(Icon, __assign({ color: status === 'info' ? 'active' : status, size: "lg" }, rest));
+var _path$j;
+
+function _extends$j() { _extends$j = 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$j.apply(this, arguments); }
+
+var SvgTealIcon = function SvgTealIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+    viewBox: "0 0 56 60",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M55.596 10.103c0-5.73-4.783-10.35-10.59-10.085-5.17.246-9.389 4.443-9.618 9.609-.265 5.8 4.359 10.579 10.095 10.579h.23l.158 7.334c.018.723.971.953 1.324.318 0 0 6.583-12.395 6.636-12.501 1.253-2.521 1.765-3.244 1.765-5.254ZM31.01 32.618h-.017v.035L14.932 0H0l30.887 60 6.9-13.435-6.777-13.947Z",
+    fill: "#39ADC3"
+  })));
 };
 
-exports.AlertVariant = void 0;
-(function (AlertVariant) {
-    AlertVariant["Error"] = "error";
-    AlertVariant["Warning"] = "warning";
-    AlertVariant["Success"] = "success";
-    AlertVariant["Info"] = "info";
-})(exports.AlertVariant || (exports.AlertVariant = {}));
-exports.AlertStatusIcon = void 0;
-(function (AlertStatusIcon) {
-    AlertStatusIcon["error"] = "warningSign";
-    AlertStatusIcon["warning"] = "warningSign";
-    AlertStatusIcon["success"] = "checkmark";
-    AlertStatusIcon["info"] = "infoCircleOutlined";
-})(exports.AlertStatusIcon || (exports.AlertStatusIcon = {}));
+var _path$i;
 
-var Text = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, _c = _a.as, as = _c === void 0 ? 'span' : _c, color = _a.color, _d = _a.colorToken, colorToken = _d === void 0 ? 'default' : _d, _e = _a.darkMode, darkMode = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "variant", "as", "color", "colorToken", "darkMode"]);
-    var colors = useTheme().colors;
-    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
-    return (React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: color || adaptiveColor }, rest), children));
+function _extends$i() { _extends$i = 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$i.apply(this, arguments); }
+
+var SvgBlack = function SvgBlack(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+    viewBox: "0 0 200 44",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 .23h31.193v8.414H20.139V42.21h-9.04V8.644H0V.231ZM58.537 35.138c-2.462 4.878-7.25 7.876-13.74 7.876-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.03-.045 1.79-.134 2.148h-21.75c.313 3.49 3.49 5.997 7.115 5.997 3.223 0 4.968-1.387 6.355-3.58l7.385 2.864Zm-7.564-11.01c-.358-3.177-3.043-5.46-6.578-5.46-3.491 0-6.31 2.641-6.669 5.46h13.247ZM73.216.23V42.21h-8.772V.23h8.772ZM107.675 35.138c-2.461 4.878-7.25 7.876-13.739 7.876-9.22 0-15.708-6.4-15.708-15.574 0-8.95 6.578-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.843 0 1.03-.044 1.79-.134 2.148H86.82c.314 3.49 3.491 5.997 7.116 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.518-11.01c-.358-3.177-3.044-5.46-6.579-5.46-3.49 0-6.31 2.641-6.668 5.46h13.247ZM176.773 35.138c-2.461 4.878-7.25 7.876-13.739 7.876-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.03-.045 1.79-.135 2.148h-21.749c.313 3.49 3.49 5.997 7.115 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.01c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.641-6.668 5.46h13.247ZM192.482 3.9v8.682H200v7.206h-7.518v10.875c0 3.177 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.895v7.563c-1.298.671-3.311 1.209-6.131 1.209-6.221 0-10.069-3.85-10.069-10.428v-12.71h-4.207v-7.205h4.207V3.945h8.727V3.9ZM139.047.007c-3.715.179-6.713 3.177-6.892 6.892-.179 4.162 3.133 7.563 7.205 7.563h.179l.134 5.236c0 .492.716.671.94.224 0 0 4.699-8.861 4.744-8.95.895-1.79 1.253-2.328 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.368h-.045L117.521.007h-10.696l17.23 33.52 4.878 9.442 4.922-9.621-4.833-9.98Z",
+    fill: "#000"
+  })));
 };
 
-var TextConfig = {
-    variants: {
-        regular: {
-            fontWeight: fontWeights.normal,
-        },
-        semibold: {
-            fontWeight: fontWeights.semibold,
-        },
-    },
-    sizes: {
-        xs: {
-            fontSize: '12px',
-            lineHeight: '150%',
-        },
-        sm: {
-            fontSize: '14px',
-            lineHeight: '150%',
-        },
-        md: {
-            fontSize: '16px',
-            lineHeight: '150%',
-        },
-        lg: {
-            fontSize: '18px',
-            lineHeight: '150%',
-        },
-        xl: {
-            fontSize: '20px',
-            lineHeight: '150%',
-        },
-        '2xl': {
-            fontSize: '24px',
-            lineHeight: '150%',
-        },
-        '3xl': {
-            fontSize: '30px',
-            lineHeight: '150%',
-        },
-        '4xl': {
-            fontSize: '36px',
-            lineHeight: '150%',
-        },
-        '5xl': {
-            fontSize: '48px',
-            lineHeight: '150%',
-        },
-        '6xl': {
-            fontSize: '60px',
-            lineHeight: '150%',
-        },
-    },
-};
+var _path$h;
 
-function useWindowSize() {
-    // Initialize state with undefined width/height so server and client renders match
-    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-    var _a = __read(React.useState({
-        width: undefined,
-        height: undefined,
-    }), 2), windowSize = _a[0], setWindowSize = _a[1];
-    React.useEffect(function () {
-        // Handler to call on window resize
-        function handleResize() {
-            // Set window width/height to state
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        // Add event listener
-        window.addEventListener('resize', handleResize);
-        // Call handler right away so state gets updated with initial window size
-        handleResize();
-        // Remove event listener on cleanup
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, []); // Empty array ensures that effect is only run on mount
-    return windowSize;
-}
+function _extends$h() { _extends$h = 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$h.apply(this, arguments); }
 
-var useOverflowingText = function (text, textRef) {
-    var size = useWindowSize();
-    var _a = __read(React.useState(false), 2), isTextOverFlowing = _a[0], setIsTextOverFlowing = _a[1];
-    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
-        var _a;
-        if (containerRefValue && containerRefValue.current) {
-            var lines = (_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].getClientRects().length;
-            return lines > 1;
-        }
-        return false;
-    }, []);
-    React.useEffect(function () {
-        // if size of window changes, or if title length changes, check if text is overflowing
-        var isOverFlowing = onCheckTextOverFlowing(textRef);
-        setIsTextOverFlowing(isOverFlowing);
-    }, [size, text, onCheckTextOverFlowing, textRef]);
-    return isTextOverFlowing;
+var SvgBlackIcon = function SvgBlackIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+    viewBox: "0 0 56 60",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M55.596 10.103c0-5.73-4.783-10.35-10.59-10.085-5.17.246-9.389 4.443-9.618 9.609-.265 5.8 4.359 10.579 10.095 10.579h.23l.158 7.334c.018.723.971.953 1.324.318 0 0 6.583-12.395 6.636-12.5 1.253-2.522 1.765-3.245 1.765-5.255ZM31.01 32.618h-.017v.035L14.932 0H0l30.887 60 6.9-13.435-6.777-13.947Z",
+    fill: "#000"
+  })));
 };
 
-var Alert = function (_a) {
-    var _b = _a.status, status = _b === void 0 ? exports.AlertVariant.Success : _b, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, iconProps = _a.iconProps, _d = _a.showButton, showButton = _d === void 0 ? false : _d, buttonProps = _a.buttonProps, buttonTitle = _a.buttonTitle, alertTitle = _a.alertTitle, titleProps = _a.titleProps, description = _a.description, descriptionProps = _a.descriptionProps, _e = _a.showCloseButton, showCloseButton = _e === void 0 ? true : _e, onClose = _a.onClose, rest = __rest(_a, ["status", "showIcon", "iconProps", "showButton", "buttonProps", "buttonTitle", "alertTitle", "titleProps", "description", "descriptionProps", "showCloseButton", "onClose"]);
-    var titleRef = React.useRef(null);
-    var isTitleOverflowing = useOverflowingText(alertTitle, titleRef);
-    var showButtonInline = showButton && !description && !isTitleOverflowing;
-    var showButtonBottom = (showButton && description) || (showButton && !description && isTitleOverflowing);
-    return (React__default["default"].createElement(react.Alert, __assign({ justifyContent: "space-between", overflow: "visible", variant: status, pl: 3, pr: showCloseButton ? 2 : 3 }, rest),
-        React__default["default"].createElement(react.HStack, { justifyContent: "space-between", w: "100%" },
-            showIcon && (React__default["default"].createElement(react.Flex, { alignSelf: "flex-start" },
-                React__default["default"].createElement(AlertIcon, __assign({ status: status, name: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || exports.AlertStatusIcon[status] }, iconProps)))),
-            React__default["default"].createElement(react.Flex, __assign({ width: "100%", flexDirection: "column" }, (showIcon && { ml: 2 })),
-                React__default["default"].createElement(react.Flex, { alignItems: "flex-start", w: "100%", justifyContent: "space-between" },
-                    React__default["default"].createElement(react.Box, { ref: titleRef },
-                        React__default["default"].createElement(Text, __assign({ size: "md", variant: "semibold" }, titleProps), alertTitle)),
-                    React__default["default"].createElement(react.Flex, { alignItems: "center" },
-                        showButtonInline && (React__default["default"].createElement(AlertButton, __assign({ alignment: "right", status: status }, buttonProps, { pairedWithCloseButton: showCloseButton }), buttonTitle)),
-                        showCloseButton && React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "close", size: "xs", onClick: onClose }))),
-                description && (React__default["default"].createElement(Text, __assign({ size: "md" }, descriptionProps), description)),
-                React__default["default"].createElement(react.Box, null, showButtonBottom && (React__default["default"].createElement(AlertButton, __assign({ alignment: "bottom", status: status }, buttonProps), buttonTitle)))))));
-};
+var _path$g;
 
-var AlertConfig = {
-    baseStyle: {
-        container: {
-            borderRadius: radii.md,
-            width: 'inherit',
-            py: 2,
-        },
-    },
-    variants: {
-        info: {
-            container: {
-                backgroundColor: colors.background.info,
-            },
-        },
-        success: {
-            container: {
-                backgroundColor: colors.background.success,
-            },
-        },
-        warning: {
-            container: {
-                backgroundColor: colors.background.warning,
-            },
-        },
-        error: {
-            container: {
-                backgroundColor: colors.background.error,
-            },
-        },
-    },
+function _extends$g() { _extends$g = 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$g.apply(this, arguments); }
+
+var SvgWhite = function SvgWhite(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+    viewBox: "0 0 200 44",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 .245h31.193v8.413H20.139v33.565h-9.04V8.66H0V.245ZM58.537 35.152c-2.462 4.878-7.25 7.877-13.74 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.134 2.148h-21.75c.313 3.491 3.49 5.997 7.115 5.997 3.223 0 4.968-1.387 6.355-3.58l7.385 2.864Zm-7.564-11.009c-.358-3.178-3.043-5.46-6.578-5.46-3.491 0-6.31 2.64-6.669 5.46h13.247ZM73.216.245v41.978h-8.772V.245h8.772ZM107.675 35.152c-2.461 4.878-7.25 7.877-13.739 7.877-9.22 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.842 0 1.03-.044 1.79-.134 2.148H86.82c.314 3.491 3.491 5.997 7.116 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.518-11.009c-.358-3.178-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM176.773 35.152c-2.461 4.878-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.135 2.148h-21.749c.313 3.491 3.49 5.997 7.115 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.009c-.358-3.178-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM192.482 3.915v8.682H200v7.205h-7.518v10.875c0 3.177 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.895v7.563c-1.298.672-3.311 1.209-6.131 1.209-6.22 0-10.069-3.849-10.069-10.428v-12.71h-4.207v-7.204h4.207V3.959h8.727v-.044ZM139.047.021c-3.715.18-6.713 3.178-6.892 6.892-.179 4.162 3.133 7.563 7.205 7.563h.179l.134 5.236c0 .493.716.672.94.224 0 0 4.699-8.86 4.744-8.95.895-1.79 1.253-2.328 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.382h-.045L117.521.022h-10.696l17.23 33.52 4.878 9.442 4.922-9.622-4.833-9.98Z",
+    fill: "#fff"
+  })));
 };
 
-var useAdaptiveColor = function (color) { return react.useColorModeValue(color.light, color.dark); };
+var _path$f;
 
-var Tooltip = function (_a) {
-    var children = _a.children, label = _a.label, _b = _a.openDelay, openDelay = _b === void 0 ? 350 : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.titleCaseLabel, titleCaseLabel = _d === void 0 ? true : _d, rest = __rest(_a, ["children", "label", "openDelay", "placement", "titleCaseLabel"]);
-    var components = useTheme().components;
-    var bg = useAdaptiveColor(components.Tooltip.color);
-    var l = titleCaseLabel ? toTitleCase(label.toLowerCase()) : label;
-    return (React__default["default"].createElement(react.Tooltip, __assign({ hasArrow: true, arrowSize: 10, label: l, bg: bg, openDelay: openDelay, placement: placement }, rest), children));
-};
+function _extends$f() { _extends$f = 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$f.apply(this, arguments); }
 
-var TooltipGlobalStyle = {
-    '[id^=tooltip]': {
-        padding: '4px 8px 4px 8px !important',
-        borderRadius: '4px !important',
-    },
-};
-var TooltipConfig = {
-    color: { light: semanticColors.background.dark, dark: semanticColors.background.light },
-    baseStyle: {
-        zIndex: 'tooltipExtra',
-    },
+var SvgWhiteIcon = function SvgWhiteIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+    viewBox: "0 0 56 60",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M55.596 10.103c0-5.73-4.783-10.35-10.59-10.085-5.17.246-9.389 4.443-9.618 9.609-.265 5.8 4.359 10.579 10.095 10.579h.23l.158 7.334c.018.723.971.953 1.324.318 0 0 6.583-12.395 6.636-12.501 1.253-2.521 1.765-3.244 1.765-5.254ZM31.01 32.618h-.017v.035L14.932 0H0l30.887 60 6.9-13.435-6.777-13.947Z",
+    fill: "#fff"
+  })));
 };
 
-exports.AvatarVariant = void 0;
-(function (AvatarVariant) {
-    AvatarVariant["Green"] = "green";
-    AvatarVariant["Red"] = "red";
-    AvatarVariant["Blue"] = "blue";
-    AvatarVariant["Comet"] = "comet";
-    AvatarVariant["Number"] = "number";
-    AvatarVariant["Dashed"] = "dashed";
-    AvatarVariant["Image"] = "image";
-})(exports.AvatarVariant || (exports.AvatarVariant = {}));
-var getAvatarVariant = function (charCode) {
-    if (charCode >= 65 && charCode <= 71) {
-        return exports.AvatarVariant.Blue;
-    }
-    else if (charCode >= 72 && charCode <= 77) {
-        return exports.AvatarVariant.Red;
-    }
-    else if (charCode >= 78 && charCode <= 84) {
-        return exports.AvatarVariant.Green;
-    }
-    else {
-        return exports.AvatarVariant.Comet;
-    }
-};
-var Avatar = function (_a) {
-    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"]);
-    var theme = useTheme();
-    var _f = __read(React.useState(!!src), 2), isSrcValid = _f[0], setIsSrcValid = _f[1];
-    var _g = __read(React.useState(false), 2), isHoveringAvatar = _g[0], setIsHoveringAvatar = _g[1];
-    var _h = __read(React.useState(false), 2), isHoveringRemoveButton = _h[0], setIsHoveringRemoveButton = _h[1];
-    var shouldHideRemoveButton = size === 'xs' || variant === exports.AvatarVariant.Dashed || variant === exports.AvatarVariant.Number;
-    var _variant = isClinic ? 'comet' : getAvatarVariant(name.charCodeAt(0));
-    if (isSrcValid) {
-        _variant = 'image';
-    }
-    var avatarDynamicStyles = __assign({ cursor: handleClick ? 'pointer' : 'auto' }, style);
-    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); } },
-        React__default["default"].createElement(Icon, { name: "closeCircle", size: isHoveringRemoveButton ? 'sm' : 'xs', color: "default" })))));
-    if (showTooltip) {
-        return (React__default["default"].createElement(Tooltip, { label: tooltipText || name, placement: tooltipPlacement }, avatarMarkup));
-    }
-    return avatarMarkup;
-};
+var _path$e, _path2$6, _path3$5, _path4$4, _path5$4;
 
-var AvatarGroup = function (_a) {
-    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;
-    var mergedNames = React.useMemo(function () { return avatars.map(function (avatar) { return avatar.name; }).join(', '); }, [avatars]);
-    var spacing = size === 'lg' || size === 'md' ? -2 : -1;
-    return (React__default["default"].createElement(react.AvatarGroup, { size: size, spacing: spacing },
-        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 }))); })),
-        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 }))));
+function _extends$e() { _extends$e = 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$e.apply(this, arguments); }
+
+var SvgNewYears = function SvgNewYears(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+    viewBox: "0 0 87 73",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M11.704 21.272c7.54.486 13.941 2.812 19.312 7.679 2.604 2.325 4.503 5.191 5.859 8.436.325.811.596 1.676.65 2.542v.54c0 .163-.108.271-.162.38-.217.27-.38.215-.542-.055-1.41-2.38-3.093-4.488-4.991-6.49-2.658-2.703-5.75-4.866-9.114-6.651-3.31-1.73-6.78-3.082-10.416-3.894-.976-.216-1.953-.27-2.929-.378-.488-.054-.976-.108-1.465-.216-.108 0-.27-.055-.38-.109-.27-.108-.488-.27-.542-.54 0-.325.217-.487.488-.595a15.99 15.99 0 0 1 1.52-.433c.976-.054 2.006-.108 2.712-.216ZM20.438 34.954c3.146.054 5.696.486 8.083 1.514 1.627.703 3.037 1.73 4.122 3.082.163.217.326.487.489.703a.415.415 0 0 1-.055.541c-.162.162-.325.162-.488.108-.325-.108-.65-.216-1.03-.324-1.9-.703-3.798-1.298-5.805-1.623a34.268 34.268 0 0 0-2.333-.27c-5.153-.162-9.981.973-14.592 3.299-1.41.703-2.659 1.676-3.798 2.758-1.085.973-2.115 2-3.146 2.974-.326.27-.597.595-.922.865-.272.27-.543.27-.76.108-.217-.162-.271-.378-.108-.703.38-.703.76-1.351 1.193-2 .163-.27.38-.541.543-.866.488-.865 1.085-1.568 1.79-2.27 3.743-4.003 8.354-6.436 13.725-7.572 1.193-.216 2.386-.324 3.092-.324ZM79.349 20.947c-.109 0-.271-.054-.434-.108-1.41-.432-2.875-.811-4.34-.973-1.899-.217-3.797-.217-5.642-.217-1.573.054-3.146.109-4.665.487-3.363.757-6.401 2.217-8.951 4.543-1.085.973-2.17 2.055-3.2 3.028-.814.757-1.628 1.514-2.333 2.434l-.109.108c-.162.162-.325.27-.596.162-.218-.162-.218-.379-.163-.595.217-.487.434-1.027.76-1.46.921-1.244 1.844-2.488 2.874-3.677 3.472-4.002 7.758-6.598 12.966-7.68 2.061-.432 4.122-.648 6.184-.486 2.061.108 4.014.595 5.804 1.568.868.433 1.574 1.082 2.279 1.677.217.162.325.378.217.703-.054.324-.271.486-.651.486ZM65.082 44.471c-.055.27-.217.433-.489.325-.162-.054-.325-.216-.488-.325-.38-.324-.76-.703-1.139-1.027-2.061-1.785-4.286-3.19-6.944-3.894-2.875-.757-5.696-.757-8.571-.162-1.682.324-3.31.973-4.828 1.676-.054.054-.108.109-.163.109-.163 0-.325 0-.38-.109-.054-.108-.054-.27 0-.432.055-.163.218-.27.326-.379.76-.757 1.736-1.298 2.712-1.784a19.8 19.8 0 0 1 7.487-1.623c3.146-.054 5.967 1.028 8.408 2.975 1.14.919 2.17 1.892 3.092 3.028.217.27.434.487.597.757.108.27.217.595.38.865Z",
+    fill: "#2A2A2B"
+  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M65.678 25.165c2.387-.054 4.666.27 6.781 1.244 2.604 1.19 4.557 3.083 5.696 5.733.109.162.163.378.163.594.054.27-.163.487-.434.379a2.543 2.543 0 0 1-.542-.27c-.217-.217-.434-.487-.651-.758-1.953-2.595-4.611-4.11-7.65-4.92-1.898-.487-3.85-.542-5.804-.487-1.953.054-3.906.324-5.804.865-.326.108-.597.216-.922.27-.163.054-.326.054-.489.054-.217-.054-.325-.27-.163-.432.109-.108.218-.163.38-.27.977-.542 2.062-.866 3.147-1.136 2.115-.541 4.231-.866 6.292-.866ZM8.273 60.2c.054-.324.108-.649.217-.973.542-2.38 1.573-4.597 2.875-6.706 1.898-3.028 4.123-5.786 6.943-8.058.76-.595 1.574-1.081 2.387-1.568.272-.162.651-.216.977-.325.217-.053.38 0 .488.217.109.216 0 .378-.163.486-.27.217-.596.487-.868.704-3.417 2.433-6.075 5.462-8.3 8.977-1.41 2.163-2.44 4.542-3.254 6.976-.055.216-.163.432-.272.649-.108.216-.217.378-.488.378-.217 0-.325-.216-.38-.54-.162-.055-.162-.163-.162-.217ZM38.448 28.302v2.325c0 .163 0 .325-.054.487 0 .216-.054.433-.326.433-.271 0-.325-.217-.38-.433-.054-.162-.054-.27-.108-.433-.108-4.326-1.03-8.598-2.007-12.816-.705-3.083-1.628-6.165-2.604-9.194 0-.054-.054-.162-.054-.216-.054-.162 0-.324.217-.432.162-.109.325 0 .434.108.054.054.108.162.162.27.109.27.272.487.38.757 1.03 2.812 2.116 5.678 2.821 8.599.922 3.515 1.465 6.976 1.519 10.545ZM39.099 23.435c-.217-.325-.163-.595-.054-.92.217-.81.434-1.568.705-2.325.542-1.838 1.356-3.623 2.278-5.354 2.116-3.785 5.046-6.651 8.897-8.652h.054c.38-.162.543-.216.651 0 .109.324-.108.433-.325.54-.38.271-.76.541-1.194.812-3.905 2.596-6.726 6.057-8.734 10.275-.759 1.622-1.302 3.299-1.844 5.029-.054.216-.054.487-.434.595Z",
+    fill: "#2A2A2B"
+  })), _path3$5 || (_path3$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M43.439 38.144c-.217-.162-.271-.378-.163-.595a4.93 4.93 0 0 1 .434-.703c.705-.973 1.573-1.784 2.55-2.487 2.604-1.839 5.533-3.029 8.625-3.786a28.751 28.751 0 0 1 8.029-.81c4.557.215 8.245 2.108 11.23 5.515 2.332 2.65 3.96 5.678 5.044 8.977.489 1.514.814 3.083 1.14 4.65 0 .109.054.217 0 .325-.055.163-.163.325-.272.379-.108.054-.325-.054-.434-.162-.108-.055-.162-.217-.217-.325-.922-1.514-1.79-3.082-2.766-4.542-2.93-4.435-6.727-7.788-11.718-9.735a20.929 20.929 0 0 0-9.276-1.46c-2.93.217-5.696.974-8.3 2.326-1.248.649-2.496 1.298-3.58 2.217-.055.054-.218.108-.326.216ZM39.804 37.874c.163-4.11 1.14-8.004 3.038-11.627 1.845-3.57 4.231-6.652 6.998-9.572 3.2-3.353 6.89-6.165 10.85-8.598 1.464-.866 2.983-1.569 4.61-2.001.11 0 .218-.108.272-.054.163.054.325.162.434.27a.352.352 0 0 1-.109.487 1.181 1.181 0 0 0-.27.216c-3.527 2.11-6.89 4.435-9.82 7.355-.705.703-1.464 1.352-2.224 2.055-.65.649-1.302 1.243-1.898 1.947a174.684 174.684 0 0 0-3.96 4.92c-2.659 3.57-4.503 7.572-5.805 11.844-.543 1.73-.922 3.46-1.41 5.191-.055.108-.055.27-.11.379-.053.054-.162.162-.216.162-.054 0-.163-.108-.217-.162-.054-.162-.109-.325-.109-.487 0-.757 0-1.514-.054-2.325ZM15.013 13.268c3.689.108 7.378.811 10.85 2.325 2.603 1.136 4.773 2.867 6.726 4.922.489.54.977 1.135 1.41 1.73.435.54.706 1.19.869 1.893.054.108.054.216.054.324 0 .217-.054.379-.271.433-.217.054-.272-.108-.326-.216-1.248-1.839-2.82-3.3-4.665-4.489-.434-.27-.922-.54-1.41-.757-2.17-1.027-4.395-1.947-6.782-2.433a35.731 35.731 0 0 0-6.78-.812c-.814 0-1.574.109-2.388.163-1.627.162-3.2.324-4.828.486-1.085.163-2.17.379-3.254.541-.326.054-.651.054-1.031.108-.109 0-.271 0-.38-.054-.434-.108-.542-.54-.217-.811.109-.108.217-.162.326-.27 1.41-.974 2.983-1.623 4.665-2.055 1.844-.433 3.743-.812 5.696-.974.488-.054 1.085-.054 1.736-.054Z",
+    fill: "#B78D5C"
+  })), _path4$4 || (_path4$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M77.83 65.24v.65a.37.37 0 0 1-.38.378c-.217 0-.325-.162-.38-.325 0-.054 0-.108-.054-.216-.054-.379-.054-.703-.163-1.082-.759-2.92-1.139-5.948-2.115-8.814a41.035 41.035 0 0 0-3.906-8.599c-1.194-2-2.658-3.785-4.34-5.462-.054-.054-.163-.108-.163-.162-.054-.108-.162-.27-.108-.379.054-.216.271-.27.488-.216.326.108.651.216.922.379.922.54 1.682 1.19 2.441 1.892 1.845 1.84 3.255 4.002 4.394 6.273 1.465 2.92 2.388 6.003 2.876 9.248.108.811.162 1.676.217 2.542.108 1.027.217 2 .27 3.028-.053.324 0 .595 0 .865ZM82.064 39.553l-2.008-1.406 2.333-.703.76-2.38 1.41 2.001H87l-1.465 1.947.814 2.326-2.333-.758-2.007 1.46.055-2.487ZM9.399 29.42l1.578-2.058.79 2.417 2.663.715-2.269 1.432.099 2.506L9.99 33l-2.564.806.887-2.327-1.677-2.058H9.4ZM10.481 2.38l2.984.054L15.146 0l.868 2.812 2.875.811-2.44 1.73.108 2.975-2.387-1.73-2.821.973.922-2.812-1.79-2.38ZM40.075 4.294l-1.627-1.298 2.061-.487.76-2 1.085 1.838 2.115.108-1.41 1.568.543 2.055-1.953-.81-1.736 1.135.162-2.11ZM74.4 12.32l-1.247-.866-1.41.486.488-1.405-.922-1.244h1.519l.868-1.244.434 1.46 1.464.433-1.247.865.054 1.514Z",
+    fill: "#B78D5C"
+  })), _path5$4 || (_path5$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m30.056 13.268 16.109 31.939h.057l6.802 13.639L46.1 72l-6.859-12.91-24.228-45.822h15.043Zm30.129.008c2.59-.108 5.11.913 6.984 2.828 1.874 1.92 2.94 4.564 2.96 7.338 0 2.024-.474 2.783-1.656 5.305-.055.133-6.253 12.631-6.253 12.631a.642.642 0 0 1-.707.29.697.697 0 0 1-.503-.606l-.177-7.39h-.236c-5.162-.037-9.36-4.46-9.472-9.984-.112-5.52 3.904-10.135 9.06-10.41v-.002Z",
+    fill: "#39ADC3"
+  })));
 };
 
-var AvatarConfig = {
-    baseStyle: {
-        container: {
-            backgroundColor: coreColors.white,
-            borderWidth: '2px',
-            boxShadow: "0 0 0 1px ".concat(coreColors.white),
-            _hover: {
-                backgroundColor: coreColors.gray[50],
-                zIndex: 2,
-            },
-            _active: {
-                backgroundColor: coreColors.gray[100],
-            },
-        },
-        label: {
-            paddingTop: '1px',
-        },
-    },
-    sizes: {
-        xs: {
-            container: {
-                height: '24px',
-                width: '24px',
-            },
-            label: {
-                fontSize: '12px',
-                fontWeight: '600',
-                lineHeight: '18px',
-            },
-        },
-        sm: {
-            container: {
-                height: '32px',
-                width: '32px',
-            },
-            label: {
-                fontSize: '14px',
-                fontWeight: '400',
-                lineHeight: '24px',
-                paddingTop: 0,
-            },
-        },
-        md: {
-            container: {
-                height: '36px',
-                width: '36px',
-            },
-            label: {
-                fontSize: '16px',
-                fontWeight: '400',
-                lineHeight: '24px',
-            },
-        },
-        lg: {
-            container: {
-                height: '40px',
-                width: '40px',
-            },
-            label: {
-                fontSize: '16px',
-                fontWeight: '400',
-                lineHeight: '24px',
-            },
-        },
-    },
-    variants: {
-        red: {
-            container: {
-                borderColor: coreColors.red[300],
-            },
-            label: {
-                color: coreColors.red[300],
-            },
-        },
-        green: {
-            container: {
-                borderColor: coreColors.green[400],
-            },
-            label: {
-                color: coreColors.green[400],
-            },
-        },
-        blue: {
-            container: {
-                borderColor: coreColors.blue[300],
-            },
-            label: {
-                color: coreColors.blue[300],
-            },
-        },
-        comet: {
-            container: {
-                backgroundColor: coreColors.comet[50],
-                borderColor: coreColors.comet[400],
-                _hover: {
-                    backgroundColor: coreColors.comet[100],
-                },
-                _active: {
-                    backgroundColor: coreColors.comet[200],
-                },
-            },
-            label: {
-                color: coreColors.comet[800],
-            },
-        },
-        number: {
-            container: {
-                backgroundColor: coreColors.blue[800],
-                border: 0,
-                _hover: {
-                    backgroundColor: coreColors.blue[800], // 700
-                },
-                _active: {
-                    backgroundColor: coreColors.blue[800], // 600
-                },
-            },
-            label: {
-                color: coreColors.white,
-            },
-        },
-        dashed: {
-            container: {
-                backgroundColor: coreColors.transparent,
-                border: '1px dashed',
-                borderColor: semanticColors.border.dark,
-                boxShadow: 0,
-                _hover: {
-                    backgroundColor: coreColors.blackAlpha[100],
-                    zIndex: 0,
-                },
-                _active: {
-                    backgroundColor: coreColors.blackAlpha[200],
-                },
-            },
-            label: {
-                color: adaptiveColors.icon.light.subtle,
-            },
-        },
-        image: {
-            container: {
-                border: 0,
-                _hover: {
-                    backgroundColor: coreColors.black,
-                    img: { opacity: 0.94 },
-                },
-                _active: {
-                    backgroundColor: coreColors.black,
-                    img: { opacity: 0.92 },
-                },
-            },
-        },
-    },
-};
-
-var _path$k, _path2$7;
-
-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); }
-
-var SvgTeal = function SvgTeal(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
-    viewBox: "0 0 200 44",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M176.773 35.166c-2.461 4.878-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.135 2.149h-21.749c.313 3.49 3.49 5.996 7.115 5.996 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM192.482 3.929v8.682H200v7.205h-7.518v10.875c0 3.178 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.894v7.563c-1.298.671-3.311 1.208-6.131 1.208-6.221 0-10.069-3.849-10.069-10.427V19.86h-4.207v-7.205h4.207V3.974h8.727v-.045ZM139.047.035c-3.715.18-6.713 3.178-6.892 6.892-.179 4.162 3.133 7.564 7.205 7.564h.179l.134 5.236c0 .492.716.671.94.224 0 0 4.699-8.862 4.744-8.951.895-1.79 1.253-2.327 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.396h-.045L117.521.037h-10.696l17.23 33.52 4.878 9.442 4.922-9.622-4.833-9.98Z",
-    fill: "#050E5F"
-  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 .26h31.193v8.413H20.139v33.564h-9.04V8.673H0V.259ZM58.537 35.166c-2.462 4.879-7.25 7.877-13.74 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.029-.045 1.79-.134 2.148h-21.75c.313 3.49 3.49 5.997 7.115 5.997 3.223 0 4.968-1.388 6.355-3.58l7.385 2.863Zm-7.564-11.009c-.358-3.177-3.043-5.46-6.578-5.46-3.491 0-6.31 2.64-6.668 5.46h13.246ZM73.216.26v41.977h-8.772V.26h8.772ZM107.675 35.166c-2.461 4.879-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.843 0 1.029-.044 1.79-.134 2.148H86.82c.314 3.49 3.491 5.997 7.116 5.997 3.222 0 4.968-1.388 6.355-3.58l7.384 2.863Zm-7.518-11.009c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247Z",
-    fill: "#39ADC3"
-  })));
-};
-
-var _path$j;
-
-function _extends$j() { _extends$j = 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$j.apply(this, arguments); }
-
-var SvgTealIcon = function SvgTealIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
-    viewBox: "0 0 56 60",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M55.596 10.103c0-5.73-4.783-10.35-10.59-10.085-5.17.246-9.389 4.443-9.618 9.609-.265 5.8 4.359 10.579 10.095 10.579h.23l.158 7.334c.018.723.971.953 1.324.318 0 0 6.583-12.395 6.636-12.501 1.253-2.521 1.765-3.244 1.765-5.254ZM31.01 32.618h-.017v.035L14.932 0H0l30.887 60 6.9-13.435-6.777-13.947Z",
-    fill: "#39ADC3"
-  })));
-};
-
-var _path$i;
-
-function _extends$i() { _extends$i = 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$i.apply(this, arguments); }
-
-var SvgBlack = function SvgBlack(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
-    viewBox: "0 0 200 44",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 .23h31.193v8.414H20.139V42.21h-9.04V8.644H0V.231ZM58.537 35.138c-2.462 4.878-7.25 7.876-13.74 7.876-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.03-.045 1.79-.134 2.148h-21.75c.313 3.49 3.49 5.997 7.115 5.997 3.223 0 4.968-1.387 6.355-3.58l7.385 2.864Zm-7.564-11.01c-.358-3.177-3.043-5.46-6.578-5.46-3.491 0-6.31 2.641-6.669 5.46h13.247ZM73.216.23V42.21h-8.772V.23h8.772ZM107.675 35.138c-2.461 4.878-7.25 7.876-13.739 7.876-9.22 0-15.708-6.4-15.708-15.574 0-8.95 6.578-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.843 0 1.03-.044 1.79-.134 2.148H86.82c.314 3.49 3.491 5.997 7.116 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.518-11.01c-.358-3.177-3.044-5.46-6.579-5.46-3.49 0-6.31 2.641-6.668 5.46h13.247ZM176.773 35.138c-2.461 4.878-7.25 7.876-13.739 7.876-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.843 0 1.03-.045 1.79-.135 2.148h-21.749c.313 3.49 3.49 5.997 7.115 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.01c-.358-3.177-3.043-5.46-6.579-5.46-3.49 0-6.31 2.641-6.668 5.46h13.247ZM192.482 3.9v8.682H200v7.206h-7.518v10.875c0 3.177 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.895v7.563c-1.298.671-3.311 1.209-6.131 1.209-6.221 0-10.069-3.85-10.069-10.428v-12.71h-4.207v-7.205h4.207V3.945h8.727V3.9ZM139.047.007c-3.715.179-6.713 3.177-6.892 6.892-.179 4.162 3.133 7.563 7.205 7.563h.179l.134 5.236c0 .492.716.671.94.224 0 0 4.699-8.861 4.744-8.95.895-1.79 1.253-2.328 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.368h-.045L117.521.007h-10.696l17.23 33.52 4.878 9.442 4.922-9.621-4.833-9.98Z",
-    fill: "#000"
-  })));
-};
-
-var _path$h;
+var _path$d;
 
-function _extends$h() { _extends$h = 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$h.apply(this, arguments); }
+function _extends$d() { _extends$d = 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$d.apply(this, arguments); }
 
-var SvgBlackIcon = function SvgBlackIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
-    viewBox: "0 0 56 60",
+var SvgValentines = function SvgValentines(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+    viewBox: "0 0 56 62",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M55.596 10.103c0-5.73-4.783-10.35-10.59-10.085-5.17.246-9.389 4.443-9.618 9.609-.265 5.8 4.359 10.579 10.095 10.579h.23l.158 7.334c.018.723.971.953 1.324.318 0 0 6.583-12.395 6.636-12.5 1.253-2.522 1.765-3.245 1.765-5.255ZM31.01 32.618h-.017v.035L14.932 0H0l30.887 60 6.9-13.435-6.777-13.947Z",
-    fill: "#000"
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M31.833 34.604h-.059L15.343 1.944H0L24.711 48.8 31.707 62l7.062-13.45-6.936-13.946ZM46.61 0c-2.361.054-4.474 1.159-5.894 3.008C39.36 1.21 37.337.074 34.953.032c-4.113.065-7.48 3.282-7.456 7.312-.004 5.65 13.193 16.049 13.193 16.049S54.018 12.978 54 7.232C53.998 3.298 50.747.03 46.61 0Z",
+    fill: "#ff617c"
   })));
 };
 
-var _path$g;
+var _path$c;
 
-function _extends$g() { _extends$g = 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$g.apply(this, arguments); }
+function _extends$c() { _extends$c = 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$c.apply(this, arguments); }
 
-var SvgWhite = function SvgWhite(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
-    viewBox: "0 0 200 44",
+var SvgStPatricks = function SvgStPatricks(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    viewBox: "0 0 62 65",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 .245h31.193v8.413H20.139v33.565h-9.04V8.66H0V.245ZM58.537 35.152c-2.462 4.878-7.25 7.877-13.74 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.134 2.148h-21.75c.313 3.491 3.49 5.997 7.115 5.997 3.223 0 4.968-1.387 6.355-3.58l7.385 2.864Zm-7.564-11.009c-.358-3.178-3.043-5.46-6.578-5.46-3.491 0-6.31 2.64-6.669 5.46h13.247ZM73.216.245v41.978h-8.772V.245h8.772ZM107.675 35.152c-2.461 4.878-7.25 7.877-13.739 7.877-9.22 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.126 6.534 15.126 15.842 0 1.03-.044 1.79-.134 2.148H86.82c.314 3.491 3.491 5.997 7.116 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.518-11.009c-.358-3.178-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM176.773 35.152c-2.461 4.878-7.25 7.877-13.739 7.877-9.219 0-15.708-6.4-15.708-15.574 0-8.95 6.579-15.574 15.35-15.574 8.951 0 15.127 6.534 15.127 15.842 0 1.03-.045 1.79-.135 2.148h-21.749c.313 3.491 3.49 5.997 7.115 5.997 3.222 0 4.968-1.387 6.355-3.58l7.384 2.864Zm-7.563-11.009c-.358-3.178-3.043-5.46-6.579-5.46-3.49 0-6.31 2.64-6.668 5.46h13.247ZM192.482 3.915v8.682H200v7.205h-7.518v10.875c0 3.177 1.387 4.43 4.251 4.43 1.074 0 2.282-.313 3.222-.895v7.563c-1.298.672-3.311 1.209-6.131 1.209-6.22 0-10.069-3.849-10.069-10.428v-12.71h-4.207v-7.204h4.207V3.959h8.727v-.044ZM139.047.021c-3.715.18-6.713 3.178-6.892 6.892-.179 4.162 3.133 7.563 7.205 7.563h.179l.134 5.236c0 .493.716.672.94.224 0 0 4.699-8.86 4.744-8.95.895-1.79 1.253-2.328 1.253-3.76 0-4.072-3.446-7.384-7.563-7.205ZM129.022 23.382h-.045L117.521.022h-10.696l17.23 33.52 4.878 9.442 4.922-9.622-4.833-9.98Z",
-    fill: "#fff"
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m49.802 10.47.604-.88c4.449-6.453-2.87-12.721-7.721-7.439-6.568-2.84-10.72 5.88-4.047 9.956l.908.556.002.002 1.313.804c-.566-.172-1.122-.339-1.64-.494l-1.02-.306c-7.48-2.263-11.155 6.666-4.661 9.676-.662 7.154 8.873 8.433 10.672.796l.246-1.038v-.002c.265-1.11.57-2.392.833-3.592.516 2.091 1.054 4.871 1.135 6.914.126 3.17-.941 7.183-.941 7.183.017.72.962.95 1.313.316l.425-.847c2.241-4.446 3.12-9.742.727-14.037.848.938 1.788 1.935 2.598 2.795l.73.776c5.354 5.709 12.976-.195 8.847-6.058 4.128-5.873-3.492-11.757-8.846-6.035l-.73.778c-.763.81-1.639 1.742-2.446 2.632.585-.832 1.175-1.692 1.699-2.456ZM30.738 37.679h.018l6.721 13.915L30.633 65 0 5.133h14.809l15.929 32.581v-.035Z",
+    fill: "#5CC098"
   })));
 };
 
-var _path$f;
+var _path$b, _g$6;
 
-function _extends$f() { _extends$f = 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$f.apply(this, arguments); }
+function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
 
-var SvgWhiteIcon = function SvgWhiteIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
-    viewBox: "0 0 56 60",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M55.596 10.103c0-5.73-4.783-10.35-10.59-10.085-5.17.246-9.389 4.443-9.618 9.609-.265 5.8 4.359 10.579 10.095 10.579h.23l.158 7.334c.018.723.971.953 1.324.318 0 0 6.583-12.395 6.636-12.501 1.253-2.521 1.765-3.244 1.765-5.254ZM31.01 32.618h-.017v.035L14.932 0H0l30.887 60 6.9-13.435-6.777-13.947Z",
-    fill: "#fff"
-  })));
-};
-
-var _path$e, _path2$6, _path3$5, _path4$4, _path5$4;
-
-function _extends$e() { _extends$e = 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$e.apply(this, arguments); }
-
-var SvgNewYears = function SvgNewYears(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
-    viewBox: "0 0 87 73",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M11.704 21.272c7.54.486 13.941 2.812 19.312 7.679 2.604 2.325 4.503 5.191 5.859 8.436.325.811.596 1.676.65 2.542v.54c0 .163-.108.271-.162.38-.217.27-.38.215-.542-.055-1.41-2.38-3.093-4.488-4.991-6.49-2.658-2.703-5.75-4.866-9.114-6.651-3.31-1.73-6.78-3.082-10.416-3.894-.976-.216-1.953-.27-2.929-.378-.488-.054-.976-.108-1.465-.216-.108 0-.27-.055-.38-.109-.27-.108-.488-.27-.542-.54 0-.325.217-.487.488-.595a15.99 15.99 0 0 1 1.52-.433c.976-.054 2.006-.108 2.712-.216ZM20.438 34.954c3.146.054 5.696.486 8.083 1.514 1.627.703 3.037 1.73 4.122 3.082.163.217.326.487.489.703a.415.415 0 0 1-.055.541c-.162.162-.325.162-.488.108-.325-.108-.65-.216-1.03-.324-1.9-.703-3.798-1.298-5.805-1.623a34.268 34.268 0 0 0-2.333-.27c-5.153-.162-9.981.973-14.592 3.299-1.41.703-2.659 1.676-3.798 2.758-1.085.973-2.115 2-3.146 2.974-.326.27-.597.595-.922.865-.272.27-.543.27-.76.108-.217-.162-.271-.378-.108-.703.38-.703.76-1.351 1.193-2 .163-.27.38-.541.543-.866.488-.865 1.085-1.568 1.79-2.27 3.743-4.003 8.354-6.436 13.725-7.572 1.193-.216 2.386-.324 3.092-.324ZM79.349 20.947c-.109 0-.271-.054-.434-.108-1.41-.432-2.875-.811-4.34-.973-1.899-.217-3.797-.217-5.642-.217-1.573.054-3.146.109-4.665.487-3.363.757-6.401 2.217-8.951 4.543-1.085.973-2.17 2.055-3.2 3.028-.814.757-1.628 1.514-2.333 2.434l-.109.108c-.162.162-.325.27-.596.162-.218-.162-.218-.379-.163-.595.217-.487.434-1.027.76-1.46.921-1.244 1.844-2.488 2.874-3.677 3.472-4.002 7.758-6.598 12.966-7.68 2.061-.432 4.122-.648 6.184-.486 2.061.108 4.014.595 5.804 1.568.868.433 1.574 1.082 2.279 1.677.217.162.325.378.217.703-.054.324-.271.486-.651.486ZM65.082 44.471c-.055.27-.217.433-.489.325-.162-.054-.325-.216-.488-.325-.38-.324-.76-.703-1.139-1.027-2.061-1.785-4.286-3.19-6.944-3.894-2.875-.757-5.696-.757-8.571-.162-1.682.324-3.31.973-4.828 1.676-.054.054-.108.109-.163.109-.163 0-.325 0-.38-.109-.054-.108-.054-.27 0-.432.055-.163.218-.27.326-.379.76-.757 1.736-1.298 2.712-1.784a19.8 19.8 0 0 1 7.487-1.623c3.146-.054 5.967 1.028 8.408 2.975 1.14.919 2.17 1.892 3.092 3.028.217.27.434.487.597.757.108.27.217.595.38.865Z",
-    fill: "#2A2A2B"
-  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M65.678 25.165c2.387-.054 4.666.27 6.781 1.244 2.604 1.19 4.557 3.083 5.696 5.733.109.162.163.378.163.594.054.27-.163.487-.434.379a2.543 2.543 0 0 1-.542-.27c-.217-.217-.434-.487-.651-.758-1.953-2.595-4.611-4.11-7.65-4.92-1.898-.487-3.85-.542-5.804-.487-1.953.054-3.906.324-5.804.865-.326.108-.597.216-.922.27-.163.054-.326.054-.489.054-.217-.054-.325-.27-.163-.432.109-.108.218-.163.38-.27.977-.542 2.062-.866 3.147-1.136 2.115-.541 4.231-.866 6.292-.866ZM8.273 60.2c.054-.324.108-.649.217-.973.542-2.38 1.573-4.597 2.875-6.706 1.898-3.028 4.123-5.786 6.943-8.058.76-.595 1.574-1.081 2.387-1.568.272-.162.651-.216.977-.325.217-.053.38 0 .488.217.109.216 0 .378-.163.486-.27.217-.596.487-.868.704-3.417 2.433-6.075 5.462-8.3 8.977-1.41 2.163-2.44 4.542-3.254 6.976-.055.216-.163.432-.272.649-.108.216-.217.378-.488.378-.217 0-.325-.216-.38-.54-.162-.055-.162-.163-.162-.217ZM38.448 28.302v2.325c0 .163 0 .325-.054.487 0 .216-.054.433-.326.433-.271 0-.325-.217-.38-.433-.054-.162-.054-.27-.108-.433-.108-4.326-1.03-8.598-2.007-12.816-.705-3.083-1.628-6.165-2.604-9.194 0-.054-.054-.162-.054-.216-.054-.162 0-.324.217-.432.162-.109.325 0 .434.108.054.054.108.162.162.27.109.27.272.487.38.757 1.03 2.812 2.116 5.678 2.821 8.599.922 3.515 1.465 6.976 1.519 10.545ZM39.099 23.435c-.217-.325-.163-.595-.054-.92.217-.81.434-1.568.705-2.325.542-1.838 1.356-3.623 2.278-5.354 2.116-3.785 5.046-6.651 8.897-8.652h.054c.38-.162.543-.216.651 0 .109.324-.108.433-.325.54-.38.271-.76.541-1.194.812-3.905 2.596-6.726 6.057-8.734 10.275-.759 1.622-1.302 3.299-1.844 5.029-.054.216-.054.487-.434.595Z",
-    fill: "#2A2A2B"
-  })), _path3$5 || (_path3$5 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M43.439 38.144c-.217-.162-.271-.378-.163-.595a4.93 4.93 0 0 1 .434-.703c.705-.973 1.573-1.784 2.55-2.487 2.604-1.839 5.533-3.029 8.625-3.786a28.751 28.751 0 0 1 8.029-.81c4.557.215 8.245 2.108 11.23 5.515 2.332 2.65 3.96 5.678 5.044 8.977.489 1.514.814 3.083 1.14 4.65 0 .109.054.217 0 .325-.055.163-.163.325-.272.379-.108.054-.325-.054-.434-.162-.108-.055-.162-.217-.217-.325-.922-1.514-1.79-3.082-2.766-4.542-2.93-4.435-6.727-7.788-11.718-9.735a20.929 20.929 0 0 0-9.276-1.46c-2.93.217-5.696.974-8.3 2.326-1.248.649-2.496 1.298-3.58 2.217-.055.054-.218.108-.326.216ZM39.804 37.874c.163-4.11 1.14-8.004 3.038-11.627 1.845-3.57 4.231-6.652 6.998-9.572 3.2-3.353 6.89-6.165 10.85-8.598 1.464-.866 2.983-1.569 4.61-2.001.11 0 .218-.108.272-.054.163.054.325.162.434.27a.352.352 0 0 1-.109.487 1.181 1.181 0 0 0-.27.216c-3.527 2.11-6.89 4.435-9.82 7.355-.705.703-1.464 1.352-2.224 2.055-.65.649-1.302 1.243-1.898 1.947a174.684 174.684 0 0 0-3.96 4.92c-2.659 3.57-4.503 7.572-5.805 11.844-.543 1.73-.922 3.46-1.41 5.191-.055.108-.055.27-.11.379-.053.054-.162.162-.216.162-.054 0-.163-.108-.217-.162-.054-.162-.109-.325-.109-.487 0-.757 0-1.514-.054-2.325ZM15.013 13.268c3.689.108 7.378.811 10.85 2.325 2.603 1.136 4.773 2.867 6.726 4.922.489.54.977 1.135 1.41 1.73.435.54.706 1.19.869 1.893.054.108.054.216.054.324 0 .217-.054.379-.271.433-.217.054-.272-.108-.326-.216-1.248-1.839-2.82-3.3-4.665-4.489-.434-.27-.922-.54-1.41-.757-2.17-1.027-4.395-1.947-6.782-2.433a35.731 35.731 0 0 0-6.78-.812c-.814 0-1.574.109-2.388.163-1.627.162-3.2.324-4.828.486-1.085.163-2.17.379-3.254.541-.326.054-.651.054-1.031.108-.109 0-.271 0-.38-.054-.434-.108-.542-.54-.217-.811.109-.108.217-.162.326-.27 1.41-.974 2.983-1.623 4.665-2.055 1.844-.433 3.743-.812 5.696-.974.488-.054 1.085-.054 1.736-.054Z",
-    fill: "#B78D5C"
-  })), _path4$4 || (_path4$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M77.83 65.24v.65a.37.37 0 0 1-.38.378c-.217 0-.325-.162-.38-.325 0-.054 0-.108-.054-.216-.054-.379-.054-.703-.163-1.082-.759-2.92-1.139-5.948-2.115-8.814a41.035 41.035 0 0 0-3.906-8.599c-1.194-2-2.658-3.785-4.34-5.462-.054-.054-.163-.108-.163-.162-.054-.108-.162-.27-.108-.379.054-.216.271-.27.488-.216.326.108.651.216.922.379.922.54 1.682 1.19 2.441 1.892 1.845 1.84 3.255 4.002 4.394 6.273 1.465 2.92 2.388 6.003 2.876 9.248.108.811.162 1.676.217 2.542.108 1.027.217 2 .27 3.028-.053.324 0 .595 0 .865ZM82.064 39.553l-2.008-1.406 2.333-.703.76-2.38 1.41 2.001H87l-1.465 1.947.814 2.326-2.333-.758-2.007 1.46.055-2.487ZM9.399 29.42l1.578-2.058.79 2.417 2.663.715-2.269 1.432.099 2.506L9.99 33l-2.564.806.887-2.327-1.677-2.058H9.4ZM10.481 2.38l2.984.054L15.146 0l.868 2.812 2.875.811-2.44 1.73.108 2.975-2.387-1.73-2.821.973.922-2.812-1.79-2.38ZM40.075 4.294l-1.627-1.298 2.061-.487.76-2 1.085 1.838 2.115.108-1.41 1.568.543 2.055-1.953-.81-1.736 1.135.162-2.11ZM74.4 12.32l-1.247-.866-1.41.486.488-1.405-.922-1.244h1.519l.868-1.244.434 1.46 1.464.433-1.247.865.054 1.514Z",
-    fill: "#B78D5C"
-  })), _path5$4 || (_path5$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m30.056 13.268 16.109 31.939h.057l6.802 13.639L46.1 72l-6.859-12.91-24.228-45.822h15.043Zm30.129.008c2.59-.108 5.11.913 6.984 2.828 1.874 1.92 2.94 4.564 2.96 7.338 0 2.024-.474 2.783-1.656 5.305-.055.133-6.253 12.631-6.253 12.631a.642.642 0 0 1-.707.29.697.697 0 0 1-.503-.606l-.177-7.39h-.236c-5.162-.037-9.36-4.46-9.472-9.984-.112-5.52 3.904-10.135 9.06-10.41v-.002Z",
-    fill: "#39ADC3"
-  })));
-};
-
-var _path$d;
-
-function _extends$d() { _extends$d = 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$d.apply(this, arguments); }
-
-var SvgValentines = function SvgValentines(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
-    viewBox: "0 0 56 62",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M31.833 34.604h-.059L15.343 1.944H0L24.711 48.8 31.707 62l7.062-13.45-6.936-13.946ZM46.61 0c-2.361.054-4.474 1.159-5.894 3.008C39.36 1.21 37.337.074 34.953.032c-4.113.065-7.48 3.282-7.456 7.312-.004 5.65 13.193 16.049 13.193 16.049S54.018 12.978 54 7.232C53.998 3.298 50.747.03 46.61 0Z",
-    fill: "#ff617c"
-  })));
-};
-
-var _path$c;
-
-function _extends$c() { _extends$c = 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$c.apply(this, arguments); }
-
-var SvgStPatricks = function SvgStPatricks(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
-    viewBox: "0 0 62 65",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m49.802 10.47.604-.88c4.449-6.453-2.87-12.721-7.721-7.439-6.568-2.84-10.72 5.88-4.047 9.956l.908.556.002.002 1.313.804c-.566-.172-1.122-.339-1.64-.494l-1.02-.306c-7.48-2.263-11.155 6.666-4.661 9.676-.662 7.154 8.873 8.433 10.672.796l.246-1.038v-.002c.265-1.11.57-2.392.833-3.592.516 2.091 1.054 4.871 1.135 6.914.126 3.17-.941 7.183-.941 7.183.017.72.962.95 1.313.316l.425-.847c2.241-4.446 3.12-9.742.727-14.037.848.938 1.788 1.935 2.598 2.795l.73.776c5.354 5.709 12.976-.195 8.847-6.058 4.128-5.873-3.492-11.757-8.846-6.035l-.73.778c-.763.81-1.639 1.742-2.446 2.632.585-.832 1.175-1.692 1.699-2.456ZM30.738 37.679h.018l6.721 13.915L30.633 65 0 5.133h14.809l15.929 32.581v-.035Z",
-    fill: "#5CC098"
-  })));
-};
-
-var _path$b, _g$6;
-
-function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
-
-var SvgEaster1 = function SvgEaster1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+var SvgEaster1 = function SvgEaster1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     viewBox: "0 0 56 60",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
@@ -3621,50 +3203,468 @@ var SvgChristmas = function SvgChristmas(props) {
   })));
 };
 
-var holidaysLogoIconMap = {
-    newYears: SvgNewYears,
-    valentines: SvgValentines,
-    stPatricks: SvgStPatricks,
-    easter1: SvgEaster1,
-    easter2: SvgEaster2,
-    easter3: SvgEaster3,
-    easter4: SvgEaster4,
-    easter5: SvgEaster5,
-    easter6: SvgEaster6,
-    mothersDay: SvgMothersDay,
-    memorialDay: SvgMemorialDay,
-    fathersDay: SvgFathersDay,
-    halloween: SvgHalloween,
-    thanksgiving: SvgThanksgiving,
-    christmas: SvgChristmas,
-};
-var logoIconMap = {
-    black: SvgBlackIcon,
-    white: SvgWhiteIcon,
-    teal: SvgTealIcon,
-};
-var fullLogoMap = {
-    black: SvgBlack,
-    white: SvgWhite,
-    teal: SvgTeal,
+var holidaysLogoIconMap = {
+    newYears: SvgNewYears,
+    valentines: SvgValentines,
+    stPatricks: SvgStPatricks,
+    easter1: SvgEaster1,
+    easter2: SvgEaster2,
+    easter3: SvgEaster3,
+    easter4: SvgEaster4,
+    easter5: SvgEaster5,
+    easter6: SvgEaster6,
+    mothersDay: SvgMothersDay,
+    memorialDay: SvgMemorialDay,
+    fathersDay: SvgFathersDay,
+    halloween: SvgHalloween,
+    thanksgiving: SvgThanksgiving,
+    christmas: SvgChristmas,
+};
+var logoIconMap = {
+    black: SvgBlackIcon,
+    white: SvgWhiteIcon,
+    teal: SvgTealIcon,
+};
+var fullLogoMap = {
+    black: SvgBlack,
+    white: SvgWhite,
+    teal: SvgTeal,
+};
+
+var Logo = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'full' : _b, _c = _a.color, color = _c === void 0 ? 'teal' : _c, holiday = _a.holiday, height = _a.height, width = _a.width, handleClick = _a.handleClick;
+    var LogoComponent;
+    var style = { height: height, width: width };
+    if (holiday) {
+        LogoComponent = holidaysLogoIconMap[holiday];
+    }
+    else if (type === 'icon') {
+        LogoComponent = logoIconMap[color];
+    }
+    else {
+        LogoComponent = fullLogoMap[color];
+    }
+    return React__default["default"].createElement(LogoComponent, { style: style, onClick: handleClick });
+};
+Logo.displayName = 'Logo';
+
+var Button = React.forwardRef(function (props, ref) {
+    var _a = useTheme(), components = _a.components, fontWeights = _a.fontWeights, radii = _a.radii;
+    var _b = components.Button[props.variant || 'primary'], variant = _b.variant, light = _b.light, dark = _b.dark;
+    var modeColor = props.darkMode ? dark : light;
+    var bg = react.useColorModeValue(modeColor.default, dark.default);
+    var color = react.useColorModeValue(modeColor.content, dark.content);
+    var borderColor = react.useColorModeValue(modeColor.border, dark.border);
+    var p = __assign(__assign({}, props), { variant: variant, bg: bg, color: color, borderColor: borderColor });
+    var hoverClass = {
+        bg: react.useColorModeValue(modeColor.hover, dark.hover),
+    };
+    var activeClass = {
+        bg: react.useColorModeValue(modeColor.active, dark.active),
+        transform: 'scale(0.98)',
+    };
+    var iconName = p.iconName; p.darkMode; var iconPosition = p.iconPosition, domProps = __rest(p, ["iconName", "darkMode", "iconPosition"]);
+    if (iconName) {
+        var ButtonIcon = React__default["default"].createElement(Icon, { size: p.size || 'md', name: iconName });
+        if (!domProps.children) {
+            var label = camelCaseToLabel(iconName);
+            return (React__default["default"].createElement(react.IconButton, __assign({ ref: ref, _hover: hoverClass, _active: activeClass, "aria-label": label, icon: ButtonIcon, size: p.size || 'md' }, domProps)));
+        }
+        else {
+            var position = iconPosition === 'right' ? 'rightIcon' : 'leftIcon';
+            domProps[position] = ButtonIcon;
+        }
+    }
+    return (React__default["default"].createElement(react.Button, __assign({ fontWeight: fontWeights.semibold, ref: ref, _hover: hoverClass, _active: activeClass, size: p.size || 'md', iconSpacing: domProps.size === 'sm' || domProps.size === 'xs' ? '4px' : '8px', borderRadius: radii.base }, domProps), domProps.children));
+});
+Button.displayName = 'Button';
+
+var ButtonVariantConfig = {
+    primary: {
+        variant: 'solid',
+        light: {
+            content: colors.text.dark.headline,
+            default: colors.teal['600'],
+            hover: colors.teal['700'],
+            active: colors.teal['800'],
+            border: colors.transparent,
+        },
+        dark: {
+            content: colors.text.light.headline,
+            default: colors.teal['400'],
+            hover: colors.teal['300'],
+            active: colors.teal['100'],
+            border: colors.transparent,
+        },
+    },
+    primaryDestructive: {
+        variant: 'solid',
+        light: {
+            content: colors.text.dark.headline,
+            default: colors.red['500'],
+            hover: colors.red['600'],
+            active: colors.red['700'],
+            border: colors.transparent,
+        },
+        dark: {
+            content: colors.text.light.headline,
+            default: colors.red['200'],
+            hover: colors.red['100'],
+            active: colors.red['50'],
+            border: colors.transparent,
+        },
+    },
+    secondary: {
+        variant: 'outline',
+        light: {
+            content: colors.text.light.default,
+            default: colors.transparent,
+            hover: colors.blackAlpha['100'],
+            active: colors.blackAlpha['200'],
+            border: colors.border.light.heavy,
+        },
+        dark: {
+            content: colors.white,
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.white,
+        },
+    },
+    secondaryDestructive: {
+        variant: 'outline',
+        light: {
+            content: colors.text.light.error,
+            default: colors.transparent,
+            hover: colors.blackAlpha['50'],
+            active: colors.blackAlpha['100'],
+            border: colors.border.light.error,
+        },
+        dark: {
+            content: colors.red['300'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.red['300'],
+        },
+    },
+    secondarySubtle: {
+        variant: 'outline',
+        light: {
+            content: colors.text.light.default,
+            default: colors.white,
+            hover: colors.gray['50'],
+            active: colors.gray['100'],
+            border: colors.border.light.default,
+        },
+        dark: {
+            content: colors.text.dark.default,
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.text.dark.default,
+        },
+    },
+    secondarySubtleDestructive: {
+        variant: 'outline',
+        light: {
+            content: colors.text.light.error,
+            default: colors.white,
+            hover: colors.red['50'],
+            active: colors.red['100'],
+            border: colors.border.light.default,
+        },
+        dark: {
+            content: colors.red['300'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.whiteAlpha['500'],
+        },
+    },
+    tertiary: {
+        variant: 'solid',
+        light: {
+            content: colors.text.light.default,
+            default: colors.gray['100'],
+            hover: colors.gray['200'],
+            active: colors.gray['300'],
+            border: colors.transparent,
+        },
+        dark: {
+            content: colors.text.dark.headline,
+            default: colors.whiteAlpha[200],
+            hover: colors.whiteAlpha[300],
+            active: colors.whiteAlpha[400],
+            border: colors.transparent,
+        },
+    },
+    tertiaryDestructive: {
+        variant: 'solid',
+        light: {
+            content: colors.text.light.error,
+            default: colors.red['100'],
+            hover: colors.red['200'],
+            active: colors.red['300'],
+            border: colors.transparent,
+        },
+        dark: {
+            content: colors.red['300'],
+            default: colors.whiteAlpha['200'],
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
+        },
+    },
+    ghost: {
+        variant: 'ghost',
+        light: {
+            content: colors.text.light.link,
+            default: colors.transparent,
+            hover: colors.teal['100'],
+            active: colors.teal['200'],
+            border: colors.transparent,
+        },
+        dark: {
+            content: colors.teal['400'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
+        },
+    },
+    ghostNeutral: {
+        variant: 'ghost',
+        light: {
+            content: colors.text.light.default,
+            default: colors.transparent,
+            hover: colors.blackAlpha['100'],
+            active: colors.blackAlpha['200'],
+            border: colors.transparent,
+        },
+        dark: {
+            content: colors.text.dark.headline,
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
+        },
+    },
+    ghostDestructive: {
+        variant: 'ghost',
+        light: {
+            content: colors.text.light.error,
+            default: colors.transparent,
+            hover: colors.red['100'],
+            active: colors.red['200'],
+            border: colors.transparent,
+        },
+        dark: {
+            content: colors.red['300'],
+            default: colors.transparent,
+            hover: colors.whiteAlpha['300'],
+            active: colors.whiteAlpha['400'],
+            border: colors.transparent,
+        },
+    },
+};
+var ButtonSizeConfig = {
+    lg: {
+        p: '0 20px',
+    },
+    md: {
+        p: '0 16px',
+    },
+    sm: {
+        p: '0 12px',
+    },
+    xs: {
+        p: '0 8px',
+    },
+};
+
+var AlertButton = function (_a) {
+    var status = _a.status, alignment = _a.alignment, _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, _c = _a.size, size = _c === void 0 ? 'xs' : _c, _d = _a.pairedWithCloseButton, pairedWithCloseButton = _d === void 0 ? false : _d, rest = __rest(_a, ["status", "alignment", "variant", "size", "pairedWithCloseButton"]);
+    return (React__default["default"].createElement(Button, __assign({ backgroundColor: "semanticColors.background.".concat(status), size: size, variant: variant }, rest, (alignment === 'bottom' && { mt: 2, mb: 1 }), (alignment === 'right' && pairedWithCloseButton && { mr: 2 })), rest.children));
 };
 
-var Logo = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'full' : _b, _c = _a.color, color = _c === void 0 ? 'teal' : _c, holiday = _a.holiday, height = _a.height, width = _a.width, handleClick = _a.handleClick;
-    var LogoComponent;
-    var style = { height: height, width: width };
-    if (holiday) {
-        LogoComponent = holidaysLogoIconMap[holiday];
-    }
-    else if (type === 'icon') {
-        LogoComponent = logoIconMap[color];
-    }
-    else {
-        LogoComponent = fullLogoMap[color];
-    }
-    return React__default["default"].createElement(LogoComponent, { style: style, onClick: handleClick });
-};
-Logo.displayName = 'Logo';
+var AlertIcon = function (_a) {
+    var status = _a.status, rest = __rest(_a, ["status"]);
+    return React__default["default"].createElement(Icon, __assign({ color: status === 'info' ? 'active' : status, size: "lg" }, rest));
+};
+
+exports.AlertVariant = void 0;
+(function (AlertVariant) {
+    AlertVariant["Error"] = "error";
+    AlertVariant["Warning"] = "warning";
+    AlertVariant["Success"] = "success";
+    AlertVariant["Info"] = "info";
+})(exports.AlertVariant || (exports.AlertVariant = {}));
+exports.AlertStatusIcon = void 0;
+(function (AlertStatusIcon) {
+    AlertStatusIcon["error"] = "warningSign";
+    AlertStatusIcon["warning"] = "warningSign";
+    AlertStatusIcon["success"] = "checkmark";
+    AlertStatusIcon["info"] = "infoCircleOutlined";
+})(exports.AlertStatusIcon || (exports.AlertStatusIcon = {}));
+
+var Text = function (_a) {
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'regular' : _b, _c = _a.as, as = _c === void 0 ? 'span' : _c, color = _a.color, _d = _a.colorToken, colorToken = _d === void 0 ? 'default' : _d, _e = _a.darkMode, darkMode = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "variant", "as", "color", "colorToken", "darkMode"]);
+    var colors = useTheme().colors;
+    var adaptiveColor = useAdaptiveColorMap(colors.text, colorToken, darkMode);
+    return (React__default["default"].createElement(react.Text, __assign({ variant: variant, as: as, color: color || adaptiveColor }, rest), children));
+};
+
+var TextConfig = {
+    variants: {
+        regular: {
+            fontWeight: fontWeights.normal,
+        },
+        semibold: {
+            fontWeight: fontWeights.semibold,
+        },
+    },
+    sizes: {
+        xs: {
+            fontSize: '12px',
+            lineHeight: '150%',
+        },
+        sm: {
+            fontSize: '14px',
+            lineHeight: '150%',
+        },
+        md: {
+            fontSize: '16px',
+            lineHeight: '150%',
+        },
+        lg: {
+            fontSize: '18px',
+            lineHeight: '150%',
+        },
+        xl: {
+            fontSize: '20px',
+            lineHeight: '150%',
+        },
+        '2xl': {
+            fontSize: '24px',
+            lineHeight: '150%',
+        },
+        '3xl': {
+            fontSize: '30px',
+            lineHeight: '150%',
+        },
+        '4xl': {
+            fontSize: '36px',
+            lineHeight: '150%',
+        },
+        '5xl': {
+            fontSize: '48px',
+            lineHeight: '150%',
+        },
+        '6xl': {
+            fontSize: '60px',
+            lineHeight: '150%',
+        },
+    },
+};
+
+function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    var _a = __read(React.useState({
+        width: undefined,
+        height: undefined,
+    }), 2), windowSize = _a[0], setWindowSize = _a[1];
+    React.useEffect(function () {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+var useOverflowingText = function (text, textRef) {
+    var size = useWindowSize();
+    var _a = __read(React.useState(false), 2), isTextOverFlowing = _a[0], setIsTextOverFlowing = _a[1];
+    var onCheckTextOverFlowing = React.useCallback(function (containerRefValue) {
+        var _a;
+        if (containerRefValue && containerRefValue.current) {
+            var lines = (_a = containerRefValue.current) === null || _a === void 0 ? void 0 : _a.children[0].getClientRects().length;
+            return lines > 1;
+        }
+        return false;
+    }, []);
+    React.useEffect(function () {
+        // if size of window changes, or if title length changes, check if text is overflowing
+        var isOverFlowing = onCheckTextOverFlowing(textRef);
+        setIsTextOverFlowing(isOverFlowing);
+    }, [size, text, onCheckTextOverFlowing, textRef]);
+    return isTextOverFlowing;
+};
+
+var Alert = function (_a) {
+    var _b = _a.status, status = _b === void 0 ? exports.AlertVariant.Success : _b, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, iconProps = _a.iconProps, _d = _a.showButton, showButton = _d === void 0 ? false : _d, buttonProps = _a.buttonProps, buttonTitle = _a.buttonTitle, alertTitle = _a.alertTitle, titleProps = _a.titleProps, description = _a.description, descriptionProps = _a.descriptionProps, _e = _a.showCloseButton, showCloseButton = _e === void 0 ? true : _e, onClose = _a.onClose, rest = __rest(_a, ["status", "showIcon", "iconProps", "showButton", "buttonProps", "buttonTitle", "alertTitle", "titleProps", "description", "descriptionProps", "showCloseButton", "onClose"]);
+    var titleRef = React.useRef(null);
+    var isTitleOverflowing = useOverflowingText(alertTitle, titleRef);
+    var showButtonInline = showButton && !description && !isTitleOverflowing;
+    var showButtonBottom = (showButton && description) || (showButton && !description && isTitleOverflowing);
+    return (React__default["default"].createElement(react.Alert, __assign({ justifyContent: "space-between", overflow: "visible", variant: status, pl: 3, pr: showCloseButton ? 2 : 3 }, rest),
+        React__default["default"].createElement(react.HStack, { justifyContent: "space-between", w: "100%" },
+            showIcon && (React__default["default"].createElement(react.Flex, { alignSelf: "flex-start" },
+                React__default["default"].createElement(AlertIcon, __assign({ status: status, name: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || exports.AlertStatusIcon[status] }, iconProps)))),
+            React__default["default"].createElement(react.Flex, __assign({ width: "100%", flexDirection: "column" }, (showIcon && { ml: 2 })),
+                React__default["default"].createElement(react.Flex, { alignItems: "flex-start", w: "100%", justifyContent: "space-between" },
+                    React__default["default"].createElement(react.Box, { ref: titleRef },
+                        React__default["default"].createElement(Text, __assign({ size: "md", variant: "semibold" }, titleProps), alertTitle)),
+                    React__default["default"].createElement(react.Flex, { alignItems: "center" },
+                        showButtonInline && (React__default["default"].createElement(AlertButton, __assign({ alignment: "right", status: status }, buttonProps, { pairedWithCloseButton: showCloseButton }), buttonTitle)),
+                        showCloseButton && React__default["default"].createElement(Button, { variant: "ghostNeutral", iconName: "close", size: "xs", onClick: onClose }))),
+                description && (React__default["default"].createElement(Text, __assign({ size: "md" }, descriptionProps), description)),
+                React__default["default"].createElement(react.Box, null, showButtonBottom && (React__default["default"].createElement(AlertButton, __assign({ alignment: "bottom", status: status }, buttonProps), buttonTitle)))))));
+};
+
+var AlertConfig = {
+    baseStyle: {
+        container: {
+            borderRadius: radii.md,
+            width: 'inherit',
+            py: 2,
+        },
+    },
+    variants: {
+        info: {
+            container: {
+                backgroundColor: colors.background.info,
+            },
+        },
+        success: {
+            container: {
+                backgroundColor: colors.background.success,
+            },
+        },
+        warning: {
+            container: {
+                backgroundColor: colors.background.warning,
+            },
+        },
+        error: {
+            container: {
+                backgroundColor: colors.background.error,
+            },
+        },
+    },
+};
 
 var notificationCounterSize = {
     xs: 'sm',
@@ -13106,9 +13106,9 @@ var ModalHeader = function (_a) {
 };
 
 var ModalCloseButton = function (_a) {
-    var _b = _a.right, right = _b === void 0 ? 2 : _b, _c = _a.left, left = _c === void 0 ? 2 : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["right", "left", "size"]);
+    var _b = _a.right, right = _b === void 0 ? 2 : _b, _c = _a.top, top = _c === void 0 ? 2 : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["right", "top", "size"]);
     var onClose = react.useModalContext().onClose;
-    return (React__default["default"].createElement(Button, __assign({ variant: "ghostNeutral", onClick: onClose, iconName: "close", position: "absolute", right: right, top: left, size: size }, rest)));
+    return (React__default["default"].createElement(Button, __assign({ variant: "ghostNeutral", onClick: onClose, iconName: "close", position: "absolute", right: right, top: top, size: size }, rest)));
 };
 
 var ModalBody = function (_a) {
@@ -13137,6 +13137,70 @@ var ModalFooterButtons = function (_a) {
             React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, isDisabled: isDisabled, variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
 };
 
+var Popover = function (_a) {
+    var children = _a.children, popoverTrigger = _a.popoverTrigger, darkMode = _a.darkMode, _b = _a.allowEscape, allowEscape = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.shadow, shadow = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "popoverTrigger", "darkMode", "allowEscape", "size", "shadow"]);
+    var _e = useTheme(), colors = _e.colors, components = _e.components;
+    var width = components.Popover[size].width;
+    var adaptiveBackground = useAdaptiveColor(colors.background);
+    var bg = !darkMode ? adaptiveBackground : colors.background.dark;
+    return (React__default["default"].createElement(react.Popover, __assign({}, rest, { closeOnBlur: allowEscape, closeOnEsc: allowEscape }),
+        React__default["default"].createElement(react.PopoverTrigger, null, popoverTrigger),
+        withDarkMode$1(React__default["default"].createElement(react.PopoverContent, { width: width, bg: bg, shadow: shadow },
+            React__default["default"].createElement(react.PopoverArrow, { bg: bg }),
+            React__default["default"].createElement(Text, { size: "sm" }, children)), !!darkMode)));
+};
+
+var popover_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Popover: Popover
+});
+
+var PopoverConfig = {
+    xs: { width: 160 },
+    sm: { width: 200 },
+    md: { width: 260 },
+    lg: { width: 320 },
+    xl: { width: 480 },
+};
+
+var PopoverBody = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__default["default"].createElement(react.PopoverBody, __assign({ pb: 3, pt: 0 }, rest), children));
+};
+
+var PopoverFooter = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__default["default"].createElement(react.PopoverFooter, __assign({}, rest, { pb: 3, pt: 0, borderTop: 0 }), children));
+};
+
+var PopoverCloseButton = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'xs' : _b, rest = __rest(_a, ["size"]);
+    var onClose = react.usePopoverContext().onClose;
+    return (React__default["default"].createElement(Button, __assign({ variant: "ghostNeutral", onClick: onClose, iconName: "close", position: "absolute", right: 1, top: 1, size: size }, rest)));
+};
+
+var PopoverHeader = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, color = _a.color, colorToken = _a.colorToken, children = _a.children, rest = __rest(_a, ["size", "color", "colorToken", "children"]);
+    return (React__default["default"].createElement(react.PopoverHeader, __assign({ px: 3, pt: 3, pb: 1, borderBottom: 0 }, rest),
+        React__default["default"].createElement(Heading, { size: size, colorToken: colorToken, color: color }, children)));
+};
+
+var PopoverFooterButtons = function (_a) {
+    var _b = _a.submitText, submitText = _b === void 0 ? 'Submit' : _b, isLoading = _a.isLoading, isDisabled = _a.isDisabled, isDestructive = _a.isDestructive; _a.children; var onSubmit = _a.onSubmit, _c = _a.allowCancel, allowCancel = _c === void 0 ? true : _c, onCancel = _a.onCancel, rest = __rest(_a, ["submitText", "isLoading", "isDisabled", "isDestructive", "children", "onSubmit", "allowCancel", "onCancel"]);
+    var onClose = react.usePopoverContext().onClose;
+    var handleCancel = function () {
+        if (onCancel) {
+            onCancel();
+        }
+        onClose();
+    };
+    return (React__default["default"].createElement(PopoverFooter, __assign({}, rest),
+        React__default["default"].createElement(react.Flex, { w: "100%" },
+            allowCancel && (React__default["default"].createElement(Button, { variant: "tertiary", size: "sm", onClick: handleCancel }, "Cancel")),
+            React__default["default"].createElement(react.Spacer, null),
+            React__default["default"].createElement(Button, { onClick: onSubmit, isLoading: isLoading, isDisabled: isDisabled, size: "sm", variant: isDestructive ? 'primaryDestructive' : 'primary' }, submitText))));
+};
+
 // @ts-ignore
 var theme = react.extendTheme({
     styles: {
@@ -13175,6 +13239,7 @@ var theme = react.extendTheme({
         Avatar: AvatarConfig,
         Alert: AlertConfig,
         Menu: MenuConfig,
+        Popover: PopoverConfig,
         Tag: TagConfig,
         Tabs: TabsConfig,
         Radio: RadioConfig,
@@ -15978,6 +16043,10 @@ Object.defineProperty(exports, 'useDisclosure', {
     enumerable: true,
     get: function () { return react.useDisclosure; }
 });
+Object.defineProperty(exports, 'usePopoverContext', {
+    enumerable: true,
+    get: function () { return react.usePopoverContext; }
+});
 Object.defineProperty(exports, 'useRadio', {
     enumerable: true,
     get: function () { return react.useRadio; }
@@ -15996,6 +16065,7 @@ exports.AvatarGroup = AvatarGroup;
 exports.BetaDatePicker = BetaDatePicker;
 exports.BetaMenu = BetaMenu;
 exports.BetaModal = modal_component;
+exports.BetaPopover = popover_component;
 exports.Button = Button;
 exports.ButtonSizeConfig = ButtonSizeConfig;
 exports.ButtonVariantConfig = ButtonVariantConfig;
@@ -16018,6 +16088,12 @@ exports.ModalFooter = ModalFooter;
 exports.ModalFooterButtons = ModalFooterButtons;
 exports.ModalHeader = ModalHeader;
 exports.NotificationCounter = NotificationCounter;
+exports.PopoverBody = PopoverBody;
+exports.PopoverCloseButton = PopoverCloseButton;
+exports.PopoverConfig = PopoverConfig;
+exports.PopoverFooter = PopoverFooter;
+exports.PopoverFooterButtons = PopoverFooterButtons;
+exports.PopoverHeader = PopoverHeader;
 exports.Radio = Radio;
 exports.RadioConfig = RadioConfig;
 exports.RadioGroup = WrappedRadioGroup;