@tcn/ui 0.3.1 → 0.3.3

package/src/inputs/color_input/color_input.tsx

@@ -82,7 +82,7 @@ export function ColorInput({
         width={width}
         minWidth={minWidth}
         maxWidth={maxWidth}
-        className="color-input-wrapper"
+        className="tcn-color-input-wrapper"
         {...props}
       >
         <ZStack width="flex">
@@ -95,7 +95,7 @@ export function ColorInput({
               textAlign: 'start',
               paddingInlineEnd: '8px',
             }}
-            className="color-input"
+            className="tcn-color-input"
             onChange={onChange}
           />
         </ZStack>
@@ -105,7 +105,11 @@ export function ColorInput({
           onClick={openPicker}
           width="70px"
           maxWidth="70px"
-          className={clsx(styles['color-input-select'], 'color-input-select', 'select')}
+          className={clsx(
+            styles['color-input-select'],
+            'tcn-color-input-select',
+            'tcn-select'
+          )}
           style={{
             borderStartStartRadius: 0,
             borderEndStartRadius: 0,
@@ -117,7 +121,7 @@ export function ColorInput({
             <Box
               width="flex"
               height="30px"
-              className={styles['checker-board']}
+              className={clsx(styles['checker-board'], 'tcn-checker-board')}
               style={{ borderRadius: '2px', overflow: 'hidden' }}
             >
               <Box

package/src/inputs/color_input/color_picker.module.css

@@ -1,13 +1,15 @@
-.color-picker {
-  box-shadow: none;
-  border-radius: 8px;
-  outline: none;
-  background-color: #fff;
-  box-shadow: var(--drop-shadow-depth-3, 0 2px 10px 0 rgba(0, 0, 0, 0.1));
-}
+@layer tcn-system {
+  :where(.color-picker) {
+    box-shadow: none;
+    border-radius: 8px;
+    outline: none;
+    background-color: #fff;
+    box-shadow: var(--drop-shadow-depth-3, 0 2px 10px 0 rgba(0, 0, 0, 0.1));
+  }
 
-.color-picker > .chrome-picker {
-  box-shadow: none !important;
-  border-radius: 4px !important;
-  overflow: hidden;
+  :where(.color-picker > .chrome-picker) {
+    box-shadow: none !important;
+    border-radius: 4px !important;
+    overflow: hidden;
+  }
 }

package/src/inputs/color_input/color_picker.tsx

@@ -28,11 +28,11 @@ export const ColorPicker = React.forwardRef(function ColorPicker(
       padding="8px"
       height="auto"
       width="auto"
-      className={clsx(styles['color-picker'], className)}
+      className={clsx(styles['color-picker'], 'tcn-color-picker', className)}
       {...props}
     >
       <ChromePicker
-        className={styles['chrome-picker']}
+        className={clsx(styles['chrome-picker'], 'tcn-chrome-picker')}
         color={color}
         onChange={onColorChange}
       />

package/src/inputs/combo_box/combo_box.tsx

@@ -127,7 +127,7 @@ export const ComboBox = React.forwardRef(function ComboBox(
     <>
       <Input
         ref={forkedRef}
-        className={clsx(className, 'combo-box-input')}
+        className={clsx(className, 'tcn-combo-box-input')}
         {...props}
         value={value}
         onKeyDown={handleKeyDown}

package/src/inputs/date_picker/date_picker.module.css

@@ -1,20 +1,22 @@
-.date-picker {
-  outline: none;
-}
+@layer tcn-system {
+  :where(.date-picker) {
+    outline: none;
+  }
 
-.date-picker-box {
-  font-size: 14px;
-  background-color: #fff;
-  color: rgba(0, 0, 0, 0.9);
-  border: 0;
-  border-radius: 4px;
-  padding: 4px;
-  box-sizing: border-box;
-  color: var(--font-color);
-  -webkit-tap-highlight-color: transparent;
-}
+  :where(.date-picker-box) {
+    font-size: 14px;
+    background-color: #fff;
+    color: rgba(0, 0, 0, 0.9);
+    border: 0;
+    border-radius: 4px;
+    padding: 4px;
+    box-sizing: border-box;
+    color: var(--font-color);
+    -webkit-tap-highlight-color: transparent;
+  }
 
-.date-picker-box[data-is-disabled="true"] {
-  opacity: 0.5;
-  pointer-events: none;
+  :where(.date-picker-box[data-is-disabled="true"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }

package/src/inputs/date_picker/date_picker.tsx

@@ -128,7 +128,7 @@ export const DatePicker = React.forwardRef(function DatePicker(
       ref={ref}
       width="auto"
       height="auto"
-      className={clsx(styles['date-picker'], 'date-picker')}
+      className={clsx(styles['date-picker'], 'tcn-date-picker')}
       tabIndex={0}
     >
       <VStack
@@ -136,7 +136,7 @@ export const DatePicker = React.forwardRef(function DatePicker(
         inline
         height="auto"
         width="auto"
-        className={clsx(styles['date-picker-box'], 'date-picker-box')}
+        className={clsx(styles['date-picker-box'], 'tcn-date-picker-box')}
         data-is-disabled={disabled}
       >
         <VStack height="auto">

package/src/inputs/date_picker/date_picker_body.tsx

@@ -23,7 +23,7 @@ export function DatePickerBody({ presenter, countryCode }: DatePickerBodyProps)
   }
 
   return (
-    <VStack height="auto" width="auto" className="date-picker-body">
+    <VStack height="auto" width="auto" className="tcn-date-picker-body">
       <HStack height="auto" width="auto">
         {new Array(7).fill(0).map((_, index) => {
           return (

package/src/inputs/date_picker/date_picker_date.module.css

@@ -1,78 +1,80 @@
-.date-picker-date {
-  padding: 0;
-  border: 2px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--font-color);
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: none;
-}
+@layer tcn-system {
+  :where(.date-picker-date) {
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--font-color);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    outline: none;
+  }
 
-.date-picker-date:hover,
-.date-picker-date:focus,
-.date-picker-date[data-is-today]:hover,
-.date-picker-date[data-is-today]:focus {
-  border: 2px dotted var(--accent-color);
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
+  :where(.date-picker-date:hover),
+  :where(.date-picker-date:focus),
+  :where(.date-picker-date[data-is-today]:hover),
+  :where(.date-picker-date[data-is-today]:focus) {
+    border: 2px dotted var(--accent-color);
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
 
-.date-picker-date[data-is-within-month="false"],
-.date-picker-date[data-is-within-month="false"]:hover,
-.date-picker-date[data-is-within-range="false"],
-.date-picker-date[data-is-disabled="true"],
-.date-picker-date[data-is-disabled="true"]:hover {
-  border: 2px dotted transparent;
-  cursor: not-allowed;
-  opacity: 0.5;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
+  :where(.date-picker-date[data-is-within-month="false"]),
+  :where(.date-picker-date[data-is-within-month="false"]:hover),
+  :where(.date-picker-date[data-is-within-range="false"]),
+  :where(.date-picker-date[data-is-disabled="true"]),
+  :where(.date-picker-date[data-is-disabled="true"]:hover) {
+    border: 2px dotted transparent;
+    cursor: not-allowed;
+    opacity: 0.5;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
 
-.date-picker-date[data-is-selected="true"],
-.date-picker-date[data-is-today="true"][data-is-selected="true"] {
-  border: 2px solid var(--accent-color);
-  background-color: var(--accent-color);
-  color: #fff;
-  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.35);
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
+  :where(.date-picker-date[data-is-selected="true"]),
+  :where(.date-picker-date[data-is-today="true"][data-is-selected="true"]) {
+    border: 2px solid var(--accent-color);
+    background-color: var(--accent-color);
+    color: #fff;
+    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.35);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
 
-.date-picker-date[data-is-selected="true"][data-is-disabled="true"],
-.date-picker-date[data-is-selected="true"][data-is-within-range="false"] {
-  border: 2px solid var(--error-color, var(--default-error-color));
-  background-color: var(--error-color, var(--default-error-color));
-  color: rgba(255, 255, 255, 0.5);
-  opacity: 1;
-}
+  :where(.date-picker-date[data-is-selected="true"][data-is-disabled="true"]),
+  :where(.date-picker-date[data-is-selected="true"][data-is-within-range="false"]) {
+    border: 2px solid var(--error-color, var(--default-error-color));
+    background-color: var(--error-color, var(--default-error-color));
+    color: rgba(255, 255, 255, 0.5);
+    opacity: 1;
+  }
 
-.date-picker-date[data-is-disabled="true"] * {
-  text-decoration: line-through;
-}
+  :where(.date-picker-date[data-is-disabled="true"] *) {
+    text-decoration: line-through;
+  }
 
-.date-picker-today {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  border: 2px solid #dcdcdc;
-}
+  :where(.date-picker-today) {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2px solid #dcdcdc;
+  }
 
-.date-picker-today[data-is-selected="true"] {
-  border: 2px solid rgb(255, 255, 255, 0.5);
-}
+  :where(.date-picker-today[data-is-selected="true"]) {
+    border: 2px solid rgb(255, 255, 255, 0.5);
+  }
 
-.date-picker-date {
-  height: calc(32px * var(--scalar, 1));
-  width: calc(32px * var(--scalar, 1));
+  :where(.date-picker-date) {
+    height: calc(32px * var(--scalar, 1));
+    width: calc(32px * var(--scalar, 1));
+  }
 }

package/src/inputs/date_picker/date_picker_date.tsx

@@ -77,7 +77,7 @@ export function DatePickerDate({ presenter, date: calendarDate }: DatePickerDate
   return (
     <button
       disabled={!isWithinMonth || isDisabled || !isWithinRange}
-      className={clsx(styles['date-picker-date'], 'date-picker-date')}
+      className={clsx(styles['date-picker-date'], 'tcn-date-picker-date')}
       onClick={select}
       data-is-within-month={String(isWithinMonth)}
       data-is-selected={String(isSelected)}
@@ -89,7 +89,7 @@ export function DatePickerDate({ presenter, date: calendarDate }: DatePickerDate
         <BodyText>{String(calendarDate.date)}</BodyText>
         {isToday && (
           <div
-            className={clsx(styles['date-picker-today'], 'date-picker-today')}
+            className={clsx(styles['date-picker-today'], 'tcn-date-picker-today')}
             data-is-selected={String(isSelected)}
           ></div>
         )}

package/src/inputs/date_picker/date_picker_day.module.css

@@ -1,4 +1,6 @@
-.date-picker-day {
-  height: calc(32px * var(--scalar, 1)) !important;
-  width: calc(32px * var(--scalar, 1)) !important;
+@layer tcn-system {
+  :where(.date-picker-day) {
+    height: calc(32px * var(--scalar, 1)) !important;
+    width: calc(32px * var(--scalar, 1)) !important;
+  }
 }

package/src/inputs/date_picker/date_picker_day.tsx

@@ -2,6 +2,7 @@ import { Headline } from '../../typography/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { useMemo } from 'react';
 import styles from './date_picker_day.module.css';
+import clsx from 'clsx';
 
 export interface DatePickerDayProps {
   dayOfTheWeek: number;
@@ -20,8 +21,12 @@ export function DatePickerDay({ dayOfTheWeek, countryCode }: DatePickerDayProps)
   );
 
   return (
-    <ZStack className={styles['date-picker-day']}>
-      <Headline size="sm" emphasis="faint" className={styles['date-picker-day-text']}>
+    <ZStack className={clsx(styles['date-picker-day'], 'tcn-date-picker-day')}>
+      <Headline
+        size="sm"
+        emphasis="faint"
+        className={clsx(styles['date-picker-day-text'], 'tcn-date-picker-day-text')}
+      >
         {weekdayName[0]}
       </Headline>
     </ZStack>

package/src/inputs/date_picker/date_picker_header.module.css

@@ -1,3 +1,5 @@
-.date-picker-header {
-  height: 35px;
+@layer tcn-system {
+  :where(.date-picker-header) {
+    height: 35px;
+  }
 }

package/src/inputs/date_picker/date_picker_header.tsx

@@ -61,7 +61,7 @@ export function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderPro
 
   return (
     <HStack
-      className={clsx(styles['date-picker-header'], 'date-picker-header')}
+      className={clsx(styles['date-picker-header'], 'tcn-date-picker-header')}
       minWidth="35px"
       width="100%"
     >

package/src/inputs/date_picker/date_picker_input.module.css

@@ -1,61 +1,63 @@
-.button {
-  padding-inline-end: calc(24px * var(--scalar, 1));
-}
+@layer tcn-system {
+  :where(.button) {
+    padding-inline-end: calc(24px * var(--scalar, 1));
+  }
 
-.button:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  :where(.button:focus) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-.button[data-hierarchy="secondary"] {
-  border: 1px solid #aaa;
-  color: var(--font-color);
-}
+  :where(.button[data-hierarchy="secondary"]) {
+    border: 1px solid #aaa;
+    color: var(--font-color);
+  }
 
-.button:dir(ltr)::after {
-  content: "";
-  position: absolute;
-  right: calc(4px * var(--scalar, 1));
-  top: 50%;
-  transform: translateY(-50%);
-  width: calc(18px * var(--scalar, 1));
-  height: calc(18px * var(--scalar, 1));
-  background-color: #808080;
-  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
-}
+  :where(.button:dir(ltr)::after) {
+    content: "";
+    position: absolute;
+    right: calc(4px * var(--scalar, 1));
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(18px * var(--scalar, 1));
+    height: calc(18px * var(--scalar, 1));
+    background-color: #808080;
+    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+  }
 
-.button:dir(rtl)::after {
-  content: "";
-  position: absolute;
-  left: calc(4px * var(--scalar, 1));
-  top: 50%;
-  transform: translateY(-50%);
-  width: calc(18px * var(--scalar, 1));
-  height: calc(18px * var(--scalar, 1));
-  background-color: #808080;
-  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
-}
+  :where(.button:dir(rtl)::after) {
+    content: "";
+    position: absolute;
+    left: calc(4px * var(--scalar, 1));
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(18px * var(--scalar, 1));
+    height: calc(18px * var(--scalar, 1));
+    background-color: #808080;
+    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+  }
 
-.button:hover::after {
-  background-color: var(--accent-color);
-}
+  :where(.button:hover::after) {
+    background-color: var(--accent-color);
+  }
 
-.button[data-hierarchy="secondary"]:hover {
-  color: var(--accent-color);
-  border-color: var(--accent-color);
-  background-color: transparent;
-}
+  :where(.button[data-hierarchy="secondary"]:hover) {
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+    background-color: transparent;
+  }
 
-.popover {
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
-  border-radius: 8px;
-  background-color: rgb(241, 241, 241);
-  height: auto;
+  :where(.popover) {
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    background-color: rgb(241, 241, 241);
+    height: auto;
+  }
 }

package/src/inputs/date_picker/date_picker_input.tsx

@@ -60,7 +60,7 @@ export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInp
     const pickerRef = useRef<HTMLDivElement | null>(null);
 
     const isException = useCallback((target: HTMLElement) => {
-      return target.closest('.suggestion-list') != null;
+      return target.closest('.tcn-suggestion-list') != null;
     }, []);
 
     const formatter = useMemo(() => {
@@ -125,7 +125,7 @@ export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInp
       <>
         <Button
           ref={ref}
-          className={clsx(styles.button, 'select')}
+          className={clsx(styles.button, 'tcn-select')}
           hAlign="start"
           disabled={disabled}
           hierarchy={hierarchy}
@@ -153,7 +153,7 @@ export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInp
         >
           <ZStack
             padding="8px"
-            className={clsx(styles.popover, 'date-picker-popover')}
+            className={clsx(styles.popover, 'tcn-date-picker-popover')}
             onKeyDown={processKeyInput}
           >
             <DatePicker

package/src/inputs/date_picker/date_picker_time_selector.module.css

@@ -1,33 +1,34 @@
-.time-box {
-  font-size: 14px;
-  background-color: #fff;
-  color: var(--font-color);
-  border: 0;
-  border-radius: 4px;
-  padding: 4px;
-  box-sizing: border-box;
-  font-family: Arial, Helvetica, sans-serif;
-  color: rgba(0, 0, 0, 0.85);
-  -webkit-tap-highlight-color: transparent;
-  height: 100%;
-}
+@layer tcn-system {
+  :where(.time-box) {
+    font-size: 14px;
+    background-color: #fff;
+    color: var(--font-color);
+    border: 0;
+    border-radius: 4px;
+    padding: 4px;
+    box-sizing: border-box;
+    color: rgba(0, 0, 0, 0.85);
+    -webkit-tap-highlight-color: transparent;
+    height: 100%;
+  }
 
-.time-box[data-is-disabled="true"] {
-  opacity: 0.5;
-  pointer-events: none;
-}
+  :where(.time-box[data-is-disabled="true"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
-.time-box-title {
-  color: rgb(110, 110, 110);
-}
+  :where(.time-box-title) {
+    color: rgb(110, 110, 110);
+  }
 
-.time-box-title-container {
-  border-bottom: 1px solid rgb(222, 222, 222);
-  min-height: 35px;
-  height: 35px;
-}
+  :where(.time-box-title-container) {
+    border-bottom: 1px solid rgb(222, 222, 222);
+    min-height: 35px;
+    height: 35px;
+  }
 
-.selected-time {
-  background-color: var(--accent-color) !important;
-  color: rgba(255, 255, 255, 0.9) !important;
+  :where(.selected-time) {
+    background-color: var(--accent-color) !important;
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
 }

package/src/inputs/date_picker/date_picker_time_selector.tsx

@@ -63,7 +63,7 @@ export function DatePickerTimeSelector({
         key={x}
         width="flex"
         hierarchy="tertiary"
-        className={clsx('selected-time', isSelected && styles['selected-time'])}
+        className={clsx('tcn-selected-time', isSelected && styles['selected-time'])}
         disabled={origin == null || disabled || isOutOfRange}
         onClick={() => {
           onSelect(date.getHours(), date.getMinutes(), date.getSeconds());
@@ -87,12 +87,15 @@ export function DatePickerTimeSelector({
       width="auto"
       height={height}
       data-is-disabled={disabled || origin == null}
-      className={clsx(styles['time-box'], 'time-box')}
+      className={clsx(styles['time-box'], 'tcn-time-box')}
     >
       <ZStack
-        className={clsx(styles['time-box-title-container'], 'time-box-title-container')}
+        className={clsx(
+          styles['time-box-title-container'],
+          'tcn-time-box-title-container'
+        )}
       >
-        <BodyText className={clsx(styles['time-box-title'], 'time-box-title')}>
+        <BodyText className={clsx(styles['time-box-title'], 'tcn-time-box-title')}>
           <ClockIcon size="lg" />
         </BodyText>
       </ZStack>