@luscii-healthtech/web-ui 0.8.1 → 0.9.1

package/README.md

@@ -25,6 +25,12 @@ Run the script below in your terminal, _in the parent folder of the repositories
 cp -a web-ui/dist/. cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist
 ```
 
+Or use the shortcut:
+
+```
+yarn test-copy-build
+```
+
 When you run cVitals again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before merging a pull request.
 
 ## Contributing

package/dist/components/Icons/EmptyIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./types/IconProps.type";
+export declare const EmptyIcon: (props: IconProps) => JSX.Element;

package/dist/components/List/List.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
-export declare const List: ({ items, onAssetLoadError }: ListProps) => JSX.Element;
+export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, }: ListProps) => JSX.Element;
 export default List;

package/dist/components/List/List.types.d.ts

@@ -1,17 +1,32 @@
-/// <reference types="react" />
+import React from "react";
+import { ButtonProps } from "../ButtonV2/ButtonProps.type";
 import { IconProps } from "../Icons/types/IconProps.type";
 export interface ListItemProps {
     itemId: string | number;
     title: string;
     subtitle?: string;
-    icon?: React.FunctionComponent<IconProps> | null | string;
+    icon?: React.FunctionComponent<IconProps> | string;
     accessories?: JSX.Element[];
     handleItemClick?: () => void;
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
     tooltipId?: string;
+    /**
+     *
+     * If the parent list component can have a header,
+     * the list items don't need to add a border radius on top of the first item.
+     *
+     * The header is an optional <li> on top that contains the title and accessories (buttons)
+     */
+    roundTop?: boolean;
 }
 export declare type OnAssetLoadErrorPayload = Pick<ListItemProps, "itemId" | "subtitle" | "title" | "icon">;
-export interface ListProps {
+export declare type ListProps = {
+    title?: string;
+    headerButton?: {
+        buttonType: React.FunctionComponent<ButtonProps>;
+        buttonProps: ButtonProps;
+    };
+    headerTransparent?: boolean;
     items: ListItemProps[];
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
-}
+};

package/dist/components/List/ListItem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ListItemProps } from "./List.types";
-export declare const ListItem: ({ icon, subtitle, title, accessories, tooltipId, onAssetLoadError, ...restProps }: ListItemProps) => JSX.Element;
+export declare const ListItem: ({ icon, subtitle, title, accessories, tooltipId, onAssetLoadError, roundTop, ...restProps }: ListItemProps) => JSX.Element;
 export default ListItem;

package/dist/components/Section/Section.d.ts

@@ -6,9 +6,11 @@ import "./Section.scss";
 export interface SectionProps extends RestPropped {
     title?: string;
     buttons?: ButtonProps[];
+    footer?: React.ReactNode;
     className?: string;
     isLoading?: boolean;
     loadingIndicatorProps?: LoadingIndicatorProps;
+    children?: React.ReactNode;
 }
-export declare function Section({ title, buttons, children, className, isLoading, loadingIndicatorProps, ...restProps }: React.PropsWithChildren<SectionProps>): JSX.Element;
+export declare function Section({ title, buttons, footer, children, className, isLoading, loadingIndicatorProps, ...restProps }: SectionProps): JSX.Element;
 export default Section;

package/dist/web-ui-tailwind.css

@@ -947,6 +947,11 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
 .rounded-r {
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
@@ -962,6 +967,26 @@ video {
   border-bottom-left-radius: 0.5rem;
 }
 
+.first\:rounded-t:first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.first\:rounded-l-xl:first-child {
+  border-top-left-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+
+.last\:rounded-b:last-child {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.last\:rounded-r-xl:last-child {
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1324,6 +1349,10 @@ video {
   margin-left: auto;
 }
 
+.mb-px {
+  margin-bottom: 1px;
+}
+
 .mb-2\.5 {
   margin-bottom: 0.625rem;
 }
@@ -1332,6 +1361,10 @@ video {
   margin-left: 0.625rem;
 }
 
+.-mt-px {
+  margin-top: -1px;
+}
+
 .-ml-px {
   margin-left: -1px;
 }
@@ -1496,10 +1529,6 @@ video {
   padding-left: 0.25rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1596,16 +1625,16 @@ video {
   left: 0;
 }
 
-.top-3 {
-  top: 0.75rem;
+.top-6 {
+  top: 1.5rem;
 }
 
 .-top-1 {
   top: -0.25rem;
 }
 
-.-left-3 {
-  left: -0.75rem;
+.-left-2 {
+  left: -0.5rem;
 }
 
 .-right-54 {

package/dist/web-ui.cjs.development.js

@@ -2578,7 +2578,28 @@ Menu.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError"];
+var EmptyIcon = function EmptyIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "28",
+    height: "28",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 22C18.4183 22 22 18.4183 22 14C22 9.58172 18.4183 6 14 6C9.58172 6 6 9.58172 6 14C6 18.4183 9.58172 22 14 22ZM14 25C20.0751 25 25 20.0751 25 14C25 7.92487 20.0751 3 14 3C7.92487 3 3 7.92487 3 14C3 20.0751 7.92487 25 14 25Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.4144 24.4144C2.63335 23.6334 2.63335 22.367 3.4144 21.586L21.1485 3.8519C21.9295 3.07085 23.1959 3.07085 23.9769 3.8519C24.7579 4.63295 24.7579 5.89928 23.9769 6.68033L6.24283 24.4144C5.46178 25.1954 4.19545 25.1954 3.4144 24.4144Z",
+    fill: "currentColor"
+  }));
+};
+
+var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError", "roundTop"];
 var ListItem = function ListItem(_ref) {
   var icon = _ref.icon,
       subtitle = _ref.subtitle,
@@ -2586,8 +2607,13 @@ var ListItem = function ListItem(_ref) {
       accessories = _ref.accessories,
       tooltipId = _ref.tooltipId,
       onAssetLoadError = _ref.onAssetLoadError,
+      roundTop = _ref.roundTop,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
+  var _useState = React.useState(false),
+      loadIconError = _useState[0],
+      setLoadIconError = _useState[1];
+
   function onListItemIconLoadError() {
     console.error({
       message: "Url from icon failed to load, please check the props passed to `ListItem`.",
@@ -2595,6 +2621,7 @@ var ListItem = function ListItem(_ref) {
       title: title,
       subtitle: subtitle
     });
+    setLoadIconError(true);
     onAssetLoadError == null ? void 0 : onAssetLoadError({
       title: title,
       subtitle: subtitle,
@@ -2603,8 +2630,13 @@ var ListItem = function ListItem(_ref) {
     });
   }
 
+  function onListItemIconLoad() {
+    setLoadIconError(false);
+  }
+
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classNames("flex flex-row items-center space-x-4 bg-white", "p-4 border-b last:border-b-0 border-slate-200", {
+    className: classNames("flex last:rounded-b flex-row items-center space-x-4 bg-white", "p-4 border-b last:border-b-0 border-slate-100", {
+      "first:rounded-t": roundTop,
       "cursor-pointer": restProps.handleItemClick,
       "hover:bg-blue-50 transition-colors ease-in-out duration-300": restProps.handleItemClick
     }),
@@ -2613,16 +2645,15 @@ var ListItem = function ListItem(_ref) {
     "data-for": tooltipId
   }, icon && typeof icon === "function" && /*#__PURE__*/React__default.createElement(icon, {
     className: "w-6 h-6"
-  }), icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
+  }), !loadIconError && icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
     src: icon,
     alt: "list-item-icon",
     className: "w-6 h-6 text-sm",
+    onLoad: onListItemIconLoad,
     onError: onListItemIconLoadError
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames({
-      "pl-10": icon === null
-    })
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }), loadIconError && /*#__PURE__*/React__default.createElement(EmptyIcon, {
+    className: "text-slate-300"
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Text, {
     text: title
   }), subtitle && /*#__PURE__*/React__default.createElement(Text, {
     text: subtitle,
@@ -2633,16 +2664,37 @@ var ListItem = function ListItem(_ref) {
 };
 
 var List = function List(_ref) {
-  var items = _ref.items,
+  var title = _ref.title,
+      headerButton = _ref.headerButton,
+      headerTransparent = _ref.headerTransparent,
+      items = _ref.items,
       onAssetLoadError = _ref.onAssetLoadError;
-  return /*#__PURE__*/React__default.createElement("ul", {
-    className: classNames("list-none bg-white")
+  var hasHeader = !!(title || headerButton);
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "list-component"
+  }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "list-header",
+    className: classNames("flex rounded-t flex-row items-center py-4 space-x-4", {
+      "bg-white border-b border-slate-100 px-4": !headerTransparent,
+      "mb-px": headerTransparent,
+      "justify-between": title && headerButton,
+      "justify-start": title && !headerButton,
+      "justify-end": !title && headerButton
+    })
+  }, title && /*#__PURE__*/React__default.createElement(Title, {
+    type: "sm",
+    text: title
+  }), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
+    className: "space-x-3"
+  }, /*#__PURE__*/React__default.createElement(headerButton.buttonType, headerButton.buttonProps))), /*#__PURE__*/React__default.createElement("ul", {
+    className: classNames("list-none")
   }, items.map(function (item) {
     return /*#__PURE__*/React__default.createElement(ListItem, Object.assign({}, item, {
+      roundTop: !hasHeader || hasHeader && headerTransparent,
       key: item.itemId,
       onAssetLoadError: onAssetLoadError
     }));
-  }));
+  })));
 };
 
 var TEXT_TYPE_OPTIONS = {
@@ -3551,10 +3603,11 @@ RadioGroup.propTypes = {
 var css_248z$j = ".cweb-section .cweb-button:last-of-type {\n  margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n  margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid #eeeeee;\n  width: 100%;\n  padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-top: 1px solid #eeeeee;\n  width: 100%;\n  padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n  width: 32px;\n  height: 32px;\n}\n";
 styleInject(css_248z$j);
 
-var _excluded$c = ["title", "buttons", "children", "className", "isLoading", "loadingIndicatorProps"];
+var _excluded$c = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
 function Section(_ref) {
   var title = _ref.title,
       buttons = _ref.buttons,
+      footer = _ref.footer,
       children = _ref.children,
       className = _ref.className,
       _ref$isLoading = _ref.isLoading,
@@ -3583,7 +3636,9 @@ function Section(_ref) {
     }));
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "cweb-section-content w-full"
-  }, !isLoading && children));
+  }, !isLoading && children), footer && /*#__PURE__*/React__default.createElement("div", {
+    className: "cweb-section-footer"
+  }, footer));
 }
 
 var css_248z$k = ".cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}\n";
@@ -4185,30 +4240,6 @@ var TextEditorV2 = function TextEditorV2(_ref) {
   }));
 };
 
-var SmallCircleIcon = function SmallCircleIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "6",
-    fill: "currentColor"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "14.5",
-    cy: "9.5",
-    r: "1.5",
-    fill: "white",
-    fillOpacity: "0.1"
-  }));
-};
-
 var TimelineStep = function TimelineStep(_ref) {
   var _classNames;
 
@@ -4216,11 +4247,11 @@ var TimelineStep = function TimelineStep(_ref) {
       type = _ref.type;
   var isWideStep = type === "wide";
   var borderClassNames = "ml-4 pl-6 border-blue-800 border-l-2";
-  var containerClassNames = classNames("relative", (_classNames = {}, _classNames[borderClassNames] = !isWideStep, _classNames["pt-3"] = !isWideStep, _classNames["bg-white rounded-lg overflow-hidden"] = isWideStep, _classNames));
+  var containerClassNames = classNames("relative", (_classNames = {}, _classNames[borderClassNames] = !isWideStep, _classNames["bg-white rounded-lg overflow-hidden"] = isWideStep, _classNames));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: containerClassNames
-  }, content, !isWideStep && /*#__PURE__*/React__default.createElement(SmallCircleIcon, {
-    className: "text-blue-800 absolute top-3 -left-3 -ml-px"
+  }, content, !isWideStep && /*#__PURE__*/React__default.createElement("span", {
+    className: "rounded-lg bg-blue-800 h-4 w-4 absolute top-6 -left-2 -ml-px -mt-px"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: classNames(borderClassNames, "h-6 last:h-0")
   }));
@@ -4946,6 +4977,30 @@ var PinIcon = function PinIcon(props) {
   }));
 };
 
+var SmallCircleIcon = function SmallCircleIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "6",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "14.5",
+    cy: "9.5",
+    r: "1.5",
+    fill: "white",
+    fillOpacity: "0.1"
+  }));
+};
+
 var SmallDiamondIcon = function SmallDiamondIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,