@fewangsit/wangsvue-presets 1.0.85 → 1.0.87-alpha.0

package/fixedasset/style.css

@@ -964,6 +964,10 @@
   left: 0px;
 }
 
+.left-0\.5{
+  left: 0.125rem;
+}
+
 .left-2{
   left: 0.5rem;
 }
@@ -1473,6 +1477,10 @@
   height: 21px;
 }
 
+.h-\[26px\]{
+  height: 26px;
+}
+
 .h-\[2rem\]{
   height: 2rem;
 }
@@ -1781,6 +1789,10 @@
   min-width: 0px;
 }
 
+.min-w-4{
+  min-width: 1rem;
+}
+
 .min-w-52{
   min-width: 13rem;
 }
@@ -1981,11 +1993,6 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-3\.5{
-  --tw-translate-x: 0.875rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-full{
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2001,6 +2008,11 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-1\/2{
+  --tw-translate-y: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-y-2\/4{
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2477,6 +2489,10 @@
   border-radius: 60px;
 }
 
+.rounded-\[6px\]{
+  border-radius: 6px;
+}
+
 .rounded-\[7px\]{
   border-radius: 7px;
 }
@@ -2726,11 +2742,6 @@
   border-style: none;
 }
 
-.\!border-danger-500{
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(255 0 34 / var(--tw-border-opacity)) !important;
-}
-
 .\!border-general-100{
   --tw-border-opacity: 1 !important;
   border-color: rgb(218 217 227 / var(--tw-border-opacity)) !important;
@@ -2815,6 +2826,11 @@
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.\!bg-danger-500{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 0 34 / var(--tw-bg-opacity)) !important;
+}
+
 .\!bg-general-100{
   --tw-bg-opacity: 1 !important;
   background-color: rgb(218 217 227 / var(--tw-bg-opacity)) !important;
@@ -2855,6 +2871,11 @@
   background-color: rgb(0 99 247 / var(--tw-bg-opacity)) !important;
 }
 
+.\!bg-success-500{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(0 164 85 / var(--tw-bg-opacity)) !important;
+}
+
 .\!bg-transparent{
   background-color: transparent !important;
 }
@@ -2941,6 +2962,11 @@
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.bg-grayscale-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+}
+
 .bg-grayscale-200{
   --tw-bg-opacity: 1;
   background-color: rgb(229 230 230 / var(--tw-bg-opacity));
@@ -3123,6 +3149,10 @@
   --tw-bg-opacity: 0.9;
 }
 
+.bg-none{
+  background-image: none;
+}
+
 .fill-none{
   fill: none;
 }
@@ -3553,6 +3583,15 @@
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+.\!text-\[10px\]{
+  font-size: 10px !important;
+}
+
+.\!text-base{
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}
+
 .\!text-xs{
   font-size: 0.75rem !important;
   line-height: 1rem !important;
@@ -3684,10 +3723,6 @@
   line-height: 1.125rem;
 }
 
-.leading-\[12px\]{
-  line-height: 12px;
-}
-
 .leading-\[133\.333\%\]{
   line-height: 133.333%;
 }
@@ -3704,6 +3739,10 @@
   line-height: 19.12px;
 }
 
+.leading-\[22px\]{
+  line-height: 22px;
+}
+
 .leading-\[2rem\]{
   line-height: 2rem;
 }
@@ -3728,10 +3767,6 @@
   letter-spacing: 0.02em;
 }
 
-.tracking-\[0\.03em\]{
-  letter-spacing: 0.03em;
-}
-
 .tracking-\[0\.2488px\]{
   letter-spacing: 0.2488px;
 }
@@ -4169,6 +4204,10 @@
   --tw-ring-color: rgb(0 99 247 / var(--tw-ring-opacity)) !important;
 }
 
+.\!ring-transparent{
+  --tw-ring-color: transparent !important;
+}
+
 .ring-blue-400\/50{
   --tw-ring-color: rgb(96 165 250 / 0.5);
 }
@@ -4188,11 +4227,21 @@
   --tw-ring-color: rgb(255 0 34 / var(--tw-ring-opacity));
 }
 
+.ring-general-100{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(218 217 227 / var(--tw-ring-opacity));
+}
+
 .ring-general-200{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(181 179 199 / var(--tw-ring-opacity));
 }
 
+.ring-general-300{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(144 140 171 / var(--tw-ring-opacity));
+}
+
 .ring-general-400{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(108 104 141 / var(--tw-ring-opacity));
@@ -4243,6 +4292,11 @@
   --tw-ring-color: rgb(204 224 255 / var(--tw-ring-opacity));
 }
 
+.ring-primary-200{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(148 191 255 / var(--tw-ring-opacity));
+}
+
 .ring-primary-400{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity));
@@ -4465,6 +4519,7 @@
 
 * {
   font-family: 'Manrope', sans-serif;
+  scrollbar-width: thin;
 }
 
 .font-manrope {
@@ -4524,7 +4579,8 @@ h6,
   scrollbar-width: none;
 }
 
-.scrollbar-w-thin {
+.scrollbar-w-thin,
+.p-virtualscroller {
   scrollbar-width: thin;
 }
 
@@ -4613,6 +4669,11 @@ h6,
   left: 0px;
 }
 
+.before\:left-0\.5::before{
+  content: var(--tw-content);
+  left: 0.125rem;
+}
+
 .before\:left-1\/2::before{
   content: var(--tw-content);
   left: 50%;
@@ -4633,21 +4694,6 @@ h6,
   z-index: 50;
 }
 
