[AFTER SUMMER] fix: use css package instead of component-classes

components/alert/w-alert.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { wExpandTransition } from '#generics';
 import { createModel, modelProps } from 'create-v-model';
-import { alert as ccAlert } from '@warp-ds/component-classes';
+import { alert as ccAlert } from '@warp-ds/css/component-classes';
 
 const props = defineProps({
   title: String,

components/attention/w-attention-arrow.vue

@@ -1,7 +1,7 @@
 <script setup>
   import { computed } from 'vue'
   import { props as attentionProps, opposites, rotation } from './attentionUtil.js'
-  import { attention as ccAttention } from '@warp-ds/component-classes'
+  import { attention as ccAttention } from '@warp-ds/css/component-classes'
 
   const props = defineProps({
     ...attentionProps,

components/attention/w-attention.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { watch, computed, ref, onMounted, nextTick } from 'vue'
-  import { attention as ccAttention } from '@warp-ds/component-classes'
+  import { attention as ccAttention } from '@warp-ds/css/component-classes'
   import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
 
   import { absentProp } from '#util'

components/box/w-box.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { box as ccBox } from '@warp-ds/component-classes';
+import { box as ccBox } from '@warp-ds/css/component-classes';
 import { computed } from 'vue';
 
 const props = defineProps({

components/breadcrumbs/w-breadcrumbs.vue

@@ -12,7 +12,7 @@
 <script setup>
 import { h, Fragment } from 'vue'
 import { interleave } from '@warp-ds/core/breadcrumbs'
-import { breadcrumbs as ccBreadcrumbs } from "@warp-ds/component-classes"
+import { breadcrumbs as ccBreadcrumbs } from '@warp-ds/css/component-classes'
 
 const props = defineProps({
   ariaLabel: { type: String, default: 'Her er du' }

components/button-group/w-button-group-item.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { inject, computed } from 'vue';
-import { buttonGroupItem as ccButtonGroupItem } from '@warp-ds/component-classes';
+import { buttonGroupItem as ccButtonGroupItem } from '@warp-ds/css/component-classes';
 
 const props = defineProps({ selected: Boolean });
 const outlined = inject('outlined', false);

components/button-group/w-button-group.vue

@@ -10,7 +10,7 @@ export default { name: 'wButtonGroup' }
 
 <script setup>
 import { provide, computed, toRef } from 'vue';
-import { buttonGroup as ccButtonGroup } from '@warp-ds/component-classes';
+import { buttonGroup as ccButtonGroup } from '@warp-ds/css/component-classes';
 
 const props = defineProps({
   outlined: Boolean,

components/button/w-button.vue

@@ -11,7 +11,7 @@ export default { name: 'wButton' }
 
 <script setup>
 import { computed, useAttrs } from 'vue'
-import { button as ccButton } from '@warp-ds/component-classes';
+import { button as ccButton } from '@warp-ds/css/component-classes';
 
 const buttonTypes = [    
   'primary',

components/card/w-card.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { card as ccCard } from '@warp-ds/component-classes';
+import { card as ccCard } from '@warp-ds/css/component-classes';
 import { computed } from 'vue';
 
 const props = defineProps({

components/expandable/w-expandable.vue

@@ -26,7 +26,7 @@ import { ref, computed, watch, nextTick, useSlots } from 'vue'
 import { modelProps, createModel } from 'create-v-model'
 import { absentProp } from '#util'
 import { wExpandTransition as expandTransition } from '#generics'
-import { expandable as ccExpandable, box as ccBox } from '@warp-ds/component-classes'
+import { expandable as ccExpandable, box as ccBox } from '@warp-ds/css/component-classes'
 
 const props = defineProps({
   title: String,

components/forms/w-affix.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { suffix, prefix } from '@warp-ds/component-classes'
+import { suffix, prefix } from '@warp-ds/css/component-classes'
 import { computed } from 'vue'
 
 export default {

components/forms/w-field.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { computed } from 'vue';
-import { input as ccInput, label as ccLabel, helpText as ccHelpText} from '@warp-ds/component-classes';
+import { input as ccInput, label as ccLabel, helpText as ccHelpText} from '@warp-ds/css/component-classes';
 import { createValidation } from './validation';
 import { id } from '#util';
 import { modelProps } from 'create-v-model';

components/forms/w-input.vue

@@ -33,7 +33,7 @@
 
 <script setup>
   import { ref, computed, useSlots } from 'vue';
-  import { input as ccInput } from '@warp-ds/component-classes';
+  import { input as ccInput } from '@warp-ds/css/component-classes';
   import { createModel } from 'create-v-model';
   import { setupMask } from './w-input-mask.js';
   import { default as wField, fieldProps } from './w-field.vue';

components/forms/w-select.vue

@@ -38,7 +38,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { select as ccSelect } from '@warp-ds/component-classes';
+import { select as ccSelect } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model'
 import { default as wField, fieldProps } from './w-field.vue'
 

components/forms/w-suffix.vue

@@ -8,7 +8,7 @@
 
 <script>
 import { onMounted } from 'vue'
-import { suffix as c } from '@warp-ds/component-classes'
+import { suffix as c } from '@warp-ds/css/component-classes'
 
 export default {
   name: 'wSuffix',

components/forms/w-textarea.vue

@@ -18,7 +18,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { input as ccInput } from '@warp-ds/component-classes';
+import { input as ccInput } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model';
 import { default as wField, fieldProps } from './w-field.vue';
 

components/forms/w-toggle.vue

@@ -20,7 +20,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 import { default as wField, fieldProps } from './w-field.vue';
 import { wToggleItem } from '#generics';
 import { createModel } from 'create-v-model';

components/generic/w-clickable.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { clickable as ccClickable } from '@warp-ds/component-classes';
+import { clickable as ccClickable } from '@warp-ds/css/component-classes';
 import wToggleItem from './w-toggle-item.vue';
 
 const props = defineProps({

components/generic/w-dead-toggle.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 import wToggleItem from './w-toggle-item.vue';
 import { computed } from 'vue';
 

components/generic/w-toggle-item.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { id as uniqueId } from '#util';
 import { modelProps, createModel } from 'create-v-model';
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 const p = defineProps({
   id: { ...uniqueId },
   label: String,

components/modal/w-modal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue'
-import { modal as ccModal } from '@warp-ds/component-classes'
+import { modal as ccModal } from '@warp-ds/css/component-classes'
 import focusLock from 'dom-focus-lock'
 import { id } from '#util'
 import { setup as setupScrollLock, teardown as teardownScrollLock } from 'scroll-doctor'

components/pill/w-pill.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import { pill as ccPill } from '@warp-ds/component-classes';
+import { pill as ccPill } from '@warp-ds/css/component-classes';
 
 const p = defineProps({
   label: String,

components/slider/w-slider.vue

@@ -8,7 +8,7 @@ import {
   onBeforeUnmount,
 } from 'vue';
 import { modelProps, createModel } from 'create-v-model';
-import { slider as ccSlider } from '@warp-ds/component-classes';
+import { slider as ccSlider } from '@warp-ds/css/component-classes';
 import { useDimensions, createHandlers } from '@warp-ds/core/slider';
 
 const attrs = useAttrs();

components/steps/w-step.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, inject } from 'vue';
-import { step as ccStep } from '@warp-ds/component-classes';
+import { step as ccStep } from '@warp-ds/css/component-classes';
 
 const vertical = inject('steps-vertical', true);
 const left = inject('steps-left', true);

components/steps/w-steps.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, provide, watchEffect } from 'vue';
-import { steps as ccSteps } from '@warp-ds/component-classes';
+import { steps as ccSteps } from '@warp-ds/css/component-classes';
 
 const props = defineProps({
   horizontal: Boolean,

components/switch/w-switch.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
-import { switchToggle as ccSwitch } from '@warp-ds/component-classes'
+import { switchToggle as ccSwitch } from '@warp-ds/css/component-classes'
 import { createModel, modelProps } from 'create-v-model'
 import { id } from '#util'
 

components/tabs/w-tab.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { tab as ccTab } from '@warp-ds/component-classes';
+import { tab as ccTab } from '@warp-ds/css/component-classes';
 import { inject, computed, onBeforeUnmount } from 'vue';
 
 const props = defineProps({

components/tabs/w-tabs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { gridLayout, tabs as ccTabs } from '@warp-ds/component-classes';
+import { gridLayout, tabs as ccTabs } from '@warp-ds/css/component-classes';
 import {
   provide,
   computed,

components/tag/w-tag.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ribbon as ccRibbon } from '@warp-ds/component-classes'
+import { ribbon as ccRibbon } from '@warp-ds/css/component-classes'
 import { computed } from 'vue'
 
 const props = defineProps({

package.json

@@ -29,8 +29,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@warp-ds/core": "^1.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.115",
-    "@warp-ds/uno": "1.0.0-alpha.49",
+    "@warp-ds/css": "^1.0.0-alpha.14",
+    "@warp-ds/uno": "^1.0.0-alpha.57",
     "@floating-ui/dom": "^1.4.2",
     "create-v-model": "^2.2.0",
     "dom-focus-lock": "^1.1.0",