@dpa-id-components/dpa-shared-components 17.0.4 → 18.0.0-next.1

package/dist/src/components/UiIconButton/UiIconButton.stories.ts

@@ -7,6 +7,9 @@ const meta = {
   title: "Ui/UiIconButton",
   component: UiIconButton,
   argTypes: {
+    title: {
+      control: "text",
+    },
     iconName: {
       control: "select",
       options: Object.keys(icons),
@@ -25,6 +28,7 @@ const meta = {
     },
   },
   args: {
+    title: "Title",
     iconName: "alert",
     size: "large",
     backgroundColor: "blue",

package/dist/src/components/UiIconButton/UiIconButton.vue

@@ -2,7 +2,7 @@
   <button
     :disabled="disabled"
     :aria-label="title"
-    class="focus-visible:outline-blue group flex flex-none items-center justify-center rounded-full focus:outline-none"
+    class="group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:outline-blue"
     :class="[colorClass, backgroundClass, buttonSizeClass]"
     type="button"
     @click="($event) => emit('click', $event)"
@@ -26,14 +26,13 @@ const emit = defineEmits<{
 const props = withDefaults(
   defineProps<{
     iconName: UiIconName;
-    title?: string;
+    title: string;
     disabled?: boolean;
     backgroundColor?: "blue" | "none" | "gray-hover";
     iconColor?: "blue" | "gray" | "white";
     size?: "small" | "medium" | "large" | "xl";
   }>(),
   {
-    title: "",
     disabled: false,
     backgroundColor: "blue",
     iconColor: "white",

package/dist/src/components/UiInfoContent/UiInfoContent.vue

@@ -17,7 +17,7 @@
     </h2>
     <span
       v-if="$slots.default"
-      class="font-regular pt-4 text-center text-base text-gray-800"
+      class="pt-4 text-center text-base text-gray-800"
       data-testid="info-text"
     >
       <slot name="default" />

package/dist/src/components/UiInput/UiInput.vue

@@ -15,7 +15,7 @@
         )
       "
       :for="id"
-      class="pointer-events-none absolute left-3 origin-left select-none px-1 transition-all duration-150"
+      class="pointer-events-none absolute left-3 origin-left px-1 transition-all duration-150 select-none"
     >
       {{ label }}
     </label>
@@ -29,7 +29,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-24 w-full rounded-none text-sm outline-none transition duration-150 placeholder:text-gray-400"
+      class="peer block h-24 w-full rounded-none text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-100"
       :class="
         cn(
           componentClass,
@@ -55,7 +55,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-14 w-full rounded-none text-sm outline-none transition duration-150 placeholder:text-gray-400"
+      class="peer block h-14 w-full rounded-none text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-50"
       :class="
         cn(
           componentClass,
@@ -86,7 +86,7 @@
       :id="addonTextId"
       :class="
         cn(
-          'px-4 py-1 text-xs font-medium leading-normal transition-all duration-150 ease-in-out peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-aria-invalid:peer-hover:bg-alert-red-dark peer-aria-invalid:peer-focus:bg-alert-red-dark',
+          'px-4 py-1 text-xs leading-normal font-medium transition-all duration-150 ease-in-out peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-hover:peer-aria-invalid:bg-alert-red-dark peer-focus:peer-aria-invalid:bg-alert-red-dark',
           addonClass,
         )
       "
@@ -101,7 +101,7 @@
     <slot name="buttons"></slot>
     <svg
       v-if="chevron"
-      class="pointer-events-none absolute right-4 top-4 size-6 fill-current text-gray-900"
+      class="pointer-events-none absolute top-4 right-4 size-6 fill-current text-gray-900"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

package/dist/src/components/UiList/UiList.spec.ts

@@ -13,7 +13,7 @@ describe("UiList", () => {
     expect(wrapper.classes("border")).toBe(true);
     expect(wrapper.classes("text-base")).toBe(true);
     expect(wrapper.classes("leading-6")).toBe(true);
-    expect(wrapper.classes("focus:outline-none")).toBe(true);
+    expect(wrapper.classes("focus:outline-hidden")).toBe(true);
     expect(wrapper.classes("sm:text-sm")).toBe(true);
     expect(wrapper.classes("sm:leading-5")).toBe(true);
 

package/dist/src/components/UiList/UiList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul
-    class="border text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
+    class="border text-base leading-6 focus:outline-hidden sm:text-sm sm:leading-5"
   >
     <slot />
   </ul>

package/dist/src/components/UiListItem/UiListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li
     ref="itemEl"
-    class="focus-visible:outline-blue relative cursor-pointer select-none list-none border-t fill-current text-gray-900 shadow-none first-of-type:border-none focus:outline-none"
+    class="relative cursor-pointer list-none border-t fill-current text-gray-900 shadow-none select-none first-of-type:border-none focus:outline-hidden focus-visible:outline-blue"
     :class="disabled ? 'cursor-default' : 'cursor-pointer'"
     style="outline-offset: -2px"
     tabindex="0"
@@ -31,7 +31,7 @@
           class="mr-2 w-4"
           :class="{
             'aspect-square': imageShape === 'square',
-            'object-fit aspect-square rounded-full object-center':
+            'aspect-square rounded-full object-center':
               imageShape === 'rounded',
           }"
           :src="imageSrc"

package/dist/src/components/UiMenu/UiMenu.vue

@@ -18,9 +18,9 @@
         v-if="isOpen"
         ref="uiMenuDropdown"
         :class="[
-          'absolute ',
+          'absolute',
           cn(
-            'z-10 [--transition-duration:200ms] [--transition-close-duration:100ms]',
+            'z-10 [--transition-close-duration:100ms] [--transition-duration:200ms]',
             placedListClass,
           ),
         ]"
@@ -41,7 +41,7 @@
           :data-side="floatingUi.placement.value"
           :class="[
             cn(
-              'block min-w-max border-none bg-white shadow-lg data-[side*=top]:mb-1 data-[side*=bottom]:mt-1',
+              'block min-w-max border-none bg-white shadow-lg data-[side*=bottom]:mt-1 data-[side*=top]:mb-1',
               menuClasses,
             ),
           ]"
@@ -82,7 +82,7 @@
               >
                 <li
                   v-if="!!groupedOption.groupLabel"
-                  class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold uppercase tracking-wider text-gray-700 first:border-t-0"
+                  class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold tracking-wider text-gray-700 uppercase first:border-t-0"
                 >
                   {{ groupedOption.groupLabel }}
                 </li>

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -5,7 +5,7 @@
     class="relative size-full border-none"
   >
     <div
-      class="absolute right-3 top-12 z-10 block border-t bg-white px-4 py-3 shadow-lg"
+      class="absolute top-12 right-3 z-10 block border-t bg-white px-4 py-3 shadow-lg"
     >
       <slot />
     </div>

package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -2,7 +2,7 @@
   <ul
     class="flex"
     :class="[
-      cn('gap-4', $attrs.class as HTMLAttributes['class']),
+      cn('gap-4', $attrs.class as string),
       {
         'flex-col': direction === 'vertical',
       },
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends string | number">
-import { computed, type HTMLAttributes } from "vue";
+import { computed } from "vue";
 import { cn } from "../../utils/cn.js";
 
 export interface UiRadioInputGroupOption<T> {

package/dist/src/components/UiSearchBar/UiSearchBar.vue

@@ -22,7 +22,7 @@
         <input
           ref="searchInputRef"
           :value="modelValue"
-          class="size-full bg-transparent outline-none placeholder:text-gray-700 lg:text-sm"
+          class="size-full bg-transparent outline-hidden placeholder:text-gray-700 lg:text-sm"
           :class="[
             isFilterChipEditable ? 'px-4' : 'px-2',
             !isFocused && hasChips ? 'text-transparent' : '',
@@ -46,7 +46,7 @@
         <!-- gradient -->
         <div
           v-if="!isFocused"
-          class="h-full w-12 flex-none bg-gradient-to-l"
+          class="h-full w-12 flex-none bg-linear-to-l"
           :class="gradientClass"
         ></div>
         <div

package/dist/src/components/UiSearchInput/UiSearchInput.vue

@@ -24,7 +24,7 @@
           ref="inputs"
           :value="internalValue[index]"
           type="text"
-          class="w-full py-1 pb-2 text-sm focus:outline-none"
+          class="w-full py-1 pb-2 text-sm focus:outline-hidden"
           :placeholder="placeholder"
           @input="updateValue(index, ($event.target as HTMLInputElement).value)"
           @blur="handleBlur"
@@ -136,7 +136,7 @@ const hasLabel = computed(() => {
 });
 
 const inputWrapperClass = computed(() => {
-  const baseClass = "border-b border-b-gray-200 self-start flex-shrink-0";
+  const baseClass = "border-b border-b-gray-200 self-start shrink-0";
   return hasLabel.value
     ? ["lg:col-start-2 lg:text-base", baseClass]
     : [baseClass];

package/dist/src/components/UiSimpleInput/UiSimpleInput.vue

@@ -12,7 +12,7 @@
       v-bind="{ ...$attrs, class: null }"
       type="text"
       spellcheck="false"
-      class="w-full focus:outline-none"
+      class="w-full focus:outline-hidden"
       :class="[paddingClasses, fontSizeClasses]"
       :placeholder="placeholder"
       :value="value"

package/dist/src/components/UiSkeletonBox/UiSkeletonBox.spec.ts

@@ -8,7 +8,7 @@ describe("UiSkeletonBox", () => {
   it("renders default", () => {
     expect(wrapper.classes("inline-block")).toBe(true);
     expect(wrapper.classes("animate-pulse")).toBe(true);
-    expect(wrapper.classes("rounded")).toBe(true);
+    expect(wrapper.classes("rounded-sm")).toBe(true);
     expect(wrapper.classes("bg-gray-200")).toBe(true);
   });
 });

package/dist/src/components/UiSkeletonBox/UiSkeletonBox.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block animate-pulse rounded bg-gray-200"
+    class="inline-block animate-pulse rounded-sm bg-gray-200"
     :class="{
       'h-4 w-full': dynamicSize,
     }"

package/dist/src/components/UiSnackbar/UiSnackbar.vue

@@ -31,7 +31,7 @@
           class="mr-2 text-white"
         />
 
-        <p class="text-sm font-normal leading-5">
+        <p class="text-sm leading-5 font-normal">
           <slot />
         </p>
 
@@ -39,7 +39,7 @@
           v-if="$slots.action"
           ref="actionBtn"
           type="button"
-          class="pointer ml-3 text-sm font-bold leading-5 hover:underline focus:outline-none focus-visible:underline"
+          class="ml-3 cursor-pointer text-sm leading-5 font-bold hover:underline focus:outline-hidden focus-visible:underline"
           @click="emit('action-click')"
         >
           <slot name="action" />

package/dist/src/components/UiToggleButton/UiToggleButton.vue

@@ -14,7 +14,7 @@
       </div>
       <div
         v-if="isLabelPositionLeft && !$slots.default"
-        class="whitespace-nowrap font-normal leading-4 text-gray-800"
+        class="leading-4 font-normal whitespace-nowrap text-gray-800"
         :class="[labelSpaceClass, labelTextSizeClass]"
       >
         {{ labelText }}
@@ -48,12 +48,12 @@
             'bg-gray-500': !modelValue,
             [dotSize]: true,
           }"
-          class="dot absolute -left-1 rounded-full shadow transition-transform duration-200 ease-in-out"
+          class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
         />
       </div>
       <div
         v-if="!isLabelPositionLeft && !$slots.default"
-        class="whitespace-nowrap font-normal leading-4 text-gray-800"
+        class="leading-4 font-normal whitespace-nowrap text-gray-800"
         :class="[labelSpaceClass, labelTextSizeClass]"
       >
         {{ labelText }}

package/dist/src/components/UiTooltip/UiTooltip.vue

@@ -29,7 +29,7 @@
             <ul
               v-show="isShown"
               data-testid="tooltipElement"
-              class="border-1 my-1 w-72 rounded-2xl border-gray-300 bg-white text-xs leading-5 shadow-lg"
+              class="my-1 w-72 rounded-2xl border border-gray-300 bg-white text-xs leading-5 shadow-lg"
               :class="[tooltipClasses]"
             >
               <slot>
@@ -71,7 +71,7 @@
               :class="[
                 tooltipClasses,
                 multilines
-                  ? 'h-auto max-w-[300px] flex-wrap rounded-2xl '
+                  ? 'h-auto max-w-[300px] flex-wrap rounded-2xl'
                   : 'h-6 w-max rounded-full',
               ]"
             >

package/dist/src/compositions/useBreakpoints/UseBreakpoints.stories.vue

@@ -1,6 +1,6 @@
 <template>
   <UiButton v-if="lg">Button for LG</UiButton>
-  <UiIconButton v-else icon-name="emoji" />
+  <UiIconButton v-else title="Button" icon-name="emoji" />
 </template>
 
 <script setup lang="ts">

package/dist/src/compositions/useBreakpoints/useBreakpoints.ts

@@ -6,11 +6,11 @@ import { computed } from "vue";
 
 // Deliberately not using `breakpointsTailwind` as exported by `@vueuse/core` as it doesn't pick up custom values from the CSS configuration meaning if we customize the breakpoints at some point, these values wouldn't be correct.
 const breakpointsTailwind: Breakpoints = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1600px",
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem",
 };
 
 export function useBreakpoints() {
@@ -22,7 +22,7 @@ export function useBreakpoints() {
   const md = computed(() => currentBreakpoint.value.includes("md"));
   const lg = computed(() => currentBreakpoint.value.includes("lg"));
   const xl = computed(() => currentBreakpoint.value.includes("xl"));
-  const xxl = computed(() => currentBreakpoint.value.includes("xxl"));
+  const twoXl = computed(() => currentBreakpoint.value.includes("2xl"));
 
-  return { currentBreakpoint, sm, md, lg, xl, xxl };
+  return { currentBreakpoint, sm, md, lg, xl, "2xl": twoXl };
 }

package/dist/src/index.ts

@@ -1,4 +1,4 @@
-import "./tailwind/imports.css";
+import "./tailwindPreset.css";
 
 export * from "./utils/index.js";
 export * from "./components/index.js";

package/dist/src/tailwindPreset.css

@@ -0,0 +1,120 @@
+/* This line is needed for `@reference`s in Vue SFC `style` blocks within the shared components library to work. */
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+
+@custom-variant aria-invalid (&[aria-invalid="true"]);
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+/* TODO: This utility seems to have been broken previously. */
+@utility outline-blue {
+  outline: 2px solid rgba(0, 62, 219, 0.5);
+  outline-offset: 2px;
+}
+
+@theme {
+  /**
+   * COLORS
+   */
+
+  --color-transparent: rgba(255, 255, 255, 0);
+
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #eeeeee;
+  --color-gray-300: #e3e3e3;
+  --color-gray-400: #bababa;
+  --color-gray-500: #8c8c8c;
+  --color-gray-600: #7e7e7e;
+  --color-gray-700: #757575;
+  --color-gray-800: #4d4d4d;
+  --color-gray-900: #212121;
+
+  --color-green-neon: #00e281;
+  --color-green-primary: #00b064;
+  --color-green-night: #006345;
+
+  --color-blue-default: #003edb;
+  --color-blue-dark: #0030aa;
+
+  --color-red-default: #e53935;
+  --color-red-dark: #ab000d;
+
+  --color-pink-default: #f5138d;
+  --color-pink-dark: #bd0060;
+
+  --color-purple-default: #8e24aa;
+  --color-purple-dark: #5c007a;
+
+  --color-cyan-default: #00acc1;
+  --color-cyan-dark: #007c91;
+
+  --color-teal-default: #00897b;
+  --color-teal-dark: #005b4f;
+
+  --color-yellow-default: #f9f500;
+  --color-yellow-dark: #c1be00;
+
+  --color-orange-default: #ffb300;
+  --color-orange-dark: #c68400;
+
+  --color-alert-red-default: #f53000;
+  --color-alert-red-dark: #ba2400;
+
+  --color-alert-green-default: #00d200;
+  --color-alert-green-dark: #00aa00;
+
+  --color-rainbow-red: #e53935;
+  --color-rainbow-red-dark: #ab000d;
+  --color-rainbow-orange: #ffb300;
+  --color-rainbow-purple: #8e24aa;
+
+  --shadow-default: 0px 1px 1px rgba(0, 0, 0, 0.1);
+  --shadow-negative: 0px -1px 1px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0px 1px 5px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0px 2px 6px rgba(0, 0, 0, 0.25);
+
+  /**
+   * TYPOGRAPHY
+   */
+
+  --font-sans: Inter, sans-serif;
+  --font-marketing: Futura, sans-serif;
+
+  --text-xs--line-height: calc(1.125 / 0.75);
+  --text-sm--line-height: calc(1.3125 / 0.875);
+  --text-lg--line-height: calc(1.6875 / 1.125);
+  --text-xl--line-height: calc(1.875 / 1.25);
+  --text-2xl--line-height: calc(2.25 / 1.5);
+
+  /**
+   * SPACING
+   */
+
+  --spacing: 4px;
+
+  --spacing-inherit: inherit;
+  --spacing-half: 2px;
+  /* Used for form controls that receive a 2px border on :focus instead of the usual 1px and so a padding of 15px is applied instead of 16px to stop the content from jumping around. */
+  --spacing-inputFocused: 15px;
+
+  --inset-1/2: 50%;
+  --inset-full: 100%;
+  --inset-auto: auto;
+}

package/dist/{standard-view-UtDeup3-.js → standard-view-CJxdD4KE.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-D_u6Shzp.js";
 const s = {}, c = {
   width: "18",
   height: "18",
@@ -7,9 +7,9 @@ const s = {}, c = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function d(i, t) {
-  return o(), e("svg", c, t[0] || (t[0] = [
+  return o(), e("svg", c, [...t[0] || (t[0] = [
     r("path", { d: "M2 16V12H16L16.001 16H2ZM16 10H2C0.897 10 0 10.897 0 12V16C0 17.103 0.897 18 2 18H16C17.103 18 18 17.103 18 16V12C18 10.897 17.103 10 16 10ZM2 6V2H16L16.001 6H2ZM16 0H2C0.897 0 0 0.897 0 2V6C0 7.103 0.897 8 2 8H16C17.103 8 18 7.103 18 6V2C18 0.897 17.103 0 16 0Z" }, null, -1)
-  ]));
+  ])]);
 }
 const l = /* @__PURE__ */ n(s, [["render", d]]);
 export {

package/dist/{star-Dt4OBon0.js → star-Bv1tQbc9.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as L, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-D_u6Shzp.js";
 const C = {}, n = {
   width: "24",
   height: "24",
@@ -7,12 +7,12 @@ const C = {}, n = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function s(c, t) {
-  return L(), e("svg", n, t[0] || (t[0] = [
+  return L(), e("svg", n, [...t[0] || (t[0] = [
     o("path", {
       d: "M11.9995 16.05C12.1585 16.05 12.3175 16.088 12.4625 16.163L16.2315 18.133L15.5145 13.976C15.4575 13.65 15.5665 13.318 15.8045 13.087L18.8405 10.151L14.6375 9.539C14.3125 9.492 14.0315 9.289 13.8855 8.995L11.9995 5.201L10.1135 8.995C9.96755 9.289 9.68655 9.492 9.36155 9.539L5.15855 10.151L8.19455 13.087C8.43255 13.318 8.54155 13.65 8.48455 13.976L7.76755 18.133L11.5365 16.163C11.6815 16.088 11.8405 16.05 11.9995 16.05ZM17.5615 20.955C17.4025 20.955 17.2435 20.918 17.0985 20.842L11.9995 18.178L6.90055 20.842C6.56255 21.018 6.15455 20.987 5.84955 20.763C5.54155 20.539 5.38855 20.16 5.45255 19.785L6.42455 14.157L2.30455 10.172C2.02955 9.907 1.93155 9.509 2.04855 9.146C2.16455 8.783 2.47855 8.519 2.85555 8.464L8.55655 7.636L11.1035 2.51C11.4415 1.83 12.5575 1.83 12.8955 2.51L15.4425 7.636L21.1435 8.464C21.5205 8.519 21.8345 8.783 21.9505 9.146C22.0675 9.509 21.9695 9.907 21.6945 10.172L17.5745 14.157L18.5465 19.785C18.6105 20.16 18.4575 20.539 18.1495 20.763C17.9765 20.891 17.7695 20.955 17.5615 20.955Z",
       fill: "currentColor"
     }, null, -1)
-  ]));
+  ])]);
 }
 const _ = /* @__PURE__ */ r(C, [["render", s]]);
 export {

package/dist/{star-fill-f4RHdFIO.js → star-fill-B2nE9n7a.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-D_u6Shzp.js";
 const l = {}, s = {
   width: "24",
   height: "24",
@@ -7,12 +7,12 @@ const l = {}, s = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function c(C, t) {
-  return o(), e("svg", s, t[0] || (t[0] = [
+  return o(), e("svg", s, [...t[0] || (t[0] = [
     r("path", {
       d: "M17.5614 20.955C17.4034 20.955 17.2444 20.918 17.0984 20.842L11.9994 18.178L6.90138 20.842C6.56338 21.017 6.15538 20.987 5.84938 20.763C5.54138 20.539 5.38838 20.16 5.45338 19.785L6.42438 14.157L2.30438 10.172C2.03038 9.907 1.93138 9.509 2.04838 9.145C2.16538 8.783 2.47838 8.518 2.85638 8.464L8.55638 7.636L11.1044 2.51C11.4424 1.83 12.5574 1.83 12.8954 2.51L15.4434 7.636L21.1434 8.464C21.5214 8.518 21.8344 8.783 21.9514 9.145C22.0684 9.509 21.9694 9.907 21.6954 10.172L17.5754 14.157L18.5464 19.785C18.6114 20.16 18.4574 20.539 18.1504 20.763C17.9764 20.891 17.7694 20.955 17.5614 20.955Z",
       fill: "currentColor"
     }, null, -1)
-  ]));
+  ])]);
 }
 const _ = /* @__PURE__ */ n(l, [["render", c]]);
 export {

package/dist/{star-filled-CI8ADvth.js → star-filled-BOTBqgWM.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-D_u6Shzp.js";
 const s = {}, c = {
   width: "24",
   height: "24",
@@ -7,9 +7,9 @@ const s = {}, c = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function l(C, t) {
-  return o(), e("svg", c, t[0] || (t[0] = [
+  return o(), e("svg", c, [...t[0] || (t[0] = [
     r("path", { d: "M17.5614 20.955C17.4034 20.955 17.2444 20.918 17.0984 20.842L11.9994 18.178L6.90138 20.842C6.56338 21.017 6.15538 20.987 5.84938 20.763C5.54138 20.539 5.38838 20.16 5.45338 19.785L6.42438 14.157L2.30438 10.172C2.03038 9.907 1.93138 9.509 2.04838 9.145C2.16538 8.783 2.47838 8.518 2.85638 8.464L8.55638 7.636L11.1044 2.51C11.4424 1.83 12.5574 1.83 12.8954 2.51L15.4434 7.636L21.1434 8.464C21.5214 8.518 21.8344 8.783 21.9514 9.145C22.0684 9.509 21.9694 9.907 21.6954 10.172L17.5754 14.157L18.5464 19.785C18.6114 20.16 18.4574 20.539 18.1504 20.763C17.9764 20.891 17.7694 20.955 17.5614 20.955Z" }, null, -1)
-  ]));
+  ])]);
 }
 const _ = /* @__PURE__ */ n(s, [["render", l]]);
 export {

package/dist/{stop-YJuofrYS.js → stop-wah9aIlz.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-p6g8sztL.js";
+import { _ as n } from "./index-D_u6Shzp.js";
 const s = {}, c = {
   width: "24",
   height: "24",
@@ -7,12 +7,12 @@ const s = {}, c = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function l(i, t) {
-  return o(), e("svg", c, t[0] || (t[0] = [
+  return o(), e("svg", c, [...t[0] || (t[0] = [
     r("path", {
       d: "M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z",
       fill: "currentColor"
     }, null, -1)
-  ]));
+  ])]);
 }
 const f = /* @__PURE__ */ n(s, [["render", l]]);
 export {

package/dist/{story-DF3p8h7g.js → story-CLLYDwFB.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as e, createElementVNode as o } from "vue";
-import { _ as r } from "./index-p6g8sztL.js";
+import { _ as r } from "./index-D_u6Shzp.js";
 const n = {}, s = {
   width: "24",
   height: "24",
@@ -7,12 +7,12 @@ const n = {}, s = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 function H(c, C) {
-  return e(), t("svg", s, C[0] || (C[0] = [
+  return e(), t("svg", s, [...C[0] || (C[0] = [
     o("path", {
       d: "M3.62141 10.75H9.92141C10.1999 10.75 10.467 10.6414 10.6639 10.448C10.8608 10.2546 10.9714 9.99225 10.9714 9.71875V3.53125C10.9714 3.25775 10.8608 2.99544 10.6639 2.80205C10.467 2.60865 10.1999 2.5 9.92141 2.5H3.62141C3.34293 2.5 3.07586 2.60865 2.87895 2.80205C2.68204 2.99544 2.57141 3.25775 2.57141 3.53125V9.71875C2.57141 9.99225 2.68204 10.2546 2.87895 10.448C3.07586 10.6414 3.34293 10.75 3.62141 10.75ZM4.67141 4.5625H8.87141V8.6875H4.67141V4.5625ZM14.1214 6.625H19.5214C19.7999 6.625 20.067 6.51635 20.2639 6.32295C20.4608 6.12956 20.5714 5.86725 20.5714 5.59375C20.5714 5.32025 20.4608 5.05794 20.2639 4.86455C20.067 4.67115 19.7999 4.5625 19.5214 4.5625H14.1214C13.8429 4.5625 13.5759 4.67115 13.3789 4.86455C13.182 5.05794 13.0714 5.32025 13.0714 5.59375C13.0714 5.86725 13.182 6.12956 13.3789 6.32295C13.5759 6.51635 13.8429 6.625 14.1214 6.625ZM14.1214 16.9375H3.62141C3.34293 16.9375 3.07586 17.0461 2.87895 17.2395C2.68204 17.4329 2.57141 17.6952 2.57141 17.9688C2.57141 18.2423 2.68204 18.5046 2.87895 18.698C3.07586 18.8914 3.34293 19 3.62141 19H14.1214C14.3999 19 14.667 18.8914 14.8639 18.698C15.0608 18.5046 15.1714 18.2423 15.1714 17.9688C15.1714 17.6952 15.0608 17.4329 14.8639 17.2395C14.667 17.0461 14.3999 16.9375 14.1214 16.9375ZM19.5214 12.8125H3.62141C3.34293 12.8125 3.07586 12.9211 2.87895 13.1145C2.68204 13.3079 2.57141 13.5702 2.57141 13.8438C2.57141 14.1173 2.68204 14.3796 2.87895 14.573C3.07586 14.7664 3.34293 14.875 3.62141 14.875H19.5214C19.7999 14.875 20.067 14.7664 20.2639 14.573C20.4608 14.3796 20.5714 14.1173 20.5714 13.8438C20.5714 13.5702 20.4608 13.3079 20.2639 13.1145C20.067 12.9211 19.7999 12.8125 19.5214 12.8125ZM19.5214 8.6875H14.1214C13.8429 8.6875 13.5759 8.79615 13.3789 8.98955C13.182 9.18294 13.0714 9.44525 13.0714 9.71875C13.0714 9.99225 13.182 10.2546 13.3789 10.448C13.5759 10.6414 13.8429 10.75 14.1214 10.75H19.5214C19.7999 10.75 20.067 10.6414 20.2639 10.448C20.4608 10.2546 20.5714 9.99225 20.5714 9.71875C20.5714 9.44525 20.4608 9.18294 20.2639 8.98955C20.067 8.79615 19.7999 8.6875 19.5214 8.6875Z",
       fill: "currentColor"
     }, null, -1)
-  ]));
+  ])]);
 }
 const _ = /* @__PURE__ */ r(n, [["render", H]]);
 export {