@policystudio/policy-studio-ui-vue 1.0.46 → 1.0.54

package/dist/css/psui_styles.css

@@ -8025,11 +8025,13 @@ video {
 .psui-text-accent{
   font-size: 14px;
   line-height: 130%;
+  letter-spacing: 0.6px;
 }
 
 .psui-text-accentSmall{
   font-size: 12px;
   line-height: 130%;
+  letter-spacing: 0.6px;
 }
 
 .psui-text-p{
@@ -17181,6 +17183,75 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+.psui-el-badge-with-icon {
+  display: flex;
+  align-items: center;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.psui-el-badge-with-icon.layout-grey{
+    --bg-opacity: 1;
+    background-color: #F3F6F9;
+    background-color: rgba(243, 246, 249, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #798490;
+    color: rgba(121, 132, 144, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon.layout-blue{
+    --bg-opacity: 1;
+    background-color: #E0EFF6;
+    background-color: rgba(224, 239, 246, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #318FAC;
+    color: rgba(49, 143, 172, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon.layout-green{
+    --bg-opacity: 1;
+    background-color: #DEF8E8;
+    background-color: rgba(222, 248, 232, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #44A06A;
+    color: rgba(68, 160, 106, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon.layout-yellow{
+    --bg-opacity: 1;
+    background-color: #FDF3E3;
+    background-color: rgba(253, 243, 227, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #B87305;
+    color: rgba(184, 115, 5, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon .psui-el-badge-with-icon-icon {
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 16px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+.psui-el-badge-with-icon .psui-el-badge-with-icon-message {
+    margin-left: 0.25rem;
+    font-size: 12px;
+    line-height: 130%;
+    font-weight: 700;
+  }
+
 .psui-el-draggable {
   width: 100%;
   display: flex;
@@ -17218,6 +17289,7 @@ html {
 .psui-el-draggable .psui-el-draggable-wrapper-title p {
         font-size: 12px;
         line-height: 130%;
+        letter-spacing: 0.6px;
         --text-opacity: 1;
         color: #28323B;
         color: rgba(40, 50, 59, var(--text-opacity));
@@ -17255,13 +17327,35 @@ html {
 
 .psui-el-draggable .psui-el-draggable-item-title {
       --text-opacity: 1;
-      color: #515E6A;
-      color: rgba(81, 94, 106, var(--text-opacity));
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity));
       font-size: 14px;
       line-height: 130%;
-      font-weight: 700;
     }
 
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox {
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity));
+      }
+
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark:before {
+            margin-right: 0.25rem;
+            --text-opacity: 1;
+            color: #D6DDE5;
+            color: rgba(214, 221, 229, var(--text-opacity));
+          }
+
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.active {
+          --text-opacity: 1;
+          color: #515E6A;
+          color: rgba(81, 94, 106, var(--text-opacity));
+        }
+
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.disabled .psui-el-checkmark {
+            color: #798490 !important;
+          }
+
 .psui-el-draggable .psui-el-draggable-item-append {
       display: flex;
       --text-opacity: 1;
@@ -17274,76 +17368,27 @@ html {
         font-size: 18px;
       }
 
-.psui-el-draggable .psui-el-draggable-item:active {
+.psui-el-draggable .psui-el-draggable-item:active,
+      .psui-el-draggable .psui-el-draggable-item.on-dragging {
       cursor: -webkit-grabbing;
       cursor: grabbing;
     }
 
-.psui-el-draggable .psui-el-draggable-list-items-wrapper {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper li {
-      width: 100%;
-      margin-bottom: 0.5rem;
-      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
-      background-color: #ffffff;
-      border-radius: 0.25rem;
-      display: flex;
-      align-items: center;
-      padding: 7px 16px;
+.psui-el-draggable .psui-el-draggable-item.on-drag-over {
+      opacity: 0.2;
     }
 
-.psui-el-draggable .psui-el-draggable-list-items-wrapper li:hover {
-        --text-opacity: 1;
-        color: #798490;
-        color: rgba(121, 132, 144, var(--text-opacity));
-        cursor: -webkit-grab;
-        cursor: grab
-      }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper li:active {
-        cursor: -webkit-grabbing;
-        cursor: grabbing
-      }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-wrapper {
-      -webkit-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
-      width: 100%;
-      display: flex;
-      align-items: center
-    }
-
-.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-icon {
-      display: flex;
-      justify-content: flex-end;
-      margin-left: auto;
-    }
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark span {
+          font-weight: 700;
+        }
 
-.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-icon i {
-        font-family: 'Material Icons Round';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        --text-opacity: 1;
-        color: #D6DDE5;
-        color: rgba(214, 221, 229, var(--text-opacity));
-        font-size: 18px;
-      }
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          min-height: 24px;
+        }
 
 .psui-el-input-select {
   width: 100%;
@@ -18057,7 +18102,8 @@ html {
 .psui-el-mini-tag span {
     width: 100%;
     font-weight: 700;
-    padding: 1px 8px 0px 8px;
+    text-transform: uppercase;
+    padding: 3px 8px 3px 8px;
     font-size: 10px;
     letter-spacing: 0.5px;
   }
@@ -18173,6 +18219,7 @@ html {
     gap: 1rem;
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
 .psui-el-toast.fill-intense.layout-info {
@@ -18493,9 +18540,6 @@ html {
   color: #798490;
   color: rgba(121, 132, 144, var(--text-opacity));
   display: flex;
-  --bg-opacity: 1;
-  background-color: #F3F6F9;
-  background-color: rgba(243, 246, 249, var(--bg-opacity));
 }
 
 .psui-el-radio.disabled .psui-el-checkmark {
@@ -25657,11 +25701,13 @@ html {
   .sm\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .sm\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .sm\:psui-text-p{
@@ -40077,11 +40123,13 @@ html {
   .md\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .md\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .md\:psui-text-p{
@@ -54497,11 +54545,13 @@ html {
   .lg\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .lg\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .lg\:psui-text-p{
@@ -68917,11 +68967,13 @@ html {
   .xl\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .xl\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .xl\:psui-text-p{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.46",
+  "version": "1.0.54",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss

@@ -27,6 +27,7 @@
 @import './components/PsInputTextArea.scss';
 @import './components/PsInputSelect.scss';
 @import './components/PsDraggable.scss';
+@import './components//PsBadgeWithIcon.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/assets/scss/components/PsBadgeWithIcon.scss

@@ -0,0 +1,40 @@
+@layer components {
+
+    .psui-el-badge-with-icon {
+        @apply psui-flex psui-items-center psui-py-1 psui-px-2 psui-rounded;
+
+        &.layout-grey{
+            @apply psui-bg-gray-10 psui-text-gray-50;
+        }
+        &.layout-blue{
+            @apply psui-bg-blue-20 psui-text-blue-60;
+        }
+        &.layout-green{
+            @apply psui-bg-green-10 psui-text-green-70;
+        }
+        &.layout-yellow{
+            @apply psui-bg-yellow-10 psui-text-yellow-70;
+        }
+
+
+        .psui-el-badge-with-icon-icon {
+            font-family: 'Material Icons Round';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 16px;
+            line-height: 1;
+            letter-spacing: normal;
+            text-transform: none;
+            display: inline-block;
+            white-space: nowrap;
+            word-wrap: normal;
+            direction: ltr;
+            -webkit-font-feature-settings: 'liga';
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .psui-el-badge-with-icon-message {
+            @apply psui-ml-1 psui-text-xsmall psui-font-bold;
+        }
+    }
+}

package/src/assets/scss/components/PsDraggable.scss

@@ -31,7 +31,27 @@
       padding: 7px 16px;
 
       &-title {
-        @apply psui-text-gray-60 psui-text-small psui-font-bold;
+        @apply psui-text-gray-50 psui-text-small;
+
+        .psui-el-checkbox {
+          @apply psui-text-gray-50;
+
+          .psui-el-checkmark {
+            &:before {
+              @apply psui-mr-1 psui-text-gray-30;
+            }
+          }
+
+          &.active {
+            @apply psui-text-gray-60;
+          }
+
+          &.disabled {
+            .psui-el-checkmark {
+              color: #798490 !important;
+            }
+          }
+        }
       }
 
       &-append {
@@ -42,38 +62,27 @@
         }
       }
 
-      &:active {
-        @apply psui-cursor-grabbing;
+      &:active,
+      &.on-dragging {
+        cursor: -webkit-grabbing; 
+        cursor: -moz-grabbing;
+        cursor: grabbing;
       }
-    }
-
-
-    .psui-el-draggable-list-items-wrapper {
-      @apply psui-w-full psui-flex psui-flex-wrap;
-
-      li {
-        @apply psui-w-full psui-mb-2 psui-shadow-elevation-5 psui-bg-white psui-rounded psui-flex psui-items-center;
-        padding: 7px 16px;
-
-        &:hover {
-          @apply psui-text-gray-50 psui-cursor-grab
-        }
 
-        &:active {
-          @apply psui-cursor-grabbing
-        }
-      }
-
-      .psui-el-draggable-item-wrapper {
-        @apply psui-select-none psui-w-full psui-flex psui-items-center
+      &.on-drag-over {
+        opacity: 0.2;
       }
 
-      .psui-el-draggable-item-icon {
-        @apply psui-flex psui-justify-end psui-ml-auto;
-
-        i {
-          @apply psui-icon psui-text-gray-30;
-          font-size: 18px;
+      .psui-el-checkbox.size-small {
+        .psui-el-checkmark {
+          span {
+            @apply psui-font-bold;
+          }
+          &:before {
+            @apply psui-flex psui-items-center psui-justify-center;
+            font-size: 24px;
+            min-height: 24px;
+          }
         }
       }
     }

package/src/assets/scss/components/PsMiniTag.scss

@@ -5,8 +5,8 @@
 
 
         span {
-            @apply psui-w-full psui-font-bold;
-            padding: 1px 8px 0px 8px;
+            @apply psui-w-full psui-font-bold psui-uppercase;
+            padding: 3px 8px 3px 8px;
             font-size: 10px;
             letter-spacing: 0.5px;
         }

package/src/assets/scss/components/PsRadioButton.scss

@@ -1,7 +1,7 @@
 @layer components {
 
         .psui-el-radio {
-            @apply psui-relative psui-text-gray-50 psui-flex psui-bg-gray-10;
+            @apply psui-relative psui-text-gray-50 psui-flex;
 
             &.disabled {
                 .psui-el-checkmark {

package/src/components/badges-and-tags/PsBadgeWithIcon.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="psui-el-badge-with-icon" :class="getComponentClass">
+      <i class="psui-el-badge-with-icon-icon">{{icon}}</i>
+      <span class="psui-el-badge-with-icon-message">{{message}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'PsBadgeWithIcon',
+    props:{
+        icon:{
+            type: String,
+            default:'info'
+        },
+        message:{
+            type: String,
+            default: 'Lorem ipsum'
+        },
+        layout:{
+            type: String,
+            default: 'grey',
+            validator: (value) => ['grey', 'blue', 'green','yellow'].includes(value)
+
+        }
+    },
+    computed:{
+        getComponentClass(){
+            return  `layout-${this.layout}`
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .material-icons-round{
+        font-size: 16px;
+    }
+</style>>
+

package/src/components/badges-and-tags/PsMiniTag.vue

@@ -11,6 +11,11 @@ export const typeOptions = [
   'warning',
   'error',
   'default',
+  'solid-info',
+  'solid-success',
+  'solid-warning',
+  'solid-error',
+  'solid-default'
 ]
 export default {
   name: 'PsMiniTag',
@@ -28,7 +33,6 @@ export default {
      */
     message: {
       type: String,
-      required: true,
     },
   },
   computed: {

package/src/components/controls/PsCheckbox.vue

@@ -31,7 +31,7 @@ export default {
       type: [String, Boolean],
     },
     value:{
-      type: Array
+      type: [Array, Boolean]
     },
     /**
      * It disables the checkbox input.

package/src/components/controls/PsCheckboxSimple.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class='psui-el-checkbox' @click="$emit('click')" :class="[getComponentClass, {'disabled':disabled}]" >
+    <input 
+      type="checkbox" 
+      :checked="checked" 
+      :disabled="disabled"
+      :name="label"
+    />
+    <label 
+      :for="label" 
+      class="psui-el-checkmark"
+    >
+      <slot v-if="!label" name="content"></slot>
+      <span v-else>{{ label }}</span>
+    </label>    
+  </div>
+</template>
+
+<script>
+//FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
+
+export default {
+  name: 'PsCheckboxSimple',
+  props: {
+    /**
+     * It sets the label of the checkbox input.
+     */
+    label: {
+      type: String,
+    },
+    /**
+     * It disables the checkbox input.
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * It set the of the checkbox input. eg: big and small.
+     */
+    size: {
+      type: String,
+      default: 'big',
+      validator: (value)=> ['big', 'small'].includes(value)
+    },
+    /**
+     * It set the layout of the checkbox input. eg: default and mixed.
+     */
+    layout:{
+      type: String,
+      default: 'default',
+      validator: (value)=> ['default','mixed'].includes(value)
+    }
+  },
+  computed:{
+    getComponentClass(){
+      return `size-${this.size} layout-${this.layout}`
+    }, 
+  },
+}
+</script>

package/src/components/controls/PsDraggable.vue

@@ -4,13 +4,14 @@
       v-for="(columnGroup, indexColumnGroup) in getColumns.columnGroups"
       :key="indexColumnGroup"
       :ref="indexColumnGroup"
+       :id="`edit-group-${indexColumnGroup}`"
     >
       <div 
         class="psui-el-draggable-wrapper-title"
         draggable="true"
-        @dragstart="onDragStart"
-        @dragover="$emit('drag-over', $event)"
-        @dragend="onDragEnd"
+        @dragstart="$emit('drag-start-group', indexColumnGroup)"
+        @dragend="$emit('drag-end-group', indexColumnGroup)"
+        @dragover="$emit('drag-over-group', indexColumnGroup)"
       >
         <p>{{ columnGroup.title }}</p>
         <i class="material-icons-round">drag_indicator</i>
@@ -22,19 +23,27 @@
           :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
           :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
           class="psui-el-draggable-item"
+          draggable="true"
+          @dragstart="$emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
+          @dragover="$emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
+          @dragend="$emit('drag-end-item', $event)"
         >
           <div
             class="psui-w-full psui-flex psui-items-center"
-            draggable="true"
-            @dragstart="$emit('drag-start-item',$event)"
-            @dragover="$emit('drag-over-item',$event)"
-            @dragend="$emit('drag-end-item',$event)"
           >
             <span class="psui-el-draggable-item-title">
-              {{ column.title }}
+              <PsCheckbox
+                size="small"
+                :value="column.isActive"
+                :label="column.title"
+                :class="{'active' : column.isActive}"
+                :disabled="column.isDisabled"
+                class="psui-el-draggable-item-checkbox"
+                @input="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
+              />
             </span>
             <span class="psui-el-draggable-item-append">
-              <i class="material-icons-round">drag_indicator</i>
+              <i class="psui-icon">drag_indicator</i>
             </span>
           </div>
         </div>
@@ -59,16 +68,25 @@ export default {
      */
     module:{
       type: String
-    }
-  }, 
-  methods:{
-    onDragStart(event){
-      this.$emit('drag-start', event)
     },
 
-    onDragEnd(event){
-      this.$emit('drag-end',event)
-    }
+    /**
+     * It disables the input. All mouse events are disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    getStatus() {
+      console.log('var:', this.column.key)
+      if (this.column.key == 'compliance_margin') {
+        return true 
+      } else {
+        return false
+      }
+    },
   }
 }
 </script>

package/src/index.js

@@ -28,6 +28,8 @@ import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
 import PsInlineSelector from './components/controls/PsInlineSelector.vue'
 import PsScrollBar from './components/playground/PsScrollBar.vue'
 import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
+import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
+import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
 
 
 
@@ -63,6 +65,8 @@ export default {
     Vue.component('PsDropdownList', PsDropdownList)
     Vue.component('PsScrollBar', PsScrollBar)
     Vue.component('PsMiniTag', PsMiniTag)
+    Vue.component('PsCheckboxSimple', PsCheckboxSimple)
+    Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -112,6 +116,8 @@ export {
   PsDropdown,
   PsDropdownList,
   PsScrollBar,
-  PsMiniTag
+  PsMiniTag,
+  PsCheckboxSimple,
+  PsBadgeWithIcon
 }
 

package/src/stories/BadgeWithIcon.stories.js

@@ -0,0 +1,31 @@
+import  PsBadgeWithIcon  from '../components/badges-and-tags/PsBadgeWithIcon.vue'
+
+export default {
+    title: 'Components/BadgeWithIcon',
+    component: PsBadgeWithIcon,
+    argTypes: {
+    },
+  }
+  
+  const TemplateDefault = (args, {argTypes})=>({
+    props: Object.keys(argTypes),
+    components:{PsBadgeWithIcon},
+    template: `
+        <div style="display: flex; flex-direction: column;">
+          <div style="width: fit-content; display:flex; gap:70px; margin-left: 40px;"> 
+            <span>Grey</span>
+            <span style="margin-left: 8px;">Blue</span>
+            <span style="margin-left: 5px;">Green</span>
+            <span>Yellow</span>
+          </div>
+          <div style="width: fit-content; display:flex; gap:5px;"> 
+            <PsBadgeWithIcon/>
+            <PsBadgeWithIcon layout="blue"/>
+            <PsBadgeWithIcon layout="green"/>
+            <PsBadgeWithIcon layout="yellow"/>
+          </div>
+        </div>
+    `
+  })
+
+  export const Default = TemplateDefault.bind({}) 

package/src/stories/CheckboxSimple.stories.js

@@ -0,0 +1,48 @@
+import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
+// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Components/CheckboxSimple',
+  component: PsCheckboxSimple,
+}
+
+const defaultTemplate = (args, {argTypes}) => ({
+  props: Object.keys(argTypes),
+  components: { PsCheckboxSimple },
+  data: () => ({
+    checkBox1 : true
+  }),
+  template: `
+    <div style='display:flex; gap: 20px;'>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Resting</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple :checked="checkBox1" @click="checkBox1 = !checkBox1" label='Label 1' />
+          <PsCheckboxSimple v-bind="$props" label='Label 2' size='small' />
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Active</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple v-bind="$props" label='Label 3'  checked />
+          <PsCheckboxSimple v-bind="$props" label='Label 4'  checked size='small'/>
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Mixed</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple v-bind="$props" label='Label 5' layout='mixed' checked />
+          <PsCheckboxSimple v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Disabled</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple v-bind="$props" label='Label 7' disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Label 8' size='small' disabled/>
+        </div>
+      </div>
+    </div>
+    `
+})
+
+export const Default = defaultTemplate.bind({}) 

package/tailwind.config.js

@@ -54,8 +54,8 @@ module.exports = {
       big: ['16px', '130%'],
       small: ['14px', '130%'],
       xsmall: ['12px', '130%'],
-      accent: ['14px', '130%', { letterSpacing: '0.6px' }],
-      accentSmall: ['12px', '130%', { letterSpacing: '0.6px' }],
+      accent: ['14px', { lineHeight: '130%', letterSpacing: '0.6px' }],
+      accentSmall: ['12px', { lineHeight: '130%', letterSpacing: '0.6px' }],
       p: ['16px', '130%'],
       h1: ['28px', '130%'],
       h2: ['24px', '130%'],