@redseed/redseed-ui-vue3 1.5.7 → 1.7.0

package/index.js

@@ -39,7 +39,7 @@ import LogoRedSeedCoach from './src/components/Logo/LogoRedSeedCoach.vue'
 import LogoRedSeedCourses from './src/components/Logo/LogoRedSeedCourses.vue'
 import LogoRedSeedLMS from './src/components/Logo/LogoRedSeedLMS.vue'
 import MessageBox from './src/components/MessageBox/MessageBox.vue'
-import MetaItem from './src/components/PageHeading/MetaItem.vue'
+import MetaInfo from './src/components/MetaInfo/MetaInfo.vue'
 import Modal from './src/components/Modal/Modal.vue'
 import PageHeading from './src/components/PageHeading/PageHeading.vue'
 import ProgressCircle from './src/components/Progress/ProgressCircle.vue'
@@ -51,9 +51,9 @@ export {
     ButtonDanger,
     ButtonDangerFull,
     ButtonDangerFullRounded,
-    ButtonDangerRounded, 
+    ButtonDangerRounded,
     ButtonGroup,
-    ButtonSlot,
+    ButtonGroupItem,
     ButtonPrimary,
     ButtonPrimaryFull,
     ButtonPrimaryFullRounded,
@@ -62,7 +62,7 @@ export {
     ButtonSecondaryFull,
     ButtonSecondaryFullRounded,
     ButtonSecondaryRounded,
-    ButtonGroupItem,
+    ButtonSlot,
     ButtonTertiary,
     ButtonTertiaryFull,
     ButtonTertiaryFullRounded,
@@ -89,7 +89,7 @@ export {
     LogoRedSeedCourses,
     LogoRedSeedLMS,
     MessageBox,
-    MetaItem,
+    MetaInfo,
     Modal,
     PageHeading,
     ProgressCircle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "1.5.7",
+  "version": "1.7.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Button/ButtonDanger.vue

@@ -7,7 +7,7 @@ defineOptions({
 })
 
 const buttonClass = computed(() => [
-    'button-danger',
+    'rsui-button-danger',
 ])
 </script>
 <template>
@@ -24,7 +24,7 @@ const buttonClass = computed(() => [
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
-.button-danger {
+.rsui-button-danger {
     // default colors
     @apply bg-white text-danger ring-danger/20 border-danger;
     // default hover state

package/src/components/Button/ButtonPrimary.vue

@@ -7,7 +7,7 @@ defineOptions({
 })
 
 const buttonClass = computed(() => [
-    'button-primary',
+    'rsui-button-primary',
 ])
 </script>
 <template>
@@ -24,7 +24,7 @@ const buttonClass = computed(() => [
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
-.button-primary {
+.rsui-button-primary {
     // default colors
     @apply bg-primary text-white ring-primary/20 border-primary;
     // default hover state

package/src/components/Button/ButtonSecondary.vue

@@ -7,7 +7,7 @@ defineOptions({
 })
 
 const buttonClass = computed(() => [
-    'button-secondary',
+    'rsui-button-secondary',
 ])
 </script>
 <template>
@@ -24,7 +24,7 @@ const buttonClass = computed(() => [
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
-.button-secondary {
+.rsui-button-secondary {
     // default colors
     @apply bg-secondary text-white ring-secondary/20 border-secondary;
     // default hover state

package/src/components/Button/ButtonSlot.vue

@@ -53,42 +53,42 @@ const defaultSize = computed(() => !props.xs && !props.sm && !props.md && !props
 const type = computed(() => props.submit ? 'submit' : 'button')
 
 const buttonSlotClass = computed(() => [
-    'button-slot',
+    'rsui-button-slot',
     {
         // button sizes
-        'button-slot--xs': props.xs,
-        'button-slot--sm': props.sm,
-        'button-slot--md': props.md || defaultSize.value,
-        'button-slot--lg': props.lg,
+        'rsui-button-slot--xs': props.xs,
+        'rsui-button-slot--sm': props.sm,
+        'rsui-button-slot--md': props.md || defaultSize.value,
+        'rsui-button-slot--lg': props.lg,
 
         // button sizes with icon
-        'button-slot--xs--icon': props.xs && !slots.label && slots.icon,
-        'button-slot--sm--icon': props.sm && !slots.label && slots.icon,
-        'button-slot--md--icon': (props.md || defaultSize.value) && !slots.label && slots.icon,
-        'button-slot--lg--icon': props.lg && !slots.label && slots.icon,
+        'rsui-button-slot--xs--icon': props.xs && !slots.label && slots.icon,
+        'rsui-button-slot--sm--icon': props.sm && !slots.label && slots.icon,
+        'rsui-button-slot--md--icon': (props.md || defaultSize.value) && !slots.label && slots.icon,
+        'rsui-button-slot--lg--icon': props.lg && !slots.label && slots.icon,
 
         // button full width
-        'button-slot--full': props.full,
+        'rsui-button-slot--full': props.full,
 
         // button fully rounded
-        'button-slot--rounded': props.rounded,
+        'rsui-button-slot--rounded': props.rounded,
 
         // button light variant
-        'button-slot--light': props.light,
+        'rsui-button-slot--light': props.light,
 
         // display icon at the end
-        'button-slot--icon-end': props.iconEnd && slots.icon,
+        'rsui-button-slot--icon-end': props.iconEnd && slots.icon,
     },
 ])
 
 const buttonSlotIconClass = computed(() => [
-    'button-slot__icon',
+    'rsui-button-slot__icon',
     {
         // modifier for button icon to be displayed at the end
-        'button-slot__icon--end': props.iconEnd && slots.icon,
+        'rsui-button-slot__icon--end': props.iconEnd && slots.icon,
 
         // modifier for button icon to be displayed without label
-        'button-slot__icon--only': !slots.label && slots.icon,
+        'rsui-button-slot__icon--only': !slots.label && slots.icon,
     }
 ])
 </script>
@@ -110,7 +110,7 @@ const buttonSlotIconClass = computed(() => [
 </button>
 </template>
 <style lang="scss" scoped>
-.button-slot {
+.rsui-button-slot {
     // default shape and control
     @apply w-fit h-fit inline-flex items-center justify-center select-none outline-none rounded border font-semibold transition;
     // default colors

package/src/components/Button/ButtonTertiary.vue

@@ -7,7 +7,7 @@ defineOptions({
 })
 
 const buttonClass = computed(() => [
-    'button-tertiary',
+    'rsui-button-tertiary',
 ])
 </script>
 <template>
@@ -24,9 +24,9 @@ const buttonClass = computed(() => [
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
-.button-tertiary {
+.rsui-button-tertiary {
     // default colors
-    @apply bg-white text-default-black ring-tertiary-dark/20 border-tertiary-dark;
+    @apply bg-white text-default-dark ring-tertiary-dark/20 border-tertiary-dark;
     // default hover state
     @apply hover:bg-white hover:text-tertiary-dark hover:border-tertiary-dark;
     // default focus state

package/src/components/ButtonGroup/ButtonGroup.vue

@@ -13,9 +13,9 @@ const props = defineProps({
 })
 
 const buttonClass = computed(() => [
-    'button-group',
+    'rsui-button-group',
     {
-        'button-group--sm' : props.sm,
+        'rsui-button-group--sm' : props.sm,
     }
 ])
 
@@ -26,10 +26,10 @@ const buttonClass = computed(() => [
 </div>
 </template>
 <style lang="scss">
-.button-group {
+.rsui-button-group {
     @apply whitespace-nowrap;
     &--sm {
-        .button-group-item {
+        .rsui-button-group-item {
             @apply text-xs px-2.5 py-1.5;
         }
     }

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -13,10 +13,10 @@ const props = defineProps({
 })
 
 const buttonClass = computed(() => [
-    'button-group-item',
+    'rsui-button-group-item',
     {
-        'button-group-item--selected' : props.selected,
-        'button-group-item--icon': slots.icon,
+        'rsui-button-group-item--selected' : props.selected,
+        'rsui-button-group-item--icon': slots.icon,
     }
 ])
 </script>
@@ -26,26 +26,26 @@ const buttonClass = computed(() => [
     v-bind="$attrs"
     @click="$emit('click', $event)"
 >
-    <span v-if="$slots.icon" class="button-group-item__icon">
+    <span v-if="$slots.icon" class="rsui-button-group-item__icon">
         <slot name="icon"></slot>
     </span>
-    <span v-else class="button-group-item__label">
+    <span v-else class="rsui-button-group-item__label">
         <slot></slot>
     </span>
 </button>
 </template>
 <style lang="scss" scoped>
-.button-group-item {
+.rsui-button-group-item {
     // default shape and control
     @apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition first:rounded-l first:border-l last:rounded-r last:border-r;
     // default colors
-    @apply bg-white border-r text-default-black ring-tertiary border-y border-tertiary ;
+    @apply bg-white border-r text-default-dark ring-tertiary border-y border-tertiary ;
     // default hover state
-    @apply hover:border-tertiary hover:bg-tertiary/10 hover:text-default-black;
+    @apply hover:border-tertiary hover:bg-tertiary/10 hover:text-default-dark;
     // default focus state unapplied
     // @apply focus-visible:border-tertiary focus-visible:text-tertiary focus-visible:ring-4 focus-visible:outline-none focus-visible:ring-gray-100 focus-visible:z-10 relative;
     // default active/pressed state
-    @apply active:ring-0  active:bg-tertiary-dark/10 active:text-default-black;
+    @apply active:ring-0  active:bg-tertiary-dark/10 active:text-default-dark;
     // default disabled state
     @apply disabled:text-tertiary-dark/10;
     :deep(svg) {
@@ -64,8 +64,8 @@ const buttonClass = computed(() => [
         @apply bg-tertiary-dark/20 hover:bg-tertiary-dark/20 cursor-default;
     }
 }
-.button-group--sm {
-    .button-group-item--icon {
+.rsui-button-group--sm {
+    .rsui-button-group-item--icon {
         @apply p-1 ;
         :deep(svg) {
             @apply size-4;

package/src/components/Card/Card.vue

@@ -15,12 +15,12 @@ const props = defineProps({
 const emit = defineEmits(['click'])
 
 const cardClass = computed(() => [
-    'card',
+    'rsui-card',
     {
-        'card--hoverable': props.hoverable,
+        'rsui-card--hoverable': props.hoverable,
     },
     {
-        'card--clickable': props.clickable,
+        'rsui-card--clickable': props.clickable,
     },
 ])
 
@@ -33,21 +33,21 @@ function clicked() {
     v-on="clickable ? { click: clicked } : {}"
 >
     <div v-if="$slots.image"
-        class="card__image"
+        class="rsui-card__image"
     >
         <slot name="image"></slot>
     </div>
-    <div class="card__content">
+    <div class="rsui-card__content">
         <div v-if="$slots.title || $slots.status"
-            class="card__content__top"
+            class="rsui-card__content-top"
         >
             <div v-if="$slots.title"
-                class="card__content__top__title"
+                class="rsui-card__content-title"
             >
                 <slot name="title"></slot>
             </div>
             <div v-if="$slots.status"
-                class="card__content__top__status"
+                class="rsui-card__content-status"
             >
                 <slot name="status"></slot>
             </div>
@@ -57,7 +57,7 @@ function clicked() {
 </div>
 </template>
 <style lang="scss" scoped>
-.card {
+.rsui-card {
     @apply border border-gray-100 rounded-lg bg-white select-none overflow-hidden shadow-full-light transition duration-200;
     &--hoverable {
         @apply hover:shadow-md;
@@ -70,11 +70,11 @@ function clicked() {
     }
     &__content {
         @apply min-h-14 p-3;
-        &__top {
+        &-top {
             @apply flex justify-between space-x-2 pb-2;
-            &__title {
-                @apply h-12 text-lg font-semibold leading-6 line-clamp-2;
-            }
+        }
+        &-title {
+            @apply h-12 text-lg font-semibold leading-6 line-clamp-2;
         }
     }
 }

package/src/components/DropdownMenu/DropdownMenu.vue

@@ -18,11 +18,11 @@ const isOpen = ref(false)
 const defaultAlignment = computed(() => !props.right && !props.left)
 
 const containerClass = computed(() => [
-    'dropdown-menu__container',
+    'rsui-dropdown-menu__container',
     {
-        'dropdown-menu__container--open': isOpen.value,
-        'dropdown-menu__container--left': props.left || defaultAlignment.value,
-        'dropdown-menu__container--right': props.right,
+        'rsui-dropdown-menu__container--open': isOpen.value,
+        'rsui-dropdown-menu__container--left': props.left || defaultAlignment.value,
+        'rsui-dropdown-menu__container--right': props.right,
     },
 ])
 
@@ -44,7 +44,7 @@ onMounted(() => document.addEventListener('keydown', closeOnEscape))
 onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 </script>
 <template>
-<div class="dropdown-menu">
+<div class="rsui-dropdown-menu">
     <slot name="trigger" :open="open">
         <ButtonTertiary @click="open">
             <template #icon v-if="$slots['trigger-icon']">
@@ -58,7 +58,7 @@ onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 
     <!-- Full Screen Dropdown Overlay -->
     <div v-show="isOpen"
-        class="dropdown-menu__overlay"
+        class="rsui-dropdown-menu__overlay"
         @click="close"
     ></div>
 
@@ -100,7 +100,7 @@ onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
     @apply transform opacity-0 scale-95;
 }
 
-.dropdown-menu {
+.rsui-dropdown-menu {
     @apply w-fit relative;
     &__overlay {
         @apply fixed inset-0 z-40;

package/src/components/DropdownMenu/DropdownOption.vue

@@ -2,15 +2,15 @@
 const emit = defineEmits(['click'])
 </script>
 <template>
-<div class="dropdown-option"
+<div class="rsui-dropdown-option"
     @click="$emit('click')"
 >
     <slot></slot>
 </div>
 </template>
 <style lang="scss" scoped>
-.dropdown-option {
-    @apply cursor-pointer p-4 bg-white rounded-md text-base text-default-black transition;
+.rsui-dropdown-option {
+    @apply cursor-pointer p-4 bg-white rounded-md text-base text-default-dark transition;
     @apply hover:bg-gray-200;
 }
 </style>

package/src/components/Form/FormFieldsLogin.vue

@@ -59,7 +59,7 @@ const formRef = ref(props.form)
 <slot name="bottom-fields" :formRef="formRef"></slot>
 
 <FormFieldSlot v-if="$slots.forgot"
-    class="form-field-forgot"
+    class="rsui-form-field-forgot"
 >
     <slot name="forgot"></slot>
 </FormFieldSlot>
@@ -74,12 +74,12 @@ const formRef = ref(props.form)
     </ButtonPrimaryFull>
 </slot>
 
-<div v-if="$slots.signup" class="form-login__signup">
+<div v-if="$slots.signup" class="rsui-form-login__signup">
     <slot name="signup"></slot>
 </div>
 </template>
 <style lang="scss" scoped>
-.form-login {
+.rsui-form-login {
     &__signup {
         @apply text-sm pt-4;
     }

package/src/components/Form/FormFieldsRegister.vue

@@ -106,24 +106,12 @@ const formRef = ref(props.form)
     </ButtonPrimaryFull>
 </slot>
 
-<div v-if="$slots.signin" class="form-register__signin">
+<div v-if="$slots.signin" class="rsui-form-register__signin">
     <slot name="signin"></slot>
 </div>
 </template>
 <style lang="scss" scoped>
-.form-register {
-    &__or-container {
-        @apply w-full relative flex justify-center mb-2;
-    }
-
-    &__or-line {
-        @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
-    }
-
-    &__or {
-        @apply relative z-1 bg-white px-6;
-    }
-
+.rsui-form-register {
     &__signin {
         @apply text-sm pt-4;
     }

package/src/components/Form/FormSlot.vue

@@ -1,12 +1,12 @@
 <script setup>
 </script>
 <template>
-<div class="form-slot">
-    <div v-if="$slots.image" class="form-slot__image">
+<div class="rsui-form-slot">
+    <div v-if="$slots.image" class="rsui-form-slot__image">
         <slot name="image" />
     </div>
 
-    <div class="form-slot__content">
+    <div class="rsui-form-slot__content">
         <div v-if="$slots.top">
             <slot name="top"></slot>
         </div>
@@ -14,10 +14,10 @@
         <slot name="social"></slot>
 
         <div v-if="$slots.social"
-            class="form-slot__social-divider"
+            class="rsui-form-slot__social-divider"
         >
-            <div class="form-slot__social-divider__line">
-                <div class="form-slot__social-divider__or">
+            <div class="rsui-form-slot__social-divider-line">
+                <div class="rsui-form-slot__social-divider-or">
                     <slot name="or">
                         or
                     </slot>
@@ -34,7 +34,7 @@
 </div>
 </template>
 <style lang="scss" scoped>
-.form-slot {
+.rsui-form-slot {
     @apply min-w-80 sm:min-w-96 sm:w-112;
     @apply flex flex-col sm:justify-center items-center;
     @apply text-base text-gray-700;
@@ -46,11 +46,11 @@
     &__social-divider {
         @apply w-full relative flex justify-center mb-2;
 
-        &__line {
+        &-line {
             @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
         }
 
-        &__or {
+        &-or {
             @apply relative z-1 bg-white px-6;
         }
     }
@@ -64,7 +64,7 @@
 }
 </style>
 <style lang="scss">
-.form-slot {
+.rsui-form-slot {
     &__content {
         form {
             & > * {

package/src/components/Form/FormWrapperBuild.vue

@@ -4,9 +4,9 @@ import FormSlot from './FormSlot.vue'
 import LogoRedSeedBuild from '../Logo/LogoRedSeedBuild.vue'
 </script>
 <template>
-<FormSlot class="form-wrapper-build">
+<FormSlot class="rsui-form-wrapper-build">
     <template #image>
-        <LogoRedSeedBuild class="form-wrapper-build__image"></LogoRedSeedBuild>
+        <LogoRedSeedBuild class="rsui-form-wrapper-build__image"></LogoRedSeedBuild>
     </template>
 
     <template #top v-if="$slots.top">
@@ -25,7 +25,7 @@ import LogoRedSeedBuild from '../Logo/LogoRedSeedBuild.vue'
 </FormSlot>
 </template>
 <style lang="scss" scoped>
-.form-wrapper-build {
+.rsui-form-wrapper-build {
     &__image {
         @apply w-72 sm:w-80;
     }

package/src/components/Form/FormWrapperLMS.vue

@@ -4,9 +4,9 @@ import FormSlot from './FormSlot.vue'
 import LogoRedSeedLMS from '../Logo/LogoRedSeedLMS.vue'
 </script>
 <template>
-<FormSlot class="form-wrapper-lms">
+<FormSlot class="rsui-form-wrapper-lms">
     <template #image>
-        <LogoRedSeedLMS class="form-wrapper-lms__image"></LogoRedSeedLMS>
+        <LogoRedSeedLMS class="rsui-form-wrapper-lms__image"></LogoRedSeedLMS>
     </template>
 
     <template #top v-if="$slots.top">
@@ -25,7 +25,7 @@ import LogoRedSeedLMS from '../Logo/LogoRedSeedLMS.vue'
 </FormSlot>
 </template>
 <style lang="scss" scoped>
-.form-wrapper-lms {
+.rsui-form-wrapper-lms {
     &__image {
         @apply w-72 sm:w-80;
     }

package/src/components/FormField/FormFieldCheckbox.vue

@@ -31,11 +31,11 @@ const proxyChecked = computed({
 })
 </script>
 <template>
-<FormFieldSlot class="form-field-checkbox">
+<FormFieldSlot class="rsui-form-field-checkbox">
     <template #label>
-        <div class="form-field-checkbox__checkbox">
-            <div class="form-field-checkbox__check">
-                <CheckIcon v-if="iconChecked" class="form-field-checkbox__icon"></CheckIcon>
+        <div class="rsui-form-field-checkbox__checkbox">
+            <div class="rsui-form-field-checkbox__check">
+                <CheckIcon v-if="iconChecked" class="rsui-form-field-checkbox__icon"></CheckIcon>
                 <input
                     v-model="proxyChecked"
                     v-bind="$attrs"
@@ -44,7 +44,7 @@ const proxyChecked = computed({
                 >
             </div>
             <div v-if="$slots.label"
-                class="form-field-checkbox__label"
+                class="rsui-form-field-checkbox__label"
             >
                 <slot name="label"></slot>
             </div>
@@ -56,7 +56,7 @@ const proxyChecked = computed({
 </FormFieldSlot>
 </template>
 <style lang="scss" scoped>
-.form-field-checkbox {
+.rsui-form-field-checkbox {
     &__checkbox {
         @apply flex;
     }

package/src/components/FormField/FormFieldEmail.vue

@@ -20,7 +20,7 @@ const input = ref(null)
 </script>
 <template>
 <FormFieldSlot
-    class="form-field-email"
+    class="rsui-form-field-email"
     :id="$attrs.id"
 >
     <template #label v-if="$slots.label">

package/src/components/FormField/FormFieldHidden.vue

@@ -11,7 +11,7 @@ const input = ref(null)
 </script>
 <template>
 <FormFieldSlot
-    class="form-field-hidden"
+    class="rsui-form-field-hidden"
 >
     <input ref="input"
         type="hidden"

package/src/components/FormField/FormFieldPassword.vue

@@ -20,7 +20,7 @@ const input = ref(null)
 </script>
 <template>
 <FormFieldSlot
-    class="form-field-password"
+    class="rsui-form-field-password"
     :id="$attrs.id"
 >
     <template #label v-if="$slots.label">
@@ -28,8 +28,8 @@ const input = ref(null)
     </template>
 
     <div :class="{
-        'form-field-password__group': true,
-        'form-field-password__group--toggle': $slots.toggle,
+        'rsui-form-field-password__group': true,
+        'rsui-form-field-password__group--toggle': $slots.toggle,
     }">
         <input ref="input"
             type="password"
@@ -51,7 +51,7 @@ const input = ref(null)
 </FormFieldSlot>
 </template>
 <style lang="scss" scoped>
-.form-field-password {
+.rsui-form-field-password {
     @apply relative;
 
     &__group {

package/src/components/FormField/FormFieldPasswordToggle.vue

@@ -24,14 +24,14 @@ function togglePassword() {
     </template>
 
     <template #toggle>
-        <div class="form-field-password__toggle"
+        <div class="rsui-form-field-password__toggle"
             @click="togglePassword"
         >
             <EyeIcon v-if="!show"
-                class="form-field-password__toggle-icon"
+                class="rsui-form-field-password__toggle-icon"
             ></EyeIcon>
             <EyeSlashIcon v-if="show"
-                class="form-field-password__toggle-icon"
+                class="rsui-form-field-password__toggle-icon"
             ></EyeSlashIcon>
         </div>
     </template>
@@ -46,7 +46,7 @@ function togglePassword() {
 </FormFieldPassword>
 </template>
 <style lang="scss" scoped>
-.form-field-password {
+.rsui-form-field-password {
     &__toggle {
         @apply absolute top-px bottom-px right-px rounded-tr rounded-br;
         @apply flex items-center justify-center px-3 select-none cursor-pointer;

package/src/components/FormField/FormFieldSearch.vue

@@ -11,15 +11,15 @@ defineOptions({
 <template>
 <FormFieldText
     v-bind="$attrs"
-    class="search-input"
+    class="rsui-form-field-search"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
 
     <template #prefix class="search">
-        <div class="form-field-text__prefix">
-            <MagnifyingGlassIcon class="form-field-text__search-icon"></MagnifyingGlassIcon>
+        <div class="rsui-form-field-search__prefix">
+            <MagnifyingGlassIcon class="rsui-form-field-search__icon"></MagnifyingGlassIcon>
         </div>
     </template>
 
@@ -33,20 +33,20 @@ defineOptions({
 </FormFieldText>
 </template>
 <style lang="scss" scoped>
-.form-field-text {
+.rsui-form-field-search {
     &__prefix {
         @apply absolute top-px bottom-px left-px rounded-tl rounded-bl;
         @apply flex items-center justify-center select-none;
         @apply w-10 pointer-events-none;
     }
-    &__search-icon {
+    &__icon {
         @apply w-5 h-5;
     }
 }
 </style>
 <style lang="scss">
-.form-field-text__group--prefix {
-    input.search-input:not([type='checkbox']):not([type='radio']) {
+.rsui-form-field-text__group--prefix {
+    input.rsui-form-field-search:not([type='checkbox']):not([type='radio']) {
         @apply pl-10;
     }
 }

package/src/components/FormField/FormFieldSlot.vue

@@ -9,14 +9,14 @@ defineOptions({
 const attrs = useAttrs()
 
 const formFieldSlotClass = computed(() => [
-    'form-field-slot',
+    'rsui-form-field-slot',
     attrs.class
 ])
 </script>
 <template>
 <div :class="formFieldSlotClass">
     <div v-if="$slots.label"
-        class="form-field-slot__label"
+        class="rsui-form-field-slot__label"
     >
         <label
             :for="$attrs.id"
@@ -26,19 +26,19 @@ const formFieldSlotClass = computed(() => [
     </div>
     <slot></slot>
     <div v-if="$slots.help"
-        class="form-field-slot__help"
+        class="rsui-form-field-slot__help"
     >
         <slot name="help"></slot>
     </div>
     <div v-if="$slots.error"
-        class="form-field-slot__error"
+        class="rsui-form-field-slot__error"
     >
         <slot name="error"></slot>
     </div>
 </div>
 </template>
 <style lang="scss" scoped>
-.form-field-slot {
+.rsui-form-field-slot {
     @apply flex flex-col space-y-1 border-0 bg-transparent p-0;
 
     &__label {
@@ -57,7 +57,7 @@ const formFieldSlotClass = computed(() => [
 }
 </style>
 <style lang="scss">
-.form-field-slot {
+.rsui-form-field-slot {
     input:not([type='checkbox']):not([type='radio']) {
         @apply block w-full border rounded shadow-sm text-base transition py-2 px-3;
         @apply bg-white placeholder-gray-300 border-gray-300;

package/src/components/FormField/FormFieldText.vue

@@ -20,16 +20,16 @@ const input = ref(null)
 </script>
 <template>
 <FormFieldSlot
-    class="form-field-text"
+    class="rsui-form-field-text"
     :id="$attrs.id"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
     <div :class="{
-        'form-field-text__group': true,
-        'form-field-text__group--prefix': $slots.prefix,
-        'form-field-text__group--suffix': $slots.suffix,
+        'rsui-form-field-text__group': true,
+        'rsui-form-field-text__group--prefix': $slots.prefix,
+        'rsui-form-field-text__group--suffix': $slots.suffix,
     }">
         <slot name="prefix"></slot>
 
@@ -53,7 +53,7 @@ const input = ref(null)
 </FormFieldSlot>
 </template>
 <style lang="scss" scoped>
-.form-field-text {
+.rsui-form-field-text {
     @apply relative;
 
     &__group {

package/src/components/FormField/FormFieldTextSuffix.vue

@@ -16,7 +16,7 @@ defineOptions({
     </template>
 
     <template #suffix>
-        <div class="form-field-text__suffix">
+        <div class="rsui-form-field-text__suffix">
             <slot name="suffix"></slot>
         </div>
     </template>
@@ -31,7 +31,7 @@ defineOptions({
 </FormFieldText>
 </template>
 <style lang="scss" scoped>
-.form-field-text {
+.rsui-form-field-text {
     &__suffix {
         @apply absolute top-px bottom-px right-px rounded-tr rounded-br;
         @apply flex items-center justify-center px-3 select-none;

package/src/components/Image/Image.vue

@@ -76,23 +76,23 @@ const sources = computed(() => {
 })
 </script>
 <template>
-<div class="image">
+<div class="rsui-image">
     <div v-if="!originalUrl"
-        class="image__empty"
+        class="rsui-image__empty"
     >
         <slot name="empty-icon">
-            <PhotoIcon class="icon"></PhotoIcon>
+            <PhotoIcon class="rsui-image__empty-icon"></PhotoIcon>
         </slot>
     </div>
     <div v-else-if="isLoading"
-        class="image__message"
+        class="rsui-image__message"
     >
         <slot name="loading">
             Loading...
         </slot>
     </div>
     <div v-else-if="error"
-        class="image__message"
+        class="rsui-image__message"
     >
         <slot name="error">
             Could not load image
@@ -109,13 +109,13 @@ const sources = computed(() => {
 </div>
 </template>
 <style lang="scss" scoped>
-.image {
+.rsui-image {
     @apply w-full h-full flex items-center justify-center bg-gray-100 overflow-hidden;
     &__empty {
         @apply flex items-center justify-center text-gray-300;
-        .icon {
-            @apply w-1/4;
-        }
+    }
+    &__empty-icon {
+        @apply w-1/4;
     }
     &__message {
         @apply text-gray-400 text-sm;

package/src/components/MessageBox/MessageBox.vue

@@ -21,38 +21,38 @@ function close() {
 </script>
 <template>
 <div v-if="!isClosed"
-    class="message-box"
+    class="rsui-message-box"
 >
-    <div class="message-box__head">
-        <div class="message-box__head__title">
+    <div class="rsui-message-box__head">
+        <div class="rsui-message-box__title">
             <slot name="title"></slot>
         </div>
-        <div class="message-box__head__close">
-            <div class="message-box__head__close__icon">
+        <div class="rsui-message-box__close">
+            <div class="rsui-message-box__close-icon">
                 <XMarkIcon
                     @click="close"
                 ></XMarkIcon>
             </div>
         </div>
     </div>
-    <div class="message-box__body">
+    <div class="rsui-message-box__body">
         <slot></slot>
     </div>
 </div>
 </template>
 <style lang="scss" scoped>
-.message-box {
+.rsui-message-box {
     @apply border border-gray-100 rounded-lg bg-white overflow-hidden shadow-full-light transition duration-200 p-4;
     &__head {
         @apply flex justify-between items-center;
-        &__close {
-            @apply w-10 h-10;
-            &__icon {
-                @apply w-10 h-10 cursor-pointer rounded-lg flex items-center justify-center;
-                @apply hover:bg-gray-100 transition duration-200;
-                svg {
-                    @apply w-6 h-6 text-gray-500;
-                }
+    }
+    &__close {
+        @apply w-10 h-10;
+        &-icon {
+            @apply w-10 h-10 cursor-pointer rounded-lg flex items-center justify-center;
+            @apply hover:bg-gray-100 transition duration-200;
+            svg {
+                @apply w-6 h-6 text-gray-500;
             }
         }
     }

package/src/components/MetaInfo/MetaInfo.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    help: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['click'])
+</script>
+<template>
+<div class="rsui-meta-info">
+    <div class="rsui-meta-info__top">
+        <div class="rsui-meta-info__label">
+            <slot name="label"></slot>
+        </div>
+        <div v-if="help"
+            class="rsui-meta-info__help"
+            @click="$emit('click')"
+        >
+            <slot name="help">
+                <QuestionMarkCircleIcon></QuestionMarkCircleIcon>
+            </slot>
+        </div>
+    </div>
+    <div class="rsui-meta-info__value">
+        <slot name="value"></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-meta-info {
+    @apply flex flex-col space-y-1;
+    &__top {
+        @apply flex space-x-1 items-center;
+    }
+    &__label {
+        @apply font-semibold text-sm text-default-dark leading-4;
+    }
+    &__help {
+        @apply text-gray-400 size-4;
+        svg {
+            @apply size-full;
+        }
+    }
+    &__value {
+        @apply text-xs text-medium leading-5;
+    }
+}
+</style>

package/src/components/Modal/Modal.vue

@@ -54,15 +54,15 @@ const defaultAlignment = computed(() => !props.top && !props.center && !props.bo
 
 const modalContentClass = computed(() => {
     return [
-        'modal__content',
+        'rsui-modal__content',
         {
-            'modal__content--sm': props.sm,
-            'modal__content--md': props.md,
-            'modal__content--lg': props.lg || defaultMaxWidth.value,
+            'rsui-modal__content--sm': props.sm,
+            'rsui-modal__content--md': props.md,
+            'rsui-modal__content--lg': props.lg || defaultMaxWidth.value,
 
-            'modal__content--top': props.top,
-            'modal__content--center': props.center || defaultAlignment.value,
-            'modal__content--bottom': props.bottom,
+            'rsui-modal__content--top': props.top,
+            'rsui-modal__content--center': props.center || defaultAlignment.value,
+            'rsui-modal__content--bottom': props.bottom,
         }
     ]
 })
@@ -100,7 +100,7 @@ onUnmounted(() => {
 <template>
 <teleport to="body">
     <transition leave-active-class="duration-200">
-        <div v-show="show" class="modal" v-bind="$attrs" scroll-region>
+        <div v-show="show" class="rsui-modal" v-bind="$attrs" scroll-region>
             <transition
                 enter-active-class="ease-out duration-300"
                 enter-from-class="opacity-0"
@@ -109,8 +109,8 @@ onUnmounted(() => {
                 leave-from-class="opacity-100"
                 leave-to-class="opacity-0"
             >
-                <div v-show="show" class="modal__background-wrapper" @click="close">
-                    <div class="modal__background" />
+                <div v-show="show" class="rsui-modal__background-wrapper" @click="close">
+                    <div class="rsui-modal__background" />
                 </div>
             </transition>
 
@@ -126,21 +126,21 @@ onUnmounted(() => {
                     :class="modalContentClass"
                 >
                     <div v-if="$slots.header && show"
-                        class="modal__header"
+                        class="rsui-modal__header"
                     >
                         <slot name="header"
                             :close="close"
                         ></slot>
                     </div>
                     <div v-if="show"
-                        class="modal__body"
+                        class="rsui-modal__body"
                     >
                         <slot></slot>
                     </div>
                     <div v-if="$slots.footer && show"
                         :class="{
-                            'modal__footer': true,
-                            'modal__footer--start': footerStart,
+                            'rsui-modal__footer': true,
+                            'rsui-modal__footer--start': footerStart,
                         }"
                     >
                         <slot name="footer"
@@ -173,7 +173,7 @@ onUnmounted(() => {
     @apply transform opacity-0 scale-95;
 }
 
-.modal {
+.rsui-modal {
     @apply fixed inset-0 overflow-y-auto px-4 py-6 md:px-0 z-50;
     &__background-wrapper {
         @apply fixed inset-0 transform transition-all backdrop-blur-sm;

package/src/components/PageHeading/PageHeading.vue

@@ -6,10 +6,10 @@ import ButtonTertiary from '../Button/ButtonTertiary.vue'
 const showMetaModal = ref(false)
 </script>
 <template>
-<div class="page-heading">
-    <div class="page-heading__top">
+<div class="rsui-page-heading">
+    <div class="rsui-page-heading__top">
         <div v-if="$slots.title"
-            class="page-heading__title"
+            class="rsui-page-heading__title"
         >
             <h1>
                 <slot name="title"></slot>
@@ -17,24 +17,24 @@ const showMetaModal = ref(false)
         </div>
 
         <div v-if="$slots.status || $slots.actions"
-            class="page-heading__status-actions"
+            class="rsui-page-heading__status-actions"
         >
             <div v-if="$slots.status"
-                class="page-heading__status"
+                class="rsui-page-heading__status"
             >
                 <slot name="status"></slot>
             </div>
 
-            <div class="page-heading__actions">
+            <div class="rsui-page-heading__actions">
                 <div v-if="$slots['meta-action-label'] && $slots['meta']"
-                    class="page-heading__meta-action"
+                    class="rsui-page-heading__meta-action"
                 >
                     <ButtonTertiary @click="showMetaModal = true">
                         <slot name="meta-action-label"></slot>
                     </ButtonTertiary>
 
                     <Modal sm v-if="$slots['meta']"
-                        class="page-heading__meta-modal"
+                        class="rsui-page-heading__meta-modal"
                         :show="showMetaModal"
                         @close="showMetaModal = false"
                     >
@@ -43,7 +43,7 @@ const showMetaModal = ref(false)
                         </template>
 
                         <div v-if="$slots.meta"
-                            class="page-heading__meta-modal__body"
+                            class="rsui-page-heading__meta-modal__body"
                         >
                             <slot name="meta"></slot>
                         </div>
@@ -65,21 +65,21 @@ const showMetaModal = ref(false)
         </div>
 
         <div v-if="$slots.search"
-            class="page-heading__search"
+            class="rsui-page-heading__search"
         >
             <slot name="search"></slot>
         </div>
     </div>
 
     <div v-if="$slots['meta']"
-        class="page-heading__meta"
+        class="rsui-page-heading__meta"
     >
         <slot name="meta"></slot>
     </div>
 </div>
 </template>
 <style lang="scss" scoped>
-.page-heading {
+.rsui-page-heading {
     @apply w-full flex justify-between space-y-4;
     @apply lg:flex-col;
     &__top {

package/src/components/Progress/ProgressCircle.vue

@@ -33,11 +33,11 @@ const defaultSize = computed(() => !props.sm && !props.md && !props.lg)
 
 // Class for the progress circle
 const progressCircleClass = computed(() => [
-    'progress-circle',
+    'rsui-progress-circle',
     {
-        'progress-circle--sm': props.sm || defaultSize.value,
-        'progress-circle--md': props.md,
-        'progress-circle--lg': props.lg,
+        'rsui-progress-circle--sm': props.sm || defaultSize.value,
+        'rsui-progress-circle--md': props.md,
+        'rsui-progress-circle--lg': props.lg,
     },
 ])
 
@@ -66,20 +66,20 @@ watchPostEffect(setProgressCircleDash)
 <div :class="progressCircleClass">
     <svg viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="48"
-            class="progress-circle__background-circle"
+            class="rsui-progress-circle__background-circle"
         ></circle>
         <circle cx="50" cy="50" r="48"
             ref="progressCircle"
-            class="progress-circle__progress-circle"
+            class="rsui-progress-circle__progress-circle"
         ></circle>
     </svg>
-    <div class="progress-circle__content">
+    <div class="rsui-progress-circle__content">
         <slot></slot>
     </div>
 </div>
 </template>
 <style lang="scss" scoped>
-.progress-circle {
+.rsui-progress-circle {
     @apply relative m-0 p-0 bg-white rounded-full;
     @apply before:hidden after:hidden;
     &--sm {

package/src/components/TwoColumnLayout/TwoColumnLayout.vue

@@ -8,19 +8,19 @@ const props = defineProps({
 </script>
 <template>
 <div :class="[
-    'two-column-layout',
-    leftAside ? 'two-column-layout--left-aside' : '',
+    'rsui-two-column-layout',
+    leftAside ? 'rsui-two-column-layout--left-aside' : '',
 ]">
-    <div class="two-column-layout__main">
+    <div class="rsui-two-column-layout__main">
         <slot name="main"></slot>
     </div>
-    <div class="two-column-layout__aside">
+    <div class="rsui-two-column-layout__aside">
         <slot name="aside"></slot>
     </div>
 </div>
 </template>
 <style lang="scss">
-.two-column-layout {
+.rsui-two-column-layout {
     @apply flex flex-col space-y-6;
     @apply lg:flex-row lg:space-y-0 lg:space-x-8;
     &--left-aside {

package/src/components/PageHeading/MetaItem.vue

@@ -1,22 +0,0 @@
-<script setup>
-</script>
-<template>
-<div class="meta-item">
-    <div class="meta-item__label">
-        <slot name="label"></slot>
-    </div>
-    <div class="meta-item__value">
-        <slot name="value"></slot>
-    </div>
-</div>
-</template>
-<style lang="scss" scoped>
-.meta-item {
-    &__label {
-        @apply text-xs text-gray-400;
-    }
-    &__value {
-        @apply text-base;
-    }
-}
-</style>