@trackunit/react-components 0.0.83-alpha-9c24ee877.0 → 0.0.89

package/common/LegacyComponentStory.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Default story for legacy components.
+ *
+ *@returns {JSX.Element} Legacy Component Story
+ */
+export declare const LegacyComponentStory: () => JSX.Element;

package/components/Badge/Badge.d.ts

@@ -1,8 +1,7 @@
-import * as React from "react";
+/// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "default" | "large";
-declare type BadgeVariant = "badge" | "pill";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
@@ -13,12 +12,6 @@ interface BaseBadgeProps extends CommonProps {
      * Subtle badges have a light background color wither a darker text color.
      */
     subtle?: boolean;
-    /**
-     * Whether badge should be displayed as a pill or badge.
-     * For the pill variant, numeric values above 99 will be displayed as 99+.
-     * Badge is subtle by default.
-     */
-    variant?: BadgeVariant;
     /**
      * Custom classNames can be added to make adjustments where needed.
      * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
@@ -26,9 +19,18 @@ interface BaseBadgeProps extends CommonProps {
      */
     className?: string;
     /**
-     * Child nodes of the Badge.
+     * The count to be displayed on the badge.
+     */
+    count?: number;
+    /**
+     * The max value to be displayed in the badge.
+     * Any value above this will be appended with a +.
      */
-    children?: React.ReactNode;
+    max?: number;
+    /**
+     * If enabled the badge is shown even if the count is 0.
+     */
+    hideZero?: boolean;
     /**
      * Size of the badge.
      */
@@ -36,14 +38,10 @@ interface BaseBadgeProps extends CommonProps {
 }
 export declare type BadgeProps = BaseBadgeProps;
 /**
- * The Badge component us used to display states or similar short informative text.
- *
- * _**Do use** badges to show highlighted text based on the state._
- *
- * _**Do not use** badges for regular text in places where it makes no sense to use highlighted text._
+ * The Badge component is used to display a notification badge with an optional number value.
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-export declare const Badge: ({ color, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ color, subtle, className, count, max, hideZero, dataTestId, size, ...rest }: BadgeProps) => JSX.Element | null;
 export {};

package/components/Heading/Heading.d.ts

@@ -20,7 +20,7 @@ export interface HeadingProps extends CommonProps {
     subtle?: boolean;
 }
 /**
- * The Heading component should be used for Headings.
+ * The Heading is used for a heading of a section (h1,h2,h3,h4).
  *
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component

package/components/PageHeading/PageHeading.d.ts

@@ -12,7 +12,7 @@ interface PageHeadingProps {
      * Test id to be used for the component.
      */
     dataTestId?: string;
-    badge?: string;
+    tag?: string;
 }
 /**
  * The PageHeading component used on pages.
@@ -20,5 +20,5 @@ interface PageHeadingProps {
  * @param {PageHeadingProps} props - The props for the PageHeading component
  * @returns {JSX.Element} PageHeading component
  */
-export declare const PageHeading: ({ title, subtitle, dataTestId, badge }: PageHeadingProps) => JSX.Element;
+export declare const PageHeading: ({ title, subtitle, dataTestId, tag }: PageHeadingProps) => JSX.Element;
 export {};

package/components/Select/Select/TagWithWidth.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TagProps } from "../../Tag";
+declare type TagsPropsNoRef = Omit<TagProps, "ref">;
+interface TagWithWidthProps extends TagsPropsNoRef {
+    onWidthKnown?: ({ width }: {
+        width: number;
+    }) => void;
+}
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+export declare const TagWithWidth: ({ onWidthKnown, children, ...rest }: TagWithWidthProps) => JSX.Element;
+export {};

package/components/SkeletonLines/SkeletonLines.d.ts

@@ -10,17 +10,16 @@ export interface SkeletonLinesProps extends CommonProps {
      */
     height?: number | number[] | string;
     /**
-     * The width of each lines. Can be a number or an array of numbers or string.
+     * The width of each line. Can be a number or an array of numbers or string.
      */
     width?: number | number[] | string;
     /**
      * Margin of lines.
      */
     margin?: string;
-    /**
-     * Additional CSS classes.
-     */
-    className?: string;
 }
