@trackunit/react-components 0.0.66 → 0.0.69

package/components/DateField/DateField.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
 import { BaseInputProps } from "../BaseInput";
-export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange"> {
+export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange" | "readOnly"> {
     /**
      * A text label to be displayed next to the indicator
      */

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,14 +240,14 @@ 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
 `;
 
 const IconButton = React.forwardRef((_a, ref) => {
@@ -272,7 +272,7 @@ const IconButton = React.forwardRef((_a, ref) => {
   }));
 });
 const StyledButton = tw(Button)`
-  ${p => p.$circular ? tws`button--rounded` : null}
+  ${p => p.$circular ? tws`tu-button--rounded` : null}
 `;
 
 /**
@@ -726,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}
 `;
 
 /**
@@ -803,7 +803,7 @@ const getSizeModifierClass$1 = () => ({
   $variant
 }) => {
   const sizeModifierClass = {
-    large: tws`badge--large`,
+    large: tws`tu-badge--large`,
     default: ""
   };
   return sizeModifierClass[$size];
@@ -814,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];
 };
@@ -836,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()}
@@ -875,7 +875,7 @@ const BaseInput = React.forwardRef((_a, ref) => {
   return jsxs(InputContainer, Object.assign({
     "$fieldSize": fieldSize,
     "$invalid": isInvalid,
-    "$disabled": rest.disabled,
+    "$disabled": rest.disabled || rest.readOnly,
     className: className,
     "data-testid": `${dataTestId}-container`
   }, {
@@ -890,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`
     }, {
@@ -903,28 +903,28 @@ 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}
 `;
 
 const ROLE_CARD = "region";
@@ -981,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()}
 `;
 
@@ -1113,7 +1113,7 @@ const getOverflow = () => ({
 
 const StyledDensityContainer = tw(DensityContainer)`
   ${getOverflow()}
-  card__body
+  tu-card__body
 `;
 
 /**
@@ -1189,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];
 };
@@ -1201,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()}
 `;
@@ -1373,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
 `;
 
 /**
@@ -1466,6 +1466,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
 
   const icon = indeterminate ? jsx(StyledIndeterminateIcon, {}) : checked && jsx(StyledCheckIcon, {});
   const internalRef = React.useRef(null);
+  const isReadonly = disabled || readOnly;
 
   const onKeyPress = e => {
     var _a;
@@ -1494,20 +1495,20 @@ const Checkbox = React.forwardRef((_a, ref) => {
     }, rest, {
       ref: ref
     })), jsx(CheckboxWrapper, Object.assign({
-      "$disabled": disabled,
+      "$disabled": isReadonly,
       "$checked": checked,
       "$indeterminate": indeterminate,
-      "$isInvalid": disabled ? false : isInvalid,
+      "$isInvalid": isReadonly ? false : isInvalid,
       className: className,
-      tabIndex: disabled ? -1 : tabIndex,
+      tabIndex: isReadonly ? -1 : tabIndex,
       onKeyPress: onKeyPress
     }, {
       children: icon
     })), label && jsx(Label$4, Object.assign({
       ref: internalRef,
       htmlFor: uuid,
-      "$disabled": disabled,
-      "$isInvalid": disabled ? false : isInvalid,
+      "$disabled": isReadonly,
+      "$isInvalid": isReadonly ? false : isInvalid,
       "data-testid": dataTestId ? `${dataTestId}Label` : ""
     }, {
       children: label
@@ -1515,13 +1516,13 @@ const Checkbox = React.forwardRef((_a, ref) => {
   }));
 });
 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,
@@ -1529,36 +1530,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}
 `;
 
 /**
@@ -1620,17 +1621,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 = ({
@@ -1670,10 +1671,10 @@ const Collapsible = ({
 };
 
 const AnimatedCollapsible = tw(animated.div)`
-  collapsible--animated
+  tu-collapsible--animated
 `;
 const StyledCollapsible = tw.div`
-  collapsible
+  tu-collapsible
 `;
 
 /**
@@ -1988,6 +1989,7 @@ const DateField = forwardRef(({
   defaultValue,
   onChange,
   disabled = false,
+  readOnly = false,
   id,
   dataTestId,
   placeholder,
@@ -2019,6 +2021,7 @@ const DateField = forwardRef(({
       value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
       onChange: () => {},
       disabled: disabled,
+      readOnly: readOnly,
       dataTestId: dataTestId,
       id: id,
       ref: ref,
@@ -2341,11 +2344,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}
 `;
 
 /**
@@ -2384,7 +2387,7 @@ const Tip = _a => {
   }));
 };
 const TipContainer = tw.span`
-  tip
+  tu-tip
 `;
 
 /**
@@ -2435,7 +2438,7 @@ const FormGroup = ({
   }));
 };
 const FormGroupRoot = tw.label`
-  formgroup
+  tu-formgroup
 `; // TODO: Update and use Label component instead
 
 const StyledTitle = tw.span`
@@ -2446,16 +2449,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 
 `;
 
 /**
@@ -2498,52 +2501,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 "";
@@ -2551,16 +2554,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
 `;
 
 /**
@@ -2602,7 +2605,7 @@ const Label$2 = ({
   });
 };
 const Description = tw(Text)`
-  label
+  tu-label
 `;
 
 /**
@@ -2725,16 +2728,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
 `;
 
 /**
@@ -2772,13 +2775,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
 `;
 
 /**
@@ -2830,7 +2833,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. */
@@ -2888,21 +2891,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);
 
@@ -3004,7 +3007,7 @@ const FilterListMapLayout = ({
   children: children
 });
 const Layout$4 = tw.span`
-  layout-FilterListMap 
+  tu-layout-FilterListMap 
 `;
 
 /**
@@ -3031,17 +3034,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:
@@ -3097,17 +3100,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`;
   }
 }}
 
@@ -3116,17 +3119,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`;
   }
 }}
   
@@ -3181,7 +3184,7 @@ const TitleNavContentLayout = ({
   children: children
 });
 const Layout$1 = tw.div`
-  layout-TitleNavContentLayout
+  tu-layout-TitleNavContentLayout
 `;
 
 /**
@@ -3197,7 +3200,7 @@ const TwoColumnLayout = ({
   children: children
 });
 const Layout = tw.div`
-  layout-TwoColumnLayout
+  tu-layout-TwoColumnLayout
 `;
 
 /**
@@ -3225,15 +3228,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
 `;
 
 /**
@@ -3329,7 +3332,7 @@ const Spacer = ({
   });
 };
 const Space = tw.div`
-${p => `${p.border ? `spacer--border` : null}`}
+${p => `${p.border ? `tu-spacer--border` : null}`}
 ${GetSpacerHeight()}
 `;
 
@@ -3576,11 +3579,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 => {
@@ -3850,7 +3853,7 @@ const SkeletonLines = memo(({
   });
 });
 const SkeletonLine = tw.div`
-  skeleton-line
+  tu-skeleton-line
 `;
 
 /**
@@ -4017,10 +4020,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
 }) => {
@@ -4211,7 +4214,7 @@ const SwitchContainer = tw.label`
   active:shadow
 `;
 const HiddenInput = tw.input`
-absolute
+  absolute
   opacity-0
   -z-10
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.66",
+  "version": "0.0.69",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {