@fewangsit/wangsvue-presets 1.0.81-alpha.1 → 1.0.81-alpha.2

package/fixedasset/picklist/index.js

@@ -1,684 +1,613 @@
-export default {
-  root: {
-    class: [
-      // Flexbox
-      'flex lg:flex-row flex-col',
-    ],
-  },
-  sourcecontrols: {
-    class: [
-      // Flexbox & Alignment
-      'flex lg:flex-col justify-center gap-2',
-
-      // Spacing
-      'p-3',
-    ],
-  },
-  sourcemoveupbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  sourcemovetopbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  sourcemovedownbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  sourcemovebottombutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  sourcewrapper: {
-    class: 'grow shrink basis-2/4',
-  },
-  sourceheader: {
-    class: [
-      'font-semibold',
-
-      // Shape
-      'border-b rounded-t-md',
-
-      // Spacing
-      'py-3.5 px-3',
-
-      // Color
-      'text-surface-800/80',
-      'bg-surface-0',
-      'border-surface-200 border-b',
-    ],
-  },
-  sourcelist: {
-    class: [
-      // Spacing
-      'list-none m-0 p-0',
-
-      // Size
-      'min-h-[12rem] max-h-[24rem]',
-
-      // Shape
-      'rounded-b-md border-0',
-
-      // Color
-      'text-surface-600/80',
-      'bg-surface-0',
-      'border border-surface-200',
-
-      // Spacing
-      'py-3 px-0',
-
-      // Focus & Outline
-      'outline-none',
-
-      // Misc
-      'overflow-auto',
-    ],
-  },
-  item: ({ context }) => ({
-    class: [
-      // Position
-      'relative',
-
-      // Spacing
-      'py-3.5 px-3 m-0',
-
-      // Shape
-      'border-b last:border-b-0',
-
-      // Transition
-      'transition duration-200',
-
-      // Color
-      'text-surface-700/80',
-      'border-surface-200',
-      {
-        'bg-surface-100':
-          context.active && !context.focused,
-      },
-      {
-        'bg-surface-200':
-          context.active && context.focused,
-      },
-      {
-        'bg-surface-50/70':
-          !context.active && context.focused,
-      },
-
-      // State
-      'hover:bg-surface-100',
-
-      // Misc
-      'cursor-pointer overflow-hidden',
-    ],
-  }),
-  buttons: {
-    class: 'flex lg:flex-col justify-center gap-2 p-3',
-  },
-  movetotargetbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  movealltotargetbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  movetosourcebutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  movealltosourcebutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  targetcontrols: {
-    class: 'flex lg:flex-col justify-center gap-2 p-3',
-  },
-  targetmoveupbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  targetmovetopbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  targetmovedownbutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  targetmovebottombutton: {
-    root: ({ context }) => ({
-      class: [
-        // Flexbox & Alignment
-        'relative inline-flex items-center justify-center',
-
-        // Shape
-        'rounded-md',
-
-        // Color
-        'text-white',
-        'bg-primary-500',
-        'border border-primary-500',
-
-        // Spacing & Size
-        'text-sm',
-        'w-8',
-        'm-0',
-        'px-2.5 py-1.5 min-w-[2rem]',
-        'shadow-sm',
-
-        // Transitions
-        'transition duration-200 ease-in-out',
-
-        // State
-        'hover:bg-primary-600 hover:border-primary-600',
-        'focus:outline-none focus:outline-offset-0 focus:ring-2',
-        'focus:ring-primary-500',
-        { 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-        // Interactivity
-        'cursor-pointer user-select-none',
-      ],
-    }),
-    label: {
-      class: [
-        // Flexbox
-        'flex-initial',
-
-        // Size
-        'w-0',
-      ],
-    },
-  },
-  targetwrapper: {
-    class: 'grow shrink basis-2/4',
-  },
-  targetheader: {
-    class: [
-      'font-semibold',
-
-      // Shape
-      'border-b rounded-t-md',
-
-      // Spacing
-      'py-3.5 px-3',
-
-      // Color
-      'text-surface-800/80',
-      'bg-surface-0',
-      'border-surface-200 border-b',
-    ],
-  },
-  targetlist: {
-    class: [
-      // Spacing
-      'list-none m-0 p-0',
-
-      // Size
-      'min-h-[12rem] max-h-[24rem]',
-
-      // Shape
-      'rounded-b-md border-0',
-
-      // Color
-      'text-surface-600/80',
-      'bg-surface-0',
-      'border border-surface-200',
-
-      // Spacing
-      'py-3 px-0',
-
-      // Focus & Outline
-      'outline-none',
-
-      // Misc
-      'overflow-auto',
-    ],
-  },
-  transition: {
-    enterFromClass: '!transition-none',
-    enterActiveClass: '!transition-none',
-    leaveActiveClass: '!transition-none',
-    leaveToClass: '!transition-none',
-  },
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            // Flexbox
+            'flex lg:flex-row flex-col',
+        ],
+    },
+    sourcecontrols: {
+        class: [
+            // Flexbox & Alignment
+            'flex lg:flex-col justify-center gap-2',
+            // Spacing
+            'p-3',
+        ],
+    },
+    sourcemoveupbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    sourcemovetopbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    sourcemovedownbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    sourcemovebottombutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    sourcewrapper: {
+        class: 'grow shrink basis-2/4',
+    },
+    sourceheader: {
+        class: [
+            'font-semibold',
+            // Shape
+            'border-b rounded-t-md',
+            // Spacing
+            'py-3.5 px-3',
+            // Color
+            'text-surface-800/80',
+            'bg-surface-0',
+            'border-surface-200 border-b',
+        ],
+    },
+    sourcelist: {
+        class: [
+            // Spacing
+            'list-none m-0 p-0',
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+            // Shape
+            'rounded-b-md border-0',
+            // Color
+            'text-surface-600/80',
+            'bg-surface-0',
+            'border border-surface-200',
+            // Spacing
+            'py-3 px-0',
+            // Focus & Outline
+            'outline-none',
+            // Misc
+            'overflow-auto',
+        ],
+    },
+    item: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Position
+                'relative',
+                // Spacing
+                'py-3.5 px-3 m-0',
+                // Shape
+                'border-b last:border-b-0',
+                // Transition
+                'transition duration-200',
+                // Color
+                'text-surface-700/80',
+                'border-surface-200',
+                {
+                    'bg-surface-100': context.active && !context.focused,
+                },
+                {
+                    'bg-surface-200': context.active && context.focused,
+                },
+                {
+                    'bg-surface-50/70': !context.active && context.focused,
+                },
+                // State
+                'hover:bg-surface-100',
+                // Misc
+                'cursor-pointer overflow-hidden',
+            ],
+        });
+    },
+    buttons: {
+        class: 'flex lg:flex-col justify-center gap-2 p-3',
+    },
+    movetotargetbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    movealltotargetbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    movetosourcebutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    movealltosourcebutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    targetcontrols: {
+        class: 'flex lg:flex-col justify-center gap-2 p-3',
+    },
+    targetmoveupbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    targetmovetopbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    targetmovedownbutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    targetmovebottombutton: {
+        root: function (_a) {
+            var context = _a.context;
+            return ({
+                class: [
+                    // Flexbox & Alignment
+                    'relative inline-flex items-center justify-center',
+                    // Shape
+                    'rounded-md',
+                    // Color
+                    'text-white',
+                    'bg-primary-500',
+                    'border border-primary-500',
+                    // Spacing & Size
+                    'text-sm',
+                    'w-8',
+                    'm-0',
+                    'px-2.5 py-1.5 min-w-[2rem]',
+                    'shadow-sm',
+                    // Transitions
+                    'transition duration-200 ease-in-out',
+                    // State
+                    'hover:bg-primary-600 hover:border-primary-600',
+                    'focus:outline-none focus:outline-offset-0 focus:ring-2',
+                    'focus:ring-primary-500',
+                    { 'cursor-default pointer-events-none opacity-60': context.disabled },
+                    // Interactivity
+                    'cursor-pointer user-select-none',
+                ],
+            });
+        },
+        label: {
+            class: [
+                // Flexbox
+                'flex-initial',
+                // Size
+                'w-0',
+            ],
+        },
+    },
+    targetwrapper: {
+        class: 'grow shrink basis-2/4',
+    },
+    targetheader: {
+        class: [
+            'font-semibold',
+            // Shape
+            'border-b rounded-t-md',
+            // Spacing
+            'py-3.5 px-3',
+            // Color
+            'text-surface-800/80',
+            'bg-surface-0',
+            'border-surface-200 border-b',
+        ],
+    },
+    targetlist: {
+        class: [
+            // Spacing
+            'list-none m-0 p-0',
+            // Size
+            'min-h-[12rem] max-h-[24rem]',
+            // Shape
+            'rounded-b-md border-0',
+            // Color
+            'text-surface-600/80',
+            'bg-surface-0',
+            'border border-surface-200',
+            // Spacing
+            'py-3 px-0',
+            // Focus & Outline
+            'outline-none',
+            // Misc
+            'overflow-auto',
+        ],
+    },
+    transition: {
+        enterFromClass: '!transition-none',
+        enterActiveClass: '!transition-none',
+        leaveActiveClass: '!transition-none',
+        leaveToClass: '!transition-none',
+    },
+};