@carbon/vue 2.43.1 → 2.44.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.43.1",
+  "version": "2.44.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -75,5 +75,5 @@
     "eslint-plugin-prettier": "^3.3.1",
     "vue-template-compiler": "^2.6.14"
   },
-  "gitHead": "0edbc217d724b03f012f3cd4df3aa3754821bf06"
+  "gitHead": "cf32f525094daf7cd1073afb4285dd1b8961bba5"
 }

package/src/carbon.yml

@@ -0,0 +1,388 @@
+# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
+library:
+  id: carbon-components-vue
+  name: Carbon Components Vue
+  description: Vue implementation of Carbon Components.
+  externalDocsUrl: https://vue.carbondesignsystem.com/?path=/story/welcome
+  inherits: carbon-styles
+  packageJsonPath: /../package.json
+assets:
+  accordion:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvaccordion
+  aspect-ratio:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvaspectratio
+  breadcrumb:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/breadcrumb/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb
+  button:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/button/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvbutton
+  checkbox:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/checkbox/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox
+  code-snippet:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/code-snippet/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet
+  combo-box:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcombobox
+  content-switcher:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/data-table/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher
+  data-table:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvdatatable
+  date-picker:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/date-picker/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvdatatable
+  dropdown:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvdropdown
+  file-uploader:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/file-uploader/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvfileuploader
+  form:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/form/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvform
+  grid:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvgrid
+  inline-loading:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/inline-loading/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvinlineloading
+  inline-notification:
+    name: Inline notification
+    status: stable
+    type: component
+    platform: web
+    framework: vue
+    thumbnailPath: './thumbnails/inline-notification.svg'
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url:  https://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification
+    tags:
+      - system-feedback
+  link:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/link/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvlink
+  list:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/list/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvlist
+  loading:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/loading/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvloading
+  modal:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/modal/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvmodal
+  multiselect:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/#multiselect
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvmultiselect
+  number-input:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/number-input/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput
+  overflow-menu:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/overflow-menu/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvoverflowmenu
+  pagination:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/pagination/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvpagination
+  progress-indicator:
+    status: stable
+    externalDocsUrl: https://carbondesignsystem.com/components/progress-indicator/usage/
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvprogress
+  radio-button:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/radio-button/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvradiobutton
+  search:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/search/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvsearch
+  select:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/select/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvselect
+  skeleton-text:
+    name: Skeleton text
+    status: stable
+    type: component
+    platform: web
+    framework: vue
+    thumbnailPath: './thumbnails/skeleton-text.svg'
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvskeletontext
+    tags:
+      - data-display
+  slider:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/slider/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvslider
+  structured-list:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/structured-list/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvstructuredlist
+  tabs:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tabs/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtabs
+  tag:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tag/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtag
+  text-area:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtextarea
+  text-input:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/text-input/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtextinput
+  tile:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tile/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtile
+  time-picker:
+    status: stable
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtimepicker
+  toast-notification:
+    name: Toast notification
+    status: stable
+    type: component
+    platform: web
+    framework: vue
+    thumbnailPath: './thumbnails/toast-notification.svg'
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification
+    tags:
+      - system-feedback
+  toggle:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/toggle/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtoggle
+  tooltip:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/tooltip/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvtooltip-interactive-tootlip
+  ui-shell-header:
+    status: stable
+    externalDocsUrl: https://www.carbondesignsystem.com/components/UI-shell-header/usage
+    framework: vue
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://vue.carbondesignsystem.com/?path=/story/components-cvuishell

package/src/components/cv-checkbox/cv-checkbox.vue

@@ -7,7 +7,6 @@
       :class="`${carbonPrefix}--checkbox`"
       type="checkbox"
       :checked="isChecked === true"
-      :aria-checked="`${isChecked}`"
       @focus="onFocus"
       @blur="onBlur"
       :value="value"

package/src/components/cv-code-snippet/_cv-code-snippet-inline.vue

@@ -6,7 +6,8 @@
     :disabled="disabled"
     :feedback="copyFeedback"
     inline
-    :aria-label="feedbackAriaLabel"
+    :title="feedbackAriaLabel"
+    :ariaLabel="feedbackAriaLabel"
     @click="$emit('copy-code')"
     ><slot
   /></cv-feedback-button>

package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue

@@ -15,7 +15,8 @@
       v-if="!hideCopyButton"
       :disabled="disabled"
       :feedback="copyFeedback"
-      :aria-label="feedbackAriaLabel"
+      :title="feedbackAriaLabel"
+      :ariaLabel="feedbackAriaLabel"
       @click="$emit('copy-code')"
     >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />

package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue

@@ -16,7 +16,8 @@
       v-if="!hideCopyButton"
       :disabled="disabled"
       :feedback="copyFeedback"
-      :aria-label="feedbackAriaLabel"
+      :ariaLabel="feedbackAriaLabel"
+      :title="feedbackAriaLabel"
       @click="$emit('copy-code')"
     >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />

package/src/components/cv-code-snippet/cv-code-snippet.vue

@@ -16,6 +16,7 @@
       class="cv-code-snippet__clippy"
       style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden"
       aria-hidden="true"
+      tabindex="-1"
       ref="clippy"
     ></textarea>
   </component>

package/src/components/cv-date-picker/plugins/monthSelectPlugin.js

