@tcn/ui 0.3.1 → 0.3.2

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,35 @@
-.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;
+    font-family: Arial, Helvetica, sans-serif;
+    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>

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

@@ -1,49 +1,51 @@
-.year-select {
-  /* Base select styles */
-  position: relative;
-  box-sizing: border-box;
-  padding-inline-end: calc(
-    24px *
-    var(--scalar, 1)
-  ); /* Add padding to prevent text overlap with chevron */
-}
+@layer tcn-system {
+  :where(.year-select) {
+    /* Base select styles */
+    position: relative;
+    box-sizing: border-box;
+    padding-inline-end: calc(
+      24px *
+      var(--scalar, 1)
+    ); /* Add padding to prevent text overlap with chevron */
+  }
 
-.year-select:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  :where(.year-select:focus) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-.year-select: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: currentColor;
-  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(.year-select: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: currentColor;
+    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 */
+  }
 
-.year-select: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: currentColor;
-  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(.year-select: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: currentColor;
+    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 */
+  }
 
-.year-select:hover::after {
-  background-color: currentColor;
+  :where(.year-select:hover::after) {
+    background-color: currentColor;
+  }
 }

package/src/inputs/date_picker/date_picker_year_input.tsx

@@ -29,7 +29,7 @@ export function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {
     <>
       <Button
         hierarchy="tertiary"
-        className={clsx('date-picker-year-select', styles['year-select'])}
+        className={clsx('tcn-date-picker-year-select', styles['year-select'])}
         width="auto"
         hAlign="start"
         onClick={open}