@platformscode/core 0.0.43 → 0.0.45

package/dist/collection/components/dga-file-upload/dga-file-upload.css

@@ -778,15 +778,15 @@ a:focus {
   font: 500 18px/28px "IBMPlexSansArabic";
 }
 
-.text-md-medium {
+.text-md-medium, .dga-btn--lg {
   font: 500 16px/24px "IBMPlexSansArabic";
 }
 
-.text-sm-medium, .file-upload__file-name {
+.text-sm-medium, .dga-btn--md, .file-upload__file-name {
   font: 500 14px/20px "IBMPlexSansArabic";
 }
 
-.text-xs-medium {
+.text-xs-medium, .dga-btn--sm {
   font: 500 12px/18px "IBMPlexSansArabic";
 }
 
@@ -2318,7 +2318,7 @@ a:focus {
   gap: var(--spacing-xl);
   width: 100%;
   border-radius: var(--radius-4, 4px);
-  background: var(--colors-gray-neutral-50);
+  background: var(--background-neutral-100, #F3F4F6);
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23D2D6DBFF' stroke-width='2' stroke-dasharray='12%2c6.5' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e");
 }
 .file-upload__icon {
@@ -2417,4 +2417,455 @@ a:focus {
 }
 .file-upload--disabled .file-upload__icon, .file-upload--disabled .file-upload__instructions, .file-upload--disabled .file-upload__formats {
   color: var(--text-default-disabled);
+}
+
+.dga-btn {
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  border: 0;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--buttons-lg-gap);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.dga-btn:focus-visible {
+  outline: 2px solid var(--border-black);
+}
+.dga-btn-icon {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  justify-content: center;
+  align-items: center;
+}
+.dga-btn-label {
+  display: inline-flex;
+  line-height: normal;
+}
+.dga-btn--lg {
+  height: 40px;
+  padding-inline: var(--buttons-lg-padding);
+}
+.dga-btn--lg span.dga-btn-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+.dga-btn--md {
+  height: 32px;
+  padding-inline: var(--buttons-md-padding);
+}
+.dga-btn--md span.dga-btn-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+.dga-btn--sm {
+  height: 24px;
+  padding-inline: var(--buttons-sm-padding);
+}
+.dga-btn--sm span.dga-btn-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.dga-btn--icon {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dga-btn--icon.dga-btn--lg {
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+}
+.dga-btn--icon-menu.dga-btn--lg {
+  width: auto;
+  padding-inline: var(--buttons-lg-padding);
+}
+.dga-btn--icon.dga-btn--md {
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+}
+.dga-btn--icon-menu.dga-btn--md {
+  width: auto;
+  padding-inline: var(--buttons-md-padding);
+}
+.dga-btn--icon.dga-btn--sm {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+.dga-btn--icon-menu.dga-btn--sm {
+  width: auto;
+  padding-inline: var(--buttons-sm-padding);
+}
+.dga-btn--primary-neutral {
+  background-color: var(--button-background-black-default);
+  color: var(--text-oncolor-primary);
+}
+.dga-btn--primary-neutral:hover {
+  background-color: var(--button-background-black-hovered);
+}
+.dga-btn--primary-neutral:visited {
+  background-color: var(--button-background-black-pressed);
+}
+.dga-btn--primary-neutral:active {
+  background-color: var(--button-background-black-selected);
+  outline: none;
+}
+.dga-btn--primary-neutral:active::after {
+  display: none !important;
+}
+.dga-btn--primary-neutral:disabled, .dga-btn--primary-neutral[disabled] {
+  background: var(--background-disabled);
+  color: var(--text-default-disabled);
+}
+.dga-btn--primary-neutral--on-color {
+  background-color: var(--button-background-oncolor-default);
+  color: var(--text-default);
+}
+.dga-btn--primary-neutral--on-color:hover {
+  background-color: var(--button-background-oncolor-hovered);
+}
+.dga-btn--primary-neutral--on-color:visited, .dga-btn--primary-neutral--on-color.selected {
+  background-color: var(--button-background-oncolor-selected);
+}
+.dga-btn--primary-neutral--on-color:active {
+  background-color: var(--button-background-oncolor-pressed);
+}
+.dga-btn--primary-neutral--on-color:disabled, .dga-btn--primary-neutral--on-color[disabled] {
+  background-color: var(--button-background-disabled-on-color);
+  color: var(--text-default-oncolor-disabled);
+}
+.dga-btn--primary-brand {
+  background-color: var(--button-background-primary-default);
+  color: var(--text-oncolor-primary);
+}
+.dga-btn--primary-brand:hover {
+  background: var(--button-background-primary-hovered);
+}
+.dga-btn--primary-brand:visited {
+  background: var(--button-background-primary-pressed);
+}
+.dga-btn--primary-brand:active {
+  background: var(--button-background-primary-selected);
+  outline: none;
+}
+.dga-btn--primary-brand:active::after {
+  display: none !important;
+}
+.dga-btn--primary-brand:disabled, .dga-btn--primary-brand[disabled] {
+  background: var(--background-disabled);
+  color: var(--text-default-disabled);
+}
+.dga-btn--primary-brand--on-color {
+  background-color: var(--button-background-oncolor-default);
+  color: var(--text-default);
+}
+.dga-btn--primary-brand--on-color:hover {
+  background-color: var(--button-background-oncolor-hovered);
+}
+.dga-btn--primary-brand--on-color:visited, .dga-btn--primary-brand--on-color.selected {
+  background-color: var(--button-background-oncolor-pressed);
+}
+.dga-btn--primary-brand--on-color:active {
+  background-color: var(--button-background-oncolor-pressed);
+}
+.dga-btn--primary-brand--on-color:disabled, .dga-btn--primary-brand--on-color[disabled] {
+  background-color: var(--button-background-disabled-on-color);
+  color: var(--text-default-oncolor-disabled);
+}
+.dga-btn--secondary {
+  background-color: var(--button-background-neutral-default);
+  color: var(--colors-text-primary);
+}
+.dga-btn--secondary:hover {
+  background: var(--button-background-neutral-default-hoverd);
+}
+.dga-btn--secondary:visited {
+  background: var(--button-background-neutral-default-pressed);
+}
+.dga-btn--secondary:active {
+  background: var(--button-background-neutral-default-selected);
+  outline: none;
+}
+.dga-btn--secondary:disabled, .dga-btn--secondary[disabled] {
+  background: var(--background-disabled);
+  color: var(--text-default-disabled);
+}
+.dga-btn--secondary--on-color {
+  background-color: var(--button-background-transparent-hovered);
+  color: var(--text-oncolor-primary);
+}
+.dga-btn--secondary--on-color:hover {
+  background-color: var(--button-background-transparent-hovered);
+}
+.dga-btn--secondary--on-color:visited, .dga-btn--secondary--on-color.selected {
+  background-color: var(--Button-button-background-transparent-selected);
+}
+.dga-btn--secondary--on-color:active {
+  background-color: var(--Button-button-background-transparent-pressed);
+  color: var(--text-oncolor-primary);
+}
+.dga-btn--secondary--on-color:disabled, .dga-btn--secondary--on-color[disabled] {
+  background-color: var(--button-background-disabled-on-color);
+  color: var(--text-default-oncolor-disabled);
+}
+.dga-btn--secondary-outline {
+  outline: 1px solid var(--border-neutral-secondary);
+  background-color: transparent;
+  color: var(--text-default);
+  mix-blend-mode: multiply;
+}
+.dga-btn--secondary-outline:hover {
+  background: var(--button-background-neutral-default);
+}
+.dga-btn--secondary-outline:visited {
+  background: var(--button-background-neutral-pressed);
+  outline: 1px solid var(--border-neutral-primary);
+}
+.dga-btn--secondary-outline:active {
+  background: var(--button-background-neutral-selected);
+  outline: 1px solid var(--border-neutral-primary);
+}
+.dga-btn--secondary-outline:disabled, .dga-btn--secondary-outline[disabled] {
+  background: transparent;
+  color: var(--text-default-disabled);
+  border: 1px solid var(--border-neutral-secondary);
+}
+.dga-btn--secondary-outline--on-color {
+  outline-color: var(--border-white-40);
+  color: var(--text-oncolor-primary);
+  mix-blend-mode: normal;
+}
+.dga-btn--secondary-outline--on-color:hover {
+  background: var(--button-background-transparent-hovered);
+  outline-color: var(--border-white-40);
+}
+.dga-btn--secondary-outline--on-color:visited, .dga-btn--secondary-outline--on-color.selected {
+  background: var(--button-background-transparent-hovered);
+  outline-color: var(--border-white-40);
+}
+.dga-btn--secondary-outline--on-color:active {
+  background: var(--button-background-transparent-hovered);
+  outline-color: var(--border-white-40);
+}
+.dga-btn--secondary-outline--on-color:disabled, .dga-btn--secondary-outline--on-color[disabled] {
+  outline-color: 1px solid var(--icon-default-oncolor-disabled);
+  color: var(--text-default-oncolor-disabled);
+}
+.dga-btn--subtle, .dga-btn--close, .dga-btn--sort {
+  background-color: transparent;
+  color: var(--colors-text-primary);
+  mix-blend-mode: multiply;
+}
+.dga-btn--subtle:hover, .dga-btn--close:hover, .dga-btn--sort:hover {
+  background: var(--button-background-neutral-default);
+}
+.dga-btn--subtle:visited, .dga-btn--close:visited, .dga-btn--sort:visited {
+  background: var(--button-background-neutral-pressed);
+}
+.dga-btn--subtle:active, .dga-btn--close:active, .dga-btn--sort:active {
+  background: var(--button-background-neutral-selected);
+  outline: none;
+}
+.dga-btn--subtle:active::after, .dga-btn--close:active::after, .dga-btn--sort:active::after {
+  display: none !important;
+}
+.dga-btn--subtle:disabled, .dga-btn--subtle[disabled], .dga-btn--close:disabled, .dga-btn--close[disabled], .dga-btn--sort:disabled, .dga-btn--sort[disabled] {
+  background: transparent;
+  color: var(--text-default-disabled);
+}
+.dga-btn--transparent {
+  background-color: transparent;
+  color: var(--text-default);
+}
+.dga-btn--transparent:hover {
+  background: transparent;
+  color: var(--button-background-primary-hovered);
+}
+.dga-btn--transparent:visited {
+  color: var(--button-background-primary-pressed);
+}
+.dga-btn--transparent:active {
+  color: var(--button-background-primary-selected);
+  outline: none;
+}
+.dga-btn--transparent:active::after {
+  display: none !important;
+}
+.dga-btn--transparent:disabled, .dga-btn--transparent[disabled] {
+  background: transparent;
+  color: var(--text-default-disabled);
+}
+.dga-btn--close {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  padding: var(--spacing-md);
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-sm);
+  background-color: transparent;
+  color: var(--icon-default);
+}
+.dga-btn--close:hover {
+  background: var(--button-background-neutral-hovered);
+  color: var(--icon-default);
+}
+.dga-btn--close:active {
+  background-color: var(--button-background-neutral-pressed);
+}
+.dga-btn--des-primary {
+  background-color: var(--button-background-danger-primary-default);
+  color: var(--text-oncolor-primary);
+}
+.dga-btn--des-primary:hover {
+  background: var(--button-background-danger-primary-hovered);
+}
+.dga-btn--des-primary:visited {
+  background: var(--button-background-danger-primary-pressed);
+}
+.dga-btn--des-primary:active {
+  background: var(--button-background-danger-primary-selected);
+  outline: none;
+}
+.dga-btn--des-primary:active::after {
+  display: none !important;
+}
+.dga-btn--des-primary:disabled, .dga-btn--des-primary[disabled] {
+  background: var(--background-disabled);
+  color: var(--text-default-disabled);
+}
+.dga-btn--des-secondary {
+  background-color: var(--button-background-danger-secondary-default);
+  color: var(--text-error);
+}
+.dga-btn--des-secondary:hover {
+  background: var(--button-background-danger-secondary-hovered);
+}
+.dga-btn--des-secondary:visited {
+  background: var(--button-background-danger-secondary-pressed);
+}
+.dga-btn--des-secondary:active {
+  background: var(--button-background-danger-secondary-selected);
+  outline: none;
+}
+.dga-btn--des-secondary:active::after {
+  display: none !important;
+}
+.dga-btn--des-secondary:disabled, .dga-btn--des-secondary[disabled] {
+  background: var(--background-disabled);
+  color: var(--text-default-disabled);
+}
+.dga-btn--des-secondary-outline {
+  outline: 1px solid var(--border-error-light);
+  background-color: transparent;
+  color: var(--text-error);
+  mix-blend-mode: multiply;
+}
+.dga-btn--des-secondary-outline:hover {
+  background: var(--button-background-danger-secondary-hovered);
+}
+.dga-btn--des-secondary-outline:visited {
+  background: var(--button-background-danger-secondary-pressed);
+}
+.dga-btn--des-secondary-outline:active {
+  background: var(--button-background-danger-secondary-selected);
+  outline: 1px solid var(--border-error-light);
+}
+.dga-btn--des-secondary-outline:active::after {
+  display: none !important;
+}
+.dga-btn--des-secondary-outline:disabled, .dga-btn--des-secondary-outline[disabled] {
+  background: transparent;
+  color: var(--text-default-disabled);
+  outline: 1px solid var(--border-neutral-secondary);
+}
+.dga-btn--des-subtle {
+  background-color: transparent;
+  color: var(--text-error);
+}
+.dga-btn--des-subtle:hover {
+  background: var(--button-background-danger-secondary-hovered);
+}
+.dga-btn--des-subtle:visited {
+  background: var(--button-background-danger-secondary-pressed);
+}
+.dga-btn--des-subtle:active {
+  background: var(--button-background-danger-secondary-selected);
+  outline: none;
+}
+.dga-btn--des-subtle:active::after {
+  display: none !important;
+}
+.dga-btn--des-subtle:disabled, .dga-btn--des-subtle[disabled] {
+  background: transparent;
+  color: var(--text-default-disabled);
+}
+.dga-btn--des-transparent {
+  background-color: transparent;
+  color: var(--button-background-danger-primary-default);
+}
+.dga-btn--des-transparent:hover {
+  background: transparent;
+  color: var(--button-background-danger-primary-hovered);
+}
+.dga-btn--des-transparent:visited {
+  color: var(--button-background-danger-primary-pressed);
+}
+.dga-btn--des-transparent:active {
+  color: var(--button-background-danger-primary-selected);
+  outline: none;
+}
+.dga-btn--des-transparent:active::after {
+  display: none !important;
+}
+.dga-btn--des-transparent:disabled, .dga-btn--des-transparent[disabled] {
+  background: transparent;
+  color: var(--text-default-disabled);
+}
+.dga-btn.dga-btn--subtle-on-color, .dga-btn.dga-btn--close-on-color {
+  background-color: transparent;
+  color: var(--text-oncolor-primary);
+}
+.dga-btn.dga-btn--subtle-on-color:hover, .dga-btn.dga-btn--close-on-color:hover {
+  background-color: var(--button-background-transparent-hovered);
+}
+.dga-btn.dga-btn--subtle-on-color:visited, .dga-btn.dga-btn--subtle-on-color.selected, .dga-btn.dga-btn--close-on-color:visited, .dga-btn.dga-btn--close-on-color.selected {
+  background-color: var(--button-background-transparent-selected);
+}
+.dga-btn.dga-btn--subtle-on-color:active, .dga-btn.dga-btn--close-on-color:active {
+  color: var(--text-oncolor-primary);
+  background-color: var(--button-background-transparent-pressed);
+}
+.dga-btn.dga-btn--subtle-on-color:disabled, .dga-btn.dga-btn--subtle-on-color[disabled], .dga-btn.dga-btn--close-on-color:disabled, .dga-btn.dga-btn--close-on-color[disabled] {
+  background-color: transparent;
+  color: var(--text-default-oncolor-disabled);
+}
+.dga-btn--transparent-on-color {
+  background-color: transparent;
+  color: var(--text-oncolor-primary);
+}
+.dga-btn--transparent-on-color:hover {
+  color: var(--button-label-transparent-hovered-on-color);
+}
+.dga-btn--transparent-on-color:visited, .dga-btn--transparent-on-color.selected {
+  color: var(--button-label-transparent-selected-on-color);
+}
+.dga-btn--transparent-on-color:active {
+  color: var(--button-label-transparent-pressed-on-color);
+}
+.dga-btn--transparent-on-color:disabled, .dga-btn--transparent-on-color[disabled] {
+  background-color: transparent;
+  color: var(--text-default-oncolor-disabled);
 }

package/dist/collection/components/dga-file-upload/dga-file-upload.js

@@ -74,12 +74,12 @@ export class DgaFileUpload {
     }
     renderFile(file, index) {
         if (file.uploadStatus === 'error') {
-            return (h("div", { class: "file-upload__file-item--error" }, h("div", { class: "file-upload__file-item" }, h("span", { class: "file-upload__file-status file-upload__file-status--error" }, h("dga-icon", { name: "alert-circle", variant: "solid", size: 20 })), h("span", { class: "file-upload__file-name" }, file.name), h("button", { class: "btn btn--close btn--icon btn--sm", onClick: () => this.handleDeleteFile(index, file) }, h("span", { class: "btn-icon" }, h("dga-icon", { name: "multiplication-sign", variant: "stroke", size: 20 })))), h("div", { class: "file-upload__file-item-msg" }, file.errorMessage ? file.errorMessage : 'Here goes the helper text.')));
+            return (h("div", { class: "file-upload__file-item--error" }, h("div", { class: "file-upload__file-item" }, h("span", { class: "file-upload__file-status file-upload__file-status--error" }, h("dga-icon", { name: "checkmark-circle-04", variant: "solid", size: 20 })), h("span", { class: "file-upload__file-name" }, file.name), h("button", { class: "dga-btn dga-btn--close dga-btn--icon dga-btn--sm", onClick: () => this.handleDeleteFile(index, file) }, h("span", { class: "dga-btn-icon" }, h("dga-icon", { name: "multiplication-sign", variant: "stroke", size: 16 })))), h("div", { class: "file-upload__file-item-msg" }, file.errorMessage ? file.errorMessage : 'Here goes the helper text.')));
         }
-        return (h("div", { class: "file-upload__file-item" }, h("span", { class: `file-upload__file-status file-upload__file-status--${file.uploadStatus}` }, file.uploadStatus === 'uploading' && file.progress && h("dga-loading", { size: "tiny", variant: "neutral" }), file.uploadStatus === 'complete' && h("dga-icon", { name: "checkmark-circle-02", variant: "solid", size: 20 })), h("span", { class: "file-upload__file-name" }, file.name), h("button", { class: "btn btn--close btn--icon btn--sm", onClick: () => this.handleDeleteFile(index, file) }, h("span", { class: "btn-icon" }, h("dga-icon", { name: "multiplication-sign", variant: "stroke", size: 20 })))));
+        return (h("div", { class: "file-upload__file-item" }, h("span", { class: `file-upload__file-status file-upload__file-status--${file.uploadStatus}` }, file.uploadStatus === 'uploading' && file.progress && h("dga-loading", { size: "tiny", variant: "neutral" }), file.uploadStatus === 'complete' && h("dga-icon", { name: "checkmark-circle-02", variant: "solid", size: 20 })), h("span", { class: "file-upload__file-name" }, file.name), h("button", { class: "dga-btn dga-btn--close dga-btn--icon dga-btn--sm", onClick: () => this.handleDeleteFile(index, file) }, h("span", { class: "dga-btn-icon" }, h("dga-icon", { name: "multiplication-sign", variant: "stroke", size: 20 })))));
     }
     render() {
-        return (h("div", { key: '67fa89473491cd7fa68136e8405a75a52dfe7cae', class: `file-upload ${this.dragState ? 'file-upload--drag-over' : ''} ${this.disabled ? 'file-upload--disabled' : ''}` }, h("input", { key: 'afc5f16f96b9ea2f9dea42ce5fac0abde89872ac', type: "file", id: this.id, name: this.name, class: "file-upload__input", accept: this.accept, multiple: this.multiple, "aria-hidden": "true", onChange: this.handleFileSelection, ref: el => (this.fileInputRef = el) }), h("label", { key: '96903057f063c947b457f330652dca82a52ed25f', htmlFor: this.id, class: "file-upload__drop-area" }, h("span", { key: 'd66e79c9423778667d4f4e6d1827ba583f90b9db', class: "file-upload__icon" }, h("dga-icon", { key: 'df9b52864a0cdd923138c8b8393b733d79a8c74b', name: "file-upload", variant: "stroke", size: 20 })), h("div", { key: '03541b5047cdfe7f08dd39382f0c70d5035eee2f', class: "file-upload__content" }, h("p", { key: 'fa1ef2f4a8d8aab4eda68b7214b97332a3e30262', class: "file-upload__instructions" }, this.title), h("p", { key: '5dead385897627bc6c865d5c44029770f3b26000', class: "file-upload__formats" }, this.fileTypesText)), h("button", { key: 'cb272a98a332c209f5f5f8b349068a1320f804f5', class: "btn btn--md btn--secondary", "aria-label": "Browse Files", disabled: this.dragState || this.disabled, type: "button", onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); } }, h("span", { key: '41cdcddedef2dfdc8f0abb98134ce5d9a4f79e01' }, this.actionName))), h("div", { key: 'eee66c1fe498544d829f01342385705bbca110a9', class: "file-upload__files-list" }, this.files.map((file, index) => this.renderFile(file, index)))));
+        return (h("div", { key: '438497434496293c6feeb678060365574f59b7a5', class: `file-upload ${this.dragState ? 'file-upload--drag-over' : ''} ${this.disabled ? 'file-upload--disabled' : ''}` }, h("input", { key: 'ac0ed83af1cfe56aae27f4d2200d021aa4a65e17', type: "file", id: this.id, name: this.name, class: "file-upload__input", accept: this.accept, multiple: this.multiple, "aria-hidden": "true", onChange: this.handleFileSelection, ref: el => (this.fileInputRef = el) }), h("label", { key: 'a91708c021305490bb61c9af0beff3e3a9b2e7da', htmlFor: this.id, class: "file-upload__drop-area" }, h("span", { key: '59857af47374c98acafbad6033e88005576409a8', class: "file-upload__icon" }, h("dga-icon", { key: '7f778b86c7a73c9982e3cd2cdf932a52eda3e55f', name: "file-upload", variant: "stroke", size: 24 })), h("div", { key: 'fdf9816ad59ae8278e5588bcb37355a9b8e3f42f', class: "file-upload__content" }, h("p", { key: '3bef0ef47e52823485b5153a2acbb8d4b2e99994', class: "file-upload__instructions" }, this.title), h("p", { key: '565899c627e1e5b5217dcbd2cda3716a2ffaaeb1', class: "file-upload__formats" }, this.fileTypesText)), h("dga-button-v2", { key: '2f827456109c80b61a80b08528698eb516c55f36', disabled: this.dragState || this.disabled, onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); }, variant: "secondary-solid", size: "md", label: this.actionName })), h("div", { key: '5b2e4cd0491ae6e53cc3323554eec5eeb6d8ec5b', class: "file-upload__files-list" }, this.files.map((file, index) => this.renderFile(file, index)))));
     }
     static get is() { return "dga-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-flex/dga-flex.js

@@ -55,7 +55,7 @@ export class DgaFlex {
             justifyContent: this.justify === 'between' ? 'space-between' : this.justify,
             flexWrap: this.wrap ? 'wrap' : 'nowrap'
         };
-        return (h(Host, { key: '66e0d06d5444f6e5672210866dbff053d858bbc1', id: this.componentId, style: this.rootStyles }, h("div", { key: '58b830e489eb3a2d0edfe592aa04330a7886ab96', class: "dga-flex-container", style: styles }, h("slot", { key: 'a0feb0adb5ac1b67eaaa8aa79a600274c8a437b9' }))));
+        return (h(Host, { key: '030a4f253078dc211522758217e47dbe1b861db0', id: this.componentId, style: this.rootStyles }, h("div", { key: '354ceaca31c168794390b415183d5a73df20ddb1', class: "dga-flex-container", style: styles }, h("slot", { key: 'd94e0968cbf4e23570e500c1ab8dfbb20159a11b' }))));
     }
     static get is() { return "dga-flex"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-floating-button/dga-floatingButton.js

@@ -20,7 +20,7 @@ export class FloatingButton {
         return h("dga-icon", Object.assign({ name: iconName }, iconProps));
     }
     render() {
-        return (h("button", { key: 'c02f84a16239285304e2a76b036a7d4a84277250', dir: this.RTL ? 'rtl' : 'ltr', disabled: this.disabled, class: `floating-button-onColor-${this.onColor} floating-button-btn ${this.variant} ${this.size} `, onClick: (event) => this.handleClick(event) }, this.icon && (h("div", { key: '054b33174bfab4a146ee4f7e96e064a3f24582ae', class: "floating-button-icon" }, this.renderIcon(this.icon, this.iconProps))), this.label && !this.iconOnly && h("p", { key: 'e069223147d29c08e0da4358da39aa1d0946f1d2' }, this.label)));
+        return (h("button", { key: '730e5d3cca75e9382d74924f53aff56129335874', dir: this.RTL ? 'rtl' : 'ltr', disabled: this.disabled, class: `floating-button-onColor-${this.onColor} floating-button-btn ${this.variant} ${this.size} `, onClick: (event) => this.handleClick(event) }, this.icon && (h("div", { key: '89428ea8ffb84f4d39a5080f2b923844dc892da1', class: "floating-button-icon" }, this.renderIcon(this.icon, this.iconProps))), this.label && !this.iconOnly && h("p", { key: '3af08f1fc8a9d70fcfa2c9ee18008ed89a56b656' }, this.label)));
     }
     static get is() { return "floating-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/dga-footer/dga-footer.js

@@ -17,7 +17,7 @@ export class DgaFooter {
         this.bottomImages = [];
     }
     render() {
-        return (h("footer", { key: '1ac8bbce7d1ffe91fcb46d32ab1c5c77588cdd85', class: `footer ${this.background === 'DarkGreen' ? 'footer--bg-brand' : ''}` }, h("section", { key: '5314e31976c633e7289ef48244799ece950c1c23', class: "footer-content" }, (this.mainLinkTilte || this.mainImage) && (h("div", { key: '787a7dba9a806cf5b2fcae2b5b1bda1d33aebe57', class: "footer-icon-section" }, h("a", { key: 'e61b86a4f2f7818542b2863a14792ba2a6c58423', class: this.background === 'DarkGreen' ? 'link--on-color' : '', href: this.mainLink || '#', target: "_blank", rel: "noopener noreferrer" }, this.mainLinkTilte))), (this.mainTitle || this.mainDescription) && (h("div", { key: 'ba543840088279ff513e65808ffe28169a22d259', class: "footer-title-description" }, h("h3", { key: '989ce86d50b436ac40a569758b74162d9f2edf7d', class: this.background === 'DarkGreen' ? 'link--on-color' : '' }, this.mainTitle), h("p", { key: '6212e654a1fd6c88632e61450070baa09657fb44', class: this.background === 'DarkGreen' ? 'link--on-color' : '' }, this.mainDescription))), this.NavLinks && (h("section", { key: 'ea0b128c4bf11e2d46702e8de64490be0a353b02', class: "footer__nav-links" }, this.groupLinks.map(group => (h("div", { class: "footer__nav-links-column" }, h("div", { class: "footer__nav-links-column-title" }, group.title), h("ul", { class: "footer__nav-links-column-body" }, group.links.map(link => (h("li", null, h("a", { href: link.target, class: `link link--sm link--neutral ${this.background === 'DarkGreen' ? 'link--on-color' : ''}` }, h("span", { class: "link__label" }, link.name))))))))), h("div", { key: 'e8defdf2110f43f5708911adc68bcd7adddc543f', class: "footer__nav-links-column" }, this.socialMediaLinks.length > 0 && (h("div", { key: '3eb6e43c4af84b85bb61f44dbc453ed8b1ece9c2' }, this.socialMediaTitle && h("div", { key: 'e164ce02f0e7f5822d32df9f0b49dac265f9fd44', class: "footer__nav-links-column-title" }, this.socialMediaTitle), h("div", { key: 'e904aa450a5de609ba4ccb461a037608d9c312c8', class: "dga-flex icons-container" }, this.socialMediaLinks.map(social => (h("a", { href: social.target, title: social.title, class: `dga-btn dga-btn--md dga-btn--secondary-outline dga-btn--icon ${this.background} ${this.background === 'DarkGreen' ? 'dga-btn--secondary-outline--on-color' : ''}` }, h("span", { class: "btn-icon" }, h("dga-icon", Object.assign({}, social.icon, { size: 20 }))))))))), this.accessibilityLinks.length > 0 && (h("div", { key: 'fed531eab6cf4f5397da68f5425b5bb2d5c52ee5' }, h("div", { key: 'ba1023e96f268e2f12c66aebd745029cb6a41580', class: "footer__nav-links-column-title" }, this.accessibilityTitle), h("div", { key: '0b9d40f730c9612403b57ca62af726adb5ff0832', class: "dga-flex icons-container" }, this.accessibilityLinks.map(access => (h("a", { href: access.target, title: access.title, class: `dga-btn dga-btn--md dga-btn--secondary-outline dga-btn--icon ${this.background} ${this.background === 'DarkGreen' ? 'dga-btn--secondary-outline--on-color' : ''}` }, h("span", { class: "btn-icon" }, h("dga-icon", Object.assign({}, access.icon, { size: 20 })))))))))))), h("section", { key: 'c598798b25fbde99fe4ee75bf2b2c1fb6d9b4b68', class: "footer__basic" }, h("div", { key: '4fa901ff034a46a3e9ddf70d3565decc23fe04ae', class: "footer__actions-copyright" }, h("ul", { key: '24dd81a8780f19e7139ea0fb66cf68d08fd339de', class: "footer__actions" }, this.basicLinks.map(link => (h("li", null, h("a", { href: link.target, class: `link link--sm link--neutral link--inline ${this.background === 'DarkGreen' ? 'link--on-color' : ''}` }, h("span", { class: "link__label" }, link.name)))))), this.copyright && h("p", { key: '864b8951956ecbc9afa84a8de2f0c63c5962b6d4', class: "footer__copyright text-sm-semibold" }, this.copyright), h("ul", { key: 'c74a46809d9032ff542d5b112e6704e89e348f13', class: "footer__extra-actions" }, this.extraLinks.map(link => (h("li", null, h("a", { href: link.target, class: `link link--sm link--neutral ${this.background === 'DarkGreen' ? 'link--on-color' : ''}` }, h("span", { class: "link__label" }, link.name))))))), h("div", { key: '1a85e1b68deafb7686dd5b6b590bb806f6bac74f', class: "footer__logos" }, this.bottomImages.map(image => (h("img", { src: image, key: guid() }))))))));
+        return (h("footer", { key: '2814ae7529b012f44c6f52a9de9859e077bec915', class: `footer ${this.background === 'DarkGreen' ? 'footer--bg-brand' : ''}` }, h("section", { key: '656062bc7f1b7711b52a4bebab5d6d71070146eb', class: "footer-content" }, (this.mainLinkTilte || this.mainImage) && (h("div", { key: '74b1a98c3d52d888b778d65c18c9f71c68cbe29e', class: "footer-icon-section" }, h("a", { key: '5ddeddc692a2f2a760e1a8ef35cf7d0a5d37aa34', class: this.background === 'DarkGreen' ? 'link--on-color' : '', href: this.mainLink || '#', target: "_blank", rel: "noopener noreferrer" }, this.mainLinkTilte))), (this.mainTitle || this.mainDescription) && (h("div", { key: '703ff7ec5dbf14bfb400002f1d5bfbac7933438d', class: "footer-title-description" }, h("h3", { key: '6f7b63f6b677483d589d4b29b8eee87d768ab3b3', class: this.background === 'DarkGreen' ? 'link--on-color' : '' }, this.mainTitle), h("p", { key: 'f0e79608beeff070a161e75c857228df0a53a57c', class: this.background === 'DarkGreen' ? 'link--on-color' : '' }, this.mainDescription))), this.NavLinks && (h("section", { key: '637f1980eeedd5e2aa30ab543bbe4c59ea606bac', class: "footer__nav-links" }, this.groupLinks.map(group => (h("div", { class: "footer__nav-links-column" }, h("div", { class: "footer__nav-links-column-title" }, group.title), h("ul", { class: "footer__nav-links-column-body" }, group.links.map(link => (h("li", null, h("a", { href: link.target, class: `link link--sm link--neutral ${this.background === 'DarkGreen' ? 'link--on-color' : ''}` }, h("span", { class: "link__label" }, link.name))))))))), h("div", { key: '72df9188b5c238e054bbd33522bdd2eff4954e1b', class: "footer__nav-links-column" }, this.socialMediaLinks.length > 0 && (h("div", { key: 'e8b12056916617acfcba5cf838eeedb1cea40826' }, this.socialMediaTitle && h("div", { key: '308160ac867e6b9e81eefc3c68e6564a64485d18', class: "footer__nav-links-column-title" }, this.socialMediaTitle), h("div", { key: 'b11dfd16be906b404921c83bf33e8f3624188963', class: "dga-flex icons-container" }, this.socialMediaLinks.map(social => (h("a", { href: social.target, title: social.title, class: `dga-btn dga-btn--md dga-btn--secondary-outline dga-btn--icon ${this.background} ${this.background === 'DarkGreen' ? 'dga-btn--secondary-outline--on-color' : ''}` }, h("span", { class: "btn-icon" }, h("dga-icon", Object.assign({}, social.icon, { size: 20 }))))))))), this.accessibilityLinks.length > 0 && (h("div", { key: '466bfa699431b498bd6598eba2f1005ffe9b81a1' }, h("div", { key: '17454ed7c7c895da07c3cb222d67086327506b5f', class: "footer__nav-links-column-title" }, this.accessibilityTitle), h("div", { key: 'f2f5e07255b34a927ff304fefb64e6cd0574cbd6', class: "dga-flex icons-container" }, this.accessibilityLinks.map(access => (h("a", { href: access.target, title: access.title, class: `dga-btn dga-btn--md dga-btn--secondary-outline dga-btn--icon ${this.background} ${this.background === 'DarkGreen' ? 'dga-btn--secondary-outline--on-color' : ''}` }, h("span", { class: "btn-icon" }, h("dga-icon", Object.assign({}, access.icon, { size: 20 })))))))))))), h("section", { key: 'd85529b7cd8b39dc372af460997faaa916ddb303', class: "footer__basic" }, h("div", { key: 'abd90817943a4452096952775422c5fcbe467528', class: "footer__actions-copyright" }, h("ul", { key: '7e6f0f8cea727df44a9dc2c3a13717aef4524611', class: "footer__actions" }, this.basicLinks.map(link => (h("li", null, h("a", { href: link.target, class: `link link--sm link--neutral link--inline ${this.background === 'DarkGreen' ? 'link--on-color' : ''}` }, h("span", { class: "link__label" }, link.name)))))), this.copyright && h("p", { key: 'ea8c4c8c4f4c62cfd4c094b987c6b48debff9de9', class: "footer__copyright text-sm-semibold" }, this.copyright), h("ul", { key: 'f894dc366075094d781f033f5a26a663d1a40ca8', class: "footer__extra-actions" }, this.extraLinks.map(link => (h("li", null, h("a", { href: link.target, class: `link link--sm link--neutral ${this.background === 'DarkGreen' ? 'link--on-color' : ''}` }, h("span", { class: "link__label" }, link.name))))))), h("div", { key: 'a8fd80f57cd13dcf2fb00f156467f5ee060a85a2', class: "footer__logos" }, this.bottomImages.map(image => (h("img", { src: image, key: guid() }))))))));
     }
     static get is() { return "dga-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-header/dga-nav-header-sub-menu.js

@@ -20,7 +20,7 @@ export class DgaNavHeaderSubMenu {
     }
     render() {
         const fullWidthClass = this.subMenuFullWidth ? 'header__sub-menu--full' : '';
-        return (h("div", { key: '4c603d8181d200ce58d94b8b2f81aef4bf2b6dc0', class: `header__sub-menu header__sub-menu--bg-${this.background} ${fullWidthClass}`, ref: el => (this.submenu = el) }, h("div", { key: 'fb30f1d54a63ddf1d977603ae54fbc266640761b', class: "sub-menu__container" }, h("slot", { key: 'c9137748682cd988927d6db8b25ce0186616961c' }))));
+        return (h("div", { key: 'c9215eff1082da749fbdc4b7118e66b1a0aeeb01', class: `header__sub-menu header__sub-menu--bg-${this.background} ${fullWidthClass}`, ref: el => (this.submenu = el) }, h("div", { key: '579f0bc5ea5caf3012eb626f606e7e2fb87bf0b0', class: "sub-menu__container" }, h("slot", { key: '9b6f6bcc803d3801fe2b5672f00dc79f49059d65' }))));
     }
     static get is() { return "dga-nav-header-sub-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-inline-alert/dga-inline-alert.js

@@ -16,9 +16,9 @@ export class DgaInlineAlert {
         };
     }
     render() {
-        return (h("div", { key: 'cf31fdd990ac2405d139c84b31103753e3a3cc86', class: `alert alert--${this.type} ${this.colored ? `alert--${this.type}-bg` : ''}` }, h("div", { key: '79dd235b6e16da480894aec2659d0b951296bee9', class: `alert__header ${this.helperText ? '' : 'dga-flex-center-y'}` }, h("div", { key: '1762f1290159341040b50b2ff7a35504b47beb0c', class: `featured-icon featured-icon--circle featured-icon--md featured-icon--light-${this.type === 'neutral' ? 'gray' : this.type}` }, h("dga-icon", { key: '53cd5e9ddfa85a93c49a8fd223447ac12d2cb670', name: this.icons[this.type], variant: "stroke", size: 20 })), h("div", { key: 'fc0f70fadcf82aee08de90b2377ed9faed07dcfa', class: "alert__body" }, h("h4", { key: '5e30c0ccc81f9d1e9f80afbacb8f44bb59c83b99', class: "alert__title text-md-semibold" }, this.leadText), this.helperText && h("p", { key: 'c449f978f57877792783c3ba8f48c5de47cd1fd9', class: "alert__content text-sm-regular" }, this.helperText)), this.isCloseButton && (h("div", { key: 'd6de8d168f45954d9759543d23f55ac77292ee31', class: "alert__close-btn" }, h("button", { key: '5dd488e3c55dd653135c56cd23d0e73f08a7dede', class: "dga-btn dga-btn--close dga-btn--icon dga-btn--md", onClick: e => this.onClose && this.onClose(e) }, h("span", { key: 'df2ac196ba828d02985da95357e8618f87b9aa66', class: "dga-btn-icon" }, h("dga-icon", { key: 'dfe8a7eb3a8f3bf859f3b0e22f1a912469eeccc0', name: "multiplication-sign", variant: "stroke", size: 20 })))))), this.isactionButtons && this.buttonsList.length > 0 && (h(Fragment, { key: '461782a42956e4df6150c6a2236bfa079273d0ed' }, h("div", { key: 'bdbf9703075d02b4e1bed0d08746f104bce33ea1', class: "alert__action" }, this.buttonsList.map(({ id, onClick, exraClasses, title, label }) => {
+        return (h("div", { key: 'b7cb4e65f9b9c7e963d8abc5f847fd2896a11749', class: `alert alert--${this.type} ${this.colored ? `alert--${this.type}-bg` : ''}` }, h("div", { key: '319623040dcbf2209c524126aa6decbc1938e7eb', class: `alert__header ${this.helperText ? '' : 'dga-flex-center-y'}` }, h("div", { key: '837a902f0f891f4013536984d32b202001447b08', class: `featured-icon featured-icon--circle featured-icon--md featured-icon--light-${this.type === 'neutral' ? 'gray' : this.type}` }, h("dga-icon", { key: 'd182ff0147be8d8d7ce3c0111d9de77d1e9e6349', name: this.icons[this.type], variant: "stroke", size: 20 })), h("div", { key: '8f996157e5857a1490688c99628bb06633e013d8', class: "alert__body" }, h("h4", { key: '3968c03edf738831800c4f564f29248230b2acb4', class: "alert__title text-md-semibold" }, this.leadText), this.helperText && h("p", { key: '49494ab20893f6c2d0a7e7b7bba131376baec607', class: "alert__content text-sm-regular" }, this.helperText)), this.isCloseButton && (h("div", { key: '3bbfbd70712c26fd8de1ee2a94056f3a15528634', class: "alert__close-btn" }, h("button", { key: '2756798c4124c8a3d1c6011b62d6181585c788f3', class: "dga-btn dga-btn--close dga-btn--icon dga-btn--md", onClick: e => this.onClose && this.onClose(e) }, h("span", { key: 'c383def520ebd1223d440b816b5417184eabd1d4', class: "dga-btn-icon" }, h("dga-icon", { key: 'db7797fb7f48249b8332e0adcbe162c20ba4d0fd', name: "multiplication-sign", variant: "stroke", size: 20 })))))), this.isactionButtons && this.buttonsList.length > 0 && (h(Fragment, { key: 'e3eb6dd7470f9a70bd400513d9480f1c8692e5ee' }, h("div", { key: 'd945befb593a02ffe476a1625db8a556ff0c90f3', class: "alert__action" }, this.buttonsList.map(({ id, onClick, exraClasses, title, label }) => {
             return (h("button", Object.assign({ key: id ? id : guid(), id: id ? id : guid(), onClick: e => onClick(e), class: `dga-btn dga-btn--subtle dga-btn--md ${exraClasses}` }, (title && { title: title })), label));
-        })), h("div", { key: 'cab7651a92e0cd1345b527cdb6ade1902b98cda7', class: "alert__action-mobile" }, this.buttonsList.map(({ id, onClick, exraClasses, title, label }) => {
+        })), h("div", { key: 'b8a542d8f45b761cce5c43c1c2c8424dfee740b6', class: "alert__action-mobile" }, this.buttonsList.map(({ id, onClick, exraClasses, title, label }) => {
             return (h("button", Object.assign({ key: id ? id : guid(), id: id ? id : guid(), onClick: e => onClick(e), class: `btn btn--secondary btn--lg ${exraClasses}` }, (title && { title: title })), label));
         }))))));
     }

package/dist/collection/components/dga-linear-progress-bar/dga-linear-progress-bar.js

@@ -1,3 +1,4 @@
+import { helpCircleStroke } from "@platformscode/icons";
 import { h } from "@stencil/core";
 export class DgaLinearProgressBar {
     constructor() {
@@ -21,11 +22,11 @@ export class DgaLinearProgressBar {
         let progressStyle = this.error ? 'error' : this.success ? "success" : this.progressStyle;
         let progressPercentage = this.percentage;
         const icon = {
-            neutral: (h("svg", { key: 'ad3cd132ce762b4ca230b3d061f8548dfc8e6743', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'ddf57d87c872b95f615ad514c32d6a9cdb2fcb89', "clip-path": "url(#clip0_17869_405)" }, h("path", { key: 'f099baff0c1983f75dcc22299f659541c8c05949', d: "M6.06004 6.00001C6.21678 5.55446 6.52614 5.17875 6.93334 4.93943C7.34055 4.70012 7.8193 4.61264 8.28483 4.69248C8.75035 4.77233 9.17259 5.01436 9.47676 5.3757C9.78093 5.73703 9.94741 6.19436 9.94671 6.66668C9.94671 8.00001 7.94671 8.66668 7.94671 8.66668M8.00004 11.3333H8.00671M14.6667 8.00001C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00001C1.33337 4.31811 4.31814 1.33334 8.00004 1.33334C11.6819 1.33334 14.6667 4.31811 14.6667 8.00001Z", stroke: "#384250", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("defs", { key: 'd2caa8d45c1f3ccf746319965af923e42666b674' }, h("clipPath", { key: '892c8b48fd6273ed40c9c31bc37974b877985dd2', id: "clip0_17869_405" }, h("rect", { key: 'af315330c6ce48312464ab6f2682b6e61c0cb202', width: "16", height: "16", fill: "white" }))))),
-            primary: (h("svg", { key: '2150fe4cad8756cfe448270a4969af9b0141501d', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7e43c870adcf2225c8e181477b765bd32408022b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00002 15.3334C12.0501 15.3334 15.3334 12.0501 15.3334 8.00002C15.3334 3.94993 12.0501 0.666687 8.00002 0.666687C3.94993 0.666687 0.666687 3.94993 0.666687 8.00002C0.666687 12.0501 3.94993 15.3334 8.00002 15.3334Z", fill: "white" }), h("path", { key: 'c6b1470eff9df4d63489b586f4c6dc6520696040', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00002 15.3334C12.0501 15.3334 15.3334 12.0501 15.3334 8.00002C15.3334 3.94993 12.0501 0.666687 8.00002 0.666687C3.94993 0.666687 0.666687 3.94993 0.666687 8.00002C0.666687 12.0501 3.94993 15.3334 8.00002 15.3334ZM4.70017 7.41423C4.43982 7.67458 4.43982 8.09669 4.70017 8.35704L6.58578 10.2427C6.84613 10.503 7.26824 10.503 7.52859 10.2427L11.2998 6.47143C11.5602 6.21108 11.5602 5.78897 11.2998 5.52862C11.0395 5.26827 10.6174 5.26827 10.357 5.52862L7.05719 8.82845L5.64297 7.41423C5.38263 7.15388 4.96052 7.15388 4.70017 7.41423Z", fill: "#067647" }))),
-            error: (h("svg", { key: '833d5409de4d166a775617c8a8aa6330adeb01ec', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3469dc6b5b91ba973b62aaaf8dd739ed14f0a2c7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00002 15.3334C12.0501 15.3334 15.3334 12.0501 15.3334 8.00002C15.3334 3.94993 12.0501 0.666687 8.00002 0.666687C3.94993 0.666687 0.666687 3.94993 0.666687 8.00002C0.666687 12.0501 3.94993 15.3334 8.00002 15.3334Z", fill: "white" }), h("path", { key: 'af5293f42df923600e77418e93a1783444d06b43', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.3334 8.00002C15.3334 12.0502 12.0502 15.3334 8.00002 15.3334C3.94989 15.3334 0.666687 12.0502 0.666687 8.00002C0.666687 3.94989 3.94989 0.666687 8.00002 0.666687C12.0502 0.666687 15.3334 3.94989 15.3334 8.00002ZM5.80471 4.862C5.54445 4.60158 5.12225 4.60158 4.862 4.862C4.60158 5.12225 4.60158 5.54445 4.862 5.80471L7.05715 8.00002L4.862 10.1953C4.60158 10.4556 4.60158 10.8778 4.862 11.138C5.12225 11.3985 5.54445 11.3985 5.80471 11.138L8.00002 8.94289L10.1953 11.138C10.4556 11.3985 10.8778 11.3985 11.138 11.138C11.3985 10.8778 11.3985 10.4556 11.138 10.1953L8.94289 8.00002L11.138 5.80471C11.3985 5.54445 11.3985 5.12225 11.138 4.862C10.8778 4.60158 10.4556 4.60158 10.1953 4.862L8.00002 7.05715L5.80471 4.862Z", fill: "#B42318" }))),
+            neutral: (h("dga-icon", { key: '78d6026f112bd80e6c2b99f2be5ef4f78caedac2', icon: helpCircleStroke, size: 16, color: '#384250' })),
+            primary: (h("svg", { key: '9e70dba73911dad3690715901795447fc65232eb', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'eb4a1a819f14fde8d1b097708f85967fdb6d01cc', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00002 15.3334C12.0501 15.3334 15.3334 12.0501 15.3334 8.00002C15.3334 3.94993 12.0501 0.666687 8.00002 0.666687C3.94993 0.666687 0.666687 3.94993 0.666687 8.00002C0.666687 12.0501 3.94993 15.3334 8.00002 15.3334Z", fill: "white" }), h("path", { key: 'f787d69a6c3de2ea558d5c4223abad57d1672c98', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00002 15.3334C12.0501 15.3334 15.3334 12.0501 15.3334 8.00002C15.3334 3.94993 12.0501 0.666687 8.00002 0.666687C3.94993 0.666687 0.666687 3.94993 0.666687 8.00002C0.666687 12.0501 3.94993 15.3334 8.00002 15.3334ZM4.70017 7.41423C4.43982 7.67458 4.43982 8.09669 4.70017 8.35704L6.58578 10.2427C6.84613 10.503 7.26824 10.503 7.52859 10.2427L11.2998 6.47143C11.5602 6.21108 11.5602 5.78897 11.2998 5.52862C11.0395 5.26827 10.6174 5.26827 10.357 5.52862L7.05719 8.82845L5.64297 7.41423C5.38263 7.15388 4.96052 7.15388 4.70017 7.41423Z", fill: "#067647" }))),
+            error: (h("svg", { key: 'c33bfd46ee7d6ccc0747115ff588227ce636b995', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f3639bdd8d4a58093b64e7b2742f65dd40f3e574', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00002 15.3334C12.0501 15.3334 15.3334 12.0501 15.3334 8.00002C15.3334 3.94993 12.0501 0.666687 8.00002 0.666687C3.94993 0.666687 0.666687 3.94993 0.666687 8.00002C0.666687 12.0501 3.94993 15.3334 8.00002 15.3334Z", fill: "white" }), h("path", { key: 'beb6af2075961b8e924d32c163269632a08a1eca', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.3334 8.00002C15.3334 12.0502 12.0502 15.3334 8.00002 15.3334C3.94989 15.3334 0.666687 12.0502 0.666687 8.00002C0.666687 3.94989 3.94989 0.666687 8.00002 0.666687C12.0502 0.666687 15.3334 3.94989 15.3334 8.00002ZM5.80471 4.862C5.54445 4.60158 5.12225 4.60158 4.862 4.862C4.60158 5.12225 4.60158 5.54445 4.862 5.80471L7.05715 8.00002L4.862 10.1953C4.60158 10.4556 4.60158 10.8778 4.862 11.138C5.12225 11.3985 5.54445 11.3985 5.80471 11.138L8.00002 8.94289L10.1953 11.138C10.4556 11.3985 10.8778 11.3985 11.138 11.138C11.3985 10.8778 11.3985 10.4556 11.138 10.1953L8.94289 8.00002L11.138 5.80471C11.3985 5.54445 11.3985 5.12225 11.138 4.862C10.8778 4.60158 10.4556 4.60158 10.1953 4.862L8.00002 7.05715L5.80471 4.862Z", fill: "#B42318" }))),
         };
-        return (h("div", { key: '0ed22f0040c913ee8c47c8fcb6b09ad91a65516f', class: 'progress-wrapper', style: { direction: this.RTL ? "rtl" : "ltr" } }, this.showLabel && h("h3", { key: 'c20c5c2a65240ebc957f11d9140b0c913cba8d82', class: `${sizeMapper[this.size]}` }, this.label), h("div", { key: '0bfa2a34aadfee76ea1d389f01d45073e94fd719', class: `progress-bar-container ${sizeMapper[this.size]}`, title: `${progressPercentage.toString()}%` }, h("div", { key: '203f19f4b25fe4863d1003c0fef10e2fafc56016', class: `progress-bar ${progressStyle}`, style: { width: `${progressPercentage}%` } }, this.size === "large" && progressPercentage > 8 && h("span", { key: 'ec9b40fcaa22c7d95fd4af0d3ade0c93dc87d1cd', class: "progress-bar-text" }, progressPercentage, "%"))), this.showHelperText && (h("div", { key: '407ed36553eeb1b9efab3b20a80f46af0a4e387a', class: "progress-bar__note" }, h("div", { key: '99bcd695030873a3ece53c3a124f03a30c88baf0', class: "icon" }, this.error ? icon["error"] : this.success ? icon["primary"] : icon["neutral"]), h("div", { key: '9174d49de14f09c8dd0bdffcd38311dfb71a88ab', class: "content" }, h("p", { key: 'b5e63429f70fc732dd23a127ef3221364e220381', class: `progress-bar-content ${this.success && "success"} ${this.error && "error"} ${sizeMapper[this.size]}` }, this.helperText))))));
+        return (h("div", { key: '161eb9a4a1b0bea04d5ae742ab69a211e2708aff', class: 'progress-wrapper', style: { direction: this.RTL ? "rtl" : "ltr" } }, this.showLabel && h("h3", { key: '5d80affb94aa0dc700a6da1f4d08d22d243d8568', class: `${sizeMapper[this.size]}` }, this.label), h("div", { key: '2c86413756141cd140f439d8777dd8b0f5195ab7', class: `progress-bar-container ${sizeMapper[this.size]}`, title: `${progressPercentage.toString()}%` }, h("div", { key: '5a4ba5250bd256c2cb5f78add3d02e4749da4112', class: `progress-bar ${progressStyle}`, style: { width: `${progressPercentage}%` } }, this.size === "large" && progressPercentage > 8 && h("span", { key: '9d301102d872632879dc36abbc4d27e6849c9921', class: "progress-bar-text" }, progressPercentage, "%"))), this.showHelperText && (h("div", { key: '596691efaf614a081d6261c58afd33d6e4707aaf', class: "progress-bar__note" }, h("div", { key: '1cf04ce13c23cb9e99129c3dcc59129607099491', class: "icon" }, this.error ? icon["error"] : this.success ? icon["primary"] : icon["neutral"]), h("div", { key: '1e99c404435028238cb5808f9a66073b4e6061c4', class: "content" }, h("p", { key: '6e904b1099c19db42ee30bad5b095569a2f34908', class: `progress-bar-content ${this.success && "success"} ${this.error && "error"} ${sizeMapper[this.size]}` }, this.helperText))))));
     }
     static get is() { return "dga-linear-progress-bar"; }
     static get originalStyleUrls() {

package/dist/collection/components/dga-list/dga-list.js

@@ -15,7 +15,7 @@ export class DgaList {
     }
     render() {
         const Tag = this.type === 'ordered' ? 'ol' : 'ul';
-        return (h("div", { key: '7d95361dcea178a59da32b4d08bf7f0560eb3d48', class: `list list--${this.type} list--${this.color}` }, this.title && h("h3", { key: '0344d56c05bb2edaee1716489128994fd076a0bf', class: "list-title" }, this.title), h(Tag, { key: 'd7e8b8e2a3f2162f9b0c6b25e9a6025d44f0ea71' }, this.items.map((item, index) => (h("li", { key: index, class: "list-item" }, this.type === "with-icon" && this.renderIcon(this.type), item))))));
+        return (h("div", { key: 'ba7b015bb0d4e6e8cec66784c58a314d67ac498b', class: `list list--${this.type} list--${this.color}` }, this.title && h("h3", { key: '3a98e09f9857f7c6bd1642aaec623760ca2c3414', class: "list-title" }, this.title), h(Tag, { key: '8e71a150258eb13aa0f99c1e787f49fa67ea7ab7' }, this.items.map((item, index) => (h("li", { key: index, class: "list-item" }, this.type === "with-icon" && this.renderIcon(this.type), item))))));
     }
     static get is() { return "dga-list"; }
     static get properties() {