@dpa-id-components/dpa-shared-components 22.0.0-next.1 → 22.0.0-next.11

package/dist/{user-need-educate-me-CRi42bIc.js → user-need-educate-me-B5uX-I2R.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/user-need-educate-me.vue
 var i = {}, a = {
@@ -15,6 +15,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{user-need-give-me-perspective-BIF7v9vF.js → user-need-give-me-perspective-D1ivktbZ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/user-need-give-me-perspective.vue
 var i = {}, a = {
@@ -15,6 +15,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{user-need-help-me-O0XSLzP-.js → user-need-help-me-Re-fEjwm.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/user-need-help-me.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{user-need-touch-me-BueJ3SSh.js → user-need-touch-me-D025Uac5.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/user-need-touch-me.vue
 var i = {}, a = {
@@ -15,6 +15,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{user-need-update-me-DP574fsn.js → user-need-update-me-DU3SfxYI.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/user-need-update-me.vue
 var i = {}, a = {
@@ -15,6 +15,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{video-DhS7zpNF.js → video-07EjnCpD.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/components/UiMediaTypeIcon/icons/video.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{video-CWHoNlON.js → video-B0IVRe8t.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/video.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{video-overlay-D6e61Eo7.js → video-overlay-blAbosdl.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/video-overlay.vue
 var i = {}, a = {
@@ -14,6 +14,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{view-Bc5W8beK.js → view-BrJ61_ek.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/view.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{view-off-DquC2i3E.js → view-off-Chs7NQif.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/view-off.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/dist/{volume-up-DEzoW7Bq.js → volume-up-BDZJhktI.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/volume-up.vue
 var i = {}, a = {
@@ -13,6 +13,6 @@ function o(e, i) {
 		fill: "currentColor"
 	}, null, -1)]]);
 }
-var s = /* @__PURE__ */ e(i, [["render", o]]);
+var s = /*#__PURE__*/ e(i, [["render", o]]);
 //#endregion
 export { s as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.0.0-next.1",
+  "version": "22.0.0-next.11",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -40,52 +40,52 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "^24.14.0"
+      "version": "24.17.0"
+    },
+    "packageManager": {
+      "name": "pnpm",
+      "version": "11.7.0",
+      "onFail": "download"
     }
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.3",
     "@eslint/js": "10.0.1",
-    "@storybook/addon-docs": "10.3.6",
-    "@storybook/addon-links": "10.3.6",
-    "@storybook/addon-themes": "10.3.6",
-    "@storybook/builder-vite": "10.3.6",
-    "@storybook/vue3-vite": "10.3.6",
-    "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "4.2.4",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/vue3-vite": "10.4.6",
+    "@tailwindcss/typography": "0.5.20",
+    "@tailwindcss/vite": "4.3.1",
     "@tsconfig/node24": "24.0.4",
-    "@types/jsdom": "28.0.1",
-    "@types/node": "25.6.0",
-    "@vitejs/plugin-vue": "6.0.6",
-    "@vue/test-utils": "2.4.10",
+    "@types/jsdom": "28.0.3",
+    "@types/node": "25.9.3",
+    "@vitejs/plugin-vue": "6.0.7",
+    "@vue/test-utils": "2.4.11",
     "@vue/tsconfig": "0.9.1",
     "ajv": "8.20.0",
-    "commit-and-tag-version": "12.7.1",
-    "eslint": "10.3.0",
-    "eslint-plugin-storybook": "10.3.6",
+    "commit-and-tag-version": "12.7.3",
+    "eslint": "10.5.0",
+    "eslint-plugin-storybook": "10.4.6",
     "husky": "9.1.7",
     "jsdom": "29.1.1",
-    "npm-run-all2": "8.0.4",
-    "prettier": "3.8.3",
+    "npm-run-all2": "9.0.2",
+    "prettier": "3.8.4",
     "rimraf": "6.1.3",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.3.6",
-    "tailwindcss": "4.2.4",
+    "storybook": "10.4.6",
+    "tailwindcss": "4.3.1",
     "typescript": "6.0.3",
-    "unplugin-dts": "1.0.0",
-    "vite": "8.0.10",
-    "vitest": "4.1.5",
-    "vue": "3.5.33",
-    "vue-router": "5.0.6",
-    "vue-tsc": "3.2.7"
+    "unplugin-dts": "1.0.2",
+    "vite": "8.0.16",
+    "vitest": "4.1.9",
+    "vue": "3.5.38",
+    "vue-router": "5.1.0",
+    "vue-tsc": "3.3.5"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.11",
+    "@floating-ui/vue": "^2.0.0",
     "@typescript-eslint/parser": "^8.58.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.7.0",
-    "@vuepic/vue-datepicker": "^12.1.0",
+    "@vuepic/vue-datepicker": "^14.0.0",
     "@vueuse/core": "^14.2.1",
     "clsx": "^2.1.1",
     "color": "^5.0.3",
@@ -99,13 +99,13 @@
     "vue-eslint-parser": "^10.4.0"
   },
   "peerDependencies": {
-    "@eslint/js": "^9.39.2 || ^10.0.1",
+    "@eslint/js": "^10.0.1",
     "@tailwindcss/typography": "^0.5.16",
-    "eslint": "^9.39.2 || ^10.1.0",
+    "eslint": "^10.4.0",
     "prettier": "^3.8.1",
     "tailwindcss": "^4.1.11",
     "vue": "^3.5.0",
-    "vue-router": "^4.6.4 || ^5.0.0"
+    "vue-router": "^5.1.0"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",

package/src/assets/icons/lock-filled.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2.11C13.0609 2.11 14.078 2.53173 14.8281 3.28188C15.5783 4.03202 16 5.04913 16 6.11V9.99965H17C17.7956 9.99965 18.5585 10.3161 19.1211 10.8786C19.6836 11.4411 19.9999 12.2041 20 12.9996V18.9996C20 19.7953 19.6837 20.5591 19.1211 21.1217C18.5585 21.6841 17.7955 21.9996 17 21.9996H7C6.2045 21.9996 5.44149 21.6841 4.87891 21.1217C4.3163 20.5591 4 19.7953 4 18.9996V12.9996C4.00009 12.2041 4.31638 11.4411 4.87891 10.8786C5.4415 10.3161 6.20443 9.99965 7 9.99965H8V6.11C8 5.04913 8.42173 4.03202 9.17188 3.28188C9.92202 2.53173 10.9391 2.11 12 2.11ZM12 13.7496C11.4478 13.7496 11.0002 14.1975 11 14.7496V16.7496C11 17.3019 11.4477 17.7496 12 17.7496C12.5523 17.7496 13 17.3019 13 16.7496V14.7496C12.9998 14.1975 12.5522 13.7496 12 13.7496ZM12 3.99965C11.4554 4.01535 10.9393 4.24678 10.5645 4.64223C10.1896 5.03767 9.98655 5.56531 10 6.11V9.99965H14V6.11C14.0135 5.56531 13.8104 5.03767 13.4355 4.64223C13.0607 4.24678 12.5446 4.01535 12 3.99965Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/play-filled.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 4.91861C6 3.73014 7.31627 3.0137 8.31435 3.65892L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.9701 6 20.2575 6 19.05V4.91861Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/play.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z"
+      d="M8 5.83723V18.1L17.197 11.7828L8 5.83723ZM6 4.91861C6 3.73014 7.31627 3.0137 8.31435 3.65892L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.9701 6 20.2575 6 19.05V4.91861Z"
       fill="currentColor"
     />
   </svg>

package/src/components/UiBadge/UiBadge.vue

@@ -16,31 +16,26 @@ import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 const { appearance = "accent-red", iconName = undefined } = defineProps<{
   appearance?:
     | "accent-red"
-    | "accent-red-dark"
     | "accent-orange"
     | "accent-purple"
     | "accent-green"
     | "primary"
     | "neutral-primary"
-    | "neutral-emphasis"
     | "neutral-medium"
     | "neutral-faint";
   iconName?: UiIconName;
 }>();
 
 const colorClass = computed(() => {
-  const colorClasses: Record<string, string> = {
+  return {
     "accent-red": "bg-accent-red text-neutral",
-    "accent-red-dark": "bg-accent-red-dark text-neutral",
     "accent-orange": "bg-accent-orange text-neutral",
     "accent-purple": "bg-accent-purple text-neutral",
     "accent-green": "bg-accent-green text-neutral",
     primary: "bg-primary text-neutral",
     "neutral-primary": "bg-neutral-primary text-neutral",
-    "neutral-emphasis": "bg-neutral-emphasis text-neutral",
     "neutral-medium": "bg-neutral-medium text-neutral",
-    "neutral-faint": "bg-neutral-faint text-neutral-emphasis",
-  };
-  return colorClasses[appearance];
+    "neutral-faint": "bg-neutral-faint text-neutral-subtle",
+  }[appearance];
 });
 </script>

package/src/components/UiButton/README.md

@@ -40,15 +40,15 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
 
 ### Props
 
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
-| `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"`  |  |
-| `appearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, `"tertiary"`, or `"ghost"` | `"primary"` |  |
-| `disabled` | `boolean` | `false` | Whether the `button` is disabled |
+| Name         | Type                                                                                       | Default     | Description                      |
+|--------------|--------------------------------------------------------------------------------------------|-------------|----------------------------------|
+| `to`         | `RouteLocationRaw`                                                                         | `undefined` | `RouterLink` `to` prop           |
+| `size`       | `"xs"`, `"sm"`, `"md"`, or `"lg"`                                                          | `"md"`      |                                  |
+| `appearance` | `"fill-emphasis"`, `"fill-subtle"`, `"outline-emphasis"`, `"outline-subtle"`, or `"ghost"` | `"primary"` |                                  |
+| `disabled`   | `boolean`                                                                                  | `false`     | Whether the `button` is disabled |
 
 ### Slots
 
-| Name      | Description                                 |
-|-----------|---------------------------------------------|
+| Name      | Description                                                                                                                                                                      |
+|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `default` | Button content. Note, that text nodes are wrapped in a `span` element to ensure they can be detected using the CSS selectors responsible for applying icon-only-specific styles. |

package/src/components/UiButton/UiButton.vue

@@ -42,12 +42,17 @@ defineSlots<{
 const {
   to = undefined,
   size = "md",
-  appearance = "primary",
+  appearance = "fill-emphasis",
   disabled = false,
 } = defineProps<{
   to?: RouteLocationRaw;
   size?: keyof typeof BUTTON_SIZE_CLASSES;
-  appearance?: "primary" | "secondary" | "secondary-alt" | "tertiary" | "ghost";
+  appearance?:
+    | "fill-emphasis"
+    | "fill-subtle"
+    | "outline-emphasis"
+    | "outline-subtle"
+    | "ghost";
   disabled?: boolean;
 }>();
 
@@ -69,13 +74,13 @@ const attributes = computed(() => {
 const appearanceClasses = computed(
   () =>
     ({
-      primary:
+      "fill-emphasis":
         "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
-      secondary:
+      "outline-emphasis":
         "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
-      "secondary-alt":
-        "border-neutral-faint bg-neutral text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
-      tertiary:
+      "outline-subtle":
+        "border-neutral-faint bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
+      "fill-subtle":
         "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
       ghost:
         "border-transparent bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",

package/src/components/UiCheckbox/README.md

@@ -3,19 +3,19 @@
 ## Usage
 
 ```vue
-<template>
-  <UiCheckbox required name="terms" appearance="secondary">
-    Accept terms and conditions
-  </UiCheckbox>
-</template>
-
-<script setup lang="ts">
-import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiCheckbox required name="terms" appearance="secondary">
+  Accept terms and conditions
+</UiCheckbox>
 ```
 
 ## API
 
+### Models
+
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string[] \| string \| boolean` | `undefined` | Sets the input value |
+
 ### Props
 
 **Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (`input[type="checkbox"]`) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.

package/src/components/UiCheckbox/UiCheckbox.vue

@@ -41,7 +41,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="ModelValue extends string[] | string | boolean"
+>
 import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -75,7 +79,7 @@ const {
   size?: "sm" | "md";
 }>();
 
-const model = defineModel<boolean | string | string[]>();
+const model = defineModel<ModelValue>();
 
 const defaultId = useId();
 const uniqueId = computed(() => id ?? `id-${defaultId}`);

package/src/components/UiChip/UiChip.vue

@@ -31,8 +31,8 @@ defineEmits<{
 }>();
 
 const CHIP_SIZES: Record<Extract<Size, "xs" | "sm" | "md">, string> = {
-  xs: "text-xs",
-  sm: "text-sm/5.5",
+  xs: "text-xs/5",
+  sm: "text-sm/6",
   md: "text-sm/8",
 };
 

package/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
   <UiButton
-    appearance="secondary"
+    appearance="outline-emphasis"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >

package/src/components/UiDatePicker/UiDatePicker.vue

@@ -70,7 +70,7 @@
             'w-full min-w-0': triggerWidth === 'full',
             'flex-none': triggerWidth === 'fit',
           }"
-          :appearance="value ? 'primary' : 'secondary-alt'"
+          :appearance="value ? 'fill-emphasis' : 'outline-subtle'"
           :disabled
           size="sm"
           data-testid="datepicker-trigger"
@@ -130,7 +130,7 @@
         <UiIcon class="text-neutral-subtle" name="chevron-right" size="sm" />
       </template>
       <template #arrow>
-        <div ref="menuArrow" class="dp__arrow_top"></div>
+        <div ref="menuArrow" class="dp--arrow-top"></div>
       </template>
     </VueDatePicker>
   </div>
@@ -306,17 +306,17 @@ function formatInput(date: Date | [Date, Date]): string {
 <style>
 @reference "../../tailwindPreset.css";
 
-.dp__arrow_top {
+.dp--arrow-top {
   left: 10%;
 }
 
-.dp__menu {
+.dp--menu {
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-lg);
 }
 
 .dp--year-select,
-.dp__month_year_select {
+.dp--month-year-select {
   border-radius: var(--radius-2xl);
 }
 
@@ -325,45 +325,45 @@ function formatInput(date: Date | [Date, Date]): string {
   padding: 0.25rem;
 }
 
-.dp__flex_display {
+.dp--flex-display {
   gap: 2rem;
 }
 
-.dp__sidebar_left {
+.dp--sidebar-left {
   padding: 0;
 }
 
-.dp__cell_inner {
+.dp--cell-inner {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__cell_inner:hover {
+.dp--cell-inner:hover {
   border-radius: calc(infinity * 1px);
 }
 
-.dp__today {
+.dp--today {
   border: 1px solid var(--color-neutral-primary);
 }
 
-.dp__cell_auto_range,
-.dp__cell_auto_range_start,
-.dp__cell_auto_range_end {
+.dp--cell-auto-range,
+.dp--cell-auto-range-start,
+.dp--cell-auto-range-end {
   border: none;
   color: var(--color-neutral-primary);
   background-color: var(--color-neutral-faint);
 }
 
-.dp__month_year_select {
+.dp--month-year-select {
   font-size: var(--text-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-neutral-primary);
 }
 
-.dp__calendar_header_separator {
+.dp--calendar-header-separator {
   display: none;
 }
 
-.dp__calendar_header {
+.dp--calendar-header {
   gap: 0.25rem;
   align-items: center;
   font-size: var(--text-xs);
@@ -371,26 +371,26 @@ function formatInput(date: Date | [Date, Date]): string {
   font-weight: var(--font-weight-semibold);
 }
 
-.dp__calendar_header_item {
+.dp--calendar-header-item {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-neutral-subtle);
 }
 
-.dp__calendar_row {
+.dp--calendar-row {
   gap: 0.25rem;
 }
 
-.dp__action_row,
-.dp__action_extra {
+.dp--action-row,
+.dp--action-extra {
   justify-content: end;
   gap: 1rem;
   border-top: 1px solid var(--color-neutral-faint);
   padding: 0.5rem 1rem;
 }
 
-.dp__theme_light {
+.dp--theme-light {
   --dp-font-family: var(--font-sans);
   --dp-month-year-row-height: 2rem; /*Height of the month-year select row*/
   --dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/