@trackunit/react-components 0.0.64 → 0.0.67

package/README.md

@@ -12,7 +12,7 @@ At this point this library is only developed by Trackunit Employees.
 For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
 
 ## Trackunit
-This package was developed by Trackunit ApS.  
+This package was developed by Trackunit ApS.
 Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
 
 ![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/components/Tip/Tip.d.ts

@@ -16,7 +16,4 @@ export interface TipProps extends CommonProps {
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
-export declare const Tip: {
-    ({ children, iconProps, tooltipProps, dataTestId, ...rest }: TipProps): JSX.Element;
-    displayName: string;
-};
+export declare const Tip: ({ children, iconProps, tooltipProps, dataTestId, ...rest }: TipProps) => JSX.Element;

package/index.js

@@ -123,10 +123,10 @@ const getSpinnerStyles = () => ({
 }) => {
   switch ($size) {
     case "small":
-      return tws`spinner--small`;
+      return tws`tu-spinner--small`;
 
     case "large":
-      return tws`spinner--large`;
+      return tws`tu-spinner--large`;
 
     case "regular":
     default:
@@ -135,13 +135,13 @@ const getSpinnerStyles = () => ({
 };
 
 const StyledSpinner$1 = tw.span`
-  spinner
-  ${p => p.$mode === "dark" ? tws`spinner--dark` : null}
+  tu-spinner
+  ${p => p.$mode === "dark" ? tws`tu-spinner--dark` : null}
   ${getSpinnerStyles()}
 `;
 const Container$8 = tw.div`
-  spinner--container
-  ${p => p.$centered ? tws`spinner--container-centered` : null}
+  tu-spinner--container
+  ${p => p.$centered ? tws`tu-spinner--container-centered` : null}
 `;
 
 /**
@@ -156,18 +156,18 @@ const getStyles = () => ({
 }) => {
   const styles = {
     filled: {
-      primary: tws`button--primary`,
-      secondary: tws`button--secondary`,
-      danger: tws`button--danger`,
-      tertiary: tws`button--tertiary`,
-      warning: tws`button--warning`
+      primary: tws`tu-button--primary`,
+      secondary: tws`tu-button--secondary`,
+      danger: tws`tu-button--danger`,
+      tertiary: tws`tu-button--tertiary`,
+      warning: tws`tu-button--warning`
     },
     transparent: {
-      primary: tws`button--transparent button--transparent-primary`,
-      secondary: tws`button--transparent button--transparent-secondary`,
-      danger: tws`button--transparent button--transparent-danger`,
-      tertiary: tws`button--transparent button--transparent-tertiary`,
-      warning: tws`button--transparent button--transparent-warning`
+      primary: tws`tu-button--transparent tu-button--transparent-primary`,
+      secondary: tws`tu-button--transparent tu-button--transparent-secondary`,
+      danger: tws`tu-button--transparent tu-button--transparent-danger`,
+      tertiary: tws`tu-button--transparent tu-button--transparent-tertiary`,
+      warning: tws`tu-button--transparent tu-button--transparent-warning`
     }
   };
   return styles[$variant][$intent];
@@ -183,10 +183,10 @@ const getPadding = () => ({
 }) => {
   switch ($size) {
     case "small":
-      return tws`button--small`;
+      return tws`tu-button--small`;
 
     case "large":
-      return tws`button--large`;
+      return tws`tu-button--large`;
 
     default:
       return "";
@@ -240,16 +240,15 @@ const Button = React.forwardRef((_a, ref) => {
   }));
 });
 const StyledButton$1 = tw.button`
-  button
-  ${p => p.$square ? tws`button--square` : null}
-  ${p => p.$fullWidth ? tws`button--fullWidth` : null}
+  tu-button
+  ${p => p.$square ? tws`tu-button--square` : null}
+  ${p => p.$fullWidth ? tws`tu-button--fullWidth` : null}
   ${getStyles()}
   ${getPadding()}
 `;
 const StyledSpinner = tw(Spinner)`
-  button__spinner
+  tu-button__spinner
 `;
-Button.displayName = "Button";
 
 const IconButton = React.forwardRef((_a, ref) => {
   var {
@@ -272,9 +271,8 @@ const IconButton = React.forwardRef((_a, ref) => {
     children: loading ? jsx(Spinner, {}) : icon
   }));
 });
-IconButton.displayName = "IconButton";
 const StyledButton = tw(Button)`
-  ${p => p.$circular ? tws`button--rounded` : null}
+  ${p => p.$circular ? tws`tu-button--rounded` : null}
 `;
 
 /**
@@ -728,39 +726,39 @@ const Alert = ({
   }));
 };
 const CloseButtonContainer = tw.div`
-  ${p => p.$inline ? tws`alert__close-button-container--inline` : tws`alert__close-button-container`}
+  ${p => p.$inline ? tws`tu-alert__close-button-container--inline` : tws`tu-alert__close-button-container`}
 `;
 
 const getBackgroundColor = () => ({
   $intent
 }) => {
   const colors = {
-    danger: tws`alert--danger`,
-    warning: tws`alert--warning`,
-    success: tws`alert--success`,
-    info: tws`alert--info`
+    danger: tws`tu-alert--danger`,
+    warning: tws`tu-alert--warning`,
+    success: tws`tu-alert--success`,
+    info: tws`tu-alert--info`
   };
   return colors[$intent];
 };
 
 const Container$7 = tw.div`
-  alert
-  ${p => p.$inline ? tws`alert--inline` : null}
+  tu-alert
+  ${p => p.$inline ? tws`tu-alert--inline` : null}
   ${getBackgroundColor()}
 `;
 const Content$2 = tw.div`
-  ${p => p.$inline ? tws`alert__content--inline` : tws`alert__content`}
+  ${p => p.$inline ? tws`tu-alert__content--inline` : tws`tu-alert__content`}
 `;
 const Description$1 = tw(Text)`
-  ${p => p.$hasTitle ? tws`alert__description` : null}
+  ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
 const RightAligned = tw.div`
-  alert__right-aligned
-  ${p => p.$inline ? tws`alert__right-aligned--inline` : null}
+  tu-alert__right-aligned
+  ${p => p.$inline ? tws`tu-alert__right-aligned--inline` : null}
 `;
 const IconContainer$1 = tw.div`
-  alert__icon-container
-  ${p => p.$inline ? tws`alert__icon-container--inline` : null}
+  tu-alert__icon-container
+  ${p => p.$inline ? tws`tu-alert__icon-container--inline` : null}
 `;
 
 /**
@@ -805,7 +803,7 @@ const getSizeModifierClass$1 = () => ({
   $variant
 }) => {
   const sizeModifierClass = {
-    large: tws`badge--large`,
+    large: tws`tu-badge--large`,
     default: ""
   };
   return sizeModifierClass[$size];
@@ -816,20 +814,20 @@ const getBadgeModifierClass = () => ({
   $subtle
 }) => {
   const colorClasses = {
-    primary: $subtle ? tws`badge--primary-subtle` : tws`badge--primary`,
-    accent: $subtle ? tws`badge--accent-subtle` : tws`badge--accent`,
-    success: $subtle ? tws`badge--success-subtle` : tws`badge--success`,
-    danger: $subtle ? tws`badge--danger-subtle` : tws`badge--danger`,
-    warning: $subtle ? tws`badge--warning-subtle` : tws`badge--warning`,
-    info: $subtle ? tws`badge--info-subtle` : tws`badge--info`,
-    neutral: $subtle ? tws`badge--neutral-subtle` : tws`badge--neutral`,
-    good: $subtle ? tws`badge--good-subtle` : tws`badge--good`,
-    low: $subtle ? tws`badge--low-subtle` : tws`badge--low`,
-    critical: $subtle ? tws`badge--critical-subtle` : tws`badge--critical`,
-    working: $subtle ? tws`badge--working-subtle` : tws`badge--working`,
-    idle: $subtle ? tws`badge--idle-subtle` : tws`badge--idle`,
-    stopped: $subtle ? tws`badge--stopped-subtle` : tws`badge--stopped`,
-    unknown: $subtle ? tws`badge--unknown-subtle` : tws`badge--unknown`
+    primary: $subtle ? tws`tu-badge--primary-subtle` : tws`tu-badge--primary`,
+    accent: $subtle ? tws`tu-badge--accent-subtle` : tws`tu-badge--accent`,
+    success: $subtle ? tws`tu-badge--success-subtle` : tws`tu-badge--success`,
+    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`,
+    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`,
+    working: $subtle ? tws`tu-badge--working-subtle` : tws`tu-badge--working`,
+    idle: $subtle ? tws`tu-badge--idle-subtle` : tws`tu-badge--idle`,
+    stopped: $subtle ? tws`tu-badge--stopped-subtle` : tws`tu-badge--stopped`,
+    unknown: $subtle ? tws`tu-badge--unknown-subtle` : tws`tu-badge--unknown`
   };
   return colorClasses[$color];
 };
@@ -838,13 +836,13 @@ const StyledText$3 = tw.text`
   ${p => {
   switch (p.$variant) {
     case "badge":
-      return tws`badge`;
+      return tws`tu-badge`;
 
     case "pill":
-      return tws`badge--pill`;
+      return tws`tu-badge--pill`;
 
     default:
-      return tws`badge`;
+      return tws`tu-badge`;
   }
 }}
   ${getBadgeModifierClass()}
@@ -892,7 +890,7 @@ const BaseInput = React.forwardRef((_a, ref) => {
     })) : null, jsx("input", Object.assign({
       ref: ref,
       "data-testid": dataTestId,
-      className: tws`input__field`
+      className: tws`tu-input__field`
     }, rest)), suffix !== null && addonBefore !== suffix ? jsx(InputSuffix, Object.assign({
       "data-testid": `${dataTestId}-suffix`
     }, {
@@ -905,30 +903,29 @@ const BaseInput = React.forwardRef((_a, ref) => {
   }));
 });
 const InputPrefix = tw.div`
-  input__prefix
+  tu-input__prefix
 `;
 const InputSuffix = tw.div`
-  input__suffix
+  tu-input__suffix
 `;
 const AddonBefore = tw.div`
-  input__addon-before
+  tu-input__addon-before
 `;
 const AddonAfter = tw.div`
-  input__addon-after
+  tu-input__addon-after
 `;
 const InputContainer = tw.div`
-  input
+  tu-input
   ${({
   $invalid
-}) => $invalid ? tws`input--invalid` : null}
+}) => $invalid ? tws`tu-input--invalid` : null}
   ${({
   $disabled
-}) => $disabled ? tws`input--disabled` : null}
+}) => $disabled ? tws`tu-input--disabled` : null}
   ${({
   $fieldSize
-}) => $fieldSize === "small" ? tws`input--small` : null}
+}) => $fieldSize === "small" ? tws`tu-input--small` : null}
 `;
-BaseInput.displayName = "BaseInput";
 
 const ROLE_CARD = "region";
 /**
@@ -984,10 +981,10 @@ const getOverflow$1 = () => ({
 };
 
 const StyledCard$1 = tw.div`
-  card
+  tu-card
   ${p => p.$fullHeight ? `h-full` : null}
 
-  ${p => p.onClick && `card--clickable`}
+  ${p => p.onClick && `tu-card--clickable`}
   ${getOverflow$1()}
 `;
 
@@ -1116,7 +1113,7 @@ const getOverflow = () => ({
 
 const StyledDensityContainer = tw(DensityContainer)`
   ${getOverflow()}
-  card__body
+  tu-card__body
 `;
 
 /**
@@ -1192,10 +1189,10 @@ const getVariantStyles = () => ({
   $variant
 }) => {
   const variants = {
-    primary: tws`heading--primary`,
-    secondary: tws`heading--secondary`,
-    tertiary: tws`heading--tertiary`,
-    subtitle: tws`heading--subtitle`
+    primary: tws`tu-heading--primary`,
+    secondary: tws`tu-heading--secondary`,
+    tertiary: tws`tu-heading--tertiary`,
+    subtitle: tws`tu-heading--subtitle`
   };
   return variants[$variant];
 };
@@ -1204,13 +1201,13 @@ const getFontColor = () => ({
   $inverted,
   $subtle
 }) => {
-  const subtle = $inverted ? tws`heading--subtle-inverted` : tws`heading--subtle`;
-  const inverted = $inverted ? tws`heading--inverted` : null;
+  const subtle = $inverted ? tws`tu-heading--subtle-inverted` : tws`tu-heading--subtle`;
+  const inverted = $inverted ? tws`tu-heading--inverted` : null;
   return $subtle ? subtle : inverted;
 };
 
 const StyledHeading = tw.div`
-  heading
+  tu-heading
   ${getFontColor()}
   ${getVariantStyles()}
 `;
@@ -1376,10 +1373,10 @@ const Chart = ({
   }));
 };
 const SpinnerContainer = tw.div`
-  chart-spinner-container
+  tu-chart-spinner-container
 `;
 const ChartContainer = tw.div`
-  chart-container
+  tu-chart-container
 `;
 
 /**
@@ -1517,15 +1514,14 @@ const Checkbox = React.forwardRef((_a, ref) => {
     })), children]
   }));
 });
-Checkbox.displayName = "Checkbox";
 const StyledCheckIcon = tw(CheckIcon)`
-  checkbox--icon
+  tu-checkbox--icon
 `;
 const StyledIndeterminateIcon = tw(IndeterminateIcon)`
-  checkbox--icon
+  tu-checkbox--icon
 `;
 const CheckboxWrapper = tw.span`
-  checkbox
+  tu-checkbox
   transition
   ${({
   $checked,
@@ -1533,36 +1529,36 @@ const CheckboxWrapper = tw.span`
   $indeterminate
 }) => {
   if ($disabled) {
-    return tws`checkbox--disabled`;
+    return tws`tu-checkbox--disabled`;
   }
 
-  return $indeterminate ? tws`checkbox--indeterminate` : $checked ? tws`checkbox--selected` : tws`checkbox--deselected`;
+  return $indeterminate ? tws`tu-checkbox--indeterminate` : $checked ? tws`tu-checkbox--selected` : tws`tu-checkbox--deselected`;
 }}
   
   ${({
   $isInvalid
 }) => {
   if ($isInvalid) {
-    return tws`checkbox--invalid`;
+    return tws`tu-checkbox--invalid`;
   }
 
   return tws``;
 }}
 `;
 const HiddenInput$1 = tw.input`
-  checkbox--input
+  tu-checkbox--input
 `;
 const CheckboxContainer = tw.label`
-  checkbox--container group
+  tu-checkbox--container group
 `;
 const Label$4 = tw.label`
-checkbox__label
+tu-checkbox__label
 ${({
   $disabled
-}) => $disabled ? tws`checkbox-item--disabled` : null}
+}) => $disabled ? tws`tu-checkbox-item--disabled` : null}
 ${({
   $isInvalid
-}) => $isInvalid ? tws`checkbox--invalid` : null}
+}) => $isInvalid ? tws`tu-checkbox--invalid` : null}
 `;
 
 /**
@@ -1624,17 +1620,17 @@ const Collapse = ({
   }));
 };
 const Rotate = tw(Icon$1)`
-  ${p => p.$expanded ? tws`icon--animated-rotate-expanded` : null}
-  icon--animated-rotate
+  ${p => p.$expanded ? tws`tu-icon--animated-rotate-expanded` : null}
+  tu-icon--animated-rotate
 `;
 const StyledCollapse = tw.div`
-  collapse
+  tu-collapse
 `;
 const CollapseLabel = tw.div`
-  collapse__label
+  tu-collapse__label
 `;
 const LabelContainer = tw.div`
-  collapse__label__container
+  tu-collapse__label__container
 `;
 
 const Collapsible = ({
@@ -1674,10 +1670,10 @@ const Collapsible = ({
 };
 
 const AnimatedCollapsible = tw(animated.div)`
-  collapsible--animated
+  tu-collapsible--animated
 `;
 const StyledCollapsible = tw.div`
-  collapsible
+  tu-collapsible
 `;
 
 /**
@@ -1910,7 +1906,6 @@ const AnimatedPopover = React.forwardRef(({
     }))]
   });
 });
-AnimatedPopover.displayName = "AnimatedPopover";
 const Backdrop$1 = tw.div`
   fixed
   inset-0
@@ -2346,11 +2341,11 @@ const Flex$1 = tw.div`
   inline-flex
 `;
 const Container$4 = tw(AnimatedPopover)`
-  tooltip__container
+  tu-tooltip__container
 `;
 const Content$1 = tw.div`
-  tooltip__content
-  ${p => p.$mode === "light" ? tws`tooltip--light` : null}
+  tu-tooltip__content
+  ${p => p.$mode === "light" ? tws`tu-tooltip--light` : null}
 `;
 
 /**
@@ -2389,9 +2384,8 @@ const Tip = _a => {
   }));
 };
 const TipContainer = tw.span`
-  tip
+  tu-tip
 `;
-Tip.displayName = "Tip";
 
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
@@ -2441,7 +2435,7 @@ const FormGroup = ({
   }));
 };
 const FormGroupRoot = tw.label`
-  formgroup
+  tu-formgroup
 `; // TODO: Update and use Label component instead
 
 const StyledTitle = tw.span`
@@ -2452,16 +2446,16 @@ const StyledTitle = tw.span`
   mb-1
 `;
 const ContainerBefore = tw.div`
-  formGroup-container-before
+  tu-formGroup-container-before
 `;
 const ContainerAfter = tw.div`
-  formGroup-container-after
+  tu-formGroup-container-after
   ${({
   $isInvalid
-}) => $isInvalid ? tws`formGroup-container-after--invalid` : null}
+}) => $isInvalid ? tws`tu-formGroup-container-after--invalid` : null}
 `;
 const HelpAddon = tw.span`
-  formGroup-helpAddon 
+  tu-formGroup-helpAddon 
 `;
 
 /**
@@ -2504,52 +2498,52 @@ const Indicator$1 = _a => {
   }));
 };
 const Container$3 = tw.div`
- indicator
+ tu-indicator
  ${({
   $color
 }) => {
   switch ($color) {
     case colors.PRIMARY:
-      return tws`indicator--primary`;
+      return tws`tu-indicator--primary`;
 
     case colors.ACCENT:
-      return tws`indicator--accent`;
+      return tws`tu-indicator--accent`;
 
     case colors.NEUTRAL:
-      return tws`indicator--neutral`;
+      return tws`tu-indicator--neutral`;
 
     case colors.INFO:
-      return tws`indicator--info`;
+      return tws`tu-indicator--info`;
 
     case colors.SUCCESS:
-      return tws`indicator--success`;
+      return tws`tu-indicator--success`;
 
     case colors.WARNING:
-      return tws`indicator--warning`;
+      return tws`tu-indicator--warning`;
 
     case colors.DANGER:
-      return tws`indicator--danger`;
+      return tws`tu-indicator--danger`;
 
     case colors.GOOD:
-      return tws`indicator--good`;
+      return tws`tu-indicator--good`;
 
     case colors.LOW:
-      return tws`indicator--low`;
+      return tws`tu-indicator--low`;
 
     case colors.CRITICAL:
-      return tws`indicator--critical`;
+      return tws`tu-indicator--critical`;
 
     case colors.WORKING:
-      return tws`indicator--working`;
+      return tws`tu-indicator--working`;
 
     case colors.IDLE:
-      return tws`indicator--idle`;
+      return tws`tu-indicator--idle`;
 
     case colors.STOPPED:
-      return tws`indicator--stopped`;
+      return tws`tu-indicator--stopped`;
 
     case colors.UNKNOWN:
-      return tws`indicator--unknown`;
+      return tws`tu-indicator--unknown`;
 
     default:
       return "";
@@ -2557,16 +2551,16 @@ const Container$3 = tw.div`
 }}
 `;
 const IconBackground = tw.div`
-  indicator__icon-background
+  tu-indicator__icon-background
   
   ${({
   $withBackground
 }) => {
-  return $withBackground ? "" : "indicator__icon-background--none";
+  return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
 `;
 const Label$3 = tw.div`
-  indicator__label
+  tu-indicator__label
 `;
 
 /**
@@ -2608,7 +2602,7 @@ const Label$2 = ({
   });
 };
 const Description = tw(Text)`
-  label
+  tu-label
 `;
 
 /**
@@ -2731,16 +2725,16 @@ const MenuItem = ({
   }));
 };
 const Container$2 = tw.div`
-  group menuItem
+  group tu-menuItem
 `;
 const Content = tw.div`
-  menuItem__content
+  tu-menuItem__content
 `;
 const Icon = tw.div`
-  menuItem__icon
+  tu-menuItem__icon
 `;
 const Label = tw.div`
-  menuItem__label
+  tu-menuItem__label
 `;
 
 /**
@@ -2778,13 +2772,13 @@ const MenuList = _a => {
   });
 };
 const Wrapper = tw.div`
-  menuList__wrapper
+  tu-menuList__wrapper
 `;
 const Container$1 = tw.div`
-  menuList
+  tu-menuList
 `;
 const Divider = tw.div`
-  menuList__divider
+  tu-menuList__divider
 `;
 
 /**
@@ -2836,7 +2830,7 @@ const ModalBackdrop = ({
   });
 };
 const Backdrop = tw(animated.div)`
-  modal--backdrop
+  tu-modal--backdrop
 `;
 
 /** Preferred usage is with useModal(), so the modal is placed at highest level. */
@@ -2894,21 +2888,21 @@ const getCardMaxWidth = () => ({
 }) => {
   maxWidth = maxWidth ? maxWidth : "full";
   const widths = {
-    slim: tws`modal-card--slim`,
-    narrow: tws`modal-card--narrow`,
-    wide: tws`modal-card--wide`,
-    normal: tws`modal-card--normal`,
+    slim: tws`tu-modal-card--slim`,
+    narrow: tws`tu-modal-card--narrow`,
+    wide: tws`tu-modal-card--wide`,
+    normal: tws`tu-modal-card--normal`,
     full: ""
   };
   return widths[maxWidth];
 };
 
 const StyledCard = tw(Card)`
-  modal__card
+  tu-modal__card
   ${getCardMaxWidth()}
 `;
 const StyledDiv = tw.div`
-  modal__container
+  tu-modal__container
 `;
 const AnimatedDiv = animated(StyledDiv);
 
@@ -3010,7 +3004,7 @@ const FilterListMapLayout = ({
   children: children
 });
 const Layout$4 = tw.span`
-  layout-FilterListMap 
+  tu-layout-FilterListMap 
 `;
 
 /**
@@ -3037,17 +3031,17 @@ const FullWidthRepeatingLayout = ({
   children: children
 }));
 const Layout$3 = tw.span`
-  layout-FullWidthRepeatingLayout
+  tu-layout-FullWidthRepeatingLayout
 
   ${({
   $rowSizing
 }) => {
   switch ($rowSizing) {
     case "MinContent":
-      return tws` layout-FullWidthRepeatingLayout--MinContent`;
+      return tws` tu-layout-FullWidthRepeatingLayout--MinContent`;
 
     case "Equal":
-      return tws` layout-FullWidthRepeatingLayout--Equal`;
+      return tws` tu-layout-FullWidthRepeatingLayout--Equal`;
 
     case "Unmanaged":
     default:
@@ -3103,17 +3097,17 @@ const IntrinsicallyResponsiveGrid = ({
   children: children
 }));
 const Layout$2 = tw.span`
-  layout-IntrinsicallyResponsiveGrid
+  tu-layout-IntrinsicallyResponsiveGrid
   ${({
   $occupation
 }) => {
   switch ($occupation) {
     case "auto-fit":
-      return tws`layout-IntrinsicallyResponsiveGrid--fit`;
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--fit`;
 
     case "auto-fill":
     default:
-      return tws`layout-IntrinsicallyResponsiveGrid--fill`;
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--fill`;
   }
 }}
 
@@ -3122,17 +3116,17 @@ const Layout$2 = tw.span`
 }) => {
   switch ($minColumnWidth) {
     case "slim":
-      return tws`layout-IntrinsicallyResponsiveGrid--slim`;
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--slim`;
 
     case "narrow":
-      return tws`layout-IntrinsicallyResponsiveGrid--narrow`;
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--narrow`;
 
     case "wide":
-      return tws`layout-IntrinsicallyResponsiveGrid--wide`;
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--wide`;
 
     case "normal":
     default:
-      return tws`layout-IntrinsicallyResponsiveGrid--normal`;
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--normal`;
   }
 }}
   
@@ -3187,7 +3181,7 @@ const TitleNavContentLayout = ({
   children: children
 });
 const Layout$1 = tw.div`
-  layout-TitleNavContentLayout
+  tu-layout-TitleNavContentLayout
 `;
 
 /**
@@ -3203,7 +3197,7 @@ const TwoColumnLayout = ({
   children: children
 });
 const Layout = tw.div`
-  layout-TwoColumnLayout
+  tu-layout-TwoColumnLayout
 `;
 
 /**
@@ -3231,15 +3225,15 @@ const MultiRowTableCell = ({
   }));
 };
 const Root$1 = tw(GridArea)`
-  multi-row-table-cell-container
+  tu-multi-row-table-cell-container
 `;
 const Header = tw.div`
-  multi-row-table-cell
-  multi-row-table-cell__header
+  tu-multi-row-table-cell
+  tu-multi-row-table-cell__header
 `;
 const Secondary = tw.div`
-  multi-row-table-cell
-  multi-row-table-cell__secondary
+  tu-multi-row-table-cell
+  tu-multi-row-table-cell__secondary
 `;
 
 /**
@@ -3252,7 +3246,6 @@ const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
   ref: ref,
   type: "number"
 }, props)));
-NumberInput.displayName = "NumberInput";
 
 /**
  * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
@@ -3297,7 +3290,6 @@ const NumberField = forwardRef((_a, ref) => {
     }))
   }));
 });
-NumberField.displayName = "NumberField";
 
 const GetSpacerHeight = () => ({
   minHeight
@@ -3337,7 +3329,7 @@ const Spacer = ({
   });
 };
 const Space = tw.div`
-${p => `${p.border ? `spacer--border` : null}`}
+${p => `${p.border ? `tu-spacer--border` : null}`}
 ${GetSpacerHeight()}
 `;
 
@@ -3584,11 +3576,11 @@ const SelectContainer = ({
   }));
 };
 const Container = tw.label`
-  select__container
+  tu-select__container
 `;
 const InformativeText$1 = tw(Text)`
-  informative-text
-  ${p => p.$hasError ? `informative-text--error` : null}
+  tu-informative-text
+  ${p => p.$hasError ? `tu-informative-text--error` : null}
 `;
 
 const getSelectHeight = size => {
@@ -3858,9 +3850,8 @@ const SkeletonLines = memo(({
   });
 });
 const SkeletonLine = tw.div`
-  skeleton-line
+  tu-skeleton-line
 `;
-SkeletonLines.displayName = "SkeletonLines";
 
 /**
  * Tags allow users to enter information and filter content.
@@ -3900,7 +3891,7 @@ const Tag = _a => {
         style: {
           "-webkit-transition": "-webkit-transform 0.150s"
         },
-        className: size === "default" ? tws`tag__icon` : tws`tag__icon tag__icon--small`
+        className: size === "default" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
       })
     }))]
   }));
@@ -3911,8 +3902,8 @@ const getSizeModifierClass = () => ({
   $withXIcon
 }) => {
   const tagSizeModifierClass = {
-    default: $withXIcon ? tws`tag--withIcon ` : tws` `,
-    small: $withXIcon ? tws`tag--small tag--withIcon` : tws`tag--small`
+    default: $withXIcon ? tws`tu-tag--withIcon ` : tws` `,
+    small: $withXIcon ? tws`tu-tag--small tu-tag--withIcon` : tws`tu-tag--small`
   };
   return tagSizeModifierClass[$size];
 };
@@ -3921,26 +3912,26 @@ const getColorModifierClass = () => ({
   $color
 }) => {
   const colorClasses = {
-    primary: tws`tag--primary`,
-    accent: tws`tag--accent`,
-    success: tws`tag--success`,
-    danger: tws`tag--danger`,
-    warning: tws`tag--warning`,
-    info: tws`tag--info`,
-    neutral: tws`tag--neutral`,
-    good: tws`tag--good`,
-    low: tws`tag--low`,
-    critical: tws`tag--critical`,
-    working: tws`tag--working`,
-    idle: tws`tag--idle`,
-    stopped: tws`tag--stopped`,
-    unknown: tws`tag--unknown`
+    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`
-  tag
+  tu-tag
   ${getSizeModifierClass()}
   ${getColorModifierClass()}
 `;
@@ -4007,7 +3998,6 @@ const TextArea = React.forwardRef(({
     }))]
   }));
 });
-TextArea.displayName = "TextArea";
 const TextAreaContainer = tw.div``;
 const StyledTextArea = tw.textarea`
   input
@@ -4027,10 +4017,10 @@ const StyledTextArea = tw.textarea`
 
   ${({
   $hasError
-}) => $hasError ? tws`input--invalid` : null}
+}) => $hasError ? tws`tu-input--invalid` : null}
   ${({
   disabled
-}) => disabled ? tws`input--disabled` : null}
+}) => disabled ? tws`tu-input--disabled` : null}
   ${({
   $resize
 }) => {
@@ -4069,7 +4059,6 @@ const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
   ref: ref,
   type: "text"
 }, props)));
-TextInput.displayName = "TextInput";
 
 /**
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
@@ -4147,7 +4136,6 @@ const TextField = React.forwardRef((_a, ref) => {
     }))
   }));
 });
-TextField.displayName = "TextField";
 
 const Toggle = React.forwardRef(({
   toggled = false,
@@ -4194,7 +4182,6 @@ const Toggle = React.forwardRef(({
     }))]
   });
 });
-Toggle.displayName = "Toggle";
 const Switch = tw.span`
   rounded-full
   bg-white
@@ -4224,7 +4211,7 @@ const SwitchContainer = tw.label`
   active:shadow
 `;
 const HiddenInput = tw.input`
-absolute
+  absolute
   opacity-0
   -z-10
 `;

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.64",
+  "version": "0.0.67",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {
-    "@trackunit/css-core": "0.0.42",
-    "@trackunit/tailwind-styled-components": "0.0.38",
+    "@trackunit/css-core": "0.0.43",
+    "@trackunit/tailwind-styled-components": "0.0.39",
     "react": "17.0.1",
-    "@trackunit/ui-design-tokens": "0.0.37",
+    "@trackunit/ui-design-tokens": "0.0.38",
     "echarts-for-react": "^3.0.2",
     "uuid": "^8.3.2",
     "@react-spring/web": "^9.4.4",
     "react-use": "^17.3.2",
     "react-day-picker": "^8.0.3",
     "date-fns": "^2.28.0",
-    "@trackunit/ui-icons": "0.0.39",
+    "@trackunit/ui-icons": "0.0.40",
     "react-useportal": "^1.0.16",
     "react-helmet": "^6.1.0",
     "@popperjs/core": "^2.11.4",