+/**
+ * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ */
 export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
 export default SkeletonLines;

package/components/Spacer/Spacer.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from "../../common";
 interface SpacerProps extends CommonProps {
     /**
      * The minimum height of the spacer. Defaults to 1px.
-     * Possible values are "normal"(8px), and "large" (32px). Use className prop to use custom min-height values, example: min-h-[100px].
+     * Possible values are "normal"(8px), and "large" (32px).
      */
     minHeight?: string;
     /**

package/components/Tag/Tag.d.ts

@@ -2,25 +2,18 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export declare type TagSize = "default" | "small";
-interface TagProps extends CommonProps {
+export interface TagProps extends CommonProps {
     /**
-     * The color of the tag
+     * The color of the tag.
      *
      */
     color?: Colors;
     /**
-     * A handler for a click event triggered on x icon
-     * if not passed then x icon won't be visible
+     * A handler for a click event triggered on X icon.
+     * If not passed then x icon won't be visible.
      *
      */
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * Custom classNames can be added to make adjustments where needed.
-     * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
-     * This will make the badge truncate the text if it is too long.
-     *
-     */
-    className?: string;
     /**
      * Child nodes of the tag.
      *
@@ -28,20 +21,17 @@ interface TagProps extends CommonProps {
     children?: React.ReactNode;
     /**
      * Size of the tag.
-     *
      */
     size?: TagSize;
-    onWidthKnown?: ({ width }: {
-        width: number;
-    }) => void;
 }
 /**
  * Tags allow users to enter information and filter content.
+ *
  * Multiple or single tags can be used to categorise items.
+ *
  * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
  *
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
  */
-export declare const Tag: ({ className, dataTestId, children, size, onClose, color, onWidthKnown, ...rest }: TagProps) => JSX.Element;
-export {};
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;

package/components/Toggle/Toggle.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
+import "./Toggle.css";
 export declare type ToggleSize = "small" | "default";
 export interface ToggleProps extends CommonProps {
     /**
@@ -34,9 +35,23 @@ export interface ToggleProps extends CommonProps {
      * Name of the toggle.
      */
     name?: string;
+    /**
+     * The description of the toggle.
+     */
+    description?: string;
     /**
      * onBlur event handler.
      */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/index.css

@@ -162,3 +162,148 @@
       disabled:hover:bg-transparent;
   }
 }
+
+/* CSS related to the toggle component */
+.tu-toggle {
+  @apply rounded-full
+    bg-white
+    h-full
+    aspect-square
+    translate-x-0
+    transition-all;
+
+  &__wrapper {
+    @apply flex
+      items-center
+      p-0.5;
+  }
+
+  &__container {
+    @apply inline-block
+      items-center
+      w-fit	
+      mr-2
+      active:shadow
+      rounded-full
+      cursor-pointer
+      focus-within:ring
+      focus-within:ring-offset-2
+      focus-within:ring-blue-700;
+  }
+
+  &--align-bottom {
+    @apply mb-7;
+  }
+
+  &__switch-container {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      rounded-full
+      bg-slate-300
+      focus:bg-slate-400
+      hover:bg-slate-400
+      active:bg-slate-500;
+  }
+
+  &__switch {
+    @apply bg-white
+      rounded-full
+      h-full
+      w-5/12		
+      aspect-square
+      translate-x-4
+      transition-all;
+  }
+
+  &--default {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      w-9
+      h-5;
+  }
+
+  &--small {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      w-8
+      h-4;
+
+    .tu-toggle__switch {
+      @apply w-4/12;
+    }
+  }
+
+  &--toggled {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      bg-blue-600
+      focus:bg-blue-700
+      hover:bg-blue-700
+      active:bg-blue-800;
+  }
+
+  &--disabled {
+    @apply flex
+      items-center
+      p-1
+      cursor-not-allowed
+      pointer-events-none
+      bg-slate-200;
+  }
+
+  &--disabled.tu-toggle--toggled {
+    @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;
+  }
+
+  &__description {
+    @apply text-sm	
+      font-normal
+      font-sans
+      text-slate-500	
+      inline-block
+      max-w-[150px]
+      whitespace-nowrap
+      overflow-hidden
+      text-ellipsis;
+
+    &--disabled {
+      @apply text-slate-400
+        group-hover:text-slate-400 
+        group-active:text-slate-400;
+    }
+  }
+}

