@trackunit/react-components 0.0.126 → 0.0.130

package/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+declare type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+interface ActionButtonProps extends CommonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: ActionType;
+    /**
+     * The value to be passed into the button.
+     */
+    value?: string | null;
+    /**
+     * The onClick event.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+export declare const ActionButton: ({ type, value }: ActionButtonProps) => JSX.Element;
+export {};

package/components/ActionButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./ActionButton";

package/components/Checkbox/Checkbox.d.ts

@@ -11,17 +11,13 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
     disabled?: boolean;
     /**
      * An boolean flag to set invalid mode
-     * can be used for handling errors
+     * can be used for indicating errors
      */
     isInvalid?: boolean;
     /**
      * An boolean flag to set checkbox to readonly mode
      */
     readOnly?: boolean;
-    /**
-     * An string element to be used as input name
-     */
-    name?: string;
     /**
      * An boolean flag to set checkbox to intermediate state
      */

package/components/Label/Label.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
+import "./Label.css";
 export interface LabelProps extends CommonProps {
     /**
      * ID of the label.
@@ -13,6 +14,15 @@ export interface LabelProps extends CommonProps {
      * The label value.
      */
     children?: React.ReactNode;
+    /**
+     * Whether the label is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
 }
 /**
  * The Label component is used for labels for input fields.
@@ -21,4 +31,4 @@ export interface LabelProps extends CommonProps {
  * @param {LabelProps} props - The props for the Label component
  * @returns {JSX.Element} Label component
  */
-export declare const Label: ({ id, htmlFor, children, className, dataTestId }: LabelProps) => JSX.Element;
+export declare const Label: ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }: LabelProps) => JSX.Element;

package/components/Menu/MenuButton.d.ts

@@ -2,6 +2,7 @@
 interface IMobileButton {
     onClick: () => void;
     className?: string;
+    dataTestId?: string;
 }
 /**
  * The MenuButton component.
@@ -9,5 +10,5 @@ interface IMobileButton {
  * @param {IMobileButton} props - The props for the MenuButton component
  * @returns {JSX.Element} MenuButton component
  */
-export declare const MenuButton: ({ onClick, className }: IMobileButton) => JSX.Element;
+export declare const MenuButton: ({ onClick, className, dataTestId }: IMobileButton) => JSX.Element;
 export {};

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
+import "./RadioGroup.css";
 export interface RadioGroupProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
     /**
      */
@@ -33,8 +34,8 @@ export interface RadioGroupProps extends CommonProps, React.InputHTMLAttributes<
      */
     disabled?: boolean;
     /**
-     * An boolean flag to set invalid mode
-     * can be used for handling errors
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
      */
     isInvalid?: boolean;
 }

package/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -38,7 +38,7 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focused, }: SingleSelectMenuItemProps) => JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focused, disabled, }: SingleSelectMenuItemProps) => JSX.Element;
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *

package/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ActionButton";
 export * from "./Alert";
 export * from "./Badge";
 export * from "./BaseInput";

package/index.css

@@ -16,8 +16,7 @@
     rounded-lg
     cursor-pointer
     flex-none
-    py-1.5
-    px-3
+    p-2.5
     h-min
     drop-shadow
     focus:ring
@@ -46,7 +45,7 @@
   }
 
   &--small {
-    @apply py-1 px-2;
+    @apply p-2;
   }
 
   &--large {
@@ -161,6 +160,166 @@
       hover:bg-slate-600/10
       disabled:hover:bg-transparent;
   }
+
+  &__container {
+    @apply w-5
+      h-5
+      flex
+      justify-center
+      items-center
+      box-border;
+
+    &--small {
+      @apply w-4
+        h-4
+        flex
+        justify-center
+        items-center
+        box-border;
+    }
+  }
+}
+
+/* CSS related to the LAbel component */
+
+.tu-label {
+  @apply leading-none
+    text-base
+    text-slate-700	
+    whitespace-nowrap
+    text-ellipsis
+    items-center 
+    grid
+    gap-2	
+    hover:text-slate-800 
+    group-hover:text-slate-800 
+    active:text-slate-800
+    group-active:text-slate-800;
+
+  &--invalid {
+    @apply text-red-600
+      hover:text-red-700 
+      group-hover:text-red-700 
+      active:text-red-700
+      group-active:text-red-700;
+  }
+
+  &--disabled {
+    @apply text-slate-400
+      hover:text-slate-400
+      group-hover:text-slate-400;
+  }
+}
+
+/* CSS related to the RadioGroup component */
+.tu-radiogroup {
+  @apply flex 
+    gap-2 
+    w-fit	
+    flex-col 
+    items-start;
+
+  &--inline {
+    @apply flex 
+      gap-3 
+      flex-row 
+      items-center;
+  }
+}
+
+.tu-radioitem {
+  @apply w-4
+    h-4
+    appearance-none	
+    rounded-3xl	 
+    bg-white	
+    border-solid	
+    border  
+    border-slate-300	
+    shadow-sm
+    shrink-0	
+    transition
+    box-border
+    hover:cursor-pointer
+    hover:bg-slate-100
+    focus:ring-2
+    focus:ring-offset-2
+    focus:ring-blue-700;
+
+  &__wrapper {
+    @apply flex  
+      gap-2;
+  }
+
+  &--checked {
+    @apply border-solid	
+      border-4 
+      border-blue-600
+      bg-white
+      hover:bg-slate-100 
+      hover:cursor-pointer
+      outline-0	
+      active:bg-slate-200
+      active:ring-2
+      active:ring-offset-2
+      active:ring-blue-700
+      focus:bg-slate-200
+      focus:ring-2
+      focus:ring-offset-2
+      focus:ring-blue-700
+      group-active:ring-2
+      group-active:ring-offset-2
+      group-active:ring-blue-700;
+  }
+
+  &--invalid {
+    @apply border-red-600
+      active:ring-red-700
+      focus:ring-red-700
+      group-focus:ring-2
+      group-focus:ring-offset-2;
+  }
+
+  &--disabled {
+    @apply bg-slate-400 
+      border-slate-300 
+      cursor-not-allowed
+      group-hover:bg-slate-400
+      group-focus:bg-slate-400
+      hover:bg-slate-400
+      focus:bg-slate-400
+      active:bg-slate-400
+      focus:ring-0
+      focus:ring-offset-0
+      group-active:ring-0
+      group-active:ring-offset-0;
+  }
+
+  &--disabled.tu-radioitem--checked {
+    @apply bg-white;
+  }
+
+
+  &__label-container {
+    @apply gap-y-1
+      grid;
+  }
+
+  &__description {
+    @apply text-sm	
+      font-normal
+      text-slate-500	
+      text-left
+      whitespace-nowrap
+      text-ellipsis	
+      overflow-hidden;
+
+    &--disabled {
+      @apply text-slate-400
+        hover:text-slate-400
+        group-hover:text-slate-400;
+    }
+  }
 }
 
 .tu-textarea {
@@ -199,15 +358,13 @@
 
   &__wrapper {
     @apply flex
-      items-center
-      p-0.5;
+      gap-2;
   }
 
-  &__container {
-    @apply inline-block
-      items-center
+  &__input-container {
+    @apply flex
+      self-start
       w-fit	
-      mr-2
       active:shadow
       rounded-full
       cursor-pointer
@@ -216,8 +373,10 @@
       focus-within:ring-blue-700;
   }
 
-  &--align-bottom {
-    @apply mb-7;
+  &__input {
+    @apply absolute
+      opacity-0
+      -z-10;
   }
 
   &__switch-container {
@@ -288,47 +447,24 @@
     @apply bg-slate-400;
   }
 
-  &__input {
-    @apply absolute
-      opacity-0
-      -z-10;
-  }
-
-  &__label {
-    @apply hover:cursor-pointer
-      text-base
-      text-slate-900	
-      max-w-[250px]
-      whitespace-nowrap
-      overflow-hidden
-      text-ellipsis;
-
-    &--disabled {
-      @apply text-slate-400
-        group-hover:text-slate-400 
-        group-active:text-slate-400;
-    }
-  }
-
-  &--align-label {
-    @apply inline-block;
+  &__label-container {
+    @apply gap-y-1
+      grid;
   }
 
   &__description {
     @apply text-sm	
       font-normal
-      font-sans
       text-slate-500	
-      inline-block
-      max-w-[150px]
+      text-left
       whitespace-nowrap
-      overflow-hidden
-      text-ellipsis;
+      text-ellipsis	
+      overflow-hidden;
 
     &--disabled {
       @apply text-slate-400
-        group-hover:text-slate-400 
-        group-active:text-slate-400;
+        hover:text-slate-400
+        group-hover:text-slate-400;
     }
   }
 }

package/index.js

@@ -115,7 +115,7 @@ const Spinner = ({
   containerClassName,
   dataTestId
 }) => {
-  return jsx(Container$a, Object.assign({
+  return jsx(Container$9, Object.assign({
     "$mode": mode,
     "$centered": centered,
     className: containerClassName
@@ -151,7 +151,7 @@ const StyledSpinner$1 = tw.span`
   ${p => p.$mode === "dark" ? tws`tu-spinner--dark` : null}
   ${getSpinnerStyles()}
 `;
-const Container$a = tw.div`
+const Container$9 = tw.div`
   tu-spinner--container
   ${p => p.$centered ? tws`tu-spinner--container-centered` : null}
 `;
@@ -287,12 +287,20 @@ const IconButton = React.forwardRef((_a, ref) => {
     disabled: disabled || loading,
     ref: ref
   }, rest, {
-    children: loading ? jsx(Spinner, {}) : icon
+    children: jsx(IconContainer$2, {
+      children: loading ? jsx(Spinner, {
+        size: size
+      }) : icon
+    })
   }));
 });
 const StyledButton = tw(Button)`
   ${p => p.$circular ? tws`tu-button--rounded` : null}
 `;
+const IconContainer$2 = tw.div`
+  tu-button__container
+  ${p => p.$size === "small" ? tws`tu-button__container--small` : null}
+`;
 
 /**
  * ? A collection of all the types and tokens related to the named colors in the default theme.
@@ -465,6 +473,69 @@ const Root$3 = tw.span`
 }}
 `;
 
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+
+const ActionButton = ({
+  type,
+  value
+}) => {
+  const getIconName = () => {
+    switch (type) {
+      case "PHONE_NUMBER":
+        return "PhoneOutgoingIcon";
+
+      case "WEB_ADDRESS":
+        return "ExternalLinkIcon";
+
+      case "EMAIL":
+      default:
+        return "MailIcon";
+    }
+  };
+
+  const ButtonAction = () => {
+    switch (type) {
+      case "EMAIL":
+        return window.open(`mailto:${value}`);
+
+      case "WEB_ADDRESS":
+        if (value) {
+          return window.open(value, "_blank", "noopener,noreferrer");
+        }
+
+        return null;
+
+      case "PHONE_NUMBER":
+      default:
+        return window.open(`tel:${value}`);
+    }
+  };
+
+  return jsx(ActionContainer, {
+    children: jsx(StyledIconButton, {
+      dataTestId: "testIconButtonId",
+      size: "small",
+      intent: "tertiary",
+      icon: jsx(Icon$1, {
+        size: "small",
+        name: getIconName()
+      }),
+      onClick: ButtonAction
+    })
+  });
+};
+const ActionContainer = tw.div`
+  tu-action-container
+`;
+const StyledIconButton = tw(IconButton)`
+  tu-action-button
+`;
+
 /**
  * The StarButton component is used for favorite actions or similar.
  *
@@ -683,7 +754,7 @@ const Alert = ({
       ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
     }
   }, [ref, autoScroll]);
-  return jsxs(Container$9, Object.assign({
+  return jsxs(Container$8, Object.assign({
     "$intent": intent,
     className: className,
     "data-testid": dataTestId,
@@ -771,7 +842,7 @@ const getBackgroundColor = () => ({
   return colors[$intent];
 };
 
-const Container$9 = tw.div`
+const Container$8 = tw.div`
   tu-alert
   ${p => p.$inline ? tws`tu-alert--inline` : null}
   ${getBackgroundColor()}
@@ -900,7 +971,7 @@ const BaseInput = React.forwardRef((_a, ref) => {
   } = _a,
       rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize"]);
 
-  return jsxs(InputContainer, Object.assign({
+  return jsxs(InputContainer$1, Object.assign({
     "$fieldSize": fieldSize,
     "$invalid": isInvalid,
     "$disabled": rest.disabled || rest.readOnly,
@@ -942,7 +1013,7 @@ const AddonBefore = tw.div`
 const AddonAfter = tw.div`
   tu-input__addon-after
 `;
-const InputContainer = tw.div`
+const InputContainer$1 = tw.div`
   tu-input
   ${({
   $invalid
@@ -1259,7 +1330,7 @@ const CardHeader = ({
     className: className,
     "$density": density
   }, {
-    children: jsxs(Container$8, {
+    children: jsxs(Container$7, {
       children: [jsxs("div", {
         children: [jsxs(HeadingContainer, {
           children: [jsx(Heading, Object.assign({
@@ -1289,7 +1360,7 @@ const CardHeader = ({
 const BottomBorderedDensityContainer = tw(DensityContainer)`
   tu-card__header-density-container
 `;
-const Container$8 = tw.div`
+const Container$7 = tw.div`
   tu-card__header
 `;
 const HeadingContainer = tw.div`
@@ -1404,6 +1475,44 @@ const ChartContainer = tw.div`
   tu-chart-container
 `;
 
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+
+const Label$3 = ({
+  id,
+  htmlFor,
+  children,
+  className,
+  dataTestId,
+  disabled,
+  isInvalid
+}) => {
+  return jsx(Root$2, Object.assign({
+    id: id || "",
+    htmlFor: htmlFor || "",
+    className: className,
+    "data-testid": dataTestId,
+    "$disabled": disabled,
+    "$isInvalid": isInvalid
+  }, {
+    children: children
+  }));
+};
+const Root$2 = tw.label`
+tu-label
+${({
+  $disabled
+}) => $disabled && tws`tu-label--disabled`}
+${({
+  $isInvalid
+}) => $isInvalid && tws`tu-label--invalid`}
+`;
+
 /**
  * The CheckIcon component is used by the checkbox to display the checked state.
  *
@@ -1518,35 +1627,31 @@ const Checkbox = React.forwardRef((_a, ref) => {
     }, rest, {
       ref: ref
     })), jsx(CheckboxWrapper, Object.assign({
+      id: uuid,
       "$disabled": isReadonly,
       "$checked": checked,
       "$indeterminate": indeterminate,
       "$isInvalid": isReadonly ? false : isInvalid,
-      className: className,
       tabIndex: isReadonly ? -1 : tabIndex,
       onKeyPress: onKeyPress
     }, {
       children: icon
-    })), label && jsx(Label$6, Object.assign({
-      ref: internalRef,
+    })), label && jsx(Label$3, Object.assign({
       htmlFor: uuid,
-      "$disabled": isReadonly,
-      "$isInvalid": isReadonly ? false : isInvalid,
-      "data-testid": dataTestId ? `${dataTestId}Label` : ""
+      disabled: isReadonly,
+      isInvalid: isReadonly ? false : isInvalid,
+      dataTestId: `${dataTestId}-Label`
     }, {
       children: label
     })), children]
   }));
 });
-const StyledCheckIcon = tw(CheckIcon)`
-  tu-checkbox--icon
-`;
-const StyledIndeterminateIcon = tw(IndeterminateIcon)`
-  tu-checkbox--icon
-`;
+const StyledCheckIcon = tw(CheckIcon)`tu-checkbox--icon`;
+const StyledIndeterminateIcon = tw(IndeterminateIcon)`tu-checkbox--icon`;
+const CheckboxContainer = tw.label`tu-checkbox--container group`;
+const HiddenInput$1 = tw.input`tu-checkbox--input`;
 const CheckboxWrapper = tw.span`
   tu-checkbox
-  transition
   ${({
   $checked,
   $disabled,
@@ -1561,28 +1666,7 @@ const CheckboxWrapper = tw.span`
   
   ${({
   $isInvalid
-}) => {
-  if ($isInvalid) {
-    return tws`tu-checkbox--invalid`;
-  }
-
-  return tws``;
-}}
-`;
-const HiddenInput$1 = tw.input`
-  tu-checkbox--input
-`;
-const CheckboxContainer = tw.label`
-  tu-checkbox--container group
-`;
-const Label$6 = tw.label`
-tu-checkbox__label
-${({
-  $disabled
-}) => $disabled ? tws`tu-checkbox-item--disabled` : null}
-${({
-  $isInvalid
-}) => $isInvalid ? tws`tu-checkbox--invalid` : null}
+}) => $isInvalid && tws`tu-checkbox--invalid`}
 `;
 
 /**
@@ -1619,7 +1703,7 @@ const Collapse = ({
       "aria-controls": id,
       onClick: handleClick
     }, {
-      children: jsxs(LabelContainer, {
+      children: jsxs(LabelContainer$2, {
         children: [jsx(Text, Object.assign({
           weight: "bold"
         }, {
@@ -1653,7 +1737,7 @@ const StyledCollapse = tw.div`
 const CollapseLabel = tw.div`
   tu-collapse__label
 `;
-const LabelContainer = tw.div`
+const LabelContainer$2 = tw.div`
   tu-collapse__label__container
 `;
 
@@ -2087,34 +2171,6 @@ const RemoveValueContainer = tw.div`
 tu-date__remove
   `;
 
-/**
- * The Label component is used for labels for input fields.
- * This component is **not used directly**, but is part of the FormGroup and Field components.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-
-const Label$5 = ({
-  id,
-  htmlFor,
-  children,
-  className,
-  dataTestId
-}) => {
-  return jsx(Root$2, Object.assign({
-    className: className,
-    id: id,
-    "data-testid": dataTestId,
-    htmlFor: htmlFor
-  }, {
-    children: children
-  }));
-};
-const Root$2 = tw.label`
-  tu-label
-`;
-
 /**
  * The PopoverListItem component.
  *
@@ -2191,7 +2247,7 @@ const PopoverTitle = ({
   className,
   dataTestId
 }) => {
-  return jsxs(Container$7, Object.assign({
+  return jsxs(Container$6, Object.assign({
     "$divider": divider,
     className: className,
     "data-testid": dataTestId
@@ -2207,7 +2263,7 @@ const PopoverTitle = ({
     })), action]
   }));
 };
-const Container$7 = tw.div`
+const Container$6 = tw.div`
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
@@ -2256,7 +2312,7 @@ const Tooltip = ({
       "data-testid": dataTestId && `${dataTestId}-parent`
     }, {
       children: children
-    })), !disabled && jsx(Container$6, Object.assign({
+    })), !disabled && jsx(Container$5, Object.assign({
       ref: popoverRef,
       onRequestClose: onHide,
       enterDelay: 450
@@ -2280,7 +2336,7 @@ const Tooltip = ({
 const Flex$1 = tw.div`
   inline-flex
 `;
-const Container$6 = tw(AnimatedPopover)`
+const Container$5 = tw(AnimatedPopover)`
   tu-tooltip__container
 `;
 const Content = tw.div`
@@ -2350,7 +2406,7 @@ const FormGroup = ({
     "data-testid": dataTestId
   }, {
     children: [jsxs(ContainerBefore, {
-      children: [jsx(Label$5, Object.assign({
+      children: [jsx(Label$3, Object.assign({
         "data-testid": `${dataTestId}-label`
       }, {
         children: label
@@ -2566,7 +2622,7 @@ const Indicator$1 = _a => {
   } = _a,
       rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground"]);
 
-  return jsxs(Container$5, Object.assign({
+  return jsxs(Container$4, Object.assign({
     "$color": color,
     "data-testid": dataTestId
   }, rest, {
@@ -2575,14 +2631,14 @@ const Indicator$1 = _a => {
       "$withBackground": withBackground
     }, {
       children: icon
-    })), label !== undefined && jsx(Label$4, Object.assign({
+    })), label !== undefined && jsx(Label$2, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
     }, {
       children: label
     }))]
   }));
 };
-const Container$5 = tw.div`
+const Container$4 = tw.div`
  tu-indicator
  ${({
   $color
@@ -2644,7 +2700,7 @@ const IconBackground = tw.div`
   return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
 `;
-const Label$4 = tw.div`
+const Label$2 = tw.div`
   tu-indicator__label
 `;
 
@@ -2676,7 +2732,7 @@ const LegendItem = ({
       style: {
         backgroundColor: color
       }
-    }), jsx(Label$3, {
+    }), jsx(Label$1, {
       children: label
     })]
   }));
@@ -2699,7 +2755,7 @@ const Indicator = tw.span`
   rounded-[50%]
   mr-2
 `;
-const Label$3 = tw.span`
+const Label$1 = tw.span`
   text-sm
 `;
 
@@ -2712,7 +2768,8 @@ const Label$3 = tw.span`
 
 const MenuButton = ({
   onClick,
-  className
+  className,
+  dataTestId
 }) => {
   return jsx(MobileIconButton, {
     icon: jsx(Icon$1, {
@@ -2722,7 +2779,8 @@ const MenuButton = ({
     size: "small",
     circular: true,
     onClick: onClick,
-    className: className
+    className: className,
+    "data-testid": dataTestId
   });
 };
 const MobileIconButton = tw(IconButton)`
@@ -2759,7 +2817,7 @@ const MenuItem = ({
     className,
     dataTestId
   });
-  return jsxs(Container$4, Object.assign({}, containerProps, {
+  return jsxs(Container$3, Object.assign({}, containerProps, {
     onClick: e => {
       e.stopPropagation();
       onClick && onClick(e);
@@ -2770,21 +2828,23 @@ const MenuItem = ({
     "$disabled": disabled
   }, {
     children: [prefix && jsx(Prefix, Object.assign({
-      "$selected": selected
+      "$selected": selected,
+      "data-testid": `${dataTestId}-prefix`
     }, {
       children: prefix
-    })), jsx(Label$2, Object.assign({
-      "data-testid": dataTestId + "-label"
+    })), jsx(Label, Object.assign({
+      "data-testid": `${dataTestId}-label`
     }, {
       children: label
     })), icon && jsx(Icon, Object.assign({
-      "$selected": selected
+      "$selected": selected,
+      "data-testid": `${dataTestId}-icon`
     }, {
       children: icon
     }))]
   }));
 };
-const Container$4 = tw.div`
+const Container$3 = tw.div`
   group tu-menu-item
   ${({
   $selected
@@ -2809,7 +2869,7 @@ const Prefix = tw.div`
   $selected
 }) => $selected ? tws`tu-menu-item__prefix--selected ` : ""}
 `;
-const Label$2 = tw.div`
+const Label = tw.div`
   tu-menu-item__label
 `;
 
@@ -2835,7 +2895,7 @@ const MenuList = _a => {
     dataTestId
   }, args));
   return jsx(Wrapper, {
-    children: jsx(Container$3, Object.assign({}, containerProps, {
+    children: jsx(Container$2, Object.assign({}, containerProps, {
       style: width ? {
         width
       } : undefined,
@@ -2857,7 +2917,7 @@ const MenuList = _a => {
 const Wrapper = tw.div`
   tu-menu-list__wrapper
 `;
-const Container$3 = tw.div`
+const Container$2 = tw.div`
   tu-menu-list
 `;
 const Divider = tw.div`
@@ -3420,65 +3480,58 @@ const RadioItem = ({
   const groupCtx = React.useContext(RadioGroupContext);
   const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
   const uuid = v4();
-  return jsxs(CustomFlex, Object.assign({
-    className: className
+  return jsxs(InputWrapper, Object.assign({
+    className: className,
+    htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`,
+    "data-testid": `${dataTestId}-Wrapper`
   }, {
-    children: [jsxs(InputWrapper, {
-      children: [jsx(Input, {
-        id: uuid,
-        type: "radio",
-        value: value,
-        checked: isChecked,
-        "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-        "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
-        onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
-        "data-testid": dataTestId,
-        "$checked": isChecked
-      }), jsx(Label$1, Object.assign({
-        htmlFor: uuid,
-        "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-        "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
+    children: [jsx(Input, {
+      id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`,
+      type: "radio",
+      value: value,
+      checked: isChecked,
+      "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+      "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
+      onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
+      "data-testid": dataTestId,
+      "$checked": isChecked
+    }), jsxs(LabelContainer$1, {
+      children: [jsx(Label$3, Object.assign({
+        htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`,
+        dataTestId: `${dataTestId}-Label`,
+        disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+        isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
       }, {
         children: label
+      })), description && jsx(Description$1, Object.assign({
+        htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${uuid}`,
+        "data-testid": `${dataTestId}-Description`,
+        "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled
+      }, {
+        children: description
       }))]
-    }), description && jsx(Description$1, Object.assign({
-      htmlFor: uuid,
-      "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-      "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
-    }, {
-      children: description
-    }))]
+    })]
   }));
 };
-const CustomFlex = tw.div`
-tu-radioitem__custom-flex
-`;
-const InputWrapper = tw.div`
-tu-radioitem__wrapper
-`;
+const InputWrapper = tw.label`tu-radioitem__wrapper`;
 const Input = tw.input`
 tu-radioitem
 ${({
   $checked
-}) => $checked ? tws`tu-radioitem--checked` : tws``}
+}) => $checked && tws`tu-radioitem--checked`}
 ${({
   $disabled
-}) => $disabled ? tws`tu-radioitem--disabled` : tws``}
+}) => $disabled && tws`tu-radioitem--disabled`}
 ${({
   $isInvalid
-}) => $isInvalid ? tws`tu-radioitem--invalid` : tws``}
-`;
-const Label$1 = tw.label`
-tu-radioitem__label
-${({
-  $isInvalid
-}) => $isInvalid ? tws`tu-radioitem__label--invalid` : tws``}
-${({
-  $disabled
-}) => $disabled ? tws`tu-radioitem__label--disabled` : tws``}
+}) => $isInvalid && tws`tu-radioitem--invalid`}
 `;
+const LabelContainer$1 = tw.div`tu-radioitem__label-container`;
 const Description$1 = tw.label`
 tu-radioitem__description
+${({
+  $disabled
+}) => $disabled && tws`tu-radioitem__description--disabled`}
 `;
 
 /**
@@ -3500,12 +3553,12 @@ const SelectContainer$1 = ({
   dataTestId,
   isDisabled
 }) => {
-  return jsxs(Container$2, Object.assign({
+  return jsxs(Container$1, Object.assign({
     "data-testid": dataTestId,
     "$hasError": hasError,
     "$isDisabled": isDisabled
   }, {
-    children: [label && !hideLabel && jsx(Label$5, Object.assign({
+    children: [label && !hideLabel && jsx(Label$3, Object.assign({
       htmlFor: id
     }, {
       children: label
@@ -3517,7 +3570,7 @@ const SelectContainer$1 = ({
     }))]
   }));
 };
-const Container$2 = tw.label`
+const Container$1 = tw.label`
   tu-select__container 
   tu-select
   ${({
@@ -3597,7 +3650,8 @@ const SingleSelectMenuItem = ({
   onClick,
   selected,
   dataTestId,
-  focused
+  focused,
+  disabled
 }) => {
   return jsx(MenuItem, {
     dataTestId: dataTestId,
@@ -3605,6 +3659,7 @@ const SingleSelectMenuItem = ({
     prefix: icon,
     onClick: onClick,
     selected: selected,
+    disabled: disabled,
     focused: focused,
     icon: selected ? jsx(Icon$1, {
       name: "CheckIcon",
@@ -3775,7 +3830,7 @@ const TagsContainer = ({
 
     return null;
   }).filter(element => element !== null);
-  return jsxs(Container$1, Object.assign({
+  return jsxs(Container, Object.assign({
     style: {
       width: `${width}`
     },
@@ -3785,7 +3840,7 @@ const TagsContainer = ({
     children: [renderedElements, postFix]
   }));
 };
-const Container$1 = tw.div`
+const Container = tw.div`
 tu-select__dynamic-tag--container
 ${({
   $ready
@@ -3886,7 +3941,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
         });
       },
       DropdownIndicator: props => {
-        return jsx(components.DropdownIndicator, Object.assign({}, props, {
+        return props.selectProps.isLoading ? null : jsx(components.DropdownIndicator, Object.assign({}, props, {
           children: jsx(StyledIcon, {
             children: dropdownIcon ? dropdownIcon : menuIsClosing ? jsx(Icon$1, {
               name: "ChevronDownIcon",
@@ -3937,15 +3992,6 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
           className: menuIsClosing ? tws`tu-menu-list animate-fade-out-fast` : tws`tu-menu-list animate-fade-in-fast`
         }));
       },
-      MenuList: props => {
-        return jsx(components.MenuList, Object.assign({}, props, {
-          children: jsx(Container, Object.assign({
-            "$disabled": disabled
-          }, {
-            children: props.children
-          }))
-        }));
-      },
       Option: props => {
         const componentProps = {
           label: props.label,
@@ -3962,6 +4008,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
             disabled: disabled,
             dataTestId: props.label
           })) : jsx(SingleSelectMenuItem, Object.assign({}, componentProps, {
+            disabled: disabled,
             dataTestId: props.label
           }))
         }));
@@ -3971,14 +4018,6 @@ const useCustomComponents = (componentsProps, disabled, menuIsClosing, refMenuIs
 
   return customComponents;
 };
-const Container = tw.div`
-  tu-select__menu
-  ${({
-  $disabled
-}) => {
-  return $disabled ? tws`pointer-events-none` : "";
-}}
-`;
 const StyledIcon = tw.div`
 tu-select--icon
 `;
@@ -4042,6 +4081,10 @@ const useCustomStyles = (refContainer, refPrefix, maxSelectedDisplayCount, style
       }),
       menuList: base => {
         return Object.assign(Object.assign({}, base), {
+          position: "relative",
+          padding: "var(--spacing-1)",
+          display: "grid",
+          gap: "var(--spacing-1)",
           width: "100%",
           borderRadius: "0px",
           boxShadow: "none",
@@ -4720,9 +4763,8 @@ const Toggle = React.forwardRef(({
   description = ""
 }, ref) => {
   return jsxs(ToggleWrapper, {
-    children: [jsxs(ToggleContainer, Object.assign({
-      htmlFor: id,
-      "$description": description
+    children: [jsxs(InputContainer, Object.assign({
+      htmlFor: id
     }, {
       children: [jsx(HiddenInput, {
         name: name,
@@ -4745,8 +4787,7 @@ const Toggle = React.forwardRef(({
         "$toggled": toggled,
         htmlFor: id,
         "$disabled": disabled,
-        "$size": size,
-        className: className
+        "$size": size
       }, {
         children: jsx(Switch, {
           "$toggled": toggled,
@@ -4754,19 +4795,17 @@ const Toggle = React.forwardRef(({
           "data-testid": `${dataTestId}-Switch`
         })
       }))]
-    })), jsxs("div", {
-      children: [jsx(Label, Object.assign({
-        "$disabled": disabled,
-        title: name,
-        "$description": description,
+    })), jsxs(LabelContainer, {
+      children: [jsx(Label$3, Object.assign({
         htmlFor: id,
-        "data-testid": `${dataTestId}-Label`
+        dataTestId: `${dataTestId}-Label`,
+        disabled: disabled
       }, {
         children: name
-      })), jsx("br", {}), description && jsx(Description, Object.assign({
-        "$disabled": disabled,
-        title: description,
-        "data-testid": `${dataTestId}-Description`
+      })), description && jsx(Description, Object.assign({
+        htmlFor: id,
+        "data-testid": `${dataTestId}-Description`,
+        "$disabled": disabled
       }, {
         children: description
       }))]
@@ -4775,11 +4814,7 @@ const Toggle = React.forwardRef(({
 });
 Toggle.displayName = "Toggle";
 const ToggleWrapper = tw.div`tu-toggle__wrapper`;
-const ToggleContainer = tw.label`
-tu-toggle__container
-${({
-  $description
-}) => $description && tws`tu-toggle--align-bottom`}`;
+const InputContainer = tw.label`tu-toggle__input-container `;
 const HiddenInput = tw.input`tu-toggle__input`;
 const Switch = tw.label`
   ${({
@@ -4796,14 +4831,7 @@ tu-toggle__switch-container
   ${({
   $toggled
 }) => $toggled && tws`tu-toggle--toggled`}`;
-const Label = tw.label`
-tu-toggle__label
-${({
-  $disabled
-}) => $disabled && tws`tu-toggle__label--disabled`}
-${({
-  $description
-}) => $description && tws`tu-toggle--align-label`}`;
+const LabelContainer = tw.div`tu-toggle__label-container`;
 const Description = tw.label`
 tu-toggle__description
 ${({
@@ -5174,4 +5202,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, intentColors, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$3 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, intentColors, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.126",
+  "version": "0.0.130",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {