@dso-toolkit/core 84.0.0 → 84.1.0

package/dist/cjs/{dso-icon.cjs.entry.js → dso-icon_2.cjs.entry.js}

@@ -1,6 +1,10 @@
 'use strict';
 
 var index = require('./index-DDpKNH_F.js');
+var positionTooltip_function = require('./position-tooltip.function-ByMSSaYN.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-BQpcPpgi.js');
+require('./floating-ui.dom-CHD5ZW0W.js');
+require('./clsx-BtxeOLZW.js');
 
 var air = `<svg id="air" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M24,8h0a.6.6,0,0,1-.38.56l-.1,0h0A8.18,8.18,0,0,0,21,10c-.21.55.33,2.11.77,3a.61.61,0,0,1-.12.71.63.63,0,0,1-.39.17,4.8,4.8,0,0,0-4-2.15H17a4.58,4.58,0,0,0-.37-.69A3.07,3.07,0,0,0,19,8.62h0a2.24,2.24,0,0,0,.06-.52s0-.07,0-.1,0-.07,0-.1A2.24,2.24,0,0,0,19,7.38h0a3.07,3.07,0,0,0-6,0h0a2.24,2.24,0,0,0-.06.52s0,.07,0,.1,0,.06,0,.1a.77.77,0,0,0,0,.15,6.49,6.49,0,0,0-4.51.35l-.06,0A.61.61,0,0,1,8,8.09V8H8V7.91a.61.61,0,0,1,.37-.48l.11,0h0A13.68,13.68,0,0,0,11.08,6a9.37,9.37,0,0,0-.86-3,.62.62,0,0,1,.83-.81,9.12,9.12,0,0,0,2.8.89H14A6.79,6.79,0,0,0,15.42.42a.61.61,0,0,1,1.15,0,8.43,8.43,0,0,0,1.65,2.76h.13a7.76,7.76,0,0,0,2.58-.91.61.61,0,0,1,.84.81c-.44.89-1,2.45-.77,3a8.18,8.18,0,0,0,2.48,1.33h0l.1,0A.6.6,0,0,1,24,8ZM10.68,22.34a5.15,5.15,0,0,1-3.12,1,4.72,4.72,0,0,1-4.81-3.76l-.14-.45h-.5A2,2,0,0,1,0,17.24a2,2,0,0,1,2.11-1.92,2.17,2.17,0,0,1,1.32.43l.4.29.37-.32a5,5,0,0,1,2.18-1.09l.44-.24V14a4.17,4.17,0,0,1,4.35-4,4.24,4.24,0,0,1,4.3,3.43l.1.67.69-.25a3,3,0,0,1,1-.17A2.64,2.64,0,0,1,20,16.19a2.32,2.32,0,0,1,0,.46l-.08.38.38.18A2.93,2.93,0,0,1,22,19.83a3.12,3.12,0,0,1-3.24,3,3.52,3.52,0,0,1-1.71-.45L16.47,22l-.26.58a2.58,2.58,0,0,1-4.62,0l-.3-.68Z"/>
@@ -122,6 +126,11 @@ var cultural = `<svg id="cultural" xmlns="http://www.w3.org/2000/svg" viewBox="0
   <path fill="currentColor" d="M6,18H4V10H6Zm4-8H8v8h2Zm6,0H14v8h2Zm4,0H18v8h2Zm1,11V19H3v2H1v2H23V21Zm.09-12H2.92c-1,0-1.21-.45-.53-1l8.2-6.6a2.12,2.12,0,0,1,2.49,0L21.6,8C22.29,8.56,22.06,9,21.09,9ZM14,6a2,2,0,1,0-2,2A2,2,0,0,0,14,6Z"/>
 </svg>`;
 
+var documentPencil = `<svg id="document-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M11.0439 6.77319H6.33301V18.2283H15.667V12.4109L17 11.0779V18.2273C16.9998 18.93 16.4032 19.5007 15.667 19.5007H6.33301C5.59687 19.5006 5.00016 18.93 5 18.2273V6.77319C5.00021 6.07058 5.59691 5.50091 6.33301 5.50073H12.3164L11.0439 6.77319ZM11.1201 14.0525L8.3125 14.9744C8.23058 15.0201 8.12797 15.0054 8.06152 14.9392C7.99523 14.8728 7.98062 14.7702 8.02637 14.6882L8.94336 11.8816L11.1201 14.0525ZM17.4111 7.77417L11.6045 13.5447L9.42188 11.3738L15.2285 5.59741L17.4111 7.77417ZM16.6582 4.50366C16.8354 4.52137 16.9985 4.61055 17.1084 4.75073L18.2754 5.91772C18.5455 6.15243 18.5771 6.5618 18.3457 6.83472L17.9541 7.21948L15.7773 5.04272L16.168 4.65796C16.3034 4.54203 16.4808 4.48603 16.6582 4.50366Z" fill="currentColor"/>
+</svg>
+`;
+
 var document = `<svg id="document" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M14.11,1H5A2,2,0,0,0,3,3V21a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2V7.89ZM19,21H5V3h8V9h6Zm-2-2H7V17H17Zm0-4H7V13H17Z"/>
 </svg>