@@ -21,7 +21,7 @@ const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ?
  */
 export default config => fp => {
   const setupElements = () => {
-    if (!fp.monthElements) {
+    if (!fp.monthElements || fp.monthElements.length < 1) {
       return;
     }
     fp.monthElements.forEach(elem => {

package/src/components/cv-modal/cv-modal.vue

@@ -149,15 +149,16 @@ export default {
   computed: {
     dialogAttrs() {
       const passive = !this.hasFooter;
-      const attrs = { role: 'dialog' };
-
+      const attrs = {};
+      attrs['aria-label'] = this.$slots.title[0].text;
       if (this.alert) {
         if (passive) {
           attrs.role = 'alert';
         } else {
           attrs.role = 'alertdialog';
-          attrs['aria-describedBy'] = this.uid;
         }
+      } else {
+        attrs.role = 'dialog';
       }
       return attrs;
     },

package/src/components/cv-multi-select/cv-multi-select.vue

@@ -13,12 +13,13 @@
   >
     <label
       v-if="title"
-      :for="uid"
+      :id="`${uid}-label`"
       :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
       >{{ title }}</label
     >
 
     <div
+      :aria-labelledby="`${uid}-label`"
       role="listbox"
       tabindex="-1"
       :class="[
@@ -109,7 +110,13 @@
         </div>
       </div>
 
-      <div :id="uid" :class="`${carbonPrefix}--list-box__menu`" role="listbox" ref="list">
+      <div
+        :id="uid"
+        :aria-labelledby="`${uid}-label`"
+        :class="`${carbonPrefix}--list-box__menu`"
+        role="listbox"
+        ref="list"
+      >
         <div
           v-for="(item, index) in dataOptions"
           :key="`multi-select-${index}`"

package/src/components/cv-number-input/cv-number-input.vue

@@ -12,7 +12,7 @@
       ]"
       :data-invalid="isInvalid"
     >
-      <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
       <div
         :class="[
           `${carbonPrefix}--number__input-wrapper`,

package/src/components/cv-search/cv-search.vue

@@ -1,7 +1,7 @@
 <template>
   <cv-wrapper :tag-type="formItem ? 'div' : ''" :class="`cv-search ${carbonPrefix}--form-item`">
     <div
-      :aria-labelledby="uid"
+      v-bind="wrapperAttrs"
       :class="[
         `${carbonPrefix}--search`,
         {
@@ -30,7 +30,7 @@
         <Search20 :class="`${carbonPrefix}--search-magnifier-icon`" />
       </div>
 
-      <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
 
       <input
         :id="uid"
@@ -71,6 +71,7 @@ export default {
   components: { Close16, CvWrapper, Search20 },
   inheritAttrs: false,
   props: {
+    ariaLabel: String,
     clearAriaLabel: { type: String, default: 'Clear search input' },
     formItem: { type: Boolean, default: true },
     kind: { type: String, default: undefined },
@@ -114,6 +115,17 @@ export default {
     },
   },
   computed: {
+    wrapperAttrs() {
+      const attrs = {};
+      if (this.ariaLabel) {
+        attrs['aria-label'] = this.ariaLabel;
+      } else if (this.label) {
+        attrs['aria-labelledby'] = this.uid;
+      } else {
+        attrs['aria-label'] = 'Search box';
+      }
+      return attrs;
+    },
     // Bind listeners at the component level to the embedded input element and
     // add our own input listener to service the v-model. See:
     // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

package/src/components/cv-slider/cv-slider.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="`cv-slider ${carbonPrefix}--form-item`">
     <label
+      v-show="label"
       :for="uid"
       :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
       :id="labelId"

package/src/components/cv-tabs/cv-tabs.vue

@@ -44,8 +44,6 @@
             },
           ]"
           role="presentation"
-          :aria-selected="selectedId == tab.uid ? 'true' : 'false'"
-          :aria-disabled="disabledTabs.indexOf(tab.uid) !== -1"
         >
           <button
             :class="`${carbonPrefix}--tabs--scrollable__nav-link`"

package/src/components/cv-toggle/cv-toggle.vue

@@ -7,7 +7,6 @@
       type="checkbox"
       :id="uid"
       :checked="isChecked === true"
-      :aria-checked="`${isChecked}`"
       :value="value"
       ref="input"
     />

package/src/thumbnails/inline-notification.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>inline-notification</title>
+    <defs>
+        <circle id="path-1" cx="5" cy="5" r="4.375"></circle>
+        <polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
+    </defs>
+    <g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
+        <g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+        <rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
+    </g>
+</svg>

package/src/thumbnails/skeleton-text.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>skeleton-text</title>
+    <defs>
+        <linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#C6C6C6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
+        <rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
+        <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
+    </g>
+</svg>

package/src/thumbnails/toast-notification.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>toast-notification</title>
+    <defs>
+        <circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
+        <polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
+    </defs>
+    <g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
+        <rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
+        <g id="Group" transform="translate(73.000000, 68.000000)">
+            <g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
+                <g id="error--filled" transform="translate(0.875000, 0.875000)">
+                    <g id="icon-2">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
+                    </g>
+                    <g id="icon-1" transform="translate(2.625000, 2.625000)">
+                        <mask id="mask-4" fill="white">
+                            <use xlink:href="#path-3"></use>
+                        </mask>
+                        <use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
+                    </g>
+                </g>
+                <rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
+            </g>
+        </g>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
+        <rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
+        <rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
+    </g>
+</svg>