@luscii-healthtech/web-ui 32.0.0 → 33.0.0

package/dist/components/CenteredHero/CenteredHero.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { ButtonProps } from "../Button/Button.types";
 export type BackgroundColor = "white" | "slate-50";
 export type ImageSize = "small" | "large";
 export interface CenteredHeroProps {
@@ -7,9 +6,11 @@ export interface CenteredHeroProps {
     text?: string;
     image?: string;
     imageSize?: ImageSize;
-    buttons?: ButtonProps[];
+    slots?: {
+        bottom?: React.ReactNode;
+    };
     background?: BackgroundColor;
     dataTestId?: string;
 }
-declare const CenteredHero: ({ title, text, image, buttons, background, imageSize, dataTestId, }: CenteredHeroProps) => React.ReactElement;
+declare const CenteredHero: ({ title, text, image, slots, background, imageSize, dataTestId, }: CenteredHeroProps) => React.ReactElement;
 export default CenteredHero;

package/dist/components/Icons/types/IconProps.type.d.ts

@@ -1,6 +1,15 @@
 /// <reference types="react" />
 import * as Icons from "../index";
 export interface IconProps {
+    /**
+     * `"m"` size is 24 x 24px. This is the default size.
+     * `"s"` size is 20 x 20px. This size is useful for
+     * icons showing before/after text, because most of
+     * our text has a 20px line height.
+     *
+     * @default "m"
+     */
+    size?: "s" | "m";
     className?: string;
     onClick?: (event: React.MouseEvent<SVGSVGElement> | undefined) => void;
     "data-test-id"?: string;

package/dist/index.development.js

@@ -11,10 +11,10 @@ var omit = require('lodash.omit');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var utilities = require('@dnd-kit/utilities');
 var ReactTooltip = require('react-tooltip');
-var router = require('@reach/router');
 var ReactModal = require('react-modal');
 var Glider = require('react-glider');
 require('glider-js/glider.min.css');
+var router = require('@reach/router');
 var ReactDatePicker = require('react-datepicker');
 require('react-datepicker/dist/react-datepicker.min.css');
 var enGB = require('date-fns/locale/en-GB');
@@ -160,7 +160,12 @@ const FlexRow = (props) => {
   return React__namespace.default.createElement(FlexContainer, Object.assign({}, rest, { type: "row", horizontalSpacing: spacing }), children);
 };
 
-const IconWrapper = (SVGComponent) => (props) => React__namespace.default.createElement(SVGComponent, Object.assign({}, props, { role: props.onClick ? "button" : void 0 }));
+const IconWrapper = (SVGComponent) => (props) => {
+  const classes = classNames__default.default({
+    "ui-h-[20px] ui-w-[20px]": props.size === "s"
+  }, props.className);
+  return React__namespace.default.createElement(SVGComponent, Object.assign({}, props, { role: props.onClick ? "button" : void 0, className: classes }));
+};
 
 const SvgChartLineColoredIcon = (props) => React__namespace.default.createElement(
   "svg",
@@ -2041,207 +2046,7 @@ function LoadingIndicator(_a) {
   );
 }
 
-var img$b = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
-
-var img$a = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z' fill='%23EDF2F7'/%3e%3cpath d='M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z' fill='%23EDF2F7'/%3e%3cpath d='M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
-
-var img$9 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%230074DD'/%3e%3c/svg%3e";
-
-var img$8 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
-
-var img$7 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%230074DD'/%3e%3c/svg%3e";
-
-var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
-
-var img$5 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.5006 11.0006H11.7106L11.4306 10.7306C12.6306 9.33063 13.2506 7.42063 12.9106 5.39063C12.4406 2.61063 10.1206 0.390626 7.32063 0.0506256C3.09063 -0.469374 -0.469374 3.09063 0.0506256 7.32063C0.390626 10.1206 2.61063 12.4406 5.39063 12.9106C7.42063 13.2506 9.33063 12.6306 10.7306 11.4306L11.0006 11.7106V12.5006L15.2506 16.7506C15.6606 17.1606 16.3306 17.1606 16.7406 16.7506C17.1506 16.3406 17.1506 15.6706 16.7406 15.2606L12.5006 11.0006ZM6.50063 11.0006C4.01063 11.0006 2.00063 8.99063 2.00063 6.50063C2.00063 4.01063 4.01063 2.00063 6.50063 2.00063C8.99063 2.00063 11.0006 4.01063 11.0006 6.50063C11.0006 8.99063 8.99063 11.0006 6.50063 11.0006Z' fill='%230074DD'/%3e%3c/svg%3e";
-
-var img$4 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.05086 0.636643C1.66033 0.246119 1.02717 0.246119 0.636643 0.636643C0.246119 1.02717 0.246119 1.66033 0.636643 2.05086L5.5867 7.00092L0.636672 11.9509C0.246148 12.3415 0.246148 12.9746 0.636672 13.3652C1.0272 13.7557 1.66036 13.7557 2.05089 13.3652L7.00091 8.41513L11.9503 13.3646C12.3409 13.7551 12.974 13.7551 13.3646 13.3646C13.7551 12.974 13.7551 12.3409 13.3646 11.9504L8.41513 7.00092L13.3646 2.05145C13.7551 1.66093 13.7551 1.02776 13.3646 0.637237C12.9741 0.246712 12.3409 0.246713 11.9504 0.637237L7.00092 5.5867L2.05086 0.636643Z' fill='%230074DD'/%3e%3c/svg%3e";
-
-var img$3 = "data:image/svg+xml,%3csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.58663 1.04906C8.93899 0.258571 10.061 0.258571 10.4134 1.04906L12.1659 4.9807C12.3112 5.30673 12.6193 5.53057 12.9743 5.56804L17.2551 6.01985C18.1158 6.11069 18.4625 7.17779 17.8196 7.75718L14.6219 10.6389C14.3568 10.8778 14.2391 11.24 14.3131 11.5892L15.2063 15.8001C15.3858 16.6467 14.4781 17.3062 13.7284 16.8738L9.99962 14.7232C9.69041 14.5448 9.30959 14.5448 9.00038 14.7232L5.27159 16.8738C4.52189 17.3062 3.61416 16.6467 3.79373 15.8001L4.68686 11.5892C4.76093 11.24 4.64325 10.8778 4.37808 10.6389L1.18043 7.75718C0.537518 7.17779 0.88424 6.11069 1.74492 6.01985L6.0257 5.56804C6.38068 5.53057 6.68877 5.30673 6.8341 4.9807L8.58663 1.04906Z' fill='%23009FE3'/%3e%3c/svg%3e";
-
-var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e %3cg transform='translate(1.5%2c 0.5)'%3e %3cpath fill='none' fill-rule='evenodd' stroke='%230074DD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286'/%3e %3c/g%3e%3c/svg%3e";
-
-const iconSrc = {
-  // These need to be converted to svg files instead of components and added in
-  //  "add": AddIcon,
-  //  "delete": DeleteIcon,
-  //  "edit": EditIcon,
-  close: img$b,
-  hamburger: img$a,
-  "chevron-right-blue": img$9,
-  "chevron-left-blue": img$7,
-  "chevron-right-grey": img$8,
-  "chevron-left-grey": img$6,
-  search: img$5,
-  star: img$3,
-  check: img$2,
-  "search-cancel": img$4
-};
-const ButtonIcon = (props) => {
-  return React__namespace.createElement("img", { src: iconSrc[props.name], className: props.className });
-};
-
-const BUTTON_ROLES = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  SECONDARY_DARK: "secondaryDark",
-  TERTIARY: "tertiary",
-  QUATERNARY: "quaternary",
-  NEGATIVE: "negative",
-  TEXT: "text",
-  LINK: "link",
-  ICON: "icon"
-};
-
-function Button(props) {
-  const { text = "", role: propsRole = BUTTON_ROLES.PRIMARY, type = "button", title = "", link = "", isPending = false, isDisabled = false, onClick, className = "", iconName = "", hasIcon: hasIconProps = false, dynamicIcon } = props, otherAttributes = __rest(props, ["text", "role", "type", "title", "link", "isPending", "isDisabled", "onClick", "className", "iconName", "hasIcon", "dynamicIcon"]);
-  const generatedId = React__namespace.default.useId();
-  const buttonTooltipId = otherAttributes.id ? `button-tooltip-id-${otherAttributes.id}` : `button-tooltip-id-${generatedId}`;
-  const hasAddIcon = className.includes("add-button");
-  const hasEditIcon = className.includes("edit-button");
-  const hasDeleteIcon = className.includes("delete-button");
-  const hasPrevIcon = className.includes("prev-button");
-  const hasNextIcon = className.includes("next-button");
-  const hasChartIcon = className.includes("chart-button");
-  const hasPrintIcon = className.includes("print-button");
-  const hasIcon = hasIconProps || iconName || hasAddIcon || hasEditIcon || hasDeleteIcon || hasPrevIcon || hasNextIcon || hasChartIcon || hasPrintIcon || dynamicIcon;
-  const isIconOnly = hasIcon && !text;
-  const [role, setRole] = React.useState(propsRole);
-  React.useEffect(() => {
-    if ((hasAddIcon || hasEditIcon) && !text) {
-      setRole(BUTTON_ROLES.SECONDARY);
-    } else if (propsRole === BUTTON_ROLES.TEXT || propsRole === BUTTON_ROLES.LINK) {
-      setRole(BUTTON_ROLES.TERTIARY);
-    } else if (hasDeleteIcon) {
-      setRole(BUTTON_ROLES.NEGATIVE);
-    }
-  }, []);
-  const isButtonDisabled = role !== BUTTON_ROLES.LINK && isDisabled || isPending;
-  const isNonPrimaryNonNegative = role === BUTTON_ROLES.SECONDARY || role === BUTTON_ROLES.TERTIARY || role === BUTTON_ROLES.QUATERNARY;
-  function handleClick(event) {
-    if (link) {
-      router.navigate(link);
-      return;
-    }
-    if (isButtonDisabled || !onClick) {
-      event.preventDefault();
-      return;
-    }
-    onClick(event);
-  }
-  const buttonRolesStyling = {
-    primary: [
-      "ui-bg-primary",
-      "hover:ui-bg-primary-dark",
-      "ui-text-white",
-      "focus:ui-outline-primary",
-      "ui-border",
-      "ui-border-solid",
-      "ui-border-primary-transparent"
-    ],
-    secondary: ["ui-bg-slate-200"],
-    secondaryDark: ["ui-bg-slate-700", "hover:ui-bg-slate-600"],
-    tertiary: ["ui-bg-transparent", "ui-shadow-none", "hover:ui-bg-slate-100"],
-    quaternary: [
-      "ui-bg-white",
-      "ui-shadow-none",
-      "ui-border",
-      "ui-border-solid",
-      "ui-border-quaternary",
-      "hover:ui-border-slate-200"
-    ],
-    negative: [
-      "ui-bg-negative",
-      "ui-text-negative-dark",
-      "hover:ui-text-negative-darker",
-      "hover:ui-border-negative-border",
-      "focus:ui-outline-negative",
-      "ui-border",
-      "ui-border-transparent"
-    ],
-    link: [],
-    text: [],
-    icon: []
-  };
-  const containerClassName = classNames__default.default(
-    // default button classes
-    [
-      "ui-h-11",
-      "focus:ui-outline-none",
-      "ui-shadow-sm",
-      "ui-transition-outline ui-transition-colors ui-duration-300 ui-ease-in-out",
-      "ui-cursor-pointer",
-      "ui-rounded-full",
-      "ui-leading-none"
-    ],
-    className,
-    {
-      "ui-w-11": isIconOnly,
-      "ui-opacity-50 ui-pointer-events-none": isButtonDisabled,
-      "hover:ui-text-primary-dark ui-text-primary": isNonPrimaryNonNegative,
-      "ui-border ui-border-transparent": isNonPrimaryNonNegative,
-      "hover:ui-border-slate-200 focus:ui-outline-primary": isNonPrimaryNonNegative,
-      "ui-text-secondary-dark ui-opacity-75": isButtonDisabled && isNonPrimaryNonNegative
-    },
-    buttonRolesStyling[role]
-  );
-  const spinnerClassNames = classNames__default.default({
-    "ui-hidden": !isPending,
-    "ui-text-white": role === BUTTON_ROLES.PRIMARY,
-    "ui-text-dark-gray": isNonPrimaryNonNegative,
-    "ui-text-negative-dark": role === BUTTON_ROLES.TERTIARY
-  });
-  const buttonTextClasses = classNames__default.default(["ui-text-sm", "ui-font-medium"], {
-    "ui-invisible": isPending,
-    "ui-hidden": !text,
-    "ui-ml-3": hasIcon
-  });
-  const tooltipAttrs = title ? {
-    "data-tip": true,
-    "data-for": buttonTooltipId
-  } : {};
-  const buttonComponent = React__namespace.default.createElement(
-    "button",
-    Object.assign({}, otherAttributes, { "aria-disabled": isButtonDisabled, disabled: isButtonDisabled, className: containerClassName, onClick: handleClick, type, title, "data-role": role }),
-    React__namespace.default.createElement(
-      "span",
-      Object.assign({}, tooltipAttrs, { className: classNames__default.default(
-        "ui-relative ui-flex ui-h-full ui-w-full ui-flex-row ui-items-center ui-justify-center",
-        // ensuring the buttons are 44px high including content
-        {
-          "ui-px-2 ui-py-2": isIconOnly,
-          "ui-px-4 ui-py-3": !isIconOnly
-        }
-      ) }),
-      hasAddIcon && React__namespace.default.createElement(AddIcon, { className: "ui-h-5 ui-w-5" }),
-      hasEditIcon && React__namespace.default.createElement(EditIcon, { className: "ui-h-5 ui-w-5" }),
-      hasDeleteIcon && React__namespace.default.createElement(DeleteIcon, { className: "ui-h-5 ui-w-5" }),
-      hasPrevIcon && React__namespace.default.createElement(LeftArrowIcon, { className: "ui-h-5 ui-w-5" }),
-      hasNextIcon && React__namespace.default.createElement(RightArrowIcon, { className: "ui-h-5 ui-w-5" }),
-      hasChartIcon && React__namespace.default.createElement(ChartIcon, { className: "ui-h-5 ui-w-5" }),
-      hasPrintIcon && React__namespace.default.createElement(PrintIcon, { className: "ui-h-5 ui-w-5" }),
-      iconName && React__namespace.default.createElement(ButtonIcon, { name: iconName }),
-      dynamicIcon && React__namespace.default.createElement(dynamicIcon, { className: "ui-w-5 ui-h-5" }),
-      React__namespace.default.createElement(
-        "span",
-        { className: "ui-absolute ui-left-1/2 ui-top-1/2 ui--translate-x-1/2 ui--translate-y-1/2 ui-transform ui-opacity-100" },
-        React__namespace.default.createElement(Spinner, { className: spinnerClassNames })
-      ),
-      React__namespace.default.createElement("span", { className: buttonTextClasses }, text)
-    )
-  );
-  if (title) {
-    return React__namespace.default.createElement(
-      React__namespace.default.Fragment,
-      null,
-      React__namespace.default.createElement(ReactTooltip__default.default, { effect: "solid", id: buttonTooltipId }, title),
-      buttonComponent
-    );
-  }
-  return buttonComponent;
-}
-
-const CenteredHero = ({ title, text, image, buttons = [], background = "slate-50", imageSize = "small", dataTestId = "centered-hero" }) => {
+const CenteredHero = ({ title, text, image, slots, background = "slate-50", imageSize = "small", dataTestId = "centered-hero" }) => {
   return React__namespace.default.createElement(
     "div",
     { className: classNames__default.default("ui-align-center ui-flex ui-w-full ui-flex-col ui-items-center ui-p-6", {
@@ -2254,7 +2059,7 @@ const CenteredHero = ({ title, text, image, buttons = [], background = "slate-50
     }) }),
     title && React__namespace.default.createElement(Title, { type: "base" }, title),
     text && React__namespace.default.createElement(Text, { className: "ui-text-center" }, text),
-    (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && React__namespace.default.createElement("div", { className: "ui-mt-4 ui-flex ui-flex-row" }, buttons.filter((button) => button.text && button.handleOnClick && button.type).map((button) => React__namespace.default.createElement(Button, { className: "ui-mr-4 last:ui-mr-0", key: button.title, role: button.role, type: button.type, title: button.title, text: button.text, onClick: button.handleOnClick })))
+    (slots === null || slots === void 0 ? void 0 : slots.bottom) && React__namespace.default.createElement(Box, { mt: "m" }, slots === null || slots === void 0 ? void 0 : slots.bottom)
   );
 };
 
@@ -2688,6 +2493,206 @@ const Badge = (props) => {
   );
 };
 
+var img$b = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+
+var img$a = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z' fill='%23EDF2F7'/%3e%3cpath d='M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z' fill='%23EDF2F7'/%3e%3cpath d='M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+
+var img$9 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%230074DD'/%3e%3c/svg%3e";
+
+var img$8 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+
+var img$7 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%230074DD'/%3e%3c/svg%3e";
+
+var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+
+var img$5 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.5006 11.0006H11.7106L11.4306 10.7306C12.6306 9.33063 13.2506 7.42063 12.9106 5.39063C12.4406 2.61063 10.1206 0.390626 7.32063 0.0506256C3.09063 -0.469374 -0.469374 3.09063 0.0506256 7.32063C0.390626 10.1206 2.61063 12.4406 5.39063 12.9106C7.42063 13.2506 9.33063 12.6306 10.7306 11.4306L11.0006 11.7106V12.5006L15.2506 16.7506C15.6606 17.1606 16.3306 17.1606 16.7406 16.7506C17.1506 16.3406 17.1506 15.6706 16.7406 15.2606L12.5006 11.0006ZM6.50063 11.0006C4.01063 11.0006 2.00063 8.99063 2.00063 6.50063C2.00063 4.01063 4.01063 2.00063 6.50063 2.00063C8.99063 2.00063 11.0006 4.01063 11.0006 6.50063C11.0006 8.99063 8.99063 11.0006 6.50063 11.0006Z' fill='%230074DD'/%3e%3c/svg%3e";
+
+var img$4 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.05086 0.636643C1.66033 0.246119 1.02717 0.246119 0.636643 0.636643C0.246119 1.02717 0.246119 1.66033 0.636643 2.05086L5.5867 7.00092L0.636672 11.9509C0.246148 12.3415 0.246148 12.9746 0.636672 13.3652C1.0272 13.7557 1.66036 13.7557 2.05089 13.3652L7.00091 8.41513L11.9503 13.3646C12.3409 13.7551 12.974 13.7551 13.3646 13.3646C13.7551 12.974 13.7551 12.3409 13.3646 11.9504L8.41513 7.00092L13.3646 2.05145C13.7551 1.66093 13.7551 1.02776 13.3646 0.637237C12.9741 0.246712 12.3409 0.246713 11.9504 0.637237L7.00092 5.5867L2.05086 0.636643Z' fill='%230074DD'/%3e%3c/svg%3e";
+
+var img$3 = "data:image/svg+xml,%3csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.58663 1.04906C8.93899 0.258571 10.061 0.258571 10.4134 1.04906L12.1659 4.9807C12.3112 5.30673 12.6193 5.53057 12.9743 5.56804L17.2551 6.01985C18.1158 6.11069 18.4625 7.17779 17.8196 7.75718L14.6219 10.6389C14.3568 10.8778 14.2391 11.24 14.3131 11.5892L15.2063 15.8001C15.3858 16.6467 14.4781 17.3062 13.7284 16.8738L9.99962 14.7232C9.69041 14.5448 9.30959 14.5448 9.00038 14.7232L5.27159 16.8738C4.52189 17.3062 3.61416 16.6467 3.79373 15.8001L4.68686 11.5892C4.76093 11.24 4.64325 10.8778 4.37808 10.6389L1.18043 7.75718C0.537518 7.17779 0.88424 6.11069 1.74492 6.01985L6.0257 5.56804C6.38068 5.53057 6.68877 5.30673 6.8341 4.9807L8.58663 1.04906Z' fill='%23009FE3'/%3e%3c/svg%3e";
+
+var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e %3cg transform='translate(1.5%2c 0.5)'%3e %3cpath fill='none' fill-rule='evenodd' stroke='%230074DD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286'/%3e %3c/g%3e%3c/svg%3e";
+
+const iconSrc = {
+  // These need to be converted to svg files instead of components and added in
+  //  "add": AddIcon,
+  //  "delete": DeleteIcon,
+  //  "edit": EditIcon,
+  close: img$b,
+  hamburger: img$a,
+  "chevron-right-blue": img$9,
+  "chevron-left-blue": img$7,
+  "chevron-right-grey": img$8,
+  "chevron-left-grey": img$6,
+  search: img$5,
+  star: img$3,
+  check: img$2,
+  "search-cancel": img$4
+};
+const ButtonIcon = (props) => {
+  return React__namespace.createElement("img", { src: iconSrc[props.name], className: props.className });
+};
+
+const BUTTON_ROLES = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SECONDARY_DARK: "secondaryDark",
+  TERTIARY: "tertiary",
+  QUATERNARY: "quaternary",
+  NEGATIVE: "negative",
+  TEXT: "text",
+  LINK: "link",
+  ICON: "icon"
+};
+
+function Button(props) {
+  const { text = "", role: propsRole = BUTTON_ROLES.PRIMARY, type = "button", title = "", link = "", isPending = false, isDisabled = false, onClick, className = "", iconName = "", hasIcon: hasIconProps = false, dynamicIcon } = props, otherAttributes = __rest(props, ["text", "role", "type", "title", "link", "isPending", "isDisabled", "onClick", "className", "iconName", "hasIcon", "dynamicIcon"]);
+  const generatedId = React__namespace.default.useId();
+  const buttonTooltipId = otherAttributes.id ? `button-tooltip-id-${otherAttributes.id}` : `button-tooltip-id-${generatedId}`;
+  const hasAddIcon = className.includes("add-button");
+  const hasEditIcon = className.includes("edit-button");
+  const hasDeleteIcon = className.includes("delete-button");
+  const hasPrevIcon = className.includes("prev-button");
+  const hasNextIcon = className.includes("next-button");
+  const hasChartIcon = className.includes("chart-button");
+  const hasPrintIcon = className.includes("print-button");
+  const hasIcon = hasIconProps || iconName || hasAddIcon || hasEditIcon || hasDeleteIcon || hasPrevIcon || hasNextIcon || hasChartIcon || hasPrintIcon || dynamicIcon;
+  const isIconOnly = hasIcon && !text;
+  const [role, setRole] = React.useState(propsRole);
+  React.useEffect(() => {
+    if ((hasAddIcon || hasEditIcon) && !text) {
+      setRole(BUTTON_ROLES.SECONDARY);
+    } else if (propsRole === BUTTON_ROLES.TEXT || propsRole === BUTTON_ROLES.LINK) {
+      setRole(BUTTON_ROLES.TERTIARY);
+    } else if (hasDeleteIcon) {
+      setRole(BUTTON_ROLES.NEGATIVE);
+    }
+  }, []);
+  const isButtonDisabled = role !== BUTTON_ROLES.LINK && isDisabled || isPending;
+  const isNonPrimaryNonNegative = role === BUTTON_ROLES.SECONDARY || role === BUTTON_ROLES.TERTIARY || role === BUTTON_ROLES.QUATERNARY;
+  function handleClick(event) {
+    if (link) {
+      router.navigate(link);
+      return;
+    }
+    if (isButtonDisabled || !onClick) {
+      event.preventDefault();
+      return;
+    }
+    onClick(event);
+  }
+  const buttonRolesStyling = {
+    primary: [
+      "ui-bg-primary",
+      "hover:ui-bg-primary-dark",
+      "ui-text-white",
+      "focus:ui-outline-primary",
+      "ui-border",
+      "ui-border-solid",
+      "ui-border-primary-transparent"
+    ],
+    secondary: ["ui-bg-slate-200"],
+    secondaryDark: ["ui-bg-slate-700", "hover:ui-bg-slate-600"],
+    tertiary: ["ui-bg-transparent", "ui-shadow-none", "hover:ui-bg-slate-100"],
+    quaternary: [
+      "ui-bg-white",
+      "ui-shadow-none",
+      "ui-border",
+      "ui-border-solid",
+      "ui-border-quaternary",
+      "hover:ui-border-slate-200"
+    ],
+    negative: [
+      "ui-bg-negative",
+      "ui-text-negative-dark",
+      "hover:ui-text-negative-darker",
+      "hover:ui-border-negative-border",
+      "focus:ui-outline-negative",
+      "ui-border",
+      "ui-border-transparent"
+    ],
+    link: [],
+    text: [],
+    icon: []
+  };
+  const containerClassName = classNames__default.default(
+    // default button classes
+    [
+      "ui-h-11",
+      "focus:ui-outline-none",
+      "ui-shadow-sm",
+      "ui-transition-outline ui-transition-colors ui-duration-300 ui-ease-in-out",
+      "ui-cursor-pointer",
+      "ui-rounded-full",
+      "ui-leading-none"
+    ],
+    className,
+    {
+      "ui-w-11": isIconOnly,
+      "ui-opacity-50 ui-pointer-events-none": isButtonDisabled,
+      "hover:ui-text-primary-dark ui-text-primary": isNonPrimaryNonNegative,
+      "ui-border ui-border-transparent": isNonPrimaryNonNegative,
+      "hover:ui-border-slate-200 focus:ui-outline-primary": isNonPrimaryNonNegative,
+      "ui-text-secondary-dark ui-opacity-75": isButtonDisabled && isNonPrimaryNonNegative
+    },
+    buttonRolesStyling[role]
+  );
+  const spinnerClassNames = classNames__default.default({
+    "ui-hidden": !isPending,
+    "ui-text-white": role === BUTTON_ROLES.PRIMARY,
+    "ui-text-dark-gray": isNonPrimaryNonNegative,
+    "ui-text-negative-dark": role === BUTTON_ROLES.TERTIARY
+  });
+  const buttonTextClasses = classNames__default.default(["ui-text-sm", "ui-font-medium"], {
+    "ui-invisible": isPending,
+    "ui-hidden": !text,
+    "ui-ml-3": hasIcon
+  });
+  const tooltipAttrs = title ? {
+    "data-tip": true,
+    "data-for": buttonTooltipId
+  } : {};
+  const buttonComponent = React__namespace.default.createElement(
+    "button",
+    Object.assign({}, otherAttributes, { "aria-disabled": isButtonDisabled, disabled: isButtonDisabled, className: containerClassName, onClick: handleClick, type, title, "data-role": role }),
+    React__namespace.default.createElement(
+      "span",
+      Object.assign({}, tooltipAttrs, { className: classNames__default.default(
+        "ui-relative ui-flex ui-h-full ui-w-full ui-flex-row ui-items-center ui-justify-center",
+        // ensuring the buttons are 44px high including content
+        {
+          "ui-px-2 ui-py-2": isIconOnly,
+          "ui-px-4 ui-py-3": !isIconOnly
+        }
+      ) }),
+      hasAddIcon && React__namespace.default.createElement(AddIcon, { className: "ui-h-5 ui-w-5" }),
+      hasEditIcon && React__namespace.default.createElement(EditIcon, { className: "ui-h-5 ui-w-5" }),
+      hasDeleteIcon && React__namespace.default.createElement(DeleteIcon, { className: "ui-h-5 ui-w-5" }),
+      hasPrevIcon && React__namespace.default.createElement(LeftArrowIcon, { className: "ui-h-5 ui-w-5" }),
+      hasNextIcon && React__namespace.default.createElement(RightArrowIcon, { className: "ui-h-5 ui-w-5" }),
+      hasChartIcon && React__namespace.default.createElement(ChartIcon, { className: "ui-h-5 ui-w-5" }),
+      hasPrintIcon && React__namespace.default.createElement(PrintIcon, { className: "ui-h-5 ui-w-5" }),
+      iconName && React__namespace.default.createElement(ButtonIcon, { name: iconName }),
+      dynamicIcon && React__namespace.default.createElement(dynamicIcon, { className: "ui-w-5 ui-h-5" }),
+      React__namespace.default.createElement(
+        "span",
+        { className: "ui-absolute ui-left-1/2 ui-top-1/2 ui--translate-x-1/2 ui--translate-y-1/2 ui-transform ui-opacity-100" },
+        React__namespace.default.createElement(Spinner, { className: spinnerClassNames })
+      ),
+      React__namespace.default.createElement("span", { className: buttonTextClasses }, text)
+    )
+  );
+  if (title) {
+    return React__namespace.default.createElement(
+      React__namespace.default.Fragment,
+      null,
+      React__namespace.default.createElement(ReactTooltip__default.default, { effect: "solid", id: buttonTooltipId }, title),
+      buttonComponent
+    );
+  }
+  return buttonComponent;
+}
+
 var css_248z$c = ".entity-preview-dots.glider-dots {\n  padding-top: 1rem;\n}\n.entity-preview-dots.glider-dots .glider-dot {\n  margin: 0.25rem;\n  height: 0.5rem;\n  width: 0.5rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n}\n.entity-preview-dots.glider-dots .glider-dot:focus {\n  outline-color: #1e40af;\n}\n.entity-preview-dots.glider-dots .glider-dot.active, .entity-preview-dots.glider-dots .glider-dot:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(30 64 175 / var(--tw-bg-opacity));\n}\n\n.glider-slide {\n  visibility: hidden;\n}\n\n.glider-slide.visible,\n.glider-slide.active {\n  visibility: visible;\n}";
 styleInject(css_248z$c);