@@ -608,6 +617,7 @@ const icons = [
     { alias: "crown", svg: crown },
     { alias: "cultural", svg: cultural },
     { alias: "document", svg: document },
+    { alias: "document-pencil", svg: documentPencil },
     { alias: "download", svg: download },
     { alias: "email", svg: email },
     { alias: "energy", svg: energy },
@@ -698,11 +708,591 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return index.h("span", { key: 'cac8baa2fe7c9b7d8930cdd858ad1b0635661536', class: "icon-container", innerHTML: icon.svg });
+            return index.h("span", { key: 'd5680e2f282290bae1f770e157c8495e874d1274', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
 Icon.style = iconCss();
 
+const iconButtonCss = () => `.dso-tooltip {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+}
+.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-tooltip {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #666;
+  color: #fff;
+}
+.dso-tooltip {
+  border-radius: 4px;
+  overflow: unset;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s;
+}
+.dso-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
+.dso-tooltip .tooltip-inner {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+}
+.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-tooltip .tooltip-inner {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #666;
+  color: #fff;
+}
+.dso-tooltip .tooltip-inner {
+  font-family: Asap, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  padding-block: 0;
+  padding-inline: 8px;
+  border-radius: 4px;
+  line-height: 1.5;
+  max-inline-size: 320px;
+}
+.dso-tooltip .tooltip-arrow {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+}
+.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-tooltip .tooltip-arrow {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #666;
+  color: #fff;
+}
+.dso-tooltip .tooltip-arrow {
+  position: absolute;
+  border-start-start-radius: 4px;
+  block-size: 8px;
+  inline-size: 8px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+:host {
+  display: inline-block;
+  line-height: 1;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.dso-secondary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+.dso-secondary:focus, .dso-secondary:focus-visible {
+  outline-offset: 2px;
+}
+.dso-secondary:active {
+  outline: 0;
+}
+.dso-secondary.extern::after, .dso-secondary.download::after {
+  content: "";
+  display: inline-block;
+  margin-inline-start: 8px;
+}
+.dso-secondary {
+  background-color: var(--_dso-button-secondary-background-color, #fff);
+  border-color: var(--_dso-button-secondary-border-color, #39870c);
+  color: var(--_dso-button-secondary-color, #39870c);
+}
+.dso-secondary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+.dso-secondary:hover {
+  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
+}
+.dso-secondary:active {
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
+  color: var(--_dso-button-secondary-active-color, #fff);
+}
+.dso-secondary[disabled], .dso-secondary[disabled]:hover {
+  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
+  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+}
+.dso-secondary.dso-small {
+  line-height: 1rem;
+}
+.dso-secondary.dso-small dso-icon, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+.dso-secondary.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-secondary.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-secondary.dso-extra-small {
+  line-height: 1rem;
+}
+.dso-secondary.dso-extra-small dso-icon, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+.dso-secondary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-secondary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-secondary.dso-extra-small {
+  padding-block: 9px;
+}
+.dso-secondary dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+.dso-secondary span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+.dso-secondary dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+.dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.dso-secondary.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-secondary.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-secondary {
+  padding-inline: calc(8px - 1px);
+  padding-block: calc(8px - 1px);
+}
+
+.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+.dso-tertiary:focus, .dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+.dso-tertiary:active {
+  outline: 0;
+}
+.dso-tertiary.extern::after, .dso-tertiary.download::after {
+  content: "";
+  display: inline-block;
+  margin-inline-start: 8px;
+}
+.dso-tertiary {
+  padding-inline: 0;
+  padding-block: 0;
+  color: var(--_dso-icon-button-tertiary-color, #39870c);
+  background-color: transparent;
+  border: 0;
+}
+.dso-tertiary:not([disabled]):hover {
+  color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937));
+}
+.dso-tertiary:not([disabled]):active {
+  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #275937));
+}
+.dso-tertiary[disabled] {
+  color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d));
+}
+
+.dso-map {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+.dso-map:focus, .dso-map:focus-visible {
+  outline-offset: 2px;
+}
+.dso-map:active {
+  outline: 0;
+}
+.dso-map {
+  background-color: var(--_dso-button-secondary-background-color, #fff);
+  border-color: var(--_dso-button-secondary-border-color, #39870c);
+  color: var(--_dso-button-secondary-color, #39870c);
+}
+.dso-map {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+.dso-map:hover {
+  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
+}
+.dso-map:active {
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
+  color: var(--_dso-button-secondary-active-color, #fff);
+}
+.dso-map[disabled], .dso-map[disabled]:hover {
+  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
+  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+}
+.dso-map.dso-small {
+  line-height: 1rem;
+}
+.dso-map.dso-small dso-icon, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+.dso-map.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-map.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-map.dso-extra-small {
+  line-height: 1rem;
+}
+.dso-map.dso-extra-small dso-icon, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+.dso-map.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-map.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-map.dso-extra-small {
+  padding-block: 9px;
+}
+.dso-map dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+.dso-map span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+.dso-map dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+.dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.dso-map.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+.dso-map.dso-spinner-left:not([disabled]):hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-map.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+.dso-map.dso-spinner-right:not([disabled]):hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-map {
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  border: 0;
+  font-weight: 600;
+  margin-inline-end: 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
+  white-space: nowrap;
+}
+.dso-map:focus, .dso-map:focus-visible {
+  outline-offset: -1px;
+}
+.dso-map:has(span.sr-only):has(dso-icon) {
+  padding: 8px;
+  min-inline-size: auto;
+  block-size: 40px;
+  inline-size: 40px;
+}
+.dso-map {
+  padding-inline: 8px;
+  padding-block: 8px;
+  border: 0;
+  margin-inline-end: 0;
+  box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));
+  border-radius: var(--_dso-icon-button-map-border-radius, 4px);
+}
+
+.icon-button {
+  min-inline-size: auto;
+  cursor: pointer;
+}
+.icon-button[disabled] {
+  cursor: default;
+}`;
+
+const IconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoClick = index.createEvent(this, "dsoClick", 3);
+        /**
+         * The variant of the Icon Button.
+         */
+        this.variant = "secondary";
+        /**
+         * The placement of the tooltip on hover and focus of the Icon Button.
+         */
+        this.tooltipPlacement = "top";
+        /**
+         * To disable the Icon Button
+         */
+        this.disabled = false;
+        this.showTooltip = false;
+        this.lastClickTime = 0;
+        this.tooltipShowDelay = 500;
+        this.handleShowTooltip = () => {
+            if (this.disabled) {
+                return;
+            }
+            // Don't show the tooltip if the button is clicked within 500ms of the last click
+            if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
+                return;
+            }
+            this.clearToolTipTimeout();
+            this.tooltipTimeout = window.setTimeout(() => {
+                var _a, _b;
+                if (!((_a = this.tooltipElRef) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+                    return;
+                }
+                this.showTooltip = true;
+                (_b = this.tooltipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
+                if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {
+                    this.cleanUp = positionTooltip_function.positionTooltip({
+                        referenceElement: this.buttonElRef,
+                        tipRef: this.tooltipElRef,
+                        tipArrowRef: this.tipArrowElRef,
+                        placementTip: this.tooltipPlacement,
+                        topPositionSmallViewPort: false,
+                        halfMainAxisOffset: false,
+                        forceVisible: true,
+                    });
+                }
+            }, this.tooltipShowDelay);
+        };
+        this.clearToolTipTimeout = () => {
+            if (this.tooltipTimeout) {
+                clearTimeout(this.tooltipTimeout);
+            }
+        };
+        this.handleHideTooltip = () => {
+            var _a;
+            this.clearToolTipTimeout();
+            this.showTooltip = false;
+            (_a = this.tooltipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            if (!this.showTooltip && this.cleanUp) {
+                this.cleanUp();
+                this.cleanUp = undefined;
+            }
+        };
+        this.handleClick = (e) => {
+            this.lastClickTime = Date.now();
+            this.handleHideTooltip();
+            this.dsoClick.emit({ originalEvent: e });
+        };
+    }
+    /**
+     * Focuses the button.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.buttonElRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.clearToolTipTimeout();
+        (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanUp = undefined;
+    }
+    render() {
+        return (index.h("button", { key: '5045ce3b4d8d0bf8538501dee9f573ee8f6cee38', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: '3ce28c59e0f6c2a137c9f65958765e5ac3d4f239', icon: this.icon }), index.h(tooltip_functionalComponent.Tooltip, { key: 'ed39dd1770074c20e3103067ddc1d32db8d0d2d1', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+    }
+};
+IconButton.style = iconButtonCss();
+
 exports.dso_icon = Icon;
-//# sourceMappingURL=dso-icon.entry.cjs.js.map
+exports.dso_icon_button = IconButton;
+//# sourceMappingURL=dso-icon.dso-icon-button.entry.cjs.js.map

package/dist/cjs/dso-info_2.cjs.entry.js

@@ -77,7 +77,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (index.h(index.Fragment, { key: 'a55fb2054b681d52958d148268deae88e68c1537' }, index.h("div", { key: 'd909064a63e008267559be99ea0468da95832ef7', class: "dso-selectable-container" }, index.h("div", { key: '74df5bd51d27a725a54b94725006886235cc425e', class: "dso-selectable-input-wrapper" }, index.h("input", { key: 'd6c7cd539f4a6709418c8001d7daad6ed92825c2', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: 'f93aab0f09595248ad9d42b60b877af5c4623c6a', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: '363378682d4159a1475137278d47da607455eea1', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '484259d2cf6716497b3a888d294a1352adf4b8e3' }, index.h("slot", { key: 'efb26e3615fcbb47d5bbd4f5e4da5d5be80a74bb', name: "info" })))), index.h("slot", { key: 'bee889f79b7f36a66735d39557df63a10b11a589', name: "options" })));
+        return (index.h(index.Fragment, { key: 'c0799053617f1d21fc7c71bf1dcdd2c0474e5a35' }, index.h("div", { key: '6bb6764d33f362972c2ed98fa6dfc6b04d03384a', class: "dso-selectable-container" }, index.h("div", { key: '4d5879b1e86e44112b6d54cd4bb71ceb867fd57a', class: "dso-selectable-input-wrapper" }, index.h("input", { key: '2f9bc05efb1c0e53d6ae3a635cad32f1c9df9ecd', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '13b298f292c430e0c87f2d7881bd2850d590c6be', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: '6633b7e818a3ead5385442e1e6baf4afe5d7c703', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '9d51a92a11c7d6da8bde627b41b5cae4a47b9b74' }, index.h("slot", { key: 'c69688647aed9084517ed2915f2d67162eb33c73', name: "info" })))), index.h("slot", { key: '51cbe5b6d5f9705e1e42a04e86898c4c56b16142', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/cjs/dso-label_3.cjs.entry.js

@@ -199,7 +199,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '1529a7bb19c7d520afe3680c2f24ff2cead4f86d' }, index$1.h("button", Object.assign({ key: '4ee12c87128604cfc5ad871805bcac388ed4bb69', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: 'f1ba967c118604c6ccecda9c0fc0f26c50640515', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: 'aa2124e210b38429e4e0ac00a7da7f6c25f94f60', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '563e438bb5c49bbba49d30cbe476eebb28102375', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '68c9f233ce1c6ef2be07048927596635c9050f49', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '0fc8fb13283ea99826a75c585d374d71ba6aef1a', htmlFor: this.identifier }, index$1.h("slot", { key: '33a03979232fbcb4b54d8dcf43f7092b893e3739' })))));
+        return (index$1.h(index$1.Fragment, { key: '723b3e8553042c3515e572c8b0a5ca94c933a141' }, index$1.h("button", Object.assign({ key: 'cfcf12b35df8344f3d442455bed59ad9176dbbfc', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: '9e0e9411c3b49758f6a54031c9f5e16d33c80e4e', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: 'be8ed967ceaa6e94b2c5353cb4fe0c9793a1a1a6', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: 'd6b53ba0db712a9418a17414ee256dc3847be87b', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '3468791757f3b9ae496e51ae21128c8e4e719b2d', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '1c2b74ebf9186ef36cf42e2873f1934bc63b39ca', htmlFor: this.identifier }, index$1.h("slot", { key: '63c08372dfbd6114df753cd72c728357fd49e618' })))));
     }
     get host() { return index$1.getElement(this); }
 };