@ebay/skin 18.5.0 → 19.0.0

package/dist/bundles/skin-headless.css

@@ -259,7 +259,6 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   min-height:55px;
   min-width:208px;
   padding:var(--spacing-200);
-  text-align:center;
   will-change:opacity, transform;
 }
 
@@ -270,6 +269,10 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   margin:0;
 }
 
+.alert-dialog__footer{
+  text-align:right;
+}
+
 .alert-dialog__main{
   margin:var(--spacing-200) 0;
   min-height:var(--spacing-200);
@@ -1710,7 +1713,7 @@ button.chip__button>svg{
   transition:transform .2s linear;
 }
 
-.chips-combobox .combobox__listbox{
+.chips-combobox .combobox__listbox--set-position{
   top:calc(100% + var(--spacing-150));
 }
 
@@ -1787,12 +1790,17 @@ span.combobox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.combobox__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 
 .combobox__listbox--reverse,[dir=rtl] .combobox__listbox{
@@ -2033,7 +2041,6 @@ span.combobox{
   min-height:55px;
   min-width:208px;
   padding:var(--spacing-200);
-  text-align:center;
   will-change:opacity, transform;
 }
 
@@ -2055,6 +2062,10 @@ span.combobox{
   margin-bottom:0;
 }
 
+.confirm-dialog__footer{
+  text-align:right;
+}
+
 a.confirm-dialog__confirm,button.confirm-dialog__confirm{
   margin-left:var(--spacing-100);
 }
@@ -2212,6 +2223,7 @@ a.cta-btn--large{
 }
 .date-textbox{
   --calendar-month-width:311px;
+  display:inline-block;
 }
 
 .date-textbox>.textbox+.textbox{
@@ -2377,6 +2389,7 @@ details.details summary:focus:not(:focus-visible){
     }
   }
 }
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .drawer-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -3545,22 +3558,25 @@ button.filter-menu-button__button[aria-pressed=true][aria-disabled=true]:hover,b
   border-radius:16px;
   box-shadow:var(--bubble-shadow);
   display:none;
-  max-width:288px;
   min-width:144px;
   overflow:hidden;
   position:absolute;
-  top:calc(100% + 8px);
+  top:0;
   width:max-content;
   z-index:1;
 }
 
+.filter-menu-button__menu--set-position{
+  top:calc(100% + 8px);
+}
+
 button.filter-menu-button__button[aria-expanded=true]+.filter-menu-button__menu{
   display:block;
 }
 
 .filter-menu-button__items{
   margin-top:8px;
-  max-height:calc(50vh - 40px);
+  max-height:400px;
   min-width:100%;
   overflow-y:auto;
   position:relative;
@@ -4764,7 +4780,7 @@ div.floating-label{
 
 label.floating-label__label{
   background-color:initial;
-  color:var(--floating-label-color, var(--color-foreground-primary));
+  color:var(--floating-label-color, var(--color-foreground-secondary));
   display:inline-block;
   left:16px;
   overflow:hidden;
@@ -4787,7 +4803,7 @@ label.floating-label__label{
 }
 
 label.floating-label__label--focus{
-  color:var(--color-background-inverse);
+  color:var(--floating-label-focus-color, var(--color-foreground-primary));
 }
 
 .floating-label--opaque label.floating-label__label--focus{
@@ -4858,6 +4874,8 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
 .floating-label--large label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofill){
   transform:scale(.75) translateY(3px);
 }
+
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .fullscreen-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -5323,8 +5341,9 @@ span.infotip__mask{
 
 .infotip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 
 .infotip__content{
@@ -5645,18 +5664,6 @@ button.icon-btn.lightbox-dialog__prev{
   opacity:1;
   transform:translateY(0);
 }
-
-.lightbox-dialog__handle{
-  background-color:initial;
-  border:none;
-  left:0;
-  margin:-11px auto;
-  padding:8px;
-  position:relative;
-  right:0;
-  top:11px;
-  z-index:2;
-}
 .lightbox-dialog__handle:after{
   background-color:var(--dialog-handle-color, var(--color-stroke-default));
   border-radius:3px;
@@ -5666,11 +5673,6 @@ button.icon-btn.lightbox-dialog__prev{
   width:24px;
 }
 
-.lightbox-dialog__window--expanded{
-  height:95%;
-  max-height:95%;
-}
-
 [dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16{
   transform:rotate(180deg);
 }
@@ -5696,9 +5698,6 @@ button.icon-btn.lightbox-dialog__prev{
     max-width:100%;
     width:100%;
   }
-  .lightbox-dialog--fullscreen .lightbox-dialog__handle,.lightbox-dialog--large .lightbox-dialog__handle{
-    display:none;
-  }
 }
 @media (min-width:512px){
   .lightbox-dialog__window{
@@ -5706,9 +5705,6 @@ button.icon-btn.lightbox-dialog__prev{
     margin:auto;
     max-width:calc(88% - var(--spacing-400));
   }
-  .lightbox-dialog__handle{
-    display:none;
-  }
   .lightbox-dialog--narrow .lightbox-dialog__window{
     max-width:var(--dialog-lightbox-narrow-max-width);
   }
@@ -5961,12 +5957,17 @@ div.listbox-button__listbox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+div.listbox-button__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] div.listbox-button__listbox{
   left:unset;
@@ -6290,13 +6291,18 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   outline:0;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.fake-menu-button__menu--set-position,.menu-button__menu--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] .fake-menu-button__menu,[dir=rtl] .menu-button__menu{
   left:unset;
@@ -8197,9 +8203,6 @@ span.skeleton__avatar:not(:last-child),span.skeleton__button:not(:last-child),sp
 div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.skeleton__image:not(:last-child),div.skeleton__text:not(:last-child),div.skeleton__textbox:not(:last-child){
   margin-block-end:var(--spacing-150);
 }
-.skeleton--elevated{
-  --skeleton-background:var(--color-loading-fill-elevated);
-}
 
 .skeleton--on-secondary{
   --skeleton-background:var(--color-loading-fill-on-secondary);
@@ -8209,9 +8212,6 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
   .skeleton{
     --skeleton-background:var(--color-loading-shimmer);
   }
-  .skeleton--elevated{
-    --skeleton-background:var(--color-loading-shimmer-elevated);
-  }
   .skeleton--on-secondary{
     --skeleton-background:var(--color-loading-shimmer-on-secondary);
   }
@@ -8670,14 +8670,7 @@ span.switch__control:focus:not(:focus-visible){
   text-align:left;
 }
 
-.table-cell--numeric{
-  text-align:right;
-}
-.table__cell{
-  text-align:left;
-}
-
-.table__cell--numeric{
+.table-cell--numeric,.table__cell--numeric{
   text-align:right;
 }
 
@@ -10062,8 +10055,9 @@ span.tooltip__mask{
 
 .tooltip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tooltip__cell a{
   color:var(--tooltip-foreground-color, var(--color-foreground-primary));
@@ -10223,8 +10217,9 @@ span.tourtip__mask{
 .tourtip__cell{
   display:flex;
   flex-wrap:wrap;
+  overflow-wrap:anywhere;
   padding:var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tourtip__cell a{
   color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));

package/dist/chips-combobox/chips-combobox.css

@@ -60,7 +60,7 @@
     transition: transform 0.2s linear;
 }
 
-.chips-combobox .combobox__listbox {
+.chips-combobox .combobox__listbox--set-position {
     top: calc(100% + var(--spacing-150));
 }
 

package/dist/combobox/combobox.css

@@ -38,12 +38,17 @@ span.combobox {
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+.combobox__listbox--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 
 .combobox__listbox--reverse,

package/dist/confirm-dialog/confirm-dialog.css

@@ -38,7 +38,6 @@
     min-height: 55px;
     min-width: 208px;
     padding: var(--spacing-200);
-    text-align: center;
     will-change: opacity, transform;
 }
 
@@ -60,6 +59,10 @@
     margin-bottom: 0;
 }
 
+.confirm-dialog__footer {
+    text-align: right;
+}
+
 a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
     margin-left: var(--spacing-100);

package/dist/date-textbox/date-textbox.css

@@ -4,6 +4,7 @@
 }
 .date-textbox {
     --calendar-month-width: 311px;
+    display: inline-block;
 }
 
 .date-textbox > .textbox + .textbox {

package/dist/drawer-dialog/drawer-dialog.css

@@ -1,3 +1,4 @@
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
     --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);

package/dist/filter-menu-button/filter-menu-button.css

@@ -152,15 +152,18 @@ button.filter-menu-button__button[aria-pressed="true"][disabled]:hover {
     border-radius: 16px;
     box-shadow: var(--bubble-shadow);
     display: none;
-    max-width: 288px;
     min-width: 144px;
     overflow: hidden;
     position: absolute;
-    top: calc(100% + 8px);
+    top: 0;
     width: max-content;
     z-index: 1;
 }
 
+.filter-menu-button__menu--set-position {
+    top: calc(100% + 8px);
+}
+
 button.filter-menu-button__button[aria-expanded="true"]
     + .filter-menu-button__menu {
     display: block;
@@ -168,7 +171,7 @@ button.filter-menu-button__button[aria-expanded="true"]
 
 .filter-menu-button__items {
     margin-top: 8px;
-    max-height: calc(50vh - 40px);
+    max-height: 400px;
     min-width: 100%;
     overflow-y: auto;
     position: relative;

package/dist/floating-label/floating-label.css

@@ -12,7 +12,7 @@ div.floating-label {
 
 label.floating-label__label {
     background-color: initial;
-    color: var(--floating-label-color, var(--color-foreground-primary));
+    color: var(--floating-label-color, var(--color-foreground-secondary));
     display: inline-block;
     left: 16px;
     overflow: hidden;
@@ -38,7 +38,7 @@ label.floating-label__label {
 }
 
 label.floating-label__label--focus {
-    color: var(--color-background-inverse);
+    color: var(--floating-label-focus-color, var(--color-foreground-primary));
 }
 
 .floating-label--opaque label.floating-label__label--focus {

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -1,3 +1,4 @@
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
     --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);

package/dist/infotip/infotip.css

@@ -43,8 +43,9 @@ span.infotip__mask {
 
 .infotip__cell {
     display: flex;
+    overflow-wrap: anywhere;
     padding: var(--spacing-100) var(--spacing-200);
-    word-break: break-word;
+    word-break: normal;
 }
 
 .infotip__content {

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -211,18 +211,6 @@ button.icon-btn.lightbox-dialog__prev {
     opacity: 1;
     transform: translateY(0);
 }
-
-.lightbox-dialog__handle {
-    background-color: initial;
-    border: none;
-    left: 0;
-    margin: -11px auto;
-    padding: 8px;
-    position: relative;
-    right: 0;
-    top: 11px;
-    z-index: 2;
-}
 .lightbox-dialog__handle:after {
     background-color: var(--dialog-handle-color, var(--color-stroke-default));
     border-radius: 3px;
@@ -232,11 +220,6 @@ button.icon-btn.lightbox-dialog__prev {
     width: 24px;
 }
 
-.lightbox-dialog__window--expanded {
-    height: 95%;
-    max-height: 95%;
-}
-
 [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--16 {
     transform: rotate(180deg);
 }
@@ -263,10 +246,6 @@ button.icon-btn.lightbox-dialog__prev {
         max-width: 100%;
         width: 100%;
     }
-    .lightbox-dialog--fullscreen .lightbox-dialog__handle,
-    .lightbox-dialog--large .lightbox-dialog__handle {
-        display: none;
-    }
 }
 @media (min-width: 512px) {
     .lightbox-dialog__window {
@@ -274,9 +253,6 @@ button.icon-btn.lightbox-dialog__prev {
         margin: auto;
         max-width: calc(88% - var(--spacing-400));
     }
-    .lightbox-dialog__handle {
-        display: none;
-    }
     .lightbox-dialog--narrow .lightbox-dialog__window {
         max-width: var(--dialog-lightbox-narrow-max-width);
     }

package/dist/listbox-button/listbox-button.css

@@ -37,12 +37,17 @@ div.listbox-button__listbox {
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+div.listbox-button__listbox--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 [dir="rtl"] div.listbox-button__listbox {
     left: unset;

package/dist/menu-button/menu-button.css

@@ -23,13 +23,19 @@
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     outline: 0;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+.fake-menu-button__menu--set-position,
+.menu-button__menu--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 [dir="rtl"] .fake-menu-button__menu,
 [dir="rtl"] .menu-button__menu {

package/dist/progress-bar-expressive/progress-bar-expressive.css

@@ -137,7 +137,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count)
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-a1);
 }
@@ -148,7 +149,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 2
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-a2);
 }
@@ -159,7 +161,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 3
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-a3);
 }
@@ -170,7 +173,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 4
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-a4);
 }
@@ -181,7 +185,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 5
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-b1);
 }
@@ -192,7 +197,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 6
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-b2);
 }
@@ -203,7 +209,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 7
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-b3);
 }
@@ -214,7 +221,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 8
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-b4);
 }
@@ -225,7 +233,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 9
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-c1);
 }
@@ -236,7 +245,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 10
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-c2);
 }
@@ -247,7 +257,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 11
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-c3);
 }
@@ -258,7 +269,8 @@
                 var(--progress-bar-expressive-line-scale-duration) -
                     var(--progress-bar-expressive-line-scale-duration) /
                     var(--progress-bar-expressive-line-count) * 12
-            ) * -1
+            ) *
+            -1
     );
     width: var(--progress-bar-expressive-line-width-c4);
 }

