design-system-next 1.2.25 → 1.3.2

package/src/components/avatar/avatar.vue

@@ -2,7 +2,7 @@
   <div :class="avatarClassses">
     <template v-if="!initial">
       <img v-if="!$slots.default && src" :src="src" :alt="alt" :class="avatarImageClassses" />
-      <div v-else :class="[avatarImageClassses, 'avatar__slot border-color-weak border border-solid']">
+      <div v-else :class="[avatarImageClassses, 'avatar__slot spr-border-color-weak spr-border spr-border-solid']">
         <slot />
       </div>
     </template>

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

@@ -1,61 +1,67 @@
 import { computed, toRefs } from 'vue';
-import type { AvatarPropTypes } from './avatar';
 
 import classNames from 'classnames';
+
+import type { AvatarPropTypes } from './avatar';
+
 export const useAvatar = (props: AvatarPropTypes) => {
   const { size, color } = toRefs(props);
+
   const avatarClassses = computed(() => {
-    return classNames(' relative  inline-block rounded-full', {
-      'background-color-surface': color.value === 'primary',
-      'background-color': color.value === 'secondary',
+    return classNames('spr-relative spr-inline-block spr-rounded-full', {
+      'spr-background-color-surface': color.value === 'primary',
+      'spr-background-color': color.value === 'secondary',
     });
   });
 
   const avatarImageClassses = computed(() => {
-    return classNames('rounded-full object-cover flex items-center justify-center overflow-hidden', {
-      'h-20 min-w-20 text-[36px]': size.value === '2xl',
-      'h-14 min-w-14 font-size-600': size.value === 'xl',
-      'h-10 min-w-10 font-size-400': size.value === 'lg',
-      'h-9  min-w-9 font-size-300': size.value === 'md',
-      'h-6  min-w-6 font-size-200': size.value === 'sm',
-      'h-5  min-w-5 text-[10px]': size.value === 'xs',
-      'h-4  min-w-4 text-[10px]': size.value === '2xs',
-    });
+    return classNames(
+      'spr-rounded-full spr-object-cover spr-flex spr-items-center spr-justify-center spr-overflow-hidden',
+      {
+        'spr-h-20 spr-min-w-20 spr-text-[36px]': size.value === '2xl',
+        'spr-h-14 spr-min-w-14 spr-font-size-600': size.value === 'xl',
+        'spr-h-10 spr-min-w-10 spr-font-size-400': size.value === 'lg',
+        'spr-h-9  spr-min-w-9 spr-font-size-300': size.value === 'md',
+        'spr-h-6  spr-min-w-6 spr-font-size-200': size.value === 'sm',
+        'spr-h-5  spr-min-w-5 spr-text-[10px]': size.value === 'xs',
+        'spr-h-4  spr-min-w-4 spr-text-[10px]': size.value === '2xs',
+      },
+    );
   });
 
   const initialClassses = computed(() => {
     return classNames(
-      '  rounded-full  border-color-weak  border  border-solid  items-center  flex  justify-center  heading-xs  text-color-strong',
+      'spr-rounded-full spr-border-color-weak spr-border spr-border-solid spr-items-center spr-flex spr-justify-center spr-heading-xs spr-text-color-strong',
       {
-        ' h-20 min-w-20': size.value === '2xl',
-        ' h-14 min-w-14  body-lg-regular-medium': size.value === 'xl',
-        ' h-10 min-w-10  body-sm-regular-medium': size.value === 'lg',
-        ' h-9  min-w-9  body-sm-regular-medium': size.value === 'md',
-        ' h-6  min-w-6  body-xs-regular-medium': size.value === 'sm',
-        ' h-5  min-w-5 !text-[10px]': size.value === 'xs',
-        ' h-4  min-w-4 !text-[10px]': size.value === '2xs',
+        'spr-h-20 spr-min-w-20': size.value === '2xl',
+        'spr-h-14 spr-min-w-14 spr-body-lg-regular-medium': size.value === 'xl',
+        'spr-h-10 spr-min-w-10 spr-body-sm-regular-medium': size.value === 'lg',
+        'spr-h-9 spr-min-w-9 spr-body-sm-regular-medium': size.value === 'md',
+        'spr-h-6 spr-min-w-6 spr-body-xs-regular-medium': size.value === 'sm',
+        'spr-h-5 spr-min-w-5 !spr-text-[10px]': size.value === 'xs',
+        'spr-h-4 spr-min-w-4 !spr-text-[10px]': size.value === '2xs',
       },
     );
   });
 
   const avatarNotificationClassses = computed(() => {
-    return classNames(' absolute  right-0  top-0', {
-      ' right-[-5px]  top-[-6.3px]': size.value === 'xl',
-      ' right-[-7px]  top-[-8px]': size.value === 'lg',
-      ' right-[-5px]  top-[-6px]': size.value === 'md',
-      ' right-[-7px]  top-[-7px]': size.value === 'sm',
-      ' right-[-5px]  top-[-4px]': size.value === 'xs',
-      ' right-[-4px]  top-[-4px]': size.value === '2xs',
+    return classNames('spr-absolute spr-right-0 spr-top-0', {
+      'spr-right-[-5px] spr-top-[-6.3px]': size.value === 'xl',
+      'spr-right-[-7px] spr-top-[-8px]': size.value === 'lg',
+      'spr-right-[-5px] spr-top-[-6px]': size.value === 'md',
+      'spr-right-[-7px] spr-top-[-7px]': size.value === 'sm',
+      'spr-right-[-5px] spr-top-[-4px]': size.value === 'xs',
+      'spr-right-[-4px] spr-top-[-4px]': size.value === '2xs',
     });
   });
 
   const onlineNotificationClassses = computed(() => {
-    return classNames(' absolute  bottom-0  right-0', {
-      ' bottom-0  right-0': size.value === 'xl' || size.value === 'lg' || size.value === 'md',
-      ' bottom-[1px]  right-[1px]': size.value === 'xl',
-      ' bottom-[-3px]  right-[-4px]': size.value === 'sm',
-      ' bottom-[-4px]  right-[-3px]': size.value === 'xs',
-      ' bottom-[-2px]  right-[-4px]': size.value === '2xs',
+    return classNames('spr-absolute spr-bottom-0 spr-right-0', {
+      'spr-bottom-0 spr-right-0': size.value === 'xl' || size.value === 'lg' || size.value === 'md',
+      'spr-bottom-[1px] spr-right-[1px]': size.value === 'xl',
+      'spr-bottom-[-3px] spr-right-[-4px]': size.value === 'sm',
+      'spr-bottom-[-4px] spr-right-[-3px]': size.value === 'xs',
+      'spr-bottom-[-2px] spr-right-[-4px]': size.value === '2xs',
     });
   });
 

package/src/components/badge/badge.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex gap-2">
+  <div class="spr-flex spr-gap-2">
     <slot />
     <div :class="[badgeElementWrapper]">
       <section :class="[badgePositionClasses]">
-        <div :class="[badgeClasses, 'flex items-center justify-center']">
+        <div :class="[badgeClasses, 'spr-flex spr-items-center spr-justify-center']">
           {{ props.size === 'tiny' ? '' : text }}
         </div>
       </section>

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

@@ -1,24 +1,24 @@
 import { computed, toRefs } from 'vue';
+import classNames from 'classnames';
 import type { BadgePropTypes } from './badge';
 
-import classNames from 'classnames';
 export const useBadge = (props: BadgePropTypes) => {
   const { position, size, variant } = toRefs(props);
 
   const badgeClasses = computed(() => {
     const variantClasses = classNames({
-      'background-color-danger-base text-color-inverted-strong': variant.value === 'danger',
-      'background-color-disabled text-color-on-fill-disabled ': variant.value === 'disabled',
-      'background-color-information-base text-color-inverted-strong': variant.value === 'information',
-      'background-color-brand-base text-color-inverted-strong': variant.value === 'brand',
+      'spr-background-color-danger-base spr-text-color-inverted-strong': variant.value === 'danger',
+      'spr-background-color-disabled spr-text-color-on-fill-disabled': variant.value === 'disabled',
+      'spr-background-color-information-base spr-text-color-inverted-strong': variant.value === 'information',
+      'spr-background-color-brand-base spr-text-color-inverted-strong': variant.value === 'brand',
     });
 
     const sizeClasses = classNames({
-      'label-sm-medium  !leading-[0] !tracking-normal h-[20px] min-w-[20px] rounded-[32px] py-size-spacing-3xs px-size-spacing-5xs':
+      'spr-label-sm-medium !spr-leading-[0] !spr-tracking-normal spr-h-[20px] spr-min-w-[20px] spr-rounded-[32px] spr-py-size-spacing-3xs spr-px-size-spacing-5xs':
         size.value === 'big',
-      'label-xs-medium !leading-[0] !tracking-normal h-[16px] min-w-[16px] rounded-[32px] py-size-spacing-6xs px-size-spacing-5xs':
+      'spr-label-xs-medium !spr-leading-[0] !spr-tracking-normal spr-h-[16px] spr-min-w-[16px] spr-rounded-[32px] spr-py-size-spacing-6xs spr-px-size-spacing-5xs':
         size.value === 'small',
-      'h-[10px] min-w-[10px] rounded-full': size.value === 'tiny',
+      'spr-h-[10px] spr-min-w-[10px] spr-rounded-full': size.value === 'tiny',
     });
 
     return classNames(variantClasses, sizeClasses);
@@ -26,19 +26,19 @@ export const useBadge = (props: BadgePropTypes) => {
 
   const badgePositionClasses = computed(() => {
     return classNames({
-      'absolute -top-1 right-1': position.value === 'top' && size.value === 'tiny',
-      ' absolute -bottom-1 right-1': position.value === 'bottom' && size.value === 'tiny',
-      'absolute -top-2 -right-1': position.value === 'top' && size.value === 'small',
-      ' absolute -bottom-2 -right-1': position.value === 'bottom' && size.value === 'small',
-      'absolute -top-3 -right-2': position.value === 'top' && size.value === 'big',
-      ' absolute -bottom-3 -right-2': position.value === 'bottom' && size.value === 'big',
+      'spr-absolute -spr-top-1 spr-right-1': position.value === 'top' && size.value === 'tiny',
+      'spr-absolute -spr-bottom-1 spr-right-1': position.value === 'bottom' && size.value === 'tiny',
+      'spr-absolute -spr-top-2 -spr-right-1': position.value === 'top' && size.value === 'small',
+      'spr-absolute -spr-bottom-2 -spr-right-1': position.value === 'bottom' && size.value === 'small',
+      'spr-absolute -spr-top-3 -spr-right-2': position.value === 'top' && size.value === 'big',
+      'spr-absolute -spr-bottom-3 -spr-right-2': position.value === 'bottom' && size.value === 'big',
     });
   });
 
   const badgeElementWrapper = computed(() => {
     return classNames({
-      'flex items-center gap-2 ': position.value === 'default',
-      relative: position.value === 'top' || position.value === 'bottom',
+      'spr-flex spr-items-center spr-gap-2': position.value === 'default',
+      'spr-relative': position.value === 'top' || position.value === 'bottom',
     });
   });
 

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

@@ -24,37 +24,42 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
 
   const buttonDefaultCssClass: ComputedRef<string> = computed(() =>
     classNames([
-      'background-color flex items-center gap-1.5 w-fit min-w-[24px] items-center justify-center rounded-md outline-2 outline-offset-4',
+      'spr-background-color spr-flex spr-items-center spr-gap-1.5 spr-w-fit spr-min-w-[24px] spr-items-center spr-justify-center spr-rounded-md spr-outline-2 spr-outline-offset-4',
     ]),
   );
 
   const buttonTransitionCssClass: ComputedRef<string> = computed(() =>
-    classNames(['transition duration-150 ease-in-out', 'hover:shadow-button-hover', 'active:scale-95']),
+    classNames([
+      'spr-transition spr-duration-150 spr-ease-in-out',
+      'hover:spr-shadow-button-hover',
+      'active:spr-scale-95',
+    ]),
   );
 
   const buttonSizeCssClass: ComputedRef<string> = computed(() =>
     classNames({
-      'min-w-6 p-size-spacing-4xs font-medium font-size-100 leading-100': size.value === 'small',
-      'min-w-7 p-2 font-medium font-size-100 leading-100': size.value === 'medium',
-      '!min-w-9 px-2 py-3 font-medium font-size-200 leading-300 max-h-9': size.value === 'large',
-      'font-size-400': hasIcon.value && size.value === 'large',
-      'font-size-300': hasIcon.value && size.value === 'medium',
-      'font-size-200': hasIcon.value && size.value === 'small',
+      'spr-min-w-6 spr-p-size-spacing-4xs spr-font-medium spr-font-size-100 spr-leading-100': size.value === 'small',
+      'spr-min-w-7 spr-p-2 spr-font-medium spr-font-size-100 spr-leading-100': size.value === 'medium',
+      '!spr-min-w-9 spr-px-2 spr-py-3 spr-font-medium spr-font-size-200 spr-leading-300 spr-max-h-9':
+        size.value === 'large',
+      'spr-font-size-400': hasIcon.value && size.value === 'large',
+      'spr-font-size-300': hasIcon.value && size.value === 'medium',
+      'spr-font-size-200': hasIcon.value && size.value === 'small',
     }),
   );
 
   const buttonTextCssClass: ComputedRef<string> = computed(() => {
     if (variant.value === 'secondary' || variant.value === 'tertiary') {
       return classNames({
-        'text-color-strong': tone.value === 'neutral',
-        'text-color-brand-base': tone.value === 'success',
-        'text-color-danger-base': tone.value === 'danger',
+        'spr-text-color-strong': tone.value === 'neutral',
+        'spr-text-color-brand-base': tone.value === 'success',
+        'spr-text-color-danger-base': tone.value === 'danger',
       });
     }
 
     return classNames({
-      'text-color-strong': tone.value === 'neutral',
-      'text-color-inverted-strong': tone.value === 'success' || tone.value === 'danger',
+      'spr-text-color-strong': tone.value === 'neutral',
+      'spr-text-color-inverted-strong': tone.value === 'success' || tone.value === 'danger',
     });
   });
 
@@ -62,10 +67,10 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
   const buttonBackgroundCssClass: ComputedRef<string> = computed(() => {
     if (variant.value === 'secondary') {
       if (pressed.value) {
-        return 'background-color-pressed !shadow-button';
+        return 'spr-background-color-pressed !spr-shadow-button';
       }
 
-      return isHovered.value ? 'background-color-hover' : 'background-color ';
+      return isHovered.value ? 'spr-background-color-hover' : 'spr-background-color ';
     }
 
     if (variant.value === 'tertiary') {
@@ -77,11 +82,11 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
 
   function getTertiaryBackground(): string {
     if (pressed.value) {
-      return 'background-color-pressed !shadow-button';
+      return 'spr-background-color-pressed !spr-shadow-button';
     }
 
     return classNames('!border-none', {
-      'background-color-hover': isHovered.value,
+      'spr-background-color-hover': isHovered.value,
     });
   }
 
@@ -99,9 +104,9 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
 
   function getPressedBackground(): string {
     const backgrounds: Record<string, string> = {
-      neutral: 'background-color-pressed !shadow-button',
-      success: 'background-color-brand-pressed !shadow-button',
-      danger: 'background-color-danger-pressed !shadow-button',
+      neutral: 'spr-background-color-pressed !spr-shadow-button',
+      success: 'spr-background-color-brand-pressed !spr-shadow-button',
+      danger: 'spr-background-color-danger-pressed !spr-shadow-button',
     };
 
     return backgrounds[tone.value] || '';
@@ -109,9 +114,9 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
 
   function getHoveredBackground(): string {
     const backgrounds: Record<string, string> = {
-      neutral: 'background-color-hover',
-      success: 'background-color-success-pressed',
-      danger: 'background-color-danger-hover',
+      neutral: 'spr-background-color-hover',
+      success: 'spr-background-color-success-pressed',
+      danger: 'spr-background-color-danger-hover',
     };
 
     return backgrounds[tone.value] || '';
@@ -119,9 +124,9 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
 
   function getDefaultBackground(): string {
     const backgrounds: Record<string, string> = {
-      neutral: 'background-color-base',
-      success: 'background-color-brand-base',
-      danger: 'background-color-danger-base',
+      neutral: 'spr-background-color-base',
+      success: 'spr-background-color-brand-base',
+      danger: 'spr-background-color-danger-base',
     };
 
     return backgrounds[tone.value] || '';
@@ -131,16 +136,16 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
   const buttonBorderCssClass: ComputedRef<string> = computed(() => {
     if (variant.value === 'primary' || variant.value === 'tertiary') {
       if (focused.value) {
-        return 'border-solid !border !border-white-50';
+        return 'spr-border-solid !spr-border !spr-border-white-50';
       }
 
-      return 'border-solid !border !border-transparent';
+      return 'spr-border-solid !spr-border !spr-border-transparent';
     }
 
     return classNames({
-      'border-solid !border !border-color-base': tone.value === 'neutral',
-      'border-solid !border !border-color-brand-base': tone.value === 'success',
-      'border-solid !border !border-color-danger-base': tone.value === 'danger',
+      'spr-border-solid !spr-border !spr-border-color-base': tone.value === 'neutral',
+      'spr-border-solid !spr-border !spr-border-color-brand-base': tone.value === 'success',
+      'spr-border-solid !spr-border !spr-border-color-danger-base': tone.value === 'danger',
     });
   });
 
@@ -154,21 +159,21 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
         return classNames(
           buttonDefaultCssClass.value,
           buttonSizeCssClass.value,
-          'text-color-disabled background-color-disabled !border-0 !shadow-none !cursor-not-allowed',
+          'spr-text-color-disabled spr-background-color-disabled !spr-border-0 !spr-shadow-none !spr-cursor-not-allowed',
         );
 
       if (variant.value === 'secondary')
         return classNames(
           buttonDefaultCssClass.value,
           buttonSizeCssClass.value,
-          'text-color-disabled border-solid !border !border-color-disabled !shadow-none !cursor-not-allowed',
+          'spr-text-color-disabled spr-border-solid !spr-border !spr-border-color-disabled !spr-shadow-none !spr-cursor-not-allowed',
         );
 
       if (variant.value === 'tertiary')
         return classNames(
           buttonDefaultCssClass.value,
           buttonSizeCssClass.value,
-          'text-color-disabled !border-0 !shadow-none !cursor-not-allowed',
+          'spr-text-color-disabled !spr-border-0 !spr-shadow-none !spr-cursor-not-allowed',
         );
     }
 

package/src/components/checkbox/checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <label :class="wrapperClasses">
-    <div class="relative flex items-center">
+    <div class="spr-relative spr-flex spr-items-center">
       <input
         type="checkbox"
         :checked="props.modelValue"
@@ -12,7 +12,7 @@
         <Icon icon="ph:check-bold" />
       </span>
     </div>
-    <div v-if="props.label || props.description" class="grid gap-0.5">
+    <div v-if="props.label || props.description" class="spr-grid spr-gap-0.5">
       <span v-if="props.label" :class="labelClasses">
         {{ props.label }}
       </span>

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

@@ -1,7 +1,8 @@
 import { computed } from 'vue';
+
 import classNames from 'classnames';
-import type { SetupContext } from 'vue';
 
+import type { SetupContext } from 'vue';
 import type { CheckboxPropTypes, CheckboxEmitTypes } from './checkbox';
 
 interface CheckboxEvent extends Event {
@@ -10,16 +11,18 @@ interface CheckboxEvent extends Event {
 
 export const useCheckbox = (props: CheckboxPropTypes, emit: SetupContext<CheckboxEmitTypes>['emit']) => {
   const wrapperClasses = computed(() => {
-    const baseClasses = 'flex w-fit select-none items-center gap-1.5 transition duration-150 ease-in-out';
+    const baseClasses =
+      'spr-flex spr-w-fit spr-select-none spr-items-center spr-gap-1.5 spr-transition spr-duration-150 spr-ease-in-out';
 
     const conditionalClasses = {
-      'border-color-weak hover:background-color-hover rounded-lg border border-solid px-3 py-2': props.bordered,
-      'active:scale-95': props.bordered && !props.disabled,
-      'cursor-not-allowed': props.disabled,
-      'cursor-pointer': !props.disabled,
-      'background-color-brand-weak hover:background-color-brand-weak border-color-success-base':
+      'spr-border-color-weak hover:spr-background-color-hover spr-rounded-lg spr-border spr-border-solid spr-px-3 spr-py-2':
+        props.bordered,
+      'active:spr-scale-95': props.bordered && !props.disabled,
+      'spr-cursor-not-allowed': props.disabled,
+      'spr-cursor-pointer': !props.disabled,
+      'spr-background-color-brand-weak hover:spr-background-color-brand-weak spr-border-color-success-base':
         props.bordered && props.modelValue,
-      'background-color-disabled': props.bordered && props.disabled,
+      'spr-background-color-disabled': props.bordered && props.disabled,
     };
 
     return classNames(baseClasses, conditionalClasses);
@@ -27,12 +30,12 @@ export const useCheckbox = (props: CheckboxPropTypes, emit: SetupContext<Checkbo
 
   const inputCheckboxClasses = computed(() => {
     const baseClasses =
-      'h-5 w-5 appearance-none rounded-[2.5px] border-color-supporting border-[1.25px] border-solid transition duration-150 ease-in-out';
+      'spr-h-5 spr-w-5 spr-appearance-none spr-rounded-[2.5px] spr-border-color-supporting spr-border-[1.25px] spr-border-solid spr-transition spr-duration-150 spr-ease-in-out';
 
     const conditionalClasses = {
-      'background-color-brand-base border-color-brand-base': props.modelValue,
-      'border-color-disabled background-color-base cursor-not-allowed': props.disabled,
-      'cursor-pointer': !props.disabled,
+      'spr-background-color-brand-base spr-border-color-brand-base': props.modelValue,
+      'spr-border-color-disabled spr-background-color-base spr-cursor-not-allowed': props.disabled,
+      'spr-cursor-pointer': !props.disabled,
     };
 
     return classNames(baseClasses, conditionalClasses);
@@ -40,32 +43,32 @@ export const useCheckbox = (props: CheckboxPropTypes, emit: SetupContext<Checkbo
 
   const inputCheckboxCheckIconClasses = computed(() => {
     const baseClasses =
-      'flex items-center justify-center pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform font-bold opacity-0';
+      'spr-flex spr-items-center spr-justify-center spr-pointer-events-none spr-absolute spr-left-1/2 spr-top-1/2 -spr-translate-x-1/2 -spr-translate-y-1/2 spr-transform spr-font-bold spr-opacity-0';
 
     const conditionalClasses = {
-      'opacity-100': props.modelValue,
-      'text-color-inverted-strong': !props.disabled,
-      'text-color-on-fill-disabled': props.disabled,
+      'spr-opacity-100': props.modelValue,
+      'spr-text-color-inverted-strong': !props.disabled,
+      'spr-text-color-on-fill-disabled': props.disabled,
     };
 
     return classNames(baseClasses, conditionalClasses);
   });
 
   const labelClasses = computed(() => {
-    const baseClasses = 'label-xs-regular block';
+    const baseClasses = 'spr-label-xs-regular spr-block';
 
     const conditionalClasses = {
-      'text-color-on-fill-disabled': props.disabled,
+      'spr-text-color-on-fill-disabled': props.disabled,
     };
 
     return classNames(baseClasses, conditionalClasses);
   });
 
   const descriptionClasses = computed(() => {
-    const baseClasses = 'body-xs-regular block';
+    const baseClasses = 'spr-body-xs-regular spr-block';
 
     const conditionalClasses = {
-      'text-color-on-fill-disabled': props.disabled,
+      'spr-text-color-on-fill-disabled': props.disabled,
     };
 
     return classNames(baseClasses, conditionalClasses);

package/src/components/dropdown/dropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <Menu
     v-model:shown="menuOpened"
-    class="w-fit"
+    class="spr-w-fit"
     aria-id="dropdown-wrapper"
     distance="4"
     :placement="props.placement"
@@ -13,25 +13,25 @@
     </div>
 
     <template #popper>
-      <div class="grid gap-0.5">
+      <div class="spr-grid spr-gap-0.5">
         <div
           v-for="(item, index) in props.menu"
           :key="index"
           :class="[
             dropdownItemBaseClasses,
             {
-              'background-color-single-active': isItemSelected(item),
+              'spr-background-color-single-active': isItemSelected(item),
             },
           ]"
           @click="handleSelectedItem(item)"
         >
           <spr-checkbox v-if="props.dropdownType === 'multi-select'" v-model="checkboxModels[item.text]" />
-          <div class="flex w-full items-center">
-            <span class="text-xs">{{ item.text }}</span>
+          <div class="spr-flex spr-w-full spr-items-center">
+            <span class="spr-text-xs">{{ item.text }}</span>
           </div>
           <Icon
             v-if="props.dropdownType === 'single-select' && isItemSelected(item)"
-            class="text-color-brand-base w-[1.39em]"
+            class="spr-text-color-brand-base spr-w-[1.39em]"
             icon="ph:check"
           />
         </div>

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

@@ -1,7 +1,8 @@
 import { ref, onMounted, watch, computed } from 'vue';
-import type { SetupContext } from 'vue';
+
 import classNames from 'classnames';
 
+import type { SetupContext } from 'vue';
 import type { DropdownPropTypes, DropdownEmitTypes } from './dropdown';
 
 interface SelectedItem {
@@ -12,10 +13,10 @@ interface SelectedItem {
 export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<DropdownEmitTypes>['emit']) => {
   const dropdownItemBaseClasses = computed(() => {
     return classNames(
-      'flex cursor-pointer items-center justify-between gap-1.5 rounded-lg p-2',
-      'transition duration-150 ease-in-out',
-      'hover:background-color-hover',
-      'active:background-color-single-active active:scale-95',
+      'spr-flex spr-cursor-pointer spr-items-center spr-justify-between spr-gap-1.5 spr-rounded-lg spr-p-2',
+      'spr-transition spr-duration-150 spr-ease-in-out',
+      'hover:spr-background-color-hover',
+      'active:spr-background-color-single-active active:spr-scale-95',
     );
   });
 

package/src/components/empty-state/empty-state.vue

@@ -3,13 +3,13 @@
     <slot :class="imageSizeClasses" />
 
     <div v-if="!$slots.default" :class="imageSizeClasses">
-      <img :src="getImageUrl" alt="empty-image" class="h-full w-full object-cover" />
+      <img :src="getImageUrl" alt="empty-image" class="spr-h-full spr-w-full spr-object-cover" />
     </div>
 
-    <section class="flex flex-col items-center justify-center gap-size-spacing-md">
-      <div class="text-color-strong body-md body-md-regular-medium flex flex-col">
-        {{ description }}
-        <div class="text-color-base body-sm-regular">
+    <section class="spr-flex spr-flex-col spr-items-center spr-justify-center spr-gap-size-spacing-md">
+      <div class="spr-text-color-strong spr-body-md spr-body-md-regular-medium spr-flex spr-flex-col">
+        <span>{{ description }}</span>
+        <div class="spr-text-color-base spr-body-sm-regular">
           {{ subDescription }}
         </div>
       </div>
@@ -18,6 +18,7 @@
     </section>
   </div>
 </template>
+
 <script setup lang="ts">
 import { emptyStatePropTypes } from './empty-state';
 import { useEmptyState } from './use-empty-state';

package/src/components/empty-state/use-empty-state.ts

@@ -1,24 +1,26 @@
 import { computed, toRefs } from 'vue';
-import type { EmptyStatePropTypes } from './empty-state';
 
 import classNames from 'classnames';
+
+import type { EmptyStatePropTypes } from './empty-state';
+
 export const useEmptyState = (props: EmptyStatePropTypes) => {
   const { size, image } = toRefs(props);
 
   const emptyStateWrapperClasses = computed(() => {
     return classNames(
-      'background-color flex h-full w-full flex-col items-center justify-center gap-size-spacing-2xs px-size-spacing-2xl py-size-spacing-3xl text-center min-h-[240px]',
+      'spr-background-color spr-flex spr-h-full spr-w-full spr-flex-col spr-items-center spr-justify-center spr-gap-size-spacing-2xs spr-px-size-spacing-2xl spr-py-size-spacing-3xl spr-text-center spr-min-h-[240px]',
       {
-        'px-size-spacing-sm py-size-spacing-md min-h-[240px]': size.value === 'small',
-        'px-size-spacing-sm py-size-spacing-2xl min-h-[360px]': size.value === 'large',
+        'spr-px-size-spacing-sm spr-py-size-spacing-md spr-min-h-[240px]': size.value === 'small',
+        'spr-px-size-spacing-sm spr-py-size-spacing-2xl spr-min-h-[360px]': size.value === 'large',
       },
     );
   });
 
   const imageSizeClasses = computed(() => {
     return classNames({
-      'h-[200px] w-[200px]': size.value === 'large',
-      'h-[120px] w-[120px]': size.value === 'small',
+      'spr-h-[200px] spr-w-[200px]': size.value === 'large',
+      'spr-h-[120px] spr-w-[120px]': size.value === 'small',
     });
   });
 

package/src/components/input/input.ts

@@ -4,6 +4,10 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
 
 const TRAILING_SIZES = ['xs', 'sm', 'md'] as const;
 
+export const INPUT_TYPES = ['default','search'] as const;
+
+export const TYPE_HAS_TRAILING_ICONS = ['search'] as const;
+
 export const inputPropTypes = {
   id: {
     type: String,
@@ -19,7 +23,8 @@ export const inputPropTypes = {
   },
   type: {
     type: String,
-    default: 'text',
+    validator: (value: (typeof INPUT_TYPES)[number]) => INPUT_TYPES.includes(value),
+    default: 'default',
   },
   placeholder: {
     type: String,