-.before\:-mt-\[6px\]::before{
-  content: var(--tw-content);
-  margin-top: -6px;
-}
-
-.before\:ml-0::before{
-  content: var(--tw-content);
-  margin-left: 0px;
-}
-
-.before\:ml-0\.5::before{
-  content: var(--tw-content);
-  margin-left: 0.125rem;
-}
-
 .before\:ml-4::before{
   content: var(--tw-content);
   margin-left: 1rem;
@@ -4699,15 +4745,15 @@ h6,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.before\:translate-x-3::before{
+.before\:-translate-y-1\/2::before{
   content: var(--tw-content);
-  --tw-translate-x: 0.75rem;
+  --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.before\:translate-x-3\.5::before{
+.before\:translate-x-\[calc\(18px\)\]::before{
   content: var(--tw-content);
-  --tw-translate-x: 0.875rem;
+  --tw-translate-x: calc(18px);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -4778,6 +4824,18 @@ h6,
   border-color: transparent;
 }
 
+.before\:\!bg-white::before{
+  content: var(--tw-content);
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+}
+
+.before\:bg-general-100::before{
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(218 217 227 / var(--tw-bg-opacity));
+}
+
 .before\:bg-general-50::before{
   content: var(--tw-content);
   --tw-bg-opacity: 1;
@@ -4807,13 +4865,6 @@ h6,
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.before\:shadow::before{
-  content: var(--tw-content);
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .before\:shadow-xl::before{
   content: var(--tw-content);
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
@@ -5365,6 +5416,10 @@ h6,
   background-color: rgb(0 80 199 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-none:focus{
+  background-image: none;
+}
+
 .focus\:px-2:focus{
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -5630,6 +5685,22 @@ h6,
   background-color: rgb(255 222 102 / var(--tw-bg-opacity)) !important;
 }
 
+.peer:focus-visible ~ .peer-focus-visible\:\!outline{
+  outline-style: solid !important;
+}
+
+.peer:focus-visible ~ .peer-focus-visible\:\!outline-offset-0{
+  outline-offset: 0px !important;
+}
+
+.peer:focus-visible ~ .peer-focus-visible\:\!outline-primary-400\/\[5\%\]{
+  outline-color: rgb(46 130 255 / 5%) !important;
+}
+
+.peer:focus-visible ~ .peer-focus-visible\:\!outline-primary-500\/\[5\%\]{
+  outline-color: rgb(0 99 247 / 5%) !important;
+}
+
 .peer:focus-visible ~ .peer-focus-visible\:ring-2{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5867,6 +5938,12 @@ h6,
   background-image: none;
 }
 
+.\[\&\:has\(\:focus\)\]\:ring-1:has(:focus){
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .\[\&\:has\(\:focus\)\]\:\!ring-primary-400:has(:focus){
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity)) !important;
@@ -5882,6 +5959,11 @@ h6,
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity));
 }
 
+.\[\&\:has\(\:focus\)\]\:ring-primary-500:has(:focus){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 99 247 / var(--tw-ring-opacity));
+}
+
 .\[\&\:has\(\:focus\)_\.inputgroupaddon\]\:\!ring-primary-400:has(:focus) .inputgroupaddon{
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(46 130 255 / var(--tw-ring-opacity)) !important;

package/fixedasset/textarea/index.js

@@ -16,7 +16,8 @@ exports.default = {
         return ({
             'class': __spreadArray(__spreadArray([
                 // Font
-                'font-normal placeholder:text-general-200 placeholder:!font-normal text-xs',
+                'font-medium text-xs tracking-[0.02em]',
+                'placeholder:text-general-200 placeholder:!font-light',
                 'w-full',
                 {
                     'resize-none': props.autoResize,
@@ -35,7 +36,7 @@ exports.default = {
                 },
                 // // States
                 {
-                    'bg-transparent text-general-800': !context.disabled,
+                    'bg-white text-general-800': !context.disabled,
                     'bg-general-50 text-general-200': context.disabled,
                 },
                 'focus-visible:outline-none',

package/fixedasset/toggleswitch/index.d.ts

@@ -0,0 +1,100 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+    function slider({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'before:transform before:translate-x-[calc(18px)]': boolean;
+            'before:left-0.5'?: undefined;
+            ring?: undefined;
+            'ring-[0.5px]'?: undefined;
+            'before:bg-white'?: undefined;
+            'before:bg-general-100'?: undefined;
+            'bg-white ring-general-100'?: undefined;
+            'bg-primary-500 ring-transparent'?: undefined;
+            'bg-general-200  ring-transparent'?: undefined;
+            'bg-general-200 ring-general-100'?: undefined;
+            '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
+            '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
+        } | {
+            'before:left-0.5': boolean;
+            'before:transform before:translate-x-[calc(18px)]'?: undefined;
+            ring?: undefined;
+            'ring-[0.5px]'?: undefined;
+            'before:bg-white'?: undefined;
+            'before:bg-general-100'?: undefined;
+            'bg-white ring-general-100'?: undefined;
+            'bg-primary-500 ring-transparent'?: undefined;
+            'bg-general-200  ring-transparent'?: undefined;
+            'bg-general-200 ring-general-100'?: undefined;
+            '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
+            '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
+        } | {
+            ring: boolean;
+            'ring-[0.5px]': boolean;
+            'before:transform before:translate-x-[calc(18px)]'?: undefined;
+            'before:left-0.5'?: undefined;
+            'before:bg-white'?: undefined;
+            'before:bg-general-100'?: undefined;
+            'bg-white ring-general-100'?: undefined;
+            'bg-primary-500 ring-transparent'?: undefined;
+            'bg-general-200  ring-transparent'?: undefined;
+            'bg-general-200 ring-general-100'?: undefined;
+            '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
+            '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
+        } | {
+            'before:bg-white': boolean;
+            'before:bg-general-100': boolean;
+            'bg-white ring-general-100': boolean;
+            'bg-primary-500 ring-transparent': boolean;
+            'bg-general-200  ring-transparent': any;
+            'bg-general-200 ring-general-100': any;
+            'before:transform before:translate-x-[calc(18px)]'?: undefined;
+            'before:left-0.5'?: undefined;
+            ring?: undefined;
+            'ring-[0.5px]'?: undefined;
+            '!bg-danger-500 before:!bg-white ring-transparent'?: undefined;
+            '!bg-success-500 before:!bg-white ring-transparent'?: undefined;
+        } | {
+            '!bg-danger-500 before:!bg-white ring-transparent': boolean;
+            '!bg-success-500 before:!bg-white ring-transparent': boolean;
+            'before:transform before:translate-x-[calc(18px)]'?: undefined;
+            'before:left-0.5'?: undefined;
+            ring?: undefined;
+            'ring-[0.5px]'?: undefined;
+            'before:bg-white'?: undefined;
+            'before:bg-general-100'?: undefined;
+            'bg-white ring-general-100'?: undefined;
+            'bg-primary-500 ring-transparent'?: undefined;
+            'bg-general-200  ring-transparent'?: undefined;
+            'bg-general-200 ring-general-100'?: undefined;
+        })[];
+    };
+    function input({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'cursor-default': any;
+            'cursor-pointer': boolean;
+        })[];
+    };
+    namespace label {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace labeltext {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace tooltipicon {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+}
+export default _default;

package/{wangsvue/inputswitch → fixedasset/toggleswitch}/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var isFirefoxBased = navigator.userAgent.includes('Firefox');
 exports.default = {
     root: function (_a) {
         var props = _a.props;
@@ -31,33 +32,40 @@ exports.default = {
                 'rounded-[60px]',
                 // Before:
                 'before:absolute before:top-1/2',
-                'before:-mt-[6px] before:ml-0.5',
+                'before:-translate-y-1/2',
                 'before:h-3 before:w-3',
                 'before:rounded-full',
                 'before:duration-200 before:transition before:ease-in-out',
-                'before:shadow',
+                // Active position
                 {
-                    'before:bg-white before:bg-white': props.modelValue == props.trueValue,
-                    'before:bg-primary-200': props.modelValue !== props.trueValue && !props.disabled,
-                    'before:bg-general-50': props.modelValue !== props.trueValue && props.disabled,
+                    'before:transform before:translate-x-[calc(18px)]': props.modelValue == props.trueValue,
                 },
+                // Inactive position
                 {
-                    'before:transform before:translate-x-3.5': props.modelValue == props.trueValue,
+                    'before:left-0.5': props.modelValue != props.trueValue,
                 },
                 // Colors
-                'border',
+                'ring',
+                { 'ring': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
                 {
-                    'border-primary-200': props.modelValue !== props.trueValue && !props.disabled,
-                    'border-transparent': props.modelValue == props.trueValue,
+                    'before:bg-white': props.modelValue == props.trueValue,
+                    'before:bg-general-100': props.modelValue !== props.trueValue,
+                    // Inactive and Enabled
+                    'bg-white ring-general-100': props.modelValue !== props.trueValue && !props.disabled,
+                    // Active and Enabled
+                    'bg-primary-500 ring-transparent': props.modelValue == props.trueValue && !props.disabled,
+                    // Active and Disabled
+                    'bg-general-200  ring-transparent': props.modelValue == props.trueValue && props.disabled,
+                    // Inactive and Disabled
+                    'bg-general-200 ring-general-100': props.modelValue !== props.trueValue && props.disabled,
                 },
-                {
-                    'bg-white': props.modelValue !== props.trueValue && !props.disabled,
-                    'bg-primary-500': props.modelValue == props.trueValue && !props.disabled,
-                    'bg-primary-100': props.modelValue == props.trueValue && props.disabled,
-                    'bg-general-100': props.modelValue !== props.trueValue && props.disabled,
+                // TriState colors
+                props.triState && {
+                    '!bg-danger-500 before:!bg-white ring-transparent': props.modelValue == props.falseValue && !props.disabled,
+                    '!bg-success-500 before:!bg-white ring-transparent': props.modelValue == props.trueValue && !props.disabled,
                 },
                 // States
-                'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500',
+                'peer-focus-visible:!outline peer-focus-visible:!outline-offset-0 peer-focus-visible:!outline-primary-500/[5%]',
                 // Transition
                 'transition-colors duration-200',
                 // Misc
@@ -82,12 +90,10 @@ exports.default = {
                 'm-0',
                 // Shape
                 'rounded',
-                'border',
                 // Shape
                 'opacity-0',
                 'rounded-md',
                 'outline-none',
-                'border-2 border-surface-300',
                 // Misc
                 'appearance-none',
                 {
@@ -97,4 +103,25 @@ exports.default = {
             ],
         });
     },
+    label: {
+        class: [
+            'relative',
+            'w-max h-max items-start cursor-pointer',
+            'flex items-start select-none text-xs tracking-[0.02em] font-medium',
+            'text-general-800',
+            'shrink-0',
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+    labeltext: {
+        class: 'ml-1 leading-4',
+    },
+    tooltipicon: {
+        class: 'text-primary-500 w-[10px] h-[10px]',
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-presets",
-  "version": "1.0.85",
+  "version": "1.0.87-alpha.0",
   "author": "Wangsit FE Developer",
   "description": "Wangsit VueJS Component Library Presets",
   "main": "index.js",

package/wangsvue/buttonradio/index.d.ts

@@ -1,45 +1,32 @@
 declare namespace _default {
-    let root: {
-        class: string;
-        'data-wv-name': string;
-        'data-wv-section': string;
-    };
-    function wrapper({ props }: {
+    function root({ props }: {
         props: any;
     }): {
         class: (string | {
-            'bg-white': boolean;
-            'bg-general-50': any;
-            'border-general-100': boolean;
-            'border-primary-500': boolean;
-            'border-general-200': any;
-            '!border-danger-500'?: undefined;
+            'bg-white ring-grayscale-900': boolean;
+            'bg-general-50 ring-general-300': any;
+            '!ring-danger-500'?: undefined;
         } | {
-            '!border-danger-500': any;
-            'bg-white'?: undefined;
-            'bg-general-50'?: undefined;
-            'border-general-100'?: undefined;
-            'border-primary-500'?: undefined;
-            'border-general-200'?: undefined;
+            '!ring-danger-500': any;
+            'bg-white ring-grayscale-900'?: undefined;
+            'bg-general-50 ring-general-300'?: undefined;
         })[];
+        'data-wv-name': string;
+        'data-wv-section': string;
     };
     function box({ props }: {
         props: any;
     }): {
         class: (string | {
-            'border-general-100': boolean;
-            'border-primary-500': boolean;
-            'bg-primary-500': boolean;
-            'bg-general-200': any;
+            'bg-grayscale-900': boolean;
+            'bg-general-300': any;
             'outline-none outline-offset-0'?: undefined;
-            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 peer-focus-visible:ring-primary-500'?: undefined;
+            'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary-400/[8%]'?: undefined;
         } | {
             'outline-none outline-offset-0': boolean;
-            'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 peer-focus-visible:ring-primary-500': boolean;
-            'border-general-100'?: undefined;
-            'border-primary-500'?: undefined;
-            'bg-primary-500'?: undefined;
-            'bg-general-200'?: undefined;
+            'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary-400/[8%]': boolean;
+            'bg-grayscale-900'?: undefined;
+            'bg-general-300'?: undefined;
         })[];
     };
     function input({ props }: {
@@ -54,5 +41,14 @@ declare namespace _default {
         let _class: string;
         export { _class as class };
     }
+    let label: {
+        class: string[];
+    };
+    let labeltext: {
+        class: string;
+    };
+    let tooltipicon: {
+        class: string;
+    };
 }
 export default _default;