@histoire/controls 0.17.16 → 1.0.0-alpha.1

package/dist/style-standalone.css

@@ -175,6 +175,17 @@
   left:-2px
 }
 
+.v-popper--theme-tooltip .v-popper__inner{
+  background:rgba(0,0,0,.8);
+  color:#fff;
+  border-radius:6px;
+  padding:7px 12px 6px
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer{
+  border-color:#000c
+}
+
 .v-popper--theme-dropdown .v-popper__inner{
   background:#fff;
   color:#000;
@@ -192,17 +203,6 @@
   border-color:#ddd
 }
 
-.v-popper--theme-tooltip .v-popper__inner{
-  background:rgba(0,0,0,.8);
-  color:#fff;
-  border-radius:6px;
-  padding:7px 12px 6px
-}
-
-.v-popper--theme-tooltip .v-popper__arrow-outer{
-  border-color:#000c
-}
-
 *, ::before, ::after{
   --tw-border-spacing-x:0;
   --tw-border-spacing-y:0;
@@ -250,7 +250,11 @@
   --tw-backdrop-invert: ;
   --tw-backdrop-opacity: ;
   --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: 
+  --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: 
 }
 
 ::backdrop{
@@ -300,7 +304,11 @@
   --tw-backdrop-invert: ;
   --tw-backdrop-opacity: ;
   --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: 
+  --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: 
 }
 
 .htw-absolute{
@@ -625,27 +633,27 @@
 
 .htw-border-gray-850{
   --tw-border-opacity:1;
-  border-color:rgb(31 31 33 / var(--tw-border-opacity))
+  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))
 }
 
 .htw-border-primary-500{
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
 .\!htw-bg-primary-500{
   --tw-bg-opacity:1 !important;
-  background-color:rgb(16 185 129 / var(--tw-bg-opacity)) !important
+  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1)) !important
 }
 
 .htw-bg-gray-200{
   --tw-bg-opacity:1;
-  background-color:rgb(228 228 231 / var(--tw-bg-opacity))
+  background-color:rgb(228 228 231 / var(--tw-bg-opacity, 1))
 }
 
 .htw-bg-gray-50{
   --tw-bg-opacity:1;
-  background-color:rgb(250 250 250 / var(--tw-bg-opacity))
+  background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))
 }
 
 .htw-bg-gray-500\/10{
@@ -658,22 +666,22 @@
 
 .htw-bg-gray-700{
   --tw-bg-opacity:1;
-  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
+  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
 }
 
 .htw-bg-primary-200{
   --tw-bg-opacity:1;
-  background-color:rgb(167 243 208 / var(--tw-bg-opacity))
+  background-color:rgb(167 243 208 / var(--tw-bg-opacity, 1))
 }
 
 .htw-bg-primary-500{
   --tw-bg-opacity:1;
-  background-color:rgb(16 185 129 / var(--tw-bg-opacity))
+  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))
 }
 
 .htw-bg-primary-800{
   --tw-bg-opacity:1;
-  background-color:rgb(6 95 70 / var(--tw-bg-opacity))
+  background-color:rgb(6 95 70 / var(--tw-bg-opacity, 1))
 }
 
 .htw-bg-transparent{
@@ -682,7 +690,7 @@
 
 .htw-bg-white{
   --tw-bg-opacity:1;
-  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
+  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
 }
 
 .htw-fill-primary-500{
@@ -748,12 +756,12 @@
 
 .htw-text-gray-700{
   --tw-text-opacity:1;
-  color:rgb(63 63 70 / var(--tw-text-opacity))
+  color:rgb(63 63 70 / var(--tw-text-opacity, 1))
 }
 
 .htw-text-gray-900{
   --tw-text-opacity:1;
-  color:rgb(24 24 27 / var(--tw-text-opacity))
+  color:rgb(24 24 27 / var(--tw-text-opacity, 1))
 }
 
 .htw-text-inherit{
@@ -762,12 +770,12 @@
 
 .htw-text-orange-500{
   --tw-text-opacity:1;
-  color:rgb(249 115 22 / var(--tw-text-opacity))
+  color:rgb(249 115 22 / var(--tw-text-opacity, 1))
 }
 
 .htw-text-white{
   --tw-text-opacity:1;
-  color:rgb(255 255 255 / var(--tw-text-opacity))
+  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 
 .htw-opacity-50{
@@ -823,9 +831,9 @@ body {
   font-size: 1.125rem;
 }
 
-:is(.htw-dark body){
+body:is(.htw-dark *){
   --tw-text-opacity:1;
-  color:rgb(244 244 245 / var(--tw-text-opacity))
+  color:rgb(244 244 245 / var(--tw-text-opacity, 1))
 }
 
 @media (min-width: 640px) {
@@ -836,12 +844,12 @@ body {
 
 .focus-within\:htw-border-primary-500:focus-within{
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
 .hover\:htw-border-primary-500:hover{
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
 .hover\:htw-bg-gray-500\/20:hover{
@@ -850,22 +858,22 @@ body {
 
 .hover\:htw-bg-primary-100:hover{
   --tw-bg-opacity:1;
-  background-color:rgb(209 250 229 / var(--tw-bg-opacity))
+  background-color:rgb(209 250 229 / var(--tw-bg-opacity, 1))
 }
 
 .hover\:htw-bg-primary-200:hover{
   --tw-bg-opacity:1;
-  background-color:rgb(167 243 208 / var(--tw-bg-opacity))
+  background-color:rgb(167 243 208 / var(--tw-bg-opacity, 1))
 }
 
 .hover\:htw-bg-primary-600:hover{
   --tw-bg-opacity:1;
-  background-color:rgb(5 150 105 / var(--tw-bg-opacity))
+  background-color:rgb(5 150 105 / var(--tw-bg-opacity, 1))
 }
 
 .hover\:htw-text-primary-500:hover{
   --tw-text-opacity:1;
-  color:rgb(16 185 129 / var(--tw-text-opacity))
+  color:rgb(16 185 129 / var(--tw-text-opacity, 1))
 }
 
 .hover\:htw-opacity-100:hover{
@@ -874,88 +882,88 @@ body {
 
 .focus\:htw-border-primary-500:focus{
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
 .htw-group:hover .group-hover\:htw-border-primary-500{
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
 .htw-group:active .group-active\:htw-bg-gray-500\/20{
   background-color:rgb(113 113 122 / 0.2)
 }
 
-:is(.htw-dark .dark\:htw-border-white\/25){
+.dark\:htw-border-white\/25:is(.htw-dark *){
   border-color:rgb(255 255 255 / 0.25)
 }
 
-:is(.htw-dark .dark\:htw-bg-black){
+.dark\:htw-bg-black:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(0 0 0 / var(--tw-bg-opacity))
+  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:htw-bg-gray-600){
+.dark\:htw-bg-gray-600:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(82 82 91 / var(--tw-bg-opacity))
+  background-color:rgb(82 82 91 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:htw-bg-gray-700){
+.dark\:htw-bg-gray-700:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
+  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:htw-bg-gray-750){
+.dark\:htw-bg-gray-750:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(50 50 56 / var(--tw-bg-opacity))
+  background-color:rgb(50 50 56 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:htw-bg-primary-800){
+.dark\:htw-bg-primary-800:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(6 95 70 / var(--tw-bg-opacity))
+  background-color:rgb(6 95 70 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:htw-text-black){
+.dark\:htw-text-black:is(.htw-dark *){
   --tw-text-opacity:1;
-  color:rgb(0 0 0 / var(--tw-text-opacity))
+  color:rgb(0 0 0 / var(--tw-text-opacity, 1))
 }
 
-:is(.htw-dark .dark\:htw-text-gray-100){
+.dark\:htw-text-gray-100:is(.htw-dark *){
   --tw-text-opacity:1;
-  color:rgb(244 244 245 / var(--tw-text-opacity))
+  color:rgb(244 244 245 / var(--tw-text-opacity, 1))
 }
 
-:is(.htw-dark .dark\:focus-within\:htw-border-primary-500:focus-within){
+.dark\:focus-within\:htw-border-primary-500:focus-within:is(.htw-dark *){
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
-:is(.htw-dark .dark\:hover\:htw-border-primary-500:hover){
+.dark\:hover\:htw-border-primary-500:hover:is(.htw-dark *){
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
-:is(.htw-dark .dark\:hover\:htw-bg-primary-700:hover){
+.dark\:hover\:htw-bg-primary-700:hover:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(4 120 87 / var(--tw-bg-opacity))
+  background-color:rgb(4 120 87 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:hover\:htw-bg-primary-800:hover){
+.dark\:hover\:htw-bg-primary-800:hover:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(6 95 70 / var(--tw-bg-opacity))
+  background-color:rgb(6 95 70 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:hover\:htw-bg-primary-900:hover){
+.dark\:hover\:htw-bg-primary-900:hover:is(.htw-dark *){
   --tw-bg-opacity:1;
-  background-color:rgb(6 78 59 / var(--tw-bg-opacity))
+  background-color:rgb(6 78 59 / var(--tw-bg-opacity, 1))
 }
 
-:is(.htw-dark .dark\:focus\:htw-border-primary-500:focus){
+.dark\:focus\:htw-border-primary-500:focus:is(.htw-dark *){
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }
 
-.htw-group:hover :is(.htw-dark .group-hover\:dark\:htw-border-primary-500){
+.htw-group:hover .group-hover\:dark\:htw-border-primary-500:is(.htw-dark *){
   --tw-border-opacity:1;
-  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))
 }

package/dist/utils.d.ts

@@ -1 +1 @@
-export declare const isDark: import("vue").Ref<boolean>;
+export declare const isDark: import("vue").Ref<boolean, boolean>;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@histoire/controls",
-  "version": "0.17.16",
+  "type": "module",
+  "version": "1.0.0-alpha.1",
   "description": "Prebuilt controls components",
-  "license": "MIT",
   "author": {
     "name": "Guillaume Chau"
   },
+  "license": "MIT",
   "repository": {
     "url": "https://github.com/Akryum/histoire.git",
     "type": "git",
@@ -14,7 +15,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.postcss",
+    "*.vue"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,40 +30,35 @@
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": [
-    "*.css",
-    "*.postcss",
-    "*.vue"
-  ],
   "dependencies": {
-    "@codemirror/commands": "^6.3.0",
+    "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/language": "^6.9.2",
-    "@codemirror/lint": "^6.4.2",
-    "@codemirror/state": "^6.3.1",
+    "@codemirror/language": "^6.10.6",
+    "@codemirror/lint": "^6.8.4",
+    "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.22.0",
-    "@histoire/shared": "^0.17.16",
-    "@histoire/vendors": "^0.17.16"
+    "@codemirror/view": "^6.35.0",
+    "@histoire/shared": "^1.0.0-alpha.1",
+    "@histoire/vendors": "^1.0.0-alpha.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.9",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "@vue/runtime-dom": "^3.3.8",
-    "@vue/test-utils": "^2.4.2",
-    "@vueuse/core": "^9.13.0",
-    "autoprefixer": "^10.4.16",
-    "concurrently": "^7.6.0",
-    "floating-vue": "2.0.0-beta.19",
-    "jsdom": "^22.1.0",
-    "postcss": "^8.4.31",
-    "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^4.9.5",
-    "vite": "^5.0.11",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.8",
-    "vue-tsc": "^1.8.22"
+    "@types/node": "^22.10.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/runtime-dom": "^3.5.13",
+    "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": "^12.0.0",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.0",
+    "floating-vue": "5.2.2",
+    "jsdom": "^25.0.1",
+    "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.16",
+    "typescript": "5.6.3",
+    "vite": "^6.0.5",
+    "vitest": "0.34.6",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
   },
   "scripts": {
     "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",

package/src/components/HstCopyIcon.vue

@@ -5,10 +5,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import type { Awaitable } from '@histoire/shared'
 import { Icon } from '@iconify/vue'
 import { useClipboard } from '@vueuse/core'
 import { VTooltip as vTooltip } from 'floating-vue'
-import type { Awaitable } from '@histoire/shared'
 
 const props = defineProps<{
   content: string | (() => Awaitable<string>)
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 const { copy, copied } = useClipboard()
 
-const action = async () => {
+async function action() {
   const content = typeof props.content === 'function' ? await props.content() : props.content
   copy(content)
 }

package/src/components/HstWrapper.vue

@@ -5,8 +5,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { withDefaults } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
+import { withDefaults } from 'vue'
 
 withDefaults(defineProps<{
   title?: string
@@ -15,7 +15,6 @@ withDefaults(defineProps<{
   title: undefined,
   tag: 'label',
 })
-
 </script>
 
 <template>

package/src/components/button/HstButton.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstButton from './HstButton.vue'
 
-const variants: Array<{name: string, bind?: unknown}> = [
+const variants: Array<{ name: string, bind?: unknown }> = [
   { name: 'Default' },
   { name: 'Primary', bind: { color: 'primary' } },
   { name: 'Flat', bind: { color: 'flat' } },

package/src/components/button/HstButtonGroup.story.vue

@@ -15,7 +15,7 @@ const objectOptions = Object.keys(options).map(key => ({
   value: key,
 }))
 
-function initState () {
+function initState() {
   return {
     speed: flatOptions[0],
   }
@@ -72,7 +72,7 @@ const count = ref('0')
       <pre>{{ { count } }}</pre>
       <HstButtonGroup
         v-model="count"
-        :options="[{label: 'Low', value: '-25'},{label: 'Regular', value: '0'},{label: 'High', value: '200'}]"
+        :options="[{ label: 'Low', value: '-25' }, { label: 'Regular', value: '0' }, { label: 'High', value: '200' }]"
       />
     </Variant>
   </Story>

package/src/components/button/HstButtonGroup.vue

@@ -5,9 +5,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
+import type { HstControlOption } from '../../types'
+import { computed } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
-import { HstControlOption } from '../../types'
 import HstButton from './HstButton.vue'
 
 const props = defineProps<{
@@ -21,11 +22,13 @@ const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
     return props.options.map((value: string | number | HstControlOption) => {
       if (typeof value === 'string' || typeof value === 'number') {
         return { value, label: String(value) }
-      } else {
+      }
+      else {
         return value
       }
     })
-  } else {
+  }
+  else {
     return Object.keys(props.options).map((value: string) => ({
       value,
       label: props.options[value],
@@ -37,7 +40,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-function selectOption (value: string) {
+function selectOption(value: string) {
   emit('update:modelValue', value)
 }
 </script>

package/src/components/checkbox/HstCheckbox.spec.ts

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import HstCheckbox from './HstCheckbox.vue'
 
-describe('HstCheckbox', () => {
-  test('toggle to checked', async () => {
+describe('hstCheckbox', () => {
+  it('toggle to checked', async () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: false,
@@ -14,7 +14,7 @@ describe('HstCheckbox', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  test('toggle to unchecked', async () => {
+  it('toggle to unchecked', async () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: true,

package/src/components/checkbox/HstCheckbox.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstCheckbox from './HstCheckbox.vue'
 
-function initState () {
+function initState() {
   return {
     booleanChecked: false,
     stringChecked: 'false',

package/src/components/checkbox/HstCheckbox.vue

@@ -5,9 +5,9 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
 import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
-import { computed } from 'vue'
 
 type Booleanish = boolean | 'true' | 'false'
 
@@ -20,7 +20,7 @@ const emit = defineEmits({
   'update:modelValue': (newValue: Booleanish) => true,
 })
 
-function toggle () {
+function toggle() {
   if (typeof props.modelValue === 'string') {
     emit('update:modelValue', props.modelValue === 'false' ? 'true' : 'false')
     return

package/src/components/checkbox/HstCheckboxList.story.vue

@@ -12,7 +12,7 @@ const objectOptions = Object.keys(options).map(key => ({
   value: key,
 }))
 
-function initState () {
+function initState() {
   return {
     characters: [],
   }

package/src/components/checkbox/HstCheckboxList.vue

@@ -5,9 +5,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
+import type { HstControlOption } from '../../types'
+import { computed } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
-import { HstControlOption } from '../../types'
 import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
 
 const props = defineProps<{
@@ -21,7 +22,8 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
     return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
       if (typeof value === 'string') {
         return [value, value]
-      } else {
+      }
+      else {
         return [value.value, value.label]
       }
     }))
@@ -33,10 +35,11 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: Array<string>): void
 }>()
 
-function toggleOption (value: string) {
+function toggleOption(value: string) {
   if (props.modelValue.includes(value)) {
     emit('update:modelValue', props.modelValue.filter(element => element !== value))
-  } else {
+  }
+  else {
     emit('update:modelValue', [...props.modelValue, value])
   }
 }
@@ -52,7 +55,7 @@ function toggleOption (value: string) {
   >
     <div class="-htw-my-1">
       <template
-        v-for="( label, value ) in formattedOptions"
+        v-for="(label, value) in formattedOptions"
         :key="value"
       >
         <label

package/src/components/checkbox/HstSimpleCheckbox.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
 
-function initState () {
+function initState() {
   return {
     checked: true,
   }

package/src/components/checkbox/HstSimpleCheckbox.vue

@@ -16,7 +16,7 @@ const emit = defineEmits({
   'update:modelValue': (newValue: boolean) => true,
 })
 
-function toggle () {
+function toggle() {
   if (!props.withToggle) {
     return
   }
@@ -46,7 +46,7 @@ watch(path, () => {
 <template>
   <div
     class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"
-    :class="{'htw-cursor-pointer': withToggle}"
+    :class="{ 'htw-cursor-pointer': withToggle }"
     @click="toggle"
   >
     <div