design-system-next 2.16.2 → 2.17.4

package/src/components/date-picker/tabs/DatePickerCalendarTab.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="spr-grid spr-grid-cols-7">
+    <div
+      v-for="(dayOfWeek, dayOfWeekIndex) in daysOfWeek"
+      :key="dayOfWeekIndex"
+      class="spr-py-1 spr-text-center spr-font-semibold"
+    >
+      {{ dayOfWeek.text }}
+    </div>
+
+    <template v-for="day in calendarDays" :key="day.date">
+      <div
+        v-if="minMaxYear.min <= day.date.getFullYear() && minMaxYear.max >= day.date.getFullYear()"
+        :class="[
+          'spr-relative spr-box-border spr-flex spr-h-[40px] spr-items-center spr-justify-center spr-p-2',
+          'spr-transition spr-duration-150 spr-ease-in-out',
+          {
+            // Rest Days
+            'spr-background-color-disabled': isRestDay(day),
+
+            // Today Indicator - only apply brand color if not selected
+            'spr-text-color-brand-base': isTodayIndicator(day) && !isSelectedDate(day),
+
+            // Active Month Dates - only apply if not selected and not today
+            'spr-text-color-strong':
+              isActiveMonthDates(day) &&
+              !isSelectedDate(day) &&
+              !isTodayIndicator(day),
+
+            // Inactive Month Dates (Past/Future)
+            'spr-text-color-disabled': isInactiveMonthDates(day),
+
+            // Selected Date
+            'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-cursor-pointer !spr-text-white-50 active:spr-scale-95':
+              isSelectedDate(day),
+
+            // Unselected Date
+            'hover:spr-background-color-hover spr-border-color-weak active:spr-background-color-pressed spr-cursor-pointer spr-border spr-border-solid active:spr-scale-95':
+              isUnSelectedDate(day),
+
+            // Disabled Dates
+            'spr-cursor-not-allowed spr-opacity-30': isDateDisabled(day),
+          },
+        ]"
+        @click="!isDateDisabled(day) ? handleDateClick(day) : null"
+      >
+        <span>{{ day.date.getDate() }}</span>
+        <div
+          v-if="isTodayIndicator(day)"
+          class="spr-background-color-brand-base spr-absolute spr-bottom-1 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full"
+        ></div>
+      </div>
+      <div v-else></div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import type { TabComponentProps, CalendarTabEmits, RestDayType, DisabledDatesType } from '../date-picker';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+
+interface Props extends TabComponentProps {
+  calendarDays: Array<{ date: Date; inactive: boolean }>;
+  restDays: RestDayType[];
+  disabledDates?: DisabledDatesType;
+  selectedDate?: Date;
+  selectedMonth: number;
+  selectedDay?: number;
+}
+
+type Emits = CalendarTabEmits;
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const daysOfWeek = computed(() =>
+  Array.from({ length: 7 }, (_, i) => ({
+    text: dayjs().day(i).format('dd'),
+    fullText: dayjs().day(i).format('dddd'),
+    dayValue: i,
+  }))
+);
+
+const currentDate = computed(() => dayjs());
+
+const isRestDay = (day: { date: Date; inactive: boolean }) => {
+  const restDaysValue = props.restDays.map((restDay) => {
+    return daysOfWeek.value.find((d) => d.text.toLowerCase() === restDay.toLowerCase())?.dayValue;
+  });
+
+  if (isSelectedDate(day)) {
+    return false;
+  }
+
+  if (restDaysValue.includes(day.date.getDay())) {
+    return true;
+  }
+
+  return false;
+};
+
+const isTodayIndicator = (day: { date: Date }) => {
+  if (day.date.toDateString() === currentDate.value.format('ddd MMM DD YYYY')) {
+    return true;
+  }
+
+  return false;
+};
+
+const isActiveMonthDates = (day: { date: Date; inactive: boolean }) => {
+  if (!day.inactive && !isDateDisabled(day)) {
+    return true;
+  }
+
+  return false;
+};
+
+const isInactiveMonthDates = (day: { date: Date; inactive: boolean }) => {
+  if (day.inactive && !isDateDisabled(day)) {
+    return true;
+  }
+
+  return false;
+};
+
+const isSelectedDate = (day: { date: Date; inactive: boolean }) => {
+  if (isDateDisabled(day)) {
+    return false;
+  }
+
+  // Check if day, month, and year are selected (full mode)
+  if (props.selectedDay && props.selectedMonth !== undefined && props.selectedYear) {
+    return (
+      day.date.getDate() === props.selectedDay &&
+      day.date.getMonth() === props.selectedMonth &&
+      day.date.getFullYear() === props.selectedYear &&
+      !day.inactive
+    );
+  }
+
+  // Check if day and month are selected, but not year
+  if (props.selectedDay && props.selectedMonth !== undefined && !props.selectedYear) {
+    return day.date.getDate() === props.selectedDay && day.date.getMonth() === props.selectedMonth && !day.inactive;
+  }
+
+  // Check if only day is selected
+  if (props.selectedDay && !props.selectedMonth && !props.selectedYear) {
+    return day.date.getDate() === props.selectedDay && !day.inactive;
+  }
+
+
+  return false;
+};
+
+const isUnSelectedDate = (day: { date: Date }) => {
+  if (isDateDisabled(day)) {
+    return false;
+  }
+
+  // If no selection at all, all dates are unselected
+  if (!props.selectedDay && !props.selectedMonth && !props.selectedYear) {
+    return true;
+  }
+
+  // If only month is selected, all dates are unselected
+  if (!props.selectedDay && props.selectedMonth !== undefined && !props.selectedYear) {
+    return true;
+  }
+
+  // If day, month, and year are selected, check if this date matches
+  if (props.selectedDay && props.selectedMonth !== undefined && props.selectedYear) {
+    return !(
+      day.date.getDate() === props.selectedDay &&
+      day.date.getMonth() === props.selectedMonth &&
+      day.date.getFullYear() === props.selectedYear
+    );
+  }
+
+  // If day and month are selected, check if this date matches
+  if (props.selectedDay && props.selectedMonth !== undefined && !props.selectedYear) {
+    return !(
+      day.date.getDate() === props.selectedDay &&
+      day.date.getMonth() === props.selectedMonth
+    );
+  }
+
+  // If only day is selected, check if this date matches
+  if (props.selectedDay && !props.selectedMonth && !props.selectedYear) {
+    return day.date.getDate() !== props.selectedDay;
+  }
+
+  return true;
+};
+
+const isDateDisabled = (day: { date: Date }) => {
+  if (
+    isDateDisabledFromTo(day) ||
+    isDateDisabledPastDate(day) ||
+    isDateDisabledFutureDate(day) ||
+    isDateDisabledSelectedDates(day) ||
+    isDateDisabledWeekends(day) ||
+    isDateDisabledWeekdays(day) ||
+    isDateDisabledSelectedDays(day)
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+const isDateDisabledFromTo = (day: { date: Date }) => {
+  if (props.disabledDates?.from && props.disabledDates?.to) {
+    const disabledFrom = dayjs(props.disabledDates.from, 'MM-DD-YYYY').startOf('day');
+    const disabledTo = dayjs(props.disabledDates.to, 'MM-DD-YYYY').endOf('day');
+
+    const dayDate = dayjs(day.date);
+
+    return dayDate.isSameOrAfter(disabledFrom, 'day') && dayDate.isSameOrBefore(disabledTo, 'day');
+  }
+
+  return false;
+};
+
+const isDateDisabledPastDate = (day: { date: Date }) => {
+  if (props.disabledDates?.pastDates) {
+    const dayDate = dayjs(day.date);
+
+    if (typeof props.disabledDates.pastDates === 'boolean') {
+      return dayDate.isBefore(currentDate.value.startOf('day'));
+    } else {
+      const selectedDate = dayjs(props.disabledDates.pastDates);
+
+      return dayDate.isBefore(dayjs(selectedDate, 'MM-DD-YYYY').startOf('day'));
+    }
+  }
+
+  return false;
+};
+
+const isDateDisabledFutureDate = (day: { date: Date }) => {
+  if (props.disabledDates?.futureDates) {
+    const dayDate = dayjs(day.date);
+
+    if (typeof props.disabledDates.futureDates === 'boolean') {
+      return dayDate.isAfter(currentDate.value.endOf('day'));
+    } else {
+      const selectedDate = dayjs(props.disabledDates.futureDates);
+
+      return dayDate.isAfter(dayjs(selectedDate, 'MM-DD-YYYY').endOf('day'));
+    }
+  }
+
+  return false;
+};
+
+const isDateDisabledSelectedDates = (day: { date: Date }) => {
+  if (props.disabledDates?.selectedDates && props.disabledDates.selectedDates.length > 0) {
+    const dayDate = dayjs(day.date);
+
+    props.disabledDates.selectedDates.forEach((_date) => {
+      if (!dayjs(_date).isValid()) {
+        console.error(`Error: disabledDates Props - Selected Dates - Invalid date format: "${_date}"`);
+      }
+    });
+
+    return props.disabledDates.selectedDates.some((date) => dayDate.isSame(dayjs(date, 'MM-DD-YYYY'), 'day'));
+  }
+
+  return false;
+};
+
+const isDateDisabledWeekends = (day: { date: Date }) => {
+  if (props.disabledDates?.weekends) {
+    const dayDate = dayjs(day.date);
+
+    return dayDate.day() === 0 || dayDate.day() === 6;
+  }
+
+  return false;
+};
+
+const isDateDisabledWeekdays = (day: { date: Date }) => {
+  if (props.disabledDates?.weekdays) {
+    const dayDate = dayjs(day.date);
+
+    return dayDate.day() > 0 && dayDate.day() < 6;
+  }
+
+  return false;
+};
+
+const isDateDisabledSelectedDays = (day: { date: Date }) => {
+  if (props.disabledDates?.selectedDays) {
+    const dayDate = dayjs(day.date);
+
+    return props.disabledDates.selectedDays.some((day) => {
+      const foundDay = daysOfWeek.value.find((d) => d.text.toLowerCase() === day.toLowerCase());
+
+      if (!foundDay) {
+        console.error(`Error: disabledDates Props - Selected Days - Invalid day: "${day}"`);
+      }
+
+      return foundDay ? dayDate.day() === daysOfWeek.value.indexOf(foundDay) : false;
+    });
+  }
+
+  return false;
+};
+
+const handleDateClick = (day: { date: Date; inactive: boolean }) => {
+  emit('update:date', day);
+  emit('update:month', day.date.getMonth());
+  emit('update:year', day.date.getFullYear());
+};
+</script>

package/src/components/date-picker/tabs/DatePickerMonthTab.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="spr-grid spr-grid-cols-4 spr-gap-2">
+    <div
+      v-for="(month, monthIndex) in monthsList"
+      :key="monthIndex"
+      :class="[
+        'spr-subheading-xs spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-lg spr-p-4',
+        'spr-border spr-border-solid',
+        'spr-transition spr-duration-150 spr-ease-in-out',
+        'active:spr-scale-95',
+        {
+          'spr-text-color-brand-base': month.monthValue === currentMonth,
+          'spr-border-color-weak hover:spr-background-color-hover active:spr-background-color-pressed':
+            month.monthValue !== selectedMonth,
+          'spr-border-color-brand-base spr-background-color-single-active':
+            month.monthValue === selectedMonth,
+        },
+      ]"
+      @click="handleMonthClick(month)"
+    >
+      <span>{{ month.text }}</span>
+
+      <div
+        v-if="month.monthValue === currentMonth"
+        class="spr-background-color-brand-base spr-absolute spr-bottom-2 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue';
+import dayjs from 'dayjs';
+import type { TabComponentProps, MonthTabEmits } from '../date-picker';
+
+interface Props extends TabComponentProps {
+  selectedMonth: number;
+}
+
+type Emits = MonthTabEmits;
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const { selectedMonth } = toRefs(props);
+
+const monthsList = computed(() =>
+  Array.from({ length: 12 }, (_, i) => ({
+    text: dayjs().month(i).format('MMM'),
+    fullText: dayjs().month(i).format('MMMM'),
+    monthValue: i,
+  }))
+);
+
+const currentMonth = computed(() => dayjs().month());
+
+const handleMonthClick = (month: { text: string; fullText: string; monthValue: number }) => {
+  emit('update:month', month.monthValue);
+};
+</script>

package/src/components/date-picker/tabs/DatePickerYearTab.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="spr-grid spr-grid-cols-4 spr-gap-2">
+    <div
+      v-for="(year, index) in yearTabCurrentYearPage"
+      :key="index"
+      :class="[
+        'spr-subheading-xs spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-lg spr-p-4',
+        'spr-border spr-border-solid',
+        'spr-transition spr-duration-150 spr-ease-in-out',
+        'active:spr-scale-95',
+        {
+          'spr-text-color-brand-base': year === currentYear,
+          'spr-border-color-weak hover:spr-background-color-hover active:spr-background-color-pressed':
+            year !== selectedYear,
+          'spr-border-color-brand-base spr-background-color-single-active': year === selectedYear,
+        },
+      ]"
+      @click="handleYearClick(year)"
+    >
+      <span>{{ year }}</span>
+      <div
+        v-if="year === currentYear"
+        class="spr-background-color-brand-base spr-absolute spr-bottom-2 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import dayjs from 'dayjs';
+import type { TabComponentProps, YearTabEmits } from '../date-picker';
+
+interface Props extends Omit<TabComponentProps, 'selectedYear'> {
+  selectedYear?: number;
+  itemsPerPage?: number;
+  yearsArray?: number[];
+  currentPage?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedYear: undefined,
+  itemsPerPage: 12,
+  yearsArray: () => [],
+  currentPage: 0,
+});
+
+const emit = defineEmits<YearTabEmits>();
+
+const yearsArray = computed(() => props.yearsArray || []);
+
+const currentYear = computed(() => dayjs().year());
+
+const yearTabCurrentYearPage = computed(() => {
+  const start = props.currentPage * props.itemsPerPage;
+  const remainingItems = yearsArray.value.slice(start);
+
+  return remainingItems.length < props.itemsPerPage
+    ? remainingItems
+    : yearsArray.value.slice(start, start + props.itemsPerPage);
+});
+
+const isPreviousButtonDisabled = computed(() => {
+  return props.currentPage === 0;
+});
+
+const isNextButtonDisabled = computed(() => {
+  return (props.currentPage + 1) * props.itemsPerPage >= yearsArray.value.length;
+});
+
+const setCurrentPageYear = () => {
+  const currentYearIndex = yearsArray.value.indexOf(props.selectedYear || 0);
+
+  if (currentYearIndex !== -1) {
+    const page = Math.floor(currentYearIndex / props.itemsPerPage);
+    emit('update:currentPage', page);
+  }
+};
+
+const handleYearClick = (year: number) => {
+  emit('update:year', year);
+};
+
+// Watch for changes in selectedYear to update current page
+watch(
+  () => props.selectedYear,
+  (newYear) => {
+    if (newYear) {
+      const yearIndex = yearsArray.value.indexOf(newYear);
+
+      if (yearIndex !== -1) {
+        const page = Math.floor(yearIndex / props.itemsPerPage);
+        emit('update:currentPage', page);
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// Watch for changes in minMaxYear to reset current page
+watch(
+  () => props.minMaxYear,
+  () => {
+    emit('update:currentPage', 0);
+  }
+);
+
+// Expose methods for parent component
+defineExpose({
+  isPreviousButtonDisabled,
+  isNextButtonDisabled,
+  setCurrentPageYear,
+});
+</script>

package/src/components/dropdown/dropdown.ts

@@ -86,6 +86,29 @@ export const dropdownPropTypes = {
     type: String,
     default: '100%',
   },
+  autoHide: {
+    type: Boolean,
+    default: true,
+  },
+  triggers: {
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => ['click'],
+  },
+  popperTriggers: {
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => [],
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
   popperWidth: {
     type: String,
     default: '100%',
@@ -94,10 +117,9 @@ export const dropdownPropTypes = {
     type: String,
     default: 'unset',
   },
-  popperStrategy: {
+  popperContainer: {
     type: String,
-    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
-    default: 'absolute',
+    default: '',
   },
   disabled: {
     type: Boolean,
@@ -119,24 +141,6 @@ export const dropdownPropTypes = {
     type: Boolean,
     default: false,
   },
-  triggers: {
-    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
-    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
-      return value.every((val) => TRIGGER_EVENTS.includes(val));
-    },
-    default: () => ['click'],
-  },
-  popperTriggers: {
-    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
-    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
-      return value.every((val) => TRIGGER_EVENTS.includes(val));
-    },
-    default: () => [],
-  },
-  autoHide: {
-    type: Boolean,
-    default: true,
-  },
 };
 
 export const dropdownEmitTypes = {

package/src/components/dropdown/dropdown.vue

@@ -8,7 +8,7 @@
     :popper-triggers="props.popperTriggers"
     :auto-hide="props.autoHide"
     :disabled="isDropdownPopperDisabled"
-    :container="`#${props.id}`"
+    :container="props.popperContainer ? props.popperContainer : `#${props.id}`"
     :strategy="
       props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
     "

package/src/components/icon/icon.ts

@@ -0,0 +1,36 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+export const ICON_SIZE = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;
+export const ICON_TONE = ['success', 'error', 'info', 'pending', 'caution'] as const;
+export const ICON_VARIANTS = ['primary', 'secondary', 'tertiary'] as const;
+
+export const iconPropTypes = {
+  id: {
+    type: String,
+    required: true,
+    default: 'icon',
+  },
+  icon: {
+    type: String,
+    required: true,
+    default: '',
+  },
+  size: {
+    type: String as PropType<(typeof ICON_SIZE)[number]>,
+    validator: (value: (typeof ICON_SIZE)[number]) => ICON_SIZE.includes(value),
+    default: 'md',
+  },
+  tone: {
+    type: String as PropType<(typeof ICON_TONE)[number]>,
+    validator: (value: (typeof ICON_TONE)[number]) => ICON_TONE.includes(value),
+    default: '',
+  },
+  variant: {
+    type: String as PropType<(typeof ICON_VARIANTS)[number]>,
+    validator: (value: (typeof ICON_VARIANTS)[number]) => ICON_VARIANTS.includes(value),
+    default: '',
+  },
+};
+
+export type IconPropTypes = ExtractPropTypes<typeof iconPropTypes>;

package/src/components/icon/icon.vue

@@ -0,0 +1,12 @@
+<template>
+  <div :class="iconClasses">
+    <Icon v-bind="$attrs" :id="props.id" :icon="props.icon" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+import { iconPropTypes } from './icon';
+import { useIcon } from './use-icon';
+const props = defineProps(iconPropTypes);
+const { iconClasses } = useIcon(props);
+</script>

package/src/components/icon/use-icon.ts

@@ -0,0 +1,67 @@
+import { toRefs, computed } from 'vue';
+import classNames from 'classnames';
+import type { IconPropTypes } from './icon';
+
+export const useIcon = (props: IconPropTypes) => {
+  const { size, tone, variant } = toRefs(props);
+
+  const iconClasses = computed(() => {
+    const BASE_CLASSES =
+      'spr-rounded-border-radius-md spr-relative spr-inline-block spr-rounded spr-flex spr-items-center spr-justify-center';
+
+    const TONE_MAP = {
+      success: {
+        primary: 'spr-border-color-brand-base spr-text-color-inverted-strong spr-background-color-success-base',
+        secondary: 'spr-border-color-brand-base spr-text-color-success-base spr-bg-kangkong-50',
+        tertiary: 'spr-text-color-success-base',
+      },
+      error: {
+        primary: 'spr-border-color-danger-base spr-text-color-inverted-strong spr-background-color-danger-base',
+        secondary: 'spr-border-color-danger-base spr-text-color-danger-base spr-bg-tomato-50',
+        tertiary: 'spr-text-color-danger-base',
+      },
+      info: {
+        primary:
+          'spr-border-color-information-base spr-text-color-inverted-strong spr-background-color-information-base',
+        secondary: 'spr-border-color-information-base spr-text-color-information-base spr-bg-sky-50',
+        tertiary: 'spr-text-color-information-base',
+      },
+      pending: {
+        primary: 'spr-border-color-pending-base spr-text-color-inverted-strong spr-background-color-pending-base',
+        secondary: 'spr-border-color-pending-base spr-text-color-pending-base spr-bg-yellow-50',
+        tertiary: 'spr-text-color-pending-base',
+      },
+      caution: {
+        primary: 'spr-border-color-caution-base spr-text-color-inverted-strong spr-background-color-caution-base',
+        secondary: 'spr-border-color-caution-base spr-text-color-caution-base spr-bg-orange-50',
+        tertiary: 'spr-text-color-caution-base',
+      },
+    };
+
+    const SIZE_MAP = {
+      '2xl': 'spr-h-20 spr-min-w-20 spr-font-size-700',
+      xl: 'spr-h-14 spr-min-w-14 spr-font-size-600',
+      lg: 'spr-h-10 spr-min-w-10 spr-font-size-500',
+      md: 'spr-h-9 spr-min-w-9 spr-font-size-400',
+      sm: 'spr-h-6 spr-min-w-6 spr-font-size-300 spr-rounded-border-radius-sm',
+      xs: 'spr-h-5 spr-min-w-5 spr-font-size-250 spr-rounded-border-radius-xs',
+      '2xs': 'spr-h-4 spr-min-w-4  spr-font-size-250 spr-rounded-border-radius-xs',
+    };
+
+    const toneClasses = classNames('spr-border spr-border-solid', TONE_MAP[tone.value]?.[variant.value] || '');
+
+    const sizeClasses = SIZE_MAP[size.value] || SIZE_MAP.md;
+
+    const variantClasses = classNames({
+      'spr-border-0': variant.value === 'primary',
+      'spr-border': variant.value === 'secondary',
+      'spr-border-0 spr-bg-transparent': variant.value === 'tertiary' || !variant.value,
+    });
+
+    return classNames(variantClasses, BASE_CLASSES, sizeClasses, toneClasses);
+  });
+
+  return {
+    iconClasses,
+  };
+};

package/src/components/lozenge/lozenge.ts

@@ -10,7 +10,7 @@ export const lozengePropTypes = {
    */
   label: {
     type: String,
-    default: 'label',
+    default: '',
   },
   /**
    * @description Lozenge tone