package/dist/skeleton/skeleton.css

@@ -114,9 +114,6 @@ div.skeleton__text:not(:last-child),
 div.skeleton__textbox:not(:last-child) {
     margin-block-end: var(--spacing-150);
 }
-.skeleton--elevated {
-    --skeleton-background: var(--color-loading-fill-elevated);
-}
 
 .skeleton--on-secondary {
     --skeleton-background: var(--color-loading-fill-on-secondary);
@@ -126,9 +123,6 @@ div.skeleton__textbox:not(:last-child) {
     .skeleton {
         --skeleton-background: var(--color-loading-shimmer);
     }
-    .skeleton--elevated {
-        --skeleton-background: var(--color-loading-shimmer-elevated);
-    }
     .skeleton--on-secondary {
         --skeleton-background: var(--color-loading-shimmer-on-secondary);
     }

package/dist/svg/icon/icon-ai-tools-16.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.75 4.125a1.375 1.375 0 1 1 2.75 0 1.375 1.375 0 0 1-2.75 0ZM4.125.75a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Zm4.625 2c0-.966.784-1.75 1.75-1.75h2.75c.966 0 1.75.784 1.75 1.75V5.5a1.75 1.75 0 0 1-1.75 1.75H10.5A1.75 1.75 0 0 1 8.75 5.5V2.75ZM13 3h-2.25v2.25H13V3Zm-1.993 7.012.246-1.146c.141-.657 1.08-.657 1.22 0l.246 1.146a1.31 1.31 0 0 0 1.006 1.005l1.145.246c.658.141.658 1.08 0 1.22l-1.145.246a1.31 1.31 0 0 0-1.005 1.005l-.247 1.146c-.14.657-1.079.657-1.22 0l-.246-1.146a1.309 1.309 0 0 0-1.005-1.005l-1.146-.246c-.657-.14-.657-1.079 0-1.22l1.146-.246a1.309 1.309 0 0 0 1.005-1.005ZM2.75 8.75A1.75 1.75 0 0 0 1 10.5v2.75c0 .966.784 1.75 1.75 1.75H5.5a1.75 1.75 0 0 0 1.75-1.75V10.5A1.75 1.75 0 0 0 5.5 8.75H2.75ZM3 13v-2.25h2.25V13H3Z"
+  />
+</svg>

package/dist/svg/icon/icon-ai-tools-20.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.5 5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0ZM5 .5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM11 3a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V3Zm6 0h-4v4h4V3Zm-3.095 9.7.303-1.41c.183-.853 1.402-.853 1.585 0l.303 1.41c.13.604.6 1.076 1.204 1.205l1.41.303c.854.183.854 1.402 0 1.585l-1.41.303a1.569 1.569 0 0 0-1.204 1.204l-.303 1.41c-.183.854-1.402.854-1.585 0l-.303-1.41a1.569 1.569 0 0 0-1.204-1.204l-1.41-.303c-.854-.183-.854-1.402 0-1.585l1.41-.303a1.569 1.569 0 0 0 1.204-1.204ZM3 11a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2H3Zm0 6v-4h4v4H3Z"
+  />
+</svg>

package/dist/svg/icon/icon-ai-tools-24.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.5 6.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm9.811 13.422.34-1.586c.197-.914 1.502-.914 1.698 0l.34 1.586c.15.696.694 1.24 1.39 1.39l1.586.34c.914.196.914 1.5 0 1.697l-1.587.34a1.81 1.81 0 0 0-1.388 1.39l-.34 1.586c-.197.914-1.502.914-1.698 0l-.34-1.587a1.809 1.809 0 0 0-1.39-1.388l-1.586-.34c-.914-.197-.914-1.502 0-1.698l1.586-.34a1.809 1.809 0 0 0 1.39-1.39ZM2 15.25A2.25 2.25 0 0 1 4.25 13h4.5A2.25 2.25 0 0 1 11 15.25v4.5A2.25 2.25 0 0 1 8.75 22h-4.5A2.25 2.25 0 0 1 2 19.75v-4.5ZM4.25 15a.25.25 0 0 0-.25.25v4.5c0 .138.112.25.25.25h4.5a.25.25 0 0 0 .25-.25v-4.5a.25.25 0 0 0-.25-.25h-4.5Zm11-13A2.25 2.25 0 0 0 13 4.25v4.5A2.25 2.25 0 0 0 15.25 11h4.5A2.25 2.25 0 0 0 22 8.75v-4.5A2.25 2.25 0 0 0 19.75 2h-4.5ZM15 4.25a.25.25 0 0 1 .25-.25h4.5a.25.25 0 0 1 .25.25v4.5a.25.25 0 0 1-.25.25h-4.5a.25.25 0 0 1-.25-.25v-4.5Z"
+  />
+</svg>