@milaboratories/uikit 2.4.29 → 2.4.30

package/src/components/PlDropdown/PlDropdown.vue

@@ -8,23 +8,24 @@ export default {
 </script>
 
 <script lang="ts" setup generic="M = unknown">
-import './pl-dropdown.scss';
 import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';
+import SvgRequired from '../../assets/images/required.svg?raw';
+import { getErrorMessage } from '../../helpers/error.ts';
 import { tap } from '../../helpers/functions';
-import { PlTooltip } from '../PlTooltip';
+import { deepEqual } from '../../helpers/objects';
+import { normalizeListOptions } from '../../helpers/utils';
+import type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';
 import DoubleContour from '../../utils/DoubleContour.vue';
 import { useLabelNotch } from '../../utils/useLabelNotch';
-import type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';
-import { deepEqual } from '../../helpers/objects';
 import LongText from '../LongText.vue';
-import { normalizeListOptions } from '../../helpers/utils';
 import { PlIcon16 } from '../PlIcon16';
 import { PlIcon24 } from '../PlIcon24';
-import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
-import { getErrorMessage } from '../../helpers/error.ts';
+import { PlSvg } from '../PlSvg';
+import { PlTooltip } from '../PlTooltip';
 import OptionList from './OptionList.vue';
-import { useGroupBy } from './useGroupBy';
+import './pl-dropdown.scss';
 import type { LOption } from './types';
+import { useGroupBy } from './useGroupBy';
 
 const emit = defineEmits<{
   /**
@@ -349,7 +350,7 @@ watchPostEffect(() => {
           </div>
         </div>
         <label v-if="label">
-          <SvgRequired v-if="required" />
+          <PlSvg v-if="required" :uri="SvgRequired" />
           <span>{{ label }}</span>
           <PlTooltip v-if="$slots.tooltip" class="info" position="top">
             <template #tooltip>

package/src/components/PlDropdownLegacy/PlDropdownLegacy.vue

@@ -22,8 +22,9 @@ import LongText from '../LongText.vue';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { normalizeListOptions } from '../../helpers/utils';
-import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
 import { getErrorMessage } from '../../helpers/error.ts';
+import { PlSvg } from '../PlSvg';
+import SvgRequired from '../../assets/images/required.svg?raw';
 
 const emit = defineEmits<{
   /**
@@ -345,7 +346,7 @@ watchPostEffect(() => {
           </div>
         </div>
         <label v-if="label">
-          <SvgRequired v-if="required" />
+          <PlSvg v-if="required" :uri="SvgRequired" />
           <span>{{ label }}</span>
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
             <template #tooltip>

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -8,20 +8,21 @@ export default {
 </script>
 
 <script lang="ts" setup generic="M = unknown">
-import './pl-dropdown-multi.scss';
 import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
-import { PlTooltip } from '../PlTooltip';
-import { PlChip } from '../PlChip';
-import DoubleContour from '../../utils/DoubleContour.vue';
-import { useLabelNotch } from '../../utils/useLabelNotch';
-import type { ListOption } from '../../types';
-import DropdownListItem from '../DropdownListItem.vue';
+import SvgRequired from '../../assets/images/required.svg?raw';
+import { getErrorMessage } from '../../helpers/error.ts';
 import { deepEqual, deepIncludes } from '../../helpers/objects';
 import { normalizeListOptions } from '../../helpers/utils';
+import type { ListOption } from '../../types';
+import DoubleContour from '../../utils/DoubleContour.vue';
 import DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';
+import { useLabelNotch } from '../../utils/useLabelNotch';
+import DropdownListItem from '../DropdownListItem.vue';
+import { PlChip } from '../PlChip';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
-import { getErrorMessage } from '../../helpers/error.ts';
+import { PlSvg } from '../PlSvg';
+import { PlTooltip } from '../PlTooltip';
+import './pl-dropdown-multi.scss';
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: M[]): void;
@@ -272,7 +273,7 @@ watchPostEffect(() => {
           </div>
         </div>
         <label v-if="label">
-          <SvgRequired v-if="required" />
+          <PlSvg v-if="required" :uri="SvgRequired" />
           <span>{{ label }}</span>
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
             <template #tooltip>

package/src/components/PlFileInput/PlFileInput.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import './pl-file-input.scss';
+
 import { prettyBytes } from '@milaboratories/helpers';
 import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
 import { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';
 import { computed, reactive, ref, useSlots, watch } from 'vue';
-import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
 import { getErrorMessage } from '../../helpers/error.ts';
 import type { ImportedFiles } from '../../types';
 import DoubleContour from '../../utils/DoubleContour.vue';
@@ -11,7 +12,9 @@ import { useLabelNotch } from '../../utils/useLabelNotch';
 import { PlFileDialog } from '../PlFileDialog';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { PlTooltip } from '../PlTooltip';
-import './pl-file-input.scss';
+
+import SvgRequired from '../../assets/images/required.svg?raw';
+import { PlSvg } from '../PlSvg';
 
 const data = reactive({
   fileDialogOpen: false,
@@ -176,7 +179,7 @@ if (!props.cellStyle) {
     >
       <div :style="progressStyle" class="pl-file-input__progress" />
       <label v-if="!cellStyle && label" ref="label">
-        <SvgRequired v-if="required" />
+        <PlSvg v-if="required" :uri="SvgRequired" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip || filePath" class="info" position="top">
           <template #tooltip>

package/src/components/PlTextArea/PlTextArea.vue

@@ -12,8 +12,9 @@ import { PlTooltip } from '../PlTooltip';
 import DoubleContour from '../../utils/DoubleContour.vue';
 import { useLabelNotch } from '../../utils/useLabelNotch';
 import { useValidation } from '../../utils/useValidation';
-import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
 import { getErrorMessage } from '../../helpers/error.ts';
+import { PlSvg } from '../PlSvg';
+import SvgRequired from '../../assets/images/required.svg?raw';
 
 const slots = useSlots();
 
@@ -127,7 +128,7 @@ onMounted(() => {
   <div class="ui-text-area__envelope">
     <div ref="root" class="ui-text-area" :class="{ error: hasErrors, disabled, dashed, nonEmpty }">
       <label v-if="label" ref="label">
-        <SvgRequired v-if="required" />
+        <PlSvg v-if="required" :uri="SvgRequired" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip" class="info" position="top">
           <template #tooltip>

package/src/components/PlTextField/PlTextField.vue

@@ -8,17 +8,18 @@ export default {
 </script>
 
 <script lang="ts" setup generic="M, E = string, C = E">
-import './pl-text-field.scss';
+import type { Equal } from '@milaboratories/helpers';
 import { computed, reactive, ref, useSlots } from 'vue';
-import { PlTooltip } from '../PlTooltip';
+import SvgRequired from '../../assets/images/required.svg?raw';
+import { getErrorMessage } from '../../helpers/error.ts';
 import DoubleContour from '../../utils/DoubleContour.vue';
 import { useLabelNotch } from '../../utils/useLabelNotch';
 import { useValidation } from '../../utils/useValidation';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import type { Equal } from '@milaboratories/helpers';
-import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
-import { getErrorMessage } from '../../helpers/error.ts';
+import { PlSvg } from '../PlSvg';
+import { PlTooltip } from '../PlTooltip';
+import './pl-text-field.scss';
 
 const slots = useSlots();
 
@@ -191,7 +192,7 @@ useLabelNotch(rootRef);
       }"
     >
       <label v-if="label" ref="label">
-        <SvgRequired v-if="required" />
+        <PlSvg v-if="required" :uri="SvgRequired" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip" class="info" position="top">
           <template #tooltip>

package/dist/components/PlAccordion/ExpandTransition.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue2.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACA,UAAMA,IAAU,CAACC,MAAgB;AAC/B,MAAAA,EAAG,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC7DA,EAAG,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}

package/dist/generated/components/svg/images/SvgRequired.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/generated/components/svg/images/SvgRequired.vue.js

@@ -1,17 +0,0 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".SvgRequired{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E)}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import e from "./SvgRequired.vue3.js";
-import { createElementBlock as t, openBlock as o } from "vue";
-
-import r from "../../../../_virtual/_plugin-vue_export-helper.js";
-const c = {
-  class: "svg-icon SvgRequired",
-  style: { width: "5px", height: "12px" }
-};
-function i(s, p, n, _, d, m) {
-  return o(), t("div", c);
-}
-const h = /* @__PURE__ */ r(e, [["render", i]]);
-export {
-  h as default
-};
-//# sourceMappingURL=SvgRequired.vue.js.map

package/dist/generated/components/svg/images/SvgRequired.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue.js","sources":["../../../../../src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":["_hoisted_1"],"mappings":";;;;AAOoC,MAAAA,IAAA;AAAA,EAAA,OAAA;AAAA;;;;;;"}

package/dist/generated/components/svg/images/SvgRequired.vue3.js

@@ -1,6 +0,0 @@
-
-const a = { name: "SvgRequired" };
-export {
-  a as default
-};
-//# sourceMappingURL=SvgRequired.vue3.js.map

package/dist/generated/components/svg/images/SvgRequired.vue3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue3.js","sources":["../../../../../src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":["_sfc_main"],"mappings":";AAGA,MAAAA,IAAe,EAAE,MAAM,cAAA;"}

package/scripts/create-svg-components.js

@@ -1,125 +0,0 @@
-#!/usr/bin/env node
-
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-async function getSvgFiles(dir) {
-  const dirents = await fs.readdir(dir, { withFileTypes: true });
-  const nested = await Promise.all(
-    dirents.map(async (d) => {
-      const full = path.resolve(dir, d.name);
-      if (d.isDirectory()) return await getSvgFiles(full);
-      if (d.isFile() && path.extname(d.name).toLowerCase() === ".svg") return full;
-      return [];
-    })
-  );
-  return nested.flat();
-}
-
-function toPascalCase(fileName) {
-  return fileName
-    .replace(/[-_]+/g, " ")
-    .replace(/[^\w\s]/g, "")
-    .replace(/\s+(.)/g, (_, ch) => ch.toUpperCase())
-    .replace(/^./, (ch) => ch.toUpperCase());
-}
-
-function svgToDataUri(svg) {
-  const cleaned = svg
-    .replace(/[\n\r\t]+/g, " ")
-    .replace(/>\s+</g, "><")
-    .trim();
-  const encoded = encodeURIComponent(cleaned)
-    .replace(/'/g, "%27")
-    .replace(/"/g, "%22")
-    .replace(/#/g, "%23");
-  return `data:image/svg+xml;utf8,${encoded}`;
-}
-
-function extractSize(svg) {
-  const w = svg.match(/\bwidth=['\"]?([\d.]+)(?:px)?['\"]?/i);
-  const h = svg.match(/\bheight=['\"]?([\d.]+)(?:px)?['\"]?/i);
-  return {
-    width: w ? `${w[1]}px` : 'unset',
-    height: h ? `${h[1]}px` : 'unset',
-  };
-}
-
-function buildStyles() {
-  return `/* ⚠️ AUTOGENERATED. DO NOT EDIT. */
-.svg-icon {
-  
-}
-  `;
-}
-
-function buildVueSFC(name, dataUri, cssPath, width, height) {
-  return `<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '${cssPath}';
-export default { name: '${name}' };
-</script>
-
-<template>
-  <div class="svg-icon ${name}" style="width: ${width}; height: ${height}" />
-</template>
-
-<style>
-  .${name} { background-image: url("${dataUri}"); }
-</style>
-`;
-}
-
-async function createStyles(outDir) {
-  await fs.mkdir(outDir, { recursive: true });
-  const styles = buildStyles();
-  const destPath = path.join(outDir, "svg-styles.css");
-  await fs.writeFile(destPath, styles, "utf8");
-
-  return destPath;
-}
-
-async function createComponents(srcDir, outDir, absCssPath) {
-  if (!srcDir || !outDir) {
-    console.error("\nUSAGE: node generate-inline-svg-vue.js <svgDir> <outputDir>\n");
-    process.exit(1);
-  }
-
-  const cssPath = path.relative(outDir, absCssPath);
-
-  await fs.mkdir(outDir, { recursive: true });
-
-  const svgFiles = await getSvgFiles(srcDir);
-  if (!svgFiles.length) {
-    console.error("SVG files not found in", srcDir);
-    process.exit(1);
-  }
-
-  for (const file of svgFiles) {
-    const rawSvg = await fs.readFile(file, "utf8");
-    const componentName = 'Svg'+toPascalCase(path.basename(file, ".svg"));
-    const dataUri = svgToDataUri(rawSvg);
-    const { width, height } = extractSize(rawSvg);
-    const vueSFC = buildVueSFC(componentName, dataUri, cssPath, width, height);
-    const destPath = path.join(outDir, `${componentName}.vue`);
-    await fs.writeFile(destPath, vueSFC, "utf8");
-  }
-
-  return svgFiles.length;
-}
-
-const dir = path.dirname(fileURLToPath(import.meta.url));
-
-createStyles(path.resolve(dir,'../src/generated/components/svg'))
-  .then((cssPath) => Promise.all([
-    createComponents(path.resolve(dir,'../src/assets/images'), path.resolve(dir,'../src/generated/components/svg/images'), cssPath),
-  ]))
-  .then(([count]) => {
-    console.log(`Created ${count} SVG components`);
-    process.exit(0);
-  })
-  .catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });

package/src/generated/components/svg/images/Svg16Add.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Add' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Add" style="width: unset; height: unset" />
-</template>
-
-<style>
-  .Svg16Add { background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.74988%202.25V7.25H13.7499V8.75H8.74988V13.75H7.24988V8.75H2.24988V7.25H7.24988V2.25H8.74988Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Attention.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Attention' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Attention" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Attention { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.8659%203.5L13.196%2011C13.5809%2011.6667%2013.0998%2012.5%2012.33%2012.5H11.0004V14H12.33C14.2545%2014%2015.4573%2011.9167%2014.4951%2010.25L10.1649%202.75C9.20269%201.08333%206.79706%201.08333%205.83481%202.75L1.50468%2010.25C0.542431%2011.9167%201.74525%2014%203.66975%2014H5.00042V12.5H3.66975C2.89994%2012.5%202.41882%2011.6667%202.80372%2011L7.13385%203.5C7.51875%202.83333%208.481%202.83333%208.8659%203.5Z%22%20fill%3D%22%23F1222F%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.75%206V11H7.25V6H8.75ZM7.25%2012.5V14H8.75V12.5H7.25Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Checkmark.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Checkmark' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Checkmark" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Checkmark { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.0601%204.43448L6.33313%2012.5478L1.93945%207.93448L3.02566%206.89999L6.33313%2010.3728L12.9739%203.39999L14.0601%204.43448Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16CheckmarkDark.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16CheckmarkDark' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16CheckmarkDark" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16CheckmarkDark { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.0601%204.43451L6.33313%2012.5479L1.93945%207.93451L3.02566%206.90002L6.33313%2010.3729L12.9739%203.40002L14.0601%204.43451Z%22%20fill%3D%22%23DFE0E5%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16ChevronDown.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16ChevronDown' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16ChevronDown" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16ChevronDown { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16ChevronLeft.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16ChevronLeft' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16ChevronLeft" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16ChevronLeft { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.46966%202.46967L10.5303%203.53033L6.06065%208L10.5303%2012.4697L9.46966%2013.5303L3.93933%208L9.46966%202.46967Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16ChevronRight.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16ChevronRight' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16ChevronRight" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16ChevronRight { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.53033%202.46967L5.46967%203.53033L9.93934%208L5.46967%2012.4697L6.53033%2013.5303L12.0607%208L6.53033%202.46967Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16ChevronUp.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16ChevronUp' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16ChevronUp" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16ChevronUp { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Clear.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Clear' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Clear" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Clear { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_586_7851)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z%22%20fill%3D%22%23CFD1DB%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_586_7851%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Clipboard.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Clipboard' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Clipboard" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Clipboard { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.5%202.5H6.5V3.5H9.5V2.5ZM6%201H10C10.5523%201%2011%201.44772%2011%202V4C11%204.55228%2010.5523%205%2010%205H9.875H6C5.44772%205%205%204.55228%205%204V2C5%201.44772%205.44772%201%206%201ZM2.75%204.5C2.75%204.08579%203.08579%203.75%203.5%203.75V2.25C2.25736%202.25%201.25%203.25736%201.25%204.5V12C1.25%2013.5188%202.48122%2014.75%204%2014.75H12C13.5188%2014.75%2014.75%2013.5188%2014.75%2012V4.5C14.75%203.25736%2013.7426%202.25%2012.5%202.25V3.75C12.9142%203.75%2013.25%204.08579%2013.25%204.5V12C13.25%2012.6904%2012.6904%2013.25%2012%2013.25H4C3.30964%2013.25%202.75%2012.6904%202.75%2012V4.5ZM11%208.25H5V6.75H11V8.25ZM5%2011.25H11V9.75H5V11.25Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Close.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Close' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Close" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Close { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.00001%202.93933L8.00001%206.93933L12%202.93933L13.0607%203.99999L9.06067%207.99999L13.0607%2012L12%2013.0607L8.00001%209.06065L4.00001%2013.0607L2.93935%2012L6.93935%207.99999L2.93935%203.99999L4.00001%202.93933Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Compare.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Compare' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Compare" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Compare { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.96978%207.46973L12.1895%205.25006L2.00011%205.25006L2.00011%203.75006L12.1895%203.75006L9.96978%201.53039L11.0304%200.469727L14.5304%203.96973L15.0608%204.50006L14.5304%205.03039L11.0304%208.53039L9.96978%207.46973ZM6.03044%2014.4697L3.81077%2012.2501L14.0001%2012.2501V10.7501L3.81077%2010.7501L6.03044%208.53039L4.96978%207.46973L1.46978%2010.9697L0.939453%2011.5001L1.46978%2012.0304L4.96978%2015.5304L6.03044%2014.4697Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Down.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Down' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Down" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Down { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%206.3335L8%2010.3335L12%206.3335%22%20stroke%3D%22%23110529%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Import.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Import' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Import" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Import { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.1967%207.19701L7.99973%2012.394L2.80273%207.19701L3.86339%206.13635L7.24973%209.52268V1.33334H8.74973V9.52268L12.1361%206.13635L13.1967%207.19701ZM3%2013.25H2.25V14.75H3H13H13.75V13.25H13H3Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Info.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Info' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Info" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Info { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_480_1247)%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%2349CC49%22%20fill-opacity%3D%220.24%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.75%204.5H7.25V6H8.75V4.5ZM6.5%208.75H7.25V11V11.75H8H9.5V10.25H8.75V8V7.25H8H6.5V8.75Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_480_1247%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16InfoDark.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16InfoDark' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16InfoDark" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16InfoDark { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%228%22%20fill%3D%22%23845CFF%22%20fill-opacity%3D%220.4%22%2F%3E%3Cpath%20d%3D%22M8.75%204.5H7.25V6H8.75V4.5Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M6.5%208.75H7.25V11.75H9.5V10.25H8.75V7.25H6.5V8.75Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); }
-</style>

package/src/generated/components/svg/images/Svg16Link.vue

@@ -1,13 +0,0 @@
-<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->
-<script lang="ts">
-import '../svg-styles.css';
-export default { name: 'Svg16Link' };
-</script>
-
-<template>
-  <div class="svg-icon Svg16Link" style="width: 16px; height: 16px" />
-</template>
-
-<style>
-  .Svg16Link { background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_5416_56117)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.68628%209.58876L8.86999%208.40505C9.87885%207.3962%209.87885%205.76052%208.86999%204.75166C7.86114%203.74281%206.22546%203.74281%205.21661%204.75166L2.38819%207.58009C1.37933%208.58894%201.37933%2010.2246%202.38818%2011.2335C2.94545%2011.7907%203.69398%2012.0402%204.42248%2011.9818L5.6655%2013.2248C4.20913%2013.7772%202.50035%2013.467%201.32752%2012.2941C-0.26712%2010.6995%20-0.267115%208.11407%201.32753%206.51943L4.15595%203.691C5.75059%202.09636%208.33601%202.09636%209.93066%203.691C11.5253%205.28565%2011.5253%207.87107%209.93065%209.46571L8.74694%2010.6494L7.68628%209.58876Z%22%20fill%3D%22%23110529%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.8164%2012.2941C10.2218%2013.8888%207.63634%2013.8888%206.04169%2012.2941C4.44705%2010.6995%204.44706%208.11407%206.0417%206.51943L7.21476%205.34636L8.27542%206.40702L7.10236%207.58009C6.0935%208.58894%206.0935%2010.2246%207.10235%2011.2335C8.11121%2012.2423%209.74689%2012.2423%2010.7557%2011.2335L13.5842%208.40505C14.593%207.3962%2014.593%205.76052%2013.5842%204.75166C13.0219%204.18938%2012.2649%203.94049%2011.5302%204.00498L10.2914%202.76618C11.7511%202.20576%2013.4679%202.51403%2014.6448%203.691C16.2395%205.28564%2016.2395%207.87107%2014.6448%209.46571L11.8164%2012.2941Z%22%20fill%3D%22%23110529%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_5416_56117%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); }
-</style>