package/index.js

@@ -650,7 +650,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$2, Object.assign({
+    })), children && jsx(Description$3, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -661,7 +661,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$2, Object.assign({
+    })), children && jsx(Description$3, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -750,7 +750,7 @@ const Container$7 = tw.div`
 const Content$1 = tw.div`
   ${p => p.$inline ? tws`tu-alert__content--inline` : tws`tu-alert__content`}
 `;
-const Description$2 = tw(Text)`
+const Description$3 = tw(Text)`
   ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
 const RightAligned = tw.div`
@@ -763,11 +763,7 @@ const IconContainer$1 = tw.div`
 `;
 
 /**
- * The Badge component us used to display states or similar short informative text.
- *
- * _**Do use** badges to show highlighted text based on the state._
- *
- * _**Do not use** badges for regular text in places where it makes no sense to use highlighted text._
+ * The Badge component is used to display a notification badge with an optional number value.
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
@@ -778,30 +774,34 @@ const Badge = _a => {
     color = "neutral",
     subtle = false,
     className,
-    variant = "pill",
+    count,
+    max,
+    hideZero = false,
     dataTestId,
-    children,
     size = "default"
   } = _a;
-      __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+      __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId", "size"]);
 
-  const isPill = variant === "pill";
+  if (hideZero && count === 0) {
+    return null;
+  }
+
+  const displayedCount = count && max ? count > max ? `${max}+` : count : count;
   return jsx(StyledText$3, Object.assign({
-    "$variant": variant,
     className: className,
     "$color": color,
     "$size": size,
-    "$subtle": subtle ? subtle : isPill,
+    "$subtle": subtle,
+    "$count": count,
     "data-testid": dataTestId,
     "$as": "span"
   }, {
-    children: isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children
+    children: displayedCount
   }));
 };
 
 const getSizeModifierClass$1 = () => ({
-  $size,
-  $variant
+  $size
 }) => {
   const sizeModifierClass = {
     large: tws`tu-badge--large`,
@@ -821,7 +821,7 @@ const getBadgeModifierClass = () => ({
     danger: $subtle ? tws`tu-badge--danger-subtle` : tws`tu-badge--danger`,
     warning: $subtle ? tws`tu-badge--warning-subtle` : tws`tu-badge--warning`,
     info: $subtle ? tws`tu-badge--info-subtle` : tws`tu-badge--info`,
-    neutral: $subtle ? tws`tu-badge--neutral-subtle` : tws`badge--neutral`,
+    neutral: $subtle ? tws`tu-badge--neutral-subtle` : tws`tu-badge--neutral`,
     good: $subtle ? tws`tu-badge--good-subtle` : tws`tu-badge--good`,
     low: $subtle ? tws`tu-badge--low-subtle` : tws`tu-badge--low`,
     critical: $subtle ? tws`tu-badge--critical-subtle` : tws`tu-badge--critical`,
@@ -834,18 +834,10 @@ const getBadgeModifierClass = () => ({
 };
 
 const StyledText$3 = tw.text`
-  ${p => {
-  switch (p.$variant) {
-    case "badge":
-      return tws`tu-badge`;
-
-    case "pill":
-      return tws`tu-badge--pill`;
-
-    default:
-      return tws`tu-badge`;
-  }
-}}
+  tu-badge
+  ${({
+  $count
+}) => ($count === null || $count === undefined) && tws`tu-badge--square`}
   ${getBadgeModifierClass()}
   ${getSizeModifierClass$1()}
 `;
@@ -1154,7 +1146,7 @@ justify-end
 `;
 
 /**
- * The Heading component should be used for Headings.
+ * The Heading is used for a heading of a section (h1,h2,h3,h4).
  *
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
@@ -1503,7 +1495,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
       onKeyPress: onKeyPress
     }, {
       children: icon
-    })), label && jsx(Label$5, Object.assign({
+    })), label && jsx(Label$6, Object.assign({
       ref: internalRef,
       htmlFor: uuid,
       "$disabled": isReadonly,
@@ -1551,7 +1543,7 @@ const HiddenInput$1 = tw.input`
 const CheckboxContainer = tw.label`
   tu-checkbox--container group
 `;
-const Label$5 = tw.label`
+const Label$6 = tw.label`
 tu-checkbox__label
 ${({
   $disabled
@@ -2122,7 +2114,7 @@ const StyledText$2 = tw(Text)`
 `;
 const ListItem = tw.li`
   group
-  cursor-pointer
+  ${p => !p.disabled ? "cursor-pointer" : "cursor-not-allowed"}
   whitespace-nowrap
   py-1
   px-2
@@ -2506,7 +2498,7 @@ const Indicator$1 = _a => {
       "$withBackground": withBackground
     }, {
       children: icon
-    })), label !== undefined && jsx(Label$4, Object.assign({
+    })), label !== undefined && jsx(Label$5, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
     }, {
       children: label
@@ -2575,7 +2567,7 @@ const IconBackground = tw.div`
   return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
 `;
-const Label$4 = tw.div`
+const Label$5 = tw.div`
   tu-indicator__label
 `;
 
@@ -2588,7 +2580,7 @@ const Label$4 = tw.div`
  * @returns {JSX.Element} Label component
  */
 
-const Label$3 = ({
+const Label$4 = ({
   id,
   htmlFor,
   label,
@@ -2610,14 +2602,14 @@ const Label$3 = ({
       htmlFor: htmlFor
     }, {
       children: labelElement
-    })), jsx(Description$1, Object.assign({
+    })), jsx(Description$2, Object.assign({
       subtle: true
     }, {
       children: description
     }))]
   });
 };
-const Description$1 = tw(Text)`
+const Description$2 = tw(Text)`
   tu-label
 `;
 
@@ -2649,7 +2641,7 @@ const LegendItem = ({
       style: {
         backgroundColor: color
       }
-    }), jsx(Label$2, {
+    }), jsx(Label$3, {
       children: label
     })]
   }));
@@ -2672,7 +2664,7 @@ const Indicator = tw.span`
   rounded-[50%]
   mr-2
 `;
-const Label$2 = tw.span`
+const Label$3 = tw.span`
   text-sm
 `;
 
@@ -2746,7 +2738,7 @@ const MenuItem = ({
       "$selected": selected
     }, {
       children: prefix
-    })), jsx(Label$1, {
+    })), jsx(Label$2, {
       children: label
     }), icon && jsx(Icon, Object.assign({
       "$selected": selected
@@ -2780,7 +2772,7 @@ const Prefix = tw.div`
   $selected
 }) => $selected ? tws`tu-menu-item__prefix--selected ` : ""}
 `;
-const Label$1 = tw.div`
+const Label$2 = tw.div`
   tu-menu-item__label
 `;
 
@@ -3387,6 +3379,96 @@ ${p => `${p.border ? `tu-spacer--border` : null}`}
 ${GetSpacerHeight()}
 `;
 
+/**
+ * Tags allow users to enter information and filter content.
+ *
+ * Multiple or single tags can be used to categorise items.
+ *
+ * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+
+const Tag = React.forwardRef((_a, ref) => {
+  var {
+    className,
+    dataTestId,
+    children,
+    size = "default",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": dataTestId,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose,
+    ref: ref
+  }, {
+    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
+    jsx(IconContainer, Object.assign({
+      onMouseDown: onClose
+    }, {
+      children: jsx(Icon$1, {
+        name: "XCircleIcon",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          "-webkit-transition": "-webkit-transform 0.150s"
+        },
+        className: size === "default" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
+      })
+    }))]
+  }));
+});
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
+}) => {
+  const tagSizeModifierClass = {
+    default: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
+    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
+  };
+  return tagSizeModifierClass[$size];
+};
+
+const getColorModifierClass = () => ({
+  $color
+}) => {
+  const colorClasses = {
+    primary: tws`tu-tag--primary`,
+    accent: tws`tu-tag--accent`,
+    success: tws`tu-tag--success`,
+    danger: tws`tu-tag--danger`,
+    warning: tws`tu-tag--warning`,
+    info: tws`tu-tag--info`,
+    neutral: tws`tu-tag--neutral`,
+    good: tws`tu-tag--good`,
+    low: tws`tu-tag--low`,
+    critical: tws`tu-tag--critical`,
+    working: tws`tu-tag--working`,
+    idle: tws`tu-tag--idle`,
+    stopped: tws`tu-tag--stopped`,
+    unknown: tws`tu-tag--unknown`
+  };
+  return colorClasses[$color];
+};
+
+const StyledText = tw.text`
+  tu-tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+  tu-tag__icon-container
+`;
+
 /**
  * The PageHeading component used on pages.
  *
@@ -3398,7 +3480,7 @@ const PageHeading = ({
   title,
   subtitle,
   dataTestId,
-  badge
+  tag
 }) => {
   return jsxs("div", Object.assign({
     className: "w-full"
@@ -3411,10 +3493,10 @@ const PageHeading = ({
         dataTestId: dataTestId
       }, {
         children: title
-      })), badge && jsx(Badge, Object.assign({
+      })), tag && jsx(Tag, Object.assign({
         color: "primary"
       }, {
-        children: badge
+        children: tag
       }))]
     }), subtitle && jsx(Heading, Object.assign({
       variant: "subtitle",
@@ -3590,14 +3672,14 @@ const RadioItem = ({
         onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
         "data-testid": dataTestId,
         "$checked": isChecked
-      }), jsx(Label, Object.assign({
+      }), 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: label
       }))]
-    }), description && jsx(Description, Object.assign({
+    }), 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
@@ -3624,7 +3706,7 @@ ${({
   $isInvalid
 }) => $isInvalid ? tws`tu-radioitem--invalid` : tws``}
 `;
-const Label = tw.label`
+const Label$1 = tw.label`
 tu-radioitem__label
 ${({
   $isInvalid
@@ -3633,7 +3715,7 @@ ${({
   $disabled
 }) => $disabled ? tws`tu-radioitem__label--disabled` : tws``}
 `;
-const Description = tw.label`
+const Description$1 = tw.label`
 tu-radioitem__description
 `;
 
@@ -3658,7 +3740,7 @@ const SelectContainer = ({
   return jsxs(Container, Object.assign({
     "data-testid": dataTestId
   }, {
-    children: [label && !hideLabel && jsx(Label$3, {
+    children: [label && !hideLabel && jsx(Label$4, {
       label: label,
       htmlFor: id !== null && id !== void 0 ? id : false,
       description: description
@@ -3898,6 +3980,10 @@ const Select = _a => {
   }));
 };
 
+/**
+ * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ */
+
 const SkeletonLines = memo(({
   margin = "10px 0",
   lines = 1,
@@ -3948,104 +4034,6 @@ const SkeletonLine = tw.div`
   tu-skeleton-line
 `;
 
-/**
- * Tags allow users to enter information and filter content.
- * Multiple or single tags can be used to categorise items.
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
- */
-
-const Tag = _a => {
-  var {
-    className,
-    dataTestId,
-    children,
-    size = "default",
-    onClose,
-    color = "primary",
-    onWidthKnown
-  } = _a;
-      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color", "onWidthKnown"]);
-
-  const ref = React.useRef(null);
-  React.useLayoutEffect(() => {
-    var _a;
-
-    onWidthKnown && onWidthKnown({
-      width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
-    });
-  }, [ref, onWidthKnown]);
-  return jsxs(StyledText, Object.assign({
-    className: className,
-    "$size": size,
-    "data-testid": dataTestId,
-    "$as": "span",
-    "$color": color,
-    "$withXIcon": !!onClose,
-    ref: ref
-  }, {
-    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
-    jsx(IconContainer, Object.assign({
-      onMouseDown: onClose
-    }, {
-      children: jsx(Icon$1, {
-        name: "XCircleIcon",
-        dataTestId: dataTestId + "Icon",
-        type: "solid",
-        style: {
-          "-webkit-transition": "-webkit-transform 0.150s"
-        },
-        className: size === "default" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
-      })
-    }))]
-  }));
-};
-
-const getSizeModifierClass = () => ({
-  $size,
-  $withXIcon
-}) => {
-  const tagSizeModifierClass = {
-    default: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
-    small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
-  };
-  return tagSizeModifierClass[$size];
-};
-
-const getColorModifierClass = () => ({
-  $color
-}) => {
-  const colorClasses = {
-    primary: tws`tu-tag--primary`,
-    accent: tws`tu-tag--accent`,
-    success: tws`tu-tag--success`,
-    danger: tws`tu-tag--danger`,
-    warning: tws`tu-tag--warning`,
-    info: tws`tu-tag--info`,
-    neutral: tws`tu-tag--neutral`,
-    good: tws`tu-tag--good`,
-    low: tws`tu-tag--low`,
-    critical: tws`tu-tag--critical`,
-    working: tws`tu-tag--working`,
-    idle: tws`tu-tag--idle`,
-    stopped: tws`tu-tag--stopped`,
-    unknown: tws`tu-tag--unknown`
-  };
-  return colorClasses[$color];
-};
-
-const StyledText = tw.text`
-  tu-tag
-  ${getSizeModifierClass()}
-  ${getColorModifierClass()}
-`;
-const IconContainer = tw.div`
-flex
-self-center	
-`;
-
 const TextArea = React.forwardRef(({
   id,
   name,
@@ -4074,7 +4062,7 @@ const TextArea = React.forwardRef(({
     className: className,
     "data-testid": dataTestId
   }, {
-    children: [jsx(Label$3, {
+    children: [jsx(Label$4, {
       htmlFor: id !== null && id !== void 0 ? id : false,
       id: id,
       label: label,
@@ -4314,6 +4302,17 @@ const TimelineElement = ({
   }));
 };
 
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
+
 const Toggle = React.forwardRef(({
   toggled = false,
   onChange,
@@ -4325,72 +4324,99 @@ const Toggle = React.forwardRef(({
   className,
   dataTestId,
   onBlur,
-  name
+  name,
+  description = ""
 }, ref) => {
-  return jsxs(React.Fragment, {
-    children: [jsx(HiddenInput, {
-      name: name,
-      type: "checkbox",
-      checked: toggled,
-      disabled: disabled,
-      onChange: e => {
-        e.stopPropagation();
-        onChange(!toggled, e);
-      },
-      id: id,
-      "aria-checked": toggled,
-      role: "checkbox",
-      tabIndex: tabIndex,
-      required: required,
-      ref: ref,
-      "data-testid": dataTestId,
-      onBlur: onBlur
-    }), jsx(SwitchContainer, Object.assign({
-      "$toggled": toggled,
+  return jsxs(ToggleWrapper, {
+    children: [jsxs(ToggleContainer, Object.assign({
       htmlFor: id,
-      "$disabled": disabled,
-      "$size": size,
-      className: className
+      "$description": description
     }, {
-      children: jsx(Switch, {
+      children: [jsx(HiddenInput, {
+        name: name,
+        type: "checkbox",
+        checked: toggled,
+        disabled: disabled,
+        onChange: e => {
+          e.stopPropagation();
+          onChange(!toggled, e);
+        },
+        id: id,
+        "aria-checked": toggled,
+        role: "checkbox",
+        tabIndex: tabIndex,
+        required: required,
+        ref: ref,
+        "data-testid": `${dataTestId}-Input`,
+        onBlur: onBlur
+      }), jsx(SwitchContainer, Object.assign({
         "$toggled": toggled,
-        "$size": size
-      })
-    }))]
+        htmlFor: id,
+        "$disabled": disabled,
+        "$size": size,
+        className: className
+      }, {
+        children: jsx(Switch, {
+          "$toggled": toggled,
+          htmlFor: id,
+          "data-testid": `${dataTestId}-Switch`
+        })
+      }))]
+    })), jsxs("div", {
+      children: [jsx(Label, Object.assign({
+        "$disabled": disabled,
+        title: name,
+        "$description": description,
+        htmlFor: id,
+        "data-testid": `${dataTestId}-Label`
+      }, {
+        children: name
+      })), jsx("br", {}), description && jsx(Description, Object.assign({
+        "$disabled": disabled,
+        title: description,
+        "data-testid": `${dataTestId}-Description`
+      }, {
+        children: description
+      }))]
+    })]
   });
 });
-const Switch = tw.span`
-  rounded-full
-  bg-white
-  h-full
-  aspect-square
+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 HiddenInput = tw.input`tu-toggle__input`;
+const Switch = tw.label`
   ${({
   $toggled
-}) => $toggled ? tws`translate-x-4` : tws`translate-x-0`}
-  transition-all
-`;
+}) => $toggled ? tws`tu-toggle__switch` : tws`tu-toggle`}`;
 const SwitchContainer = tw.label`
-  flex
-  items-center
-  rounded-full
-  p-1
+tu-toggle__switch-container
   ${({
   $disabled
-}) => $disabled ? tws`cursor-not-allowed pointer-events-none` : tws`cursor-pointer`};
+}) => $disabled && tws`tu-toggle--disabled`};
   ${({
   $size
-}) => $size === "small" ? tws`w-8 h-4` : tws`w-10 h-6`};
+}) => $size === "small" ? tws`tu-toggle--small` : tws`tu-toggle--default`};
   ${({
-  $toggled,
+  $toggled
+}) => $toggled && tws`tu-toggle--toggled`}`;
+const Label = tw.label`
+tu-toggle__label
+${({
   $disabled
-}) => $disabled ? tws`bg-neutral-300` : $toggled ? tws`bg-primary-400` : tws`bg-neutral-500`}
-  transition-all
-  active:shadow
-`;
-const HiddenInput = tw.input`
-  absolute
-  opacity-0
-  -z-10
+}) => $disabled && tws`tu-toggle__label--disabled`}
+${({
+  $description
+}) => $description && tws`tu-toggle--align-label`}`;
+const Description = tw.label`
+tu-toggle__description
+${({
+  $disabled
+}) => $disabled && tws`tu-toggle__description--disabled`}
 `;
 
 /**
@@ -4514,4 +4540,4 @@ const useTimeout = ({
   };
 };
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, 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, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$4 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.83-alpha-9c24ee877.0",
+  "version": "0.0.89",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {
-    "@trackunit/css-core": "0.0.47-alpha-9c24ee877.0",
-    "@trackunit/tailwind-styled-components": "0.0.41-alpha-9c24ee877.0",
+    "@trackunit/css-core": "0.0.46",
+    "@trackunit/tailwind-styled-components": "0.0.40",
     "react": "17.0.1",
-    "@trackunit/ui-design-tokens": "0.0.40-alpha-9c24ee877.0",
+    "@trackunit/ui-design-tokens": "0.0.39",
     "echarts-for-react": "^3.0.2",
     "uuid": "^8.3.2",
     "@react-spring/web": "^9.4.5",
     "react-use": "^17.3.2",
     "react-day-picker": "^8.0.3",
     "date-fns": "^2.28.0",
-    "@trackunit/ui-icons": "0.0.42-alpha-9c24ee877.0",
+    "@trackunit/ui-icons": "0.0.41",
     "react-useportal": "^1.0.16",
     "react-helmet": "^6.1.0",
     "@popperjs/core": "^2.11.4",