vueless 1.4.7-beta.4 → 1.4.7-beta.6

package/ui.form-input-search/storybook/stories.ts

@@ -195,14 +195,11 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
 
       <UInputSearch v-model="descriptionSlotValue" label="Search products">
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="travel_explore" size="xs" color="primary" />
-            <UText size="sm">
-              Tip: use
-              <ULink label="filters" underlined size="sm" />
-              for exact matches.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Tip: use
+            <ULink label="filters" underlined size="sm" />
+            for exact matches.
+          </UText>
         </template>
       </UInputSearch>
 
@@ -212,16 +209,13 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>Search query is too short</li>
-                <li>Remove unsupported symbols from your search</li>
-                <li>Try different keywords and search again</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Search query is too short</li>
+              <li>Remove unsupported symbols from your search</li>
+              <li>Try different keywords and search again</li>
+            </ul>
+          </UText>
         </template>
       </UInputSearch>
     </UCol>

package/ui.form-label/storybook/stories.ts

@@ -133,30 +133,24 @@ export const Slots: StoryFn<ULabelArgs> = () => ({
       <ULabel label="Work email">
         <UText label="johndoe@example.com" />
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="mark_email_unread" size="xs" color="primary" />
-            <UText size="sm">
-              We will send a
-              <ULink label="confirmation link" underlined size="sm" />
-              to this address.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            We will send a
+            <ULink label="confirmation link" underlined size="sm" />
+            to this address.
+          </UText>
         </template>
       </ULabel>
 
       <ULabel label="Email" :error="true">
         <UText label="not-an-email" />
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>Email address format is invalid</li>
-                <li>Use a name@domain.com style address</li>
-                <li>Remove spaces and special characters from the local part</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Email address format is invalid</li>
+              <li>Use a name@domain.com style address</li>
+              <li>Remove spaces and special characters from the local part</li>
+            </ul>
+          </UText>
         </template>
       </ULabel>
     </UCol>

package/ui.form-listbox/UListbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, computed, useId, ref, useTemplateRef } from "vue";
+import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
@@ -144,77 +144,78 @@ const filteredOptions = computed(() => {
 watch(
   () => [props.options, props.size, props.visibleOptions, props.searchable, searchModel.value],
   () => {
-    const options = [
-      ...(optionsRef.value || []),
-      ...(addOptionRef.value ? [addOptionRef.value] : []),
-      ...(emptyOptionRef.value ? [emptyOptionRef.value] : []),
-    ];
-
-    if (props.visibleOptions) {
-      options.slice(0, props.visibleOptions);
-    }
-
-    const maxHeight = options
-      .slice(0, props.visibleOptions)
-      .map((el) => {
-        const styles = window.getComputedStyle(el);
-        const height = parseFloat(styles.height || "0");
-        const marginTop = parseFloat(styles.marginTop || "0");
-        const marginBottom = parseFloat(styles.marginBottom || "0");
-
-        return height + marginTop + marginBottom;
-      })
-      .reduce((acc, cur) => acc + cur, 0);
-
-    const wrapperEl = wrapperRef.value;
-    const wrapperStyle = wrapperEl ? getComputedStyle(wrapperEl) : null;
-    const wrapperPaddingTop = parseFloat(wrapperStyle?.paddingTop || "0");
-    const wrapperPaddingBottom = parseFloat(wrapperStyle?.paddingBottom || "0");
-    const wrapperBorderTop = parseFloat(wrapperStyle?.borderTopWidth || "0");
-    const wrapperBorderBottom = parseFloat(wrapperStyle?.borderBottomWidth || "0");
-    const wrapperGap = parseFloat(wrapperStyle?.gap || "0");
-
-    const addOptionHeight = addOptionRef.value?.getBoundingClientRect().height || 0;
-
-    const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
-    let listboxInputHeight = 0;
-
-    let listboxInputWrapperPaddingTop = 0;
-    let listboxInputBorderTop = 0;
-    let listboxInputBorderBottom = 0;
-
-    if (inputEl) {
-      const listboxInputStyle = getComputedStyle(inputEl);
-      const listboxInputLabelStyle = inputEl.parentElement
-        ? getComputedStyle(inputEl.parentElement)
-        : undefined;
-      const listboxInputWrapperStyle = getComputedStyle(
-        inputEl.parentElement?.parentElement?.parentElement as Element,
-      );
-
-      listboxInputHeight = parseFloat(listboxInputStyle.height || "0");
-
-      listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
-
-      listboxInputBorderTop = parseFloat(listboxInputLabelStyle?.borderTop || "0");
-      listboxInputBorderBottom = parseFloat(listboxInputLabelStyle?.borderBottom || "0");
-    }
-
-    wrapperMaxHeight.value = `${
-      maxHeight +
-      addOptionHeight +
-      (props.searchable ? wrapperGap : 0) +
-      wrapperPaddingTop +
-      wrapperPaddingBottom +
-      wrapperBorderTop +
-      wrapperBorderBottom +
-      listboxInputHeight +
-      listboxInputBorderTop +
-      listboxInputBorderBottom +
-      listboxInputWrapperPaddingTop
-    }px`;
+    nextTick(() => {
+      const options = [
+        ...(optionsRef.value || []),
+        ...(addOptionRef.value ? [addOptionRef.value] : []),
+        ...(emptyOptionRef.value ? [emptyOptionRef.value] : []),
+      ];
+
+      if (props.visibleOptions) {
+        options.slice(0, props.visibleOptions);
+      }
+
+      const maxHeight = options
+        .slice(0, props.visibleOptions)
+        .map((el) => {
+          const styles = window.getComputedStyle(el);
+          const height = parseFloat(styles.height || "0");
+          const marginTop = parseFloat(styles.marginTop || "0");
+          const marginBottom = parseFloat(styles.marginBottom || "0");
+
+          return height + marginTop + marginBottom;
+        })
+        .reduce((acc, cur) => acc + cur, 0);
+
+      const wrapperStyle = getComputedStyle(wrapperRef.value as Element);
+      const wrapperPaddingTop = parseFloat(wrapperStyle.paddingTop || "0");
+      const wrapperPaddingBottom = parseFloat(wrapperStyle.paddingBottom || "0");
+      const wrapperBorderTop = parseFloat(wrapperStyle.borderTopWidth || "0");
+      const wrapperBorderBottom = parseFloat(wrapperStyle.borderBottomWidth || "0");
+      const wrapperGap = parseFloat(wrapperStyle.gap || "0");
+
+      const addOptionHeight = addOptionRef.value?.getBoundingClientRect().height || 0;
+
+      const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
+      let listboxInputHeight = 0;
+
+      let listboxInputWrapperPaddingTop = 0;
+      let listboxInputBorderTop = 0;
+      let listboxInputBorderBottom = 0;
+
+      if (inputEl) {
+        const listboxInputStyle = getComputedStyle(inputEl);
+        const listboxInputLabelStyle = inputEl.parentElement
+          ? getComputedStyle(inputEl.parentElement)
+          : undefined;
+        const listboxInputWrapperStyle = getComputedStyle(
+          inputEl.parentElement?.parentElement?.parentElement as Element,
+        );
+
+        listboxInputHeight = parseFloat(listboxInputStyle.height || "0");
+
+        listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
+
+        listboxInputBorderTop = parseFloat(listboxInputLabelStyle?.borderTop || "0");
+        listboxInputBorderBottom = parseFloat(listboxInputLabelStyle?.borderBottom || "0");
+      }
+
+      wrapperMaxHeight.value = `${
+        maxHeight +
+        addOptionHeight +
+        (props.searchable ? wrapperGap : 0) +
+        wrapperPaddingTop +
+        wrapperPaddingBottom +
+        wrapperBorderTop +
+        wrapperBorderBottom +
+        listboxInputHeight +
+        listboxInputBorderTop +
+        listboxInputBorderBottom +
+        listboxInputWrapperPaddingTop
+      }px`;
+    });
   },
-  { immediate: true, flush: "post" },
+  { immediate: true },
 );
 
 watch(

package/ui.form-listbox/tests/UListbox.test.ts

@@ -1,5 +1,6 @@
+import { nextTick } from "vue";
 import { flushPromises, mount } from "@vue/test-utils";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import UListbox from "../UListbox.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -399,7 +400,37 @@ describe("UListbox.vue", () => {
         id: `option-${i}`,
       }));
 
-      const expectedStyle = "max-height:";
+      // Mock getComputedStyle to return non-zero heights for option elements
+      const originalGetComputedStyle = window.getComputedStyle;
+
+      vi.spyOn(window, "getComputedStyle").mockImplementation((el) => {
+        const real = originalGetComputedStyle(el);
+
+        return {
+          ...real,
+          height: "40px",
+          marginTop: "0px",
+          marginBottom: "4px",
+          paddingTop: "4px",
+          paddingBottom: "4px",
+          borderTopWidth: "1px",
+          borderBottomWidth: "1px",
+          gap: "4px",
+        } as CSSStyleDeclaration;
+      });
+
+      // Mock getBoundingClientRect for option elements
+      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+        height: 40,
+        width: 100,
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 100,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
 
       const component = mount(UListbox, {
         props: {
@@ -409,12 +440,15 @@ describe("UListbox.vue", () => {
       });
 
       await flushPromises();
+      await nextTick();
 
       const wrapper = component.find('[vl-key="wrapper"]');
       const styleAttr = wrapper.attributes("style");
       const inlineMaxHeight = (wrapper.element as HTMLElement).style.maxHeight;
 
-      expect(styleAttr ?? inlineMaxHeight).toContain(expectedStyle);
+      expect(styleAttr ?? inlineMaxHeight).toContain("max-height:");
+
+      vi.restoreAllMocks();
     });
   });
 

package/ui.form-radio/storybook/stories.ts

@@ -140,13 +140,11 @@ export const Slots: StoryFn<URadioArgs> = (args) => ({
         value="pro"
       >
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="workspace_premium" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Includes all core features.
-              <ULink label="Compare plans" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Includes all core features,
+            <ULink label="compare plans" underlined size="sm" />
+            for upgrades.
+          </UText>
         </template>
       </URadio>
 
@@ -159,16 +157,13 @@ export const Slots: StoryFn<URadioArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>You must select one of the available options</li>
-                <li>This field is required to proceed</li>
-                <li>Choose an option above to clear this error</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>You must select one of the available options</li>
+              <li>This field is required to proceed</li>
+              <li>Choose an option above to clear this error</li>
+            </ul>
+          </UText>
         </template>
       </URadio>
     </UCol>

package/ui.form-radio-group/storybook/stories.ts

@@ -204,13 +204,10 @@ export const Slots: StoryFn<URadioGroupArgs> = (args) => ({
         label="Delivery"
       >
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="local_shipping" size="xs" color="primary" />
-            <UText size="sm">
-              Shipping times are estimates.
-              <ULink label="Full policy" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Shipping times are estimates, see the
+            <ULink label="full policy" underlined size="sm" />.
+          </UText>
         </template>
       </URadioGroup>
 
@@ -222,16 +219,13 @@ export const Slots: StoryFn<URadioGroupArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>Please choose one option from the group</li>
-                <li>At least one selection is required</li>
-                <li>Review the labels and pick a valid answer</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Please choose one option from the group</li>
+              <li>At least one selection is required</li>
+              <li>Review the labels and pick a valid answer</li>
+            </ul>
+          </UText>
         </template>
       </URadioGroup>
     </UCol>

package/ui.form-select/config.ts

@@ -117,7 +117,10 @@ export default /*tw*/ {
     ],
   },
   toggleWrapper: "{>toggle} mr-3",
-  toggleIcon: "{UIcon} {>selectIcon} -mr-1 transition duration-300 group-[*]/active:rotate-180",
+  toggleIcon: {
+    base: "{UIcon} {>selectIcon} -mr-1 transition duration-300",
+    compoundVariants: [{ opened: true, class: "rotate-180" }],
+  },
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
   leftSlot: "{>toggle} pl-2.5",

package/ui.form-select/storybook/stories.ts

@@ -148,6 +148,13 @@ NotClearable.args = { clearable: false };
 
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
+Searchable.parameters = {
+  docs: {
+    story: {
+      height: "350px",
+    },
+  },
+};
 
 export const SearchModelValue = DefaultTemplate.bind({});
 SearchModelValue.args = { search: "New York", searchable: true };
@@ -163,10 +170,10 @@ export const NoCloseOnSelect = DefaultTemplate.bind({});
 NoCloseOnSelect.args = { modelValue: 3, closeOnSelect: false };
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, modelValue: "1", clearable: false };
+Readonly.args = { readonly: true, modelValue: 1, clearable: false };
 
 export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true, modelValue: "2", clearable: false };
+Disabled.args = { disabled: true, modelValue: 2, clearable: false };
 
 export const LabelAlign = EnumTemplate.bind({});
 LabelAlign.args = {
@@ -184,6 +191,13 @@ LargeItemList.args = {
     return { value: index + 1, label: `value ${index + 1}`, badge: "badge" };
   }),
 };
+LargeItemList.parameters = {
+  docs: {
+    story: {
+      height: "400px",
+    },
+  },
+};
 
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
@@ -396,13 +410,10 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
           :options="args.options"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="location_city" size="xs" color="primary" />
-              <UText size="sm">
-                Only cities we ship to.
-                <ULink label="Shipping zones" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Only cities we ship to, see
+              <ULink label="shipping zones" underlined size="sm" />.
+            </UText>
           </template>
         </USelect>
 
@@ -414,16 +425,13 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Please select an option from the list</li>
-                  <li>The current value is not available anymore</li>
-                  <li>Pick a valid choice to continue</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Please select an option from the list</li>
+                <li>The current value is not available anymore</li>
+                <li>Pick a valid choice to continue</li>
+              </ul>
+            </UText>
           </template>
         </USelect>
       </URow>

package/ui.form-switch/storybook/stories.ts

@@ -115,9 +115,9 @@ export const Slots: StoryFn<USwitchArgs> = (args) => ({
         <template #description>
           <URow align="center" gap="2xs" class="text-neutral">
             <UIcon name="cloud_sync" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Drafts sync across devices.
-              <ULink label="Learn more" underlined size="sm" />.
+            <UText size="sm" variant="lifted">
+              Drafts sync across devices,
+              <ULink label="learn more" underlined size="sm" />.
             </UText>
           </URow>
         </template>

package/ui.form-textarea/storybook/stories.ts

@@ -171,13 +171,10 @@ export const Slots: StoryFn<UTextareaArgs> = (args) => ({
       <URow block>
         <UTextarea v-model="descriptionSlotValue" label="Feedback">
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="format_quote" size="xs" class="mt-0.5" color="primary" />
-              <UText size="sm">
-                Markdown is not supported. See
-                <ULink label="content guidelines" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Markdown is not supported, see
+              <ULink label="content guidelines" underlined size="sm" />.
+            </UText>
           </template>
         </UTextarea>
 
@@ -187,16 +184,13 @@ export const Slots: StoryFn<UTextareaArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Message is too short (minimum 10 characters)</li>
-                  <li>Remove disallowed characters from your text</li>
-                  <li>Try again after fixing the issues above</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Message is too short (minimum 10 characters)</li>
+                <li>Remove disallowed characters from your text</li>
+                <li>Try again after fixing the issues above</li>
+              </ul>
+            </UText>
           </template>
         </UTextarea>
       </URow>

package/ui.text-files/storybook/stories.ts

@@ -109,9 +109,9 @@ export const Slots: StoryFn<UFilesArgs> = (args) => ({
         <template #description>
           <URow align="center" gap="2xs" class="text-neutral">
             <UIcon name="folder" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Files are read-only here.
-              <ULink label="Manage in storage" underlined size="sm" />.
+            <UText size="sm" variant="lifted">
+              Files are read-only here,
+              <ULink label="manage in storage" underlined size="sm" />.
             </UText>
           </URow>
         </template>

package/icons/storybook/date_range.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M273.08-406.68q-12.1-12.2-12.1-30.06 0-17.85 12.13-30.07 12.12-12.21 30.05-12.21t30.02 12.21q12.1 12.22 12.1 30.07 0 17.86-12.12 30.06-12.13 12.2-30.06 12.2t-30.02-12.2Zm179.87 0q-12.1-12.2-12.1-30.06 0-17.85 12.12-30.07 12.13-12.21 30.06-12.21t30.02 12.21q12.1 12.22 12.1 30.07 0 17.86-12.12 30.06-12.13 12.2-30.06 12.2t-30.02-12.2Zm172.87 0q-12.1-12.2-12.1-30.06 0-17.85 12.12-30.07 12.13-12.21 30.06-12.21t30.02 12.21q12.1 12.22 12.1 30.07 0 17.86-12.13 30.06-12.12 12.2-30.05 12.2t-30.02-12.2ZM182.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-615.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34H245v-60h69.07v60h331.86v-60H715v60h62.85q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v615.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7V-570h-595.7v427.85Zm0-487.85h595.7v-127.85h-595.7V-630Zm0 0v-127.85V-630Z"/></svg>

package/icons/storybook/event.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M528-248.18q-28-28.19-28-69Q500-358 528.18-386q28.19-28 69-28Q638-414 666-385.82q28 28.19 28 69Q694-276 665.82-248q-28.19 28-69 28Q556-220 528-248.18ZM182.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-615.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34H245v-60h69.07v60h331.86v-60H715v60h62.85q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v615.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7V-570h-595.7v427.85Zm0-487.85h595.7v-127.85h-595.7V-630Zm0 0v-127.85V-630Z"/></svg>

package/icons/storybook/format_quote.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m238.67-234.5 95.92-164.87q-5 1-11 1.5t-11 .5q-66.48-1.43-112.88-49.03Q153.3-494 153.3-560q0-67.76 47.92-115.55 47.91-47.8 115.67-47.8 67.44 0 115.27 47.8Q480-627.76 480-560q0 21.09-5.44 41.16-5.44 20.08-16.08 38.84L317.37-234.5h-78.7Zm366.7 0 95.67-164.87q-5 1-11 1.5t-11 .5q-66.47-1.43-112.76-49.03Q520-494 520-560q0-67.76 47.8-115.55 47.79-47.8 115.55-47.8 67.43 0 115.39 47.8Q846.7-627.76 846.7-560q0 21.09-5.44 41.16-5.44 20.08-16.09 38.84L683.83-234.5h-78.46ZM371.71-505.01q22.79-22.86 22.79-54.95 0-32.08-22.79-54.99-22.79-22.9-54.95-22.9-32.15 0-54.93 22.86-22.79 22.86-22.79 54.95 0 32.08 22.79 54.99 22.78 22.9 54.93 22.9 32.16 0 54.95-22.86Zm366.58 0q22.91-22.86 22.91-54.95 0-32.08-22.91-54.99-22.91-22.9-55.07-22.9-32.15 0-54.94 22.86-22.78 22.86-22.78 54.95 0 32.08 22.79 54.99 22.79 22.9 54.95 22.9 32.15 0 55.05-22.86ZM683.35-560Zm-366.46 0Z"/></svg>

package/icons/storybook/location_city.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M111.87-111.87v-574.5h247v-86.26L480-891l121.37 118.37v252.26h247v408.5h-736.5ZM180-180h106v-106H180v106Zm0-166h106v-106H180v106Zm0-166h106v-106H180v106Zm247 332h106v-106H427v106Zm0-166h106v-106H427v106Zm0-166h106v-106H427v106Zm0-166h106v-106H427v106Zm247 498h106v-106H674v106Zm0-166h106v-106H674v106Z"/></svg>

package/icons/storybook/mark_email_unread.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.15-154.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-515.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h429.46q-4.44 17.15-5.68 34.19-1.23 17.03 1.24 34.18H147.15l332.85 218 148.37-97.04q10.96 9.96 23.39 18.11 12.44 8.15 25.87 13.8L480-454.35l-337.85-223v455.2h675.7v-353.31q19.18-5.02 36.07-14.7 16.88-9.67 32.3-22.6v390.61q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-675.7Zm0-583.83v515.7-515.7Zm536.98 58.6q-33.2-33.31-33.2-80.87 0-47.55 33.32-80.75 33.31-33.2 80.87-33.2 47.55 0 80.75 33.32 33.2 33.31 33.2 80.87 0 47.55-33.32 80.75-33.31 33.2-80.87 33.2-47.55 0-80.75-33.32Z"/></svg>

package/icons/storybook/shield.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.98-74.78q-142.59-35.67-234.27-164.87-91.69-129.2-91.69-283.27v-242.26L480-887.22l326.22 122.05V-523q0 154.1-91.82 283.32-91.82 129.23-234.42 164.9Zm.02-70.13q113.8-39.2 185.83-143.62 72.02-104.43 72.02-234.4v-194.4L480-814.61l-257.85 97.4v194.17q0 130.08 72.02 234.51Q366.2-184.11 480-144.91Zm0-334.85Z"/></svg>

package/icons/storybook/workspace_premium.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m381.89-408.89 36.96-119.31-98.59-75.43h120.31L480-728.37l38.43 124.74h121.31l-98.35 75.43 35.96 119.31L480-482.76l-98.11 73.87ZM241.37-34.5v-304.72q-46.44-47.95-66.89-105.63-20.46-57.67-20.46-116.35 0-138.39 93.8-232.18 93.79-93.79 232.18-93.79t232.3 93.79q93.92 93.79 93.92 232.18 0 58.68-20.58 116.35-20.57 57.68-67.01 105.63V-34.5L480-113.98 241.37-34.5Zm421.58-343.63q74.9-74.78 74.9-182.95 0-108.16-74.9-183.06-74.91-74.9-182.95-74.9-108.04 0-182.95 74.9-74.9 74.9-74.9 183.06 0 108.17 74.9 182.95 74.91 74.78 182.95 74.78 108.04 0 182.95-74.78ZM304-121.13l176-56.2 176 56.2V-289.5q-40.24 28.76-86.12 41.64Q524-234.98 480-234.98q-44 0-89.88-12.88-45.88-12.88-86.12-41.64v168.37Zm176-84.57Z"/></svg>