@luscii-healthtech/web-ui 62.0.2 → 63.0.0

package/dist/index.development.js

@@ -1449,9 +1449,9 @@ const Spinner = (props) => {
   return jsxRuntime.jsxs("svg", { className: `ui:h-5 ui:w-5 ui:animate-spin ${props.className}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "ui:opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "ui:opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] });
 };
 
-const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
+const ButtonV2 = (_a) => {
   var _b, _c, _d, _e;
-  var { children, size = "medium", onClick, textColor, textHoverColor, leadingIcon, trailingIcon, isPending, className, title, dataTestId, type = "button", titleTooltipContainer } = _a, otherAttributes = __rest(_a, ["children", "size", "onClick", "textColor", "textHoverColor", "leadingIcon", "trailingIcon", "isPending", "className", "title", "dataTestId", "type", "titleTooltipContainer"]);
+  var { ref, children, size = "medium", onClick, textColor, textHoverColor, leadingIcon, trailingIcon, isPending, className, title, dataTestId, type = "button", titleTooltipContainer } = _a, otherAttributes = __rest(_a, ["ref", "children", "size", "onClick", "textColor", "textHoverColor", "leadingIcon", "trailingIcon", "isPending", "className", "title", "dataTestId", "type", "titleTooltipContainer"]);
   const disabled = (_b = otherAttributes.disabled) !== null && _b !== void 0 ? _b : false;
   const generatedId = React__namespace.default.useId();
   const buttonId = (_c = otherAttributes.id) !== null && _c !== void 0 ? _c : generatedId;
@@ -1496,7 +1496,7 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
     "data-tip": true,
     "data-for": buttonTooltipId
   } : {};
-  const buttonComponent = jsxRuntime.jsxs("button", Object.assign({ ref: innerRef }, otherAttributes, { "aria-label": (_d = otherAttributes["aria-label"]) !== null && _d !== void 0 ? _d : !content && typeof title === "string" ? title : void 0, className: buttonClassName, type, onClick: handleClick, disabled: disabled || isPending, "aria-disabled": disabled, "aria-busy": isPending, "data-test-id": (_e = dataTestId !== null && dataTestId !== void 0 ? dataTestId : otherAttributes["data-test-id"]) !== null && _e !== void 0 ? _e : otherAttributes.id }, tooltipAttrs, { children: [leadingIcon && jsxRuntime.jsx(IconLayoutWrapper, { isInvisible: isPending, children: leadingIcon }), isPending && jsxRuntime.jsx("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", children: jsxRuntime.jsx(Spinner, { className: textColorClass }) }), content && jsxRuntime.jsx(Text, { variant: "strong", className: classNames__default.default({
+  const buttonComponent = jsxRuntime.jsxs("button", Object.assign({ ref }, otherAttributes, { "aria-label": (_d = otherAttributes["aria-label"]) !== null && _d !== void 0 ? _d : !content && typeof title === "string" ? title : void 0, className: buttonClassName, type, onClick: handleClick, disabled: disabled || isPending, "aria-disabled": disabled, "aria-busy": isPending, "data-test-id": (_e = dataTestId !== null && dataTestId !== void 0 ? dataTestId : otherAttributes["data-test-id"]) !== null && _e !== void 0 ? _e : otherAttributes.id }, tooltipAttrs, { children: [leadingIcon && jsxRuntime.jsx(IconLayoutWrapper, { isInvisible: isPending, children: leadingIcon }), isPending && jsxRuntime.jsx("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", children: jsxRuntime.jsx(Spinner, { className: textColorClass }) }), content && jsxRuntime.jsx(Text, { variant: "strong", className: classNames__default.default({
     "ui:opacity-[0.01]": isPending,
     "ui:group-hover:text-primary-dark": textHoverColor === "blue-900",
     "ui:group-hover:text-white": textHoverColor === "white"
@@ -1505,7 +1505,7 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
     return jsxRuntime.jsxs(Tooltip.Root, { children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, id: buttonTooltipId, children: buttonComponent }), jsxRuntime.jsx(Tooltip.Content, { container: titleTooltipContainer, children: jsxRuntime.jsx(Tooltip.Text, { children: title }) })] });
   }
   return buttonComponent;
-});
+};
 function IconLayoutWrapper({ children, className, isInvisible }) {
   return jsxRuntime.jsx("span", { className: classNames__default.default(
     "ui:shrink-0",
@@ -1523,15 +1523,16 @@ function IconLayoutWrapper({ children, className, isInvisible }) {
   ), children });
 }
 
-const TertiaryButton = React__namespace.default.forwardRef((props, innerRef) => {
-  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
+const TertiaryButton = (_a) => {
+  var { ref } = _a, props = __rest(_a, ["ref"]);
+  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref }, props, { className: classNames__default.default([
     "ui:text-primary",
     "ui:border-transparent ui:bg-transparent ui:!shadow-none",
     {
       "ui:hover:bg-primary-background ui:hover:text-primary-dark": !props.disabled
     }
   ], props.className), textColor: "blue-800", textHoverColor: "blue-900" }));
-});
+};
 
 const ModalHeader = (props) => {
   var _a;
@@ -1865,8 +1866,9 @@ const Badge = (props) => {
   return jsxRuntime.jsx("div", { className: containerClasses, children: jsxRuntime.jsx("span", { className: textClasses, children: props.children }) });
 };
 
-const PrimaryButton = React__namespace.default.forwardRef((props, innerRef) => {
-  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
+const PrimaryButton = (_a) => {
+  var { ref } = _a, props = __rest(_a, ["ref"]);
+  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref }, props, { className: classNames__default.default([
     "ui:text-white",
     "ui:bg-linear-to-r",
     "ui:gradient-blue",
@@ -1874,11 +1876,11 @@ const PrimaryButton = React__namespace.default.forwardRef((props, innerRef) => {
       "ui:hover:gradient-blue--hover": !props.disabled && !props.isPending
     }
   ], props.className), textColor: "white" }));
-});
+};
 
-const SecondaryButton = React__namespace.default.forwardRef((props, innerRef) => {
-  const { textColor = "primary", textHoverColor = "blue-900" } = props, rest = __rest(props, ["textColor", "textHoverColor"]);
-  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, rest, { className: classNames__default.default([
+const SecondaryButton = (props) => {
+  const { ref, textColor = "primary", textHoverColor = "blue-900" } = props, rest = __rest(props, ["ref", "textColor", "textHoverColor"]);
+  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref }, rest, { className: classNames__default.default([
     `ui:text-${textColor}`,
     // Colors of any icons on the button
     "ui:bg-white",
@@ -1887,29 +1889,29 @@ const SecondaryButton = React__namespace.default.forwardRef((props, innerRef) =>
       "ui:hover:border-neutral-interactive ui:hover:bg-primary-background": !props.disabled
     }
   ], props.className), textColor, textHoverColor }));
-});
+};
 
-const PrimaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
-  const { children: icon, size = "medium", label } = props, rest = __rest(props, ["children", "size", "label"]);
-  return jsxRuntime.jsx(PrimaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
+const PrimaryIconButton = (props) => {
+  const { ref, children: icon, size = "medium", label } = props, rest = __rest(props, ["ref", "children", "size", "label"]);
+  return jsxRuntime.jsx(PrimaryButton, Object.assign({ ref }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
     "ui:px-[calc(var(--ui-spacing-xxs)-1px)]": size === "medium",
     "ui:px-[calc(var(--ui-spacing-s)-1px)]": size === "large"
   }, props.className) }));
-});
+};
 
-const SecondaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
-  const { children: icon, size = "medium", label } = props, rest = __rest(props, ["children", "size", "label"]);
-  return jsxRuntime.jsx(SecondaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
+const SecondaryIconButton = (props) => {
+  const { ref, children: icon, size = "medium", label } = props, rest = __rest(props, ["ref", "children", "size", "label"]);
+  return jsxRuntime.jsx(SecondaryButton, Object.assign({ ref }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
     "ui:px-[calc(var(--ui-spacing-xxs)-1px)]": size === "medium",
     "ui:px-[calc(var(--ui-spacing-s)-1px)]": size === "large"
   }, props.className) }));
-});
+};
 
-const TertiaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
-  const { children: icon, size = "medium", label, expand = false } = props, rest = __rest(props, ["children", "size", "label", "expand"]);
+const TertiaryIconButton = (props) => {
+  const { ref, children: icon, size = "medium", label, expand = false } = props, rest = __rest(props, ["ref", "children", "size", "label", "expand"]);
   const expandX = expand === true || expand === "x";
   const expandY = expand === true || expand === "y";
-  return jsxRuntime.jsx(TertiaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
+  return jsxRuntime.jsx(TertiaryButton, Object.assign({ ref }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
     /**
      * Add horizontal padding and possibly undo it with negative margin.
      */
@@ -1920,15 +1922,15 @@ const TertiaryIconButton = React__namespace.default.forwardRef((props, innerRef)
     "ui:-my-[calc(theme('spacing.xxs')-1px)]": expandY && size === "medium",
     "ui:-my-[calc(theme('spacing.s')-1px)]": expandY && size === "large"
   }, props.className) }));
-});
+};
 
-const ButtonGroup = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { children, direction = "RTL", className } = _a, otherAttributes = __rest(_a, ["children", "direction", "className"]);
-  return jsxRuntime.jsx("div", Object.assign({ ref: innerRef }, otherAttributes, { className: tailwindMerge.twMerge(classNames__default.default("ui:flex ui:flex-row ui:items-center ui:gap-f_base", {
+const ButtonGroup = (_a) => {
+  var { ref, children, direction = "RTL", className } = _a, otherAttributes = __rest(_a, ["ref", "children", "direction", "className"]);
+  return jsxRuntime.jsx("div", Object.assign({ ref }, otherAttributes, { className: tailwindMerge.twMerge(classNames__default.default("ui:flex ui:flex-row ui:items-center ui:gap-f_base", {
     "ui:justify-end": direction === "RTL",
     "ui:justify-start": direction === "LTR"
   }), className), children }));
-});
+};
 
 function useIsScrollable() {
   const [element, setElement] = React.useState(null);
@@ -3015,8 +3017,8 @@ const disabledClasses = {
     "ui:disabled:text-text-neutral-secondary-disabled"
   ]
 };
-const DropdownTrigger = React__namespace.default.forwardRef((_a, ref) => {
-  var { variant = "primary", children, placeholder, leadingIcon, trailingIcon, width, className, type = "button" } = _a, otherAttributes = __rest(_a, ["variant", "children", "placeholder", "leadingIcon", "trailingIcon", "width", "className", "type"]);
+const DropdownTrigger = (_a) => {
+  var { ref, variant = "primary", children, placeholder, leadingIcon, trailingIcon, width, className, type = "button" } = _a, otherAttributes = __rest(_a, ["ref", "variant", "children", "placeholder", "leadingIcon", "trailingIcon", "width", "className", "type"]);
   const isFilled = hasValue(children);
   return jsxRuntime.jsxs(Box, Object.assign({ as: "button", ref, type, width, className: classNames__default.default(baseClasses, isFilled ? filledClasses : defaultClasses[variant], hoveredClasses[variant], pressedClasses, focusClasses, disabledClasses[variant], className) }, otherAttributes, { children: [jsxRuntime.jsxs("span", { className: "ui:flex ui:min-w-0 ui:flex-1 ui:items-center ui:gap-f_base", children: [leadingIcon && jsxRuntime.jsx(IconWrapper, { children: leadingIcon }), jsxRuntime.jsx(Text, {
     variant: "body-base-regular",
@@ -3029,8 +3031,7 @@ const DropdownTrigger = React__namespace.default.forwardRef((_a, ref) => {
     className: "ui:min-w-0 ui:truncate ui:leading-(--ui-semantic-size-lg)",
     children: isFilled ? children : placeholder
   }), trailingIcon && jsxRuntime.jsx(IconWrapper, { children: trailingIcon })] }), jsxRuntime.jsx(IconWrapper, { isChevron: true, children: jsxRuntime.jsx(ChevronDoubleIcon, { "aria-hidden": true }) })] }));
-});
-DropdownTrigger.displayName = "DropdownTrigger";
+};
 const IconWrapper = ({ children, isChevron = false }) => jsxRuntime.jsx("span", { className: classNames__default.default("ui:inline-flex ui:shrink-0 ui:text-icon-neutral-primary-default", { "ui:group-disabled:text-icon-neutral-primary-disabled": isChevron }), children });
 
 function cn(...inputs) {
@@ -3727,7 +3728,6 @@ function DataGrid(_a) {
     }
   ), showFooter ? jsxRuntime.jsx(TableFooter, { colSpan, paginationMenuProps }) : null] }));
 }
-const Table = DataGrid;
 
 const isPlainText = (node) => {
   return typeof node === "string" || typeof node === "number";
@@ -3784,7 +3784,7 @@ const TableRoot = React__namespace.default.forwardRef((_a, ref) => {
     return child;
   })] }));
 });
-TableRoot.displayName = "TableNew";
+TableRoot.displayName = "Table";
 const Thead = React__namespace.default.forwardRef((_a, ref) => {
   var { className, children, stickyHeader } = _a, attrs = __rest(_a, ["className", "children", "stickyHeader"]);
   return jsxRuntime.jsx("thead", Object.assign({ ref, className: classNames__default.default(
@@ -3803,7 +3803,7 @@ const Thead = React__namespace.default.forwardRef((_a, ref) => {
     className
   ) }, attrs, { children }));
 });
-Thead.displayName = "TableNew.Thead";
+Thead.displayName = "Table.Thead";
 const Tbody = React__namespace.default.forwardRef((_a, ref) => {
   var { className, children, hasTFoot } = _a, attrs = __rest(_a, ["className", "children", "hasTFoot"]);
   return jsxRuntime.jsx("tbody", Object.assign({ ref, className: classNames__default.default(
@@ -3819,17 +3819,17 @@ const Tbody = React__namespace.default.forwardRef((_a, ref) => {
     className
   ) }, attrs, { children }));
 });
-Tbody.displayName = "TableNew.Tbody";
+Tbody.displayName = "Table.Tbody";
 const TFoot = React__namespace.default.forwardRef((_a, ref) => {
   var { className, children } = _a, attrs = __rest(_a, ["className", "children"]);
   return jsxRuntime.jsx("tfoot", Object.assign({ ref, className: classNames__default.default(className) }, attrs, { children }));
 });
-TFoot.displayName = "TableNew.TFoot";
+TFoot.displayName = "Table.TFoot";
 const Tr = React__namespace.default.forwardRef((_a, ref) => {
   var { className, children } = _a, attrs = __rest(_a, ["className", "children"]);
   return jsxRuntime.jsx(Box, Object.assign({ as: "tr", ref, className: classNames__default.default(className) }, attrs, { children }));
 });
-Tr.displayName = "TableNew.Tr";
+Tr.displayName = "Table.Tr";
 const getCellClasses = (options) => {
   return classNames__default.default("ui:first:pl-l ui:last:pr-l ui:text-left", {
     "ui:px-xxs ui:py-m": !options.omitPadding
@@ -3840,14 +3840,14 @@ const Th = React__namespace.default.forwardRef((_a, ref) => {
   const content = isPlainText(children) ? jsxRuntime.jsx(Text, { as: "span", variant: "strong", children }) : children;
   return jsxRuntime.jsx("th", Object.assign({ ref, className: getCellClasses({ omitPadding, className }) }, attrs, { children: content }));
 });
-Th.displayName = "TableNew.Th";
+Th.displayName = "Table.Th";
 const Td = React__namespace.default.forwardRef((_a, ref) => {
   var { className, children, omitPadding = false } = _a, attrs = __rest(_a, ["className", "children", "omitPadding"]);
   const content = isPlainText(children) ? jsxRuntime.jsx(Text, { as: "span", children }) : children;
   return jsxRuntime.jsx("td", Object.assign({ ref, className: getCellClasses({ omitPadding, className }) }, attrs, { children: content }));
 });
-Td.displayName = "TableNew.Td";
-const TableNew = Object.assign(TableRoot, {
+Td.displayName = "Table.Td";
+const Table = Object.assign(TableRoot, {
   Thead,
   Tbody,
   TFoot,
@@ -3855,6 +3855,7 @@ const TableNew = Object.assign(TableRoot, {
   Th,
   Td
 });
+const TableNew = Table;
 
 var CheckboxState;
 (function(CheckboxState2) {
@@ -5133,8 +5134,8 @@ const InstrumentCard = ({ type, title, category, meta, id, copyIdLabel = "Copy I
   }, className: "ui:relative ui:z-10 ui:flex ui:cursor-pointer ui:focus-visible:outline-primary", children: jsxRuntime.jsx(Tag, { _size: "small", _variant: "bordered", _leadingIcon: jsxRuntime.jsx(CopyToClipboardIcon, { "aria-hidden": true }), children: id }) })] })] }), count !== void 0 && jsxRuntime.jsx(Tag, { _size: "small", _variant: "flat", _leadingIcon: jsxRuntime.jsx(CopyToClipboardIcon, { "aria-hidden": true }), className: "ui:shrink-0", children: jsxRuntime.jsx(Text, { variant: "body-small-bold", as: "span", children: count }) })] });
 };
 
-const DragHandle = React.forwardRef((_a, ref) => {
-  var { dataTestId, className: classes, grabbing, disabled = false, label = "Drag to reorder" } = _a, props = __rest(_a, ["dataTestId", "className", "grabbing", "disabled", "label"]);
+const DragHandle = (_a) => {
+  var { ref, dataTestId, className: classes, grabbing, disabled = false, label = "Drag to reorder" } = _a, props = __rest(_a, ["ref", "dataTestId", "className", "grabbing", "disabled", "label"]);
   const className = classNames__default.default(classes, "ui:py-2 ui:focus:outline-primary", {
     "ui:cursor-grab": !grabbing && !disabled,
     "ui:cursor-grabbing ui:shadow-sm ui:bg-slate-200": grabbing && !disabled,
@@ -5142,7 +5143,7 @@ const DragHandle = React.forwardRef((_a, ref) => {
     "ui:cursor-not-allowed": disabled
   });
   return jsxRuntime.jsx("button", Object.assign({ ref, "aria-label": label }, props, { tabIndex: 0, className, "data-test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "dragHandle", children: jsxRuntime.jsx(Icon, { name: "DragIndicatorIcon", className: disabled ? "ui:text-slate-300" : "ui:text-slate-400" }) }));
-});
+};
 
 const typeIcons = {
   information: ActionInformationColoredIcon,