diff --git a/README.md b/README.md
index 27d3e23b..366a1ea7 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,9 @@ New Multiple-Select Options:
   - `autoAdjustDropHeight` will automatically adjust the drop (up or down) height with available space
   - `autoAdjustDropPosition` will automatically choose best position (top/bottom) with available space
   - `autoAdjustDropWidthByTextSize` automatically set the drop width size from the widest list option width
+  - `useSelectOptionLabel` will use the `<option label="">` (from select option value) that can be used to display shorter selected option values.
+    - example: value "1,3" instead of "January,March"
+  - `useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.
 
 ## Contributions
 
diff --git a/demo/package.json b/demo/package.json
index f70b316a..5a924936 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -25,8 +25,8 @@
   },
   "devDependencies": {
     "multiple-select-vanilla": "workspace:*",
-    "sass": "^1.58.0",
+    "sass": "^1.58.3",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "vite": "^4.1.2"
   }
 }
diff --git a/demo/src/app-routing.ts b/demo/src/app-routing.ts
index 805d6e78..def1d58b 100644
--- a/demo/src/app-routing.ts
+++ b/demo/src/app-routing.ts
@@ -40,6 +40,7 @@ import Options27 from './options/options27';
 import Options28 from './options/options28';
 import Options29 from './options/options29';
 import Options30 from './options/options30';
+import Options31 from './options/options31';
 import Methods01 from './methods/methods01';
 import Methods02 from './methods/methods02';
 import Methods03 from './methods/methods03';
@@ -109,6 +110,7 @@ export const exampleRouting = [
       { name: 'options28', view: '/src/options/options28.html', viewModel: Options28, title: 'Label Template' },
       { name: 'options29', view: '/src/options/options29.html', viewModel: Options29, title: 'Auto-Adjust Drop Position' },
       { name: 'options30', view: '/src/options/options30.html', viewModel: Options30, title: 'Auto-Adjust Drop Height/Width' },
+      { name: 'options31', view: '/src/options/options31.html', viewModel: Options31, title: 'Use Select Option as Label' },
     ],
   },
   {
diff --git a/demo/src/options/options30.html b/demo/src/options/options30.html
index e56746ea..5ec43d62 100644
--- a/demo/src/options/options30.html
+++ b/demo/src/options/options30.html
@@ -30,7 +30,7 @@ <h2 class="bd-title">
     <label class="col-sm-3 text-end">Adjust drop width by option list content</label>
 
     <div class="col-sm-9">
-      <select id="select1" multiple="multiple" data-width="75" class="my-container">
+      <select id="select1" multiple="multiple" data-width="75">
         <option value="1">January</option>
         <option value="2">February</option>
         <option value="3">March</option>
@@ -51,7 +51,7 @@ <h2 class="bd-title">
     <label class="col-sm-3 text-end">Resize drop height (width: 200px)</label>
 
     <div class="col-sm-9">
-      <select id="select2" multiple="multiple" data-width="200" class="my-container">
+      <select id="select2" multiple="multiple" data-width="200">
         <option value="1">January</option>
         <option value="2">February</option>
         <option value="3">March</option>
diff --git a/demo/src/options/options30.ts b/demo/src/options/options30.ts
index 062218bb..68c4b556 100644
--- a/demo/src/options/options30.ts
+++ b/demo/src/options/options30.ts
@@ -3,6 +3,7 @@ import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla'
 export default class Example {
   ms1?: MultipleSelectInstance;
   ms2?: MultipleSelectInstance;
+  ms3?: MultipleSelectInstance;
 
   mount() {
     this.ms1 = multipleSelect('#select1', {
@@ -12,14 +13,14 @@ export default class Example {
       showOkButton: true,
     }) as MultipleSelectInstance;
 
-    this.ms1 = multipleSelect('#select2', {
+    this.ms2 = multipleSelect('#select2', {
       autoAdjustDropWidthByTextSize: true,
       autoAdjustDropHeight: true,
       position: 'top',
       showOkButton: true,
     }) as MultipleSelectInstance;
 
-    this.ms2 = multipleSelect('#select3', {
+    this.ms3 = multipleSelect('#select3', {
       autoAdjustDropWidthByTextSize: true,
       autoAdjustDropHeight: true,
       filter: true,
@@ -31,7 +32,9 @@ export default class Example {
     // destroy ms instance(s) to avoid DOM leaks
     this.ms1?.destroy();
     this.ms2?.destroy();
+    this.ms3?.destroy();
     this.ms1 = undefined;
     this.ms2 = undefined;
+    this.ms3 = undefined;
   }
 }
diff --git a/demo/src/options/options31.html b/demo/src/options/options31.html
new file mode 100644
index 00000000..cf8643b8
--- /dev/null
+++ b/demo/src/options/options31.html
@@ -0,0 +1,59 @@
+<div class="row mb-2">
+  <div class="col-md-12 title-desc">
+    <h2 class="bd-title">
+      Use Select Option as Label
+      <span class="float-end links">
+        Code <span class="fa fa-link"></span>
+        <span class="small">
+          <a
+            target="_blank"
+            href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.html"
+            >html</a
+          >
+          |
+          <a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.ts"
+            >ts</a
+          >
+        </span>
+      </span>
+    </h2>
+    <div class="demo-subtitle">
+      Use <code>useSelectOptionLabel</code> to display select option value as
+      <code>&lt;option label=""&gt;&lt;/option&gt;</code> to display shorter text as the selected values in the parent select.
+      <br />
+      Use <code>useSelectOptionLabelToHtml</code> which is the same as "useSelectOptionLabel" but will also render html option
+      values.
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="mb-3 row">
+    <label class="col-sm-3 text-end">Use Select Option Label</label>
+
+    <div class="col-sm-9">
+      <select id="select1" multiple="multiple" data-width="150">
+        <option value="1">January</option>
+        <option value="2">February</option>
+        <option value="3" selected>March</option>
+        <option value="4">April</option>
+        <option value="5">May</option>
+        <option value="6" selected>June</option>
+        <option value="7">July</option>
+        <option value="8">August</option>
+        <option value="9">September</option>
+        <option value="10">October</option>
+        <option value="11">November</option>
+        <option value="12">December</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-3 text-end">Use Select Option Label & Render HTML</label>
+
+    <div class="col-sm-9">
+      <select id="select2" multiple="multiple" data-width="150"></select>
+    </div>
+  </div>
+</div>
diff --git a/demo/src/options/options31.ts b/demo/src/options/options31.ts
new file mode 100644
index 00000000..09ae09ba
--- /dev/null
+++ b/demo/src/options/options31.ts
@@ -0,0 +1,79 @@
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
+
+export default class Example {
+  ms1?: MultipleSelectInstance;
+  ms2?: MultipleSelectInstance;
+
+  mount() {
+    this.ms1 = multipleSelect('#select1', {
+      useSelectOptionLabel: true,
+    }) as MultipleSelectInstance;
+
+    this.ms2 = multipleSelect('#select2', {
+      useSelectOptionLabelToHtml: true,
+      data: [
+        {
+          text: '<i class="fa fa-star"></i> January',
+          value: '<i class="fa fa-star"></i>1',
+          selected: true,
+        },
+        {
+          text: 'February',
+          value: '2',
+        },
+        {
+          text: 'March',
+          value: 3,
+        },
+        {
+          text: 'April',
+          value: 4,
+        },
+        {
+          text: 'May',
+          value: 5,
+        },
+        {
+          text: 'June',
+          value: 6,
+        },
+        {
+          text: 'July',
+          value: 7,
+        },
+        {
+          text: 'August',
+          value: 8,
+        },
+        {
+          text: 'September',
+          value: 9,
+        },
+        {
+          text: 'October',
+          value: 10,
+        },
+        {
+          text: 'November',
+          value: 11,
+        },
+        {
+          text: 'December',
+          value: 12,
+        },
+      ],
+    }) as MultipleSelectInstance;
+
+    // setTimeout(() => {
+    //   this.ms2?.setSelects(['<i class="fa fa-star"></i>1', 2, 3]);
+    // }, 2000);
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms2?.destroy();
+    this.ms1 = undefined;
+    this.ms2 = undefined;
+  }
+}
diff --git a/lib/build-watch.mjs b/lib/build-watch.mjs
index 273abc03..820fa364 100644
--- a/lib/build-watch.mjs
+++ b/lib/build-watch.mjs
@@ -11,6 +11,7 @@ const env = process.env.NODE_ENV;
 runCompilation(process.env.LERNA_FILE_CHANGES.split(','));
 
 function runBuild() {
+  const startTime = new Date().getTime();
   buildSync({
     color: true,
     entryPoints: ['./src/index.ts'],
@@ -23,6 +24,8 @@ function runBuild() {
     // outfile: env === 'production' ? './dist/multiple-select.min.js' : './dist/multiple-select.js',
     outfile: 'dist/esm/multiple-select.js',
   });
+  const endTime = new Date().getTime();
+  console.info(`⚡️ Built in ${endTime - startTime}ms`);
 }
 
 async function runCompilation(changedFiles) {
diff --git a/lib/package.json b/lib/package.json
index 2c8d5afd..9379cd7f 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -62,7 +62,7 @@
     "npm-run-all2": "^6.0.4",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
-    "sass": "^1.58.1",
+    "sass": "^1.58.3",
     "typescript": "^4.9.5"
   }
 }
diff --git a/lib/src/MultipleSelectInstance.ts b/lib/src/MultipleSelectInstance.ts
index fc58eb12..5d8f60d8 100644
--- a/lib/src/MultipleSelectInstance.ts
+++ b/lib/src/MultipleSelectInstance.ts
@@ -2,7 +2,7 @@
  * @author zhixin wen <wenzhixin2010@gmail.com>
  */
 import Constants from './constants';
-import { compareObjects, deepCopy, findByParam, removeDiacritics, removeUndefined, setDataKeys } from './utils';
+import { compareObjects, deepCopy, findByParam, removeDiacritics, removeUndefined, setDataKeys, stripScripts } from './utils';
 import {
   calculateAvailableSpace,
   createDomElement,
@@ -53,7 +53,7 @@ export class MultipleSelectInstance {
     protected elm: HTMLSelectElement,
     options?: Partial<Omit<MultipleSelectOption, 'onHardDestroy' | 'onAfterHardDestroy'>>
   ) {
-    this.options = Object.assign({}, Constants.DEFAULTS, this.elm.dataset, options);
+    this.options = Object.assign({}, Constants.DEFAULTS, this.elm.dataset, options) as MultipleSelectOption;
     this._bindEventService = new BindingEventService({ distinctEvent: true });
   }
 
@@ -534,7 +534,7 @@ export class MultipleSelectInstance {
       <li class="${multiple} ${classes}" ${title} ${style}>
       <label class="${row.disabled ? 'disabled' : ''}">
       <input type="${type}"
-        value="${row.value}"
+        value="${encodeURI(row.value)}"
         data-key="${row._key}"
         ${this.selectItemName}
         ${row.selected ? ' checked="checked"' : ''}
@@ -879,32 +879,51 @@ export class MultipleSelectInstance {
       textSelects = valueSelects;
     }
 
-    const spanElm = this.choiceElm?.querySelector('span') as HTMLSpanElement;
+    const spanElm = this.choiceElm?.querySelector<HTMLSpanElement>('span');
     const sl = valueSelects.length;
     let html = '';
 
-    if (sl === 0) {
-      spanElm.classList.add('ms-placeholder');
-      spanElm.innerHTML = this.options.placeholder || '';
-    } else if (sl < this.options.minimumCountSelected) {
-      html = textSelects.join(this.options.displayDelimiter);
-    } else if (this.options.formatAllSelected() && sl === this.dataTotal) {
-      html = this.options.formatAllSelected();
-    } else if (this.options.ellipsis && sl > this.options.minimumCountSelected) {
-      html = `${textSelects.slice(0, this.options.minimumCountSelected).join(this.options.displayDelimiter)}...`;
-    } else if (this.options.formatCountSelected(sl, this.dataTotal) && sl > this.options.minimumCountSelected) {
-      html = this.options.formatCountSelected(sl, this.dataTotal);
-    } else {
-      html = textSelects.join(this.options.displayDelimiter);
-    }
+    const getSelectOptionHtml = () => {
+      if (this.options.useSelectOptionLabel || this.options.useSelectOptionLabelToHtml) {
+        const labels = valueSelects.join(this.options.delimiter);
+        return this.options.useSelectOptionLabelToHtml ? stripScripts(labels) : labels;
+      } else {
+        return textSelects.join(this.options.displayDelimiter);
+      }
+    };
 
-    if (html) {
-      spanElm?.classList.remove('ms-placeholder');
-      spanElm.innerHTML = html;
-    }
+    if (spanElm) {
+      if (sl === 0) {
+        spanElm.classList.add('ms-placeholder');
+        spanElm.innerHTML = this.options.placeholder || '';
+      } else if (sl < this.options.minimumCountSelected) {
+        html = getSelectOptionHtml();
+      } else if (this.options.formatAllSelected() && sl === this.dataTotal) {
+        html = this.options.formatAllSelected();
+      } else if (this.options.ellipsis && sl > this.options.minimumCountSelected) {
+        html = `${textSelects.slice(0, this.options.minimumCountSelected).join(this.options.displayDelimiter)}...`;
+      } else if (this.options.formatCountSelected(sl, this.dataTotal) && sl > this.options.minimumCountSelected) {
+        html = this.options.formatCountSelected(sl, this.dataTotal);
+      } else {
+        html = getSelectOptionHtml();
+      }
 
-    if (this.options.displayTitle) {
-      spanElm.title = this.getSelects('text').join('');
+      if (html) {
+        spanElm?.classList.remove('ms-placeholder');
+        if (this.options.useSelectOptionLabelToHtml) {
+          spanElm.innerHTML = html;
+        } else {
+          spanElm.textContent = html;
+        }
+      }
+
+      if (this.options.displayTitle || this.options.addTitle) {
+        if (this.options.addTitle) {
+          console.warn('[Multiple-Select-Vanilla] Please note that the `addTitle` option was replaced with `displayTitle`.');
+        }
+        const selectType = this.options.useSelectOptionLabel || this.options.useSelectOptionLabelToHtml ? 'value' : 'text';
+        spanElm.title = this.getSelects(selectType).join('');
+      }
     }
 
     // set selects to select
@@ -1303,10 +1322,16 @@ export class MultipleSelectInstance {
     }
 
     // calculate the "Select All" element width, this text is configurable which is why we recalculate every time
-    const selectAllElm = this.dropElm.querySelector('.ms-select-all span') as HTMLSpanElement;
+    const selectAllSpanElm = this.dropElm.querySelector('.ms-select-all span') as HTMLSpanElement;
     const dropUlElm = this.dropElm.querySelector('ul') as HTMLUListElement;
 
-    const selectAllElmWidth = selectAllElm.clientWidth + this.options.selectSidePadding;
+    let liPadding = 0;
+    const firstLiElm = this.dropElm.querySelector('li'); // get padding of 1st <li> element
+    if (firstLiElm) {
+      const { paddingLeft, paddingRight } = window.getComputedStyle(firstLiElm);
+      liPadding = parseFloat(paddingLeft) + parseFloat(paddingRight);
+    }
+    const selectAllElmWidth = selectAllSpanElm.clientWidth + liPadding;
     const hasScrollbar = dropUlElm.scrollHeight > dropUlElm.clientHeight;
     const scrollbarWidth = hasScrollbar ? this.getScrollbarWidth() : 0;
     let contentWidth = 0;
@@ -1318,7 +1343,7 @@ export class MultipleSelectInstance {
     });
 
     // add a padding & include the browser scrollbar width
-    contentWidth += this.options.selectSidePadding + scrollbarWidth;
+    contentWidth += liPadding + scrollbarWidth;
 
     // make sure the new calculated width is wide enough to include the "Select All" text (this text is configurable)
     if (contentWidth < selectAllElmWidth) {
diff --git a/lib/src/constants.ts b/lib/src/constants.ts
index 0d7709ba..fa8a7887 100644
--- a/lib/src/constants.ts
+++ b/lib/src/constants.ts
@@ -1,7 +1,9 @@
+import { MultipleSelectOption } from './interfaces';
+
 const BLOCK_ROWS = 50;
 const CLUSTER_BLOCKS = 4;
 
-const DEFAULTS = {
+const DEFAULTS: Partial<MultipleSelectOption> = {
   name: '',
   placeholder: '',
   data: undefined,
@@ -41,16 +43,14 @@ const DEFAULTS = {
   },
 
   showClear: false,
-  animate: undefined,
 
   // auto-position the drop
-  offsetLeft: 0,
   autoAdjustDropHeight: false,
   autoAdjustDropPosition: false,
-  autoDropWidth: false,
   autoAdjustDropWidthByTextSize: false,
   adjustedHeightPadding: 10,
-  selectSidePadding: 26,
+  useSelectOptionLabel: false,
+  useSelectOptionLabelToHtml: false,
 
   styler: () => false,
   textTemplate: (elm: HTMLOptionElement) => elm.innerHTML.trim(),
diff --git a/lib/src/interfaces/multipleSelectOption.interface.ts b/lib/src/interfaces/multipleSelectOption.interface.ts
index 4e379f7a..7c1f95c3 100644
--- a/lib/src/interfaces/multipleSelectOption.interface.ts
+++ b/lib/src/interfaces/multipleSelectOption.interface.ts
@@ -1,6 +1,9 @@
 import { OptGroupRowData, OptionRowData } from './interfaces';
 
 export interface MultipleSelectOption {
+  /** @deprecated @alias `displayTitle` Add a title. By default this option is set to false. */
+  addTitle?: boolean;
+
   /** defaults to 10, when using "autoAdjustDropHeight" we might want to add a bottom (or top) padding instead of taking the entire available space */
   adjustedHeightPadding: number;
 
@@ -14,7 +17,7 @@ export interface MultipleSelectOption {
   autoAdjustDropWidthByTextSize?: boolean;
 
   /** HTML container to use for the drop menu, e.g. 'body' */
-  container?: string | HTMLElement;
+  container?: string | HTMLElement | null;
 
   /** provide custom data */
   data?: any | any[];
@@ -71,7 +74,7 @@ export interface MultipleSelectOption {
   maxHeight: number;
 
   /** maxHeight unit type */
-  maxHeightUnit?: 'row';
+  maxHeightUnit?: string;
 
   /** Defaults to 500, define the maximum width of the drop when using the "autoAdjustDropWidthByTextSize: true" flag. */
   maxWidth?: number;
@@ -103,9 +106,6 @@ export interface MultipleSelectOption {
   /** Whether or not Multiple Select show select all checkbox. */
   selectAll?: boolean;
 
-  /** Defaults to 26 (as per CSS), that is the select DOM element padding in pixels (that is not the drop but the select itself, how tall is it) */
-  selectSidePadding: number;
-
   /** Whether or not Multiple Select allows you to select only one option.By default this option is set to false. */
   single?: boolean;
 
@@ -118,6 +118,12 @@ export interface MultipleSelectOption {
   /** Display the OK button at bottom of the list when using multiple selection to easily close the drop, defaults to false. */
   showOkButton?: boolean;
 
+  /** Defaults to False, when set to True it will use the <option label=""> (from select option value) that can be used to display selected options. */
+  useSelectOptionLabel?: boolean;
+
+  /** Defaults to False, same as "useSelectOptionLabel" but will also render html */
+  useSelectOptionLabelToHtml?: boolean;
+
   /** Define the width property of the dropdown list, support a percentage setting.By default this option is set to undefined. Which is the same as the select input field. */
   width?: number | string;
 
@@ -144,7 +150,7 @@ export interface MultipleSelectOption {
   formatSelectAll: () => string;
 
   /** The item styler function, return style string to custom the item style such as background: red. The function take one parameter: value. */
-  styler: (value: OptionRowData | OptGroupRowData) => string | null;
+  styler: (value: OptionRowData | OptGroupRowData) => string | boolean | null;
 
   /** Returns HTML label attribute of a DOM element */
   labelTemplate: (elm: any) => any;
@@ -164,6 +170,7 @@ export interface MultipleSelectOption {
 
   /** Fires after instance was destroyed. */
   onAfterDestroy: (options: { hardDestroy: boolean }) => void;
+  onDestroyed: (options: { hardDestroy: boolean }) => void;
 
   /** (internal usage only) Fires when instance is being hard destroyed. */
   onHardDestroy: () => void;
diff --git a/lib/src/utils/utils.ts b/lib/src/utils/utils.ts
index 6be9f038..46771e03 100644
--- a/lib/src/utils/utils.ts
+++ b/lib/src/utils/utils.ts
@@ -97,6 +97,17 @@ export function findByParam(data: any, param: any, value: any) {
   }
 }
 
+export function stripScripts(str: string) {
+  var div = document.createElement('div');
+  div.innerHTML = str;
+  var scripts = div.getElementsByTagName('script');
+  var i = scripts.length;
+  while (i--) {
+    scripts[i].parentNode?.removeChild(scripts[i]);
+  }
+  return div.innerHTML;
+}
+
 export function removeUndefined(obj: any) {
   Object.keys(obj).forEach((key) => (obj[key] === undefined ? delete obj[key] : ''));
   return obj;
diff --git a/package.json b/package.json
index d751a296..f7dd5c31 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "npm-run-all2": "^6.0.4",
-    "pnpm": "^7.27.0",
+    "pnpm": "^7.27.1",
     "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
     "typescript": "^4.9.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index deeb1885..c8568ef1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
       eslint-plugin-node: ^11.1.0
       eslint-plugin-prefer-arrow: ^1.2.3
       npm-run-all2: ^6.0.4
-      pnpm: ^7.27.0
+      pnpm: ^7.27.1
       prettier: ^2.8.4
       rimraf: ^3.0.2
       typescript: ^4.9.5
@@ -33,7 +33,7 @@ importers:
       eslint-plugin-node: 11.1.0_eslint@8.34.0
       eslint-plugin-prefer-arrow: 1.2.3_eslint@8.34.0
       npm-run-all2: 6.0.4
-      pnpm: 7.27.0
+      pnpm: 7.27.1
       prettier: 2.8.4
       rimraf: 3.0.2
       typescript: 4.9.5
@@ -44,18 +44,18 @@ importers:
       bootstrap: ^5.2.3
       font-awesome: ^4.7.0
       multiple-select-vanilla: workspace:*
-      sass: ^1.58.0
+      sass: ^1.58.3
       typescript: ^4.9.5
-      vite: ^4.1.1
+      vite: ^4.1.2
     dependencies:
       '@popperjs/core': 2.11.6
       bootstrap: 5.2.3_@popperjs+core@2.11.6
       font-awesome: 4.7.0
     devDependencies:
       multiple-select-vanilla: link:../lib
-      sass: 1.58.0
+      sass: 1.58.3
       typescript: 4.9.5
-      vite: 4.1.1_sass@1.58.0
+      vite: 4.1.2_sass@1.58.3
 
   lib:
     specifiers:
@@ -68,7 +68,7 @@ importers:
       npm-run-all2: ^6.0.4
       postcss: ^8.4.21
       postcss-cli: ^10.1.0
-      sass: ^1.58.1
+      sass: ^1.58.3
       typescript: ^4.9.5
     devDependencies:
       autoprefixer: 10.4.13_postcss@8.4.21
@@ -80,7 +80,7 @@ importers:
       npm-run-all2: 6.0.4
       postcss: 8.4.21
       postcss-cli: 10.1.0_postcss@8.4.21
-      sass: 1.58.1
+      sass: 1.58.3
       typescript: 4.9.5
 
 packages:
@@ -4496,8 +4496,8 @@ packages:
       find-up: 4.1.0
     dev: true
 
-  /pnpm/7.27.0:
-    resolution: {integrity: sha512-nvxGrxgu3oYyw7zg7DdotEnqp9r/c0/iLZHr6QewJPEkVFGSPdsxrm0HFKBkOqwCInoutFzz/mtGx+pbYV8UCw==}
+  /pnpm/7.27.1:
+    resolution: {integrity: sha512-IpBeZ+71slENbuOXwbV4U6yxOMfEWEvlVuT6+ChZ1D80oF0eHyN4h/hc13UrzVXpXI3bf7sPfRWGb8TYkrvJUA==}
     engines: {node: '>=14.6'}
     hasBin: true
     dev: true
@@ -5170,18 +5170,8 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass/1.58.0:
-    resolution: {integrity: sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==}
-    engines: {node: '>=12.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.2.1
-      source-map-js: 1.0.2
-    dev: true
-
-  /sass/1.58.1:
-    resolution: {integrity: sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==}
+  /sass/1.58.3:
+    resolution: {integrity: sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
@@ -5751,8 +5741,8 @@ packages:
       builtins: 5.0.1
     dev: true
 
-  /vite/4.1.1_sass@1.58.0:
-    resolution: {integrity: sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==}
+  /vite/4.1.2_sass@1.58.3:
+    resolution: {integrity: sha512-MWDb9Rfy3DI8omDQySbMK93nQqStwbsQWejXRY2EBzEWKmLAXWb1mkI9Yw2IJrc+oCvPCI1Os5xSSIBYY6DEAw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -5780,7 +5770,7 @@ packages:
       postcss: 8.4.21
       resolve: 1.22.1
       rollup: 3.13.0
-      sass: 1.58.0
+      sass: 1.58.3
     optionalDependencies:
       fsevents: 2.3.2
     dev: true