@sapudex/web-components 0.192.4 → 0.199.3

package/src/themes/Avatar.css

@@ -36,66 +36,57 @@
 
   --udex-avatar-blue-default-background-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));
   --udex-avatar-blue-default-border-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));
-  --udex-avatar-blue-default-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));
+  --udex-avatar-blue-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));
   --udex-avatar-blue-hover-backgound-color: var(--sapAvatar_6_Background, var(--udexColorBlue2));
-  --udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));
-  --udex-avatar-blue-hover-icon-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue7));
+  --udex-avatar-blue-hover-border-color: var(--sapAvatar_6_TextColor, var(--udexColorBlue8));
 
   --udex-avatar-mango-default-background-color: var(--sapAvatar_1_Background, var(--udexColorMango2));
   --udex-avatar-mango-default-border-color: var(--sapAvatar_1_Background, var(--udexColorMango2));
-  --udex-avatar-mango-default-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));
+  --udex-avatar-mango-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));
   --udex-avatar-mango-hover-backgound-color: var(--sapAvatar_1_Background, var(--udexColorMango2));
-  --udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));
-  --udex-avatar-mango-hover-icon-color: var(--sapAvatar_1_TextColor, var(--udexColorMango7));
+  --udex-avatar-mango-hover-border-color: var(--sapAvatar_1_TextColor, var(--udexColorMango8));
 
   --udex-avatar-red-default-background-color: var(--sapAvatar_2_Background, var(--udexColorRed2));
   --udex-avatar-red-default-border-color: var(--sapAvatar_2_Background, var(--udexColorRed2));
-  --udex-avatar-red-default-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));
+  --udex-avatar-red-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));
   --udex-avatar-red-hover-backgound-color: var(--sapAvatar_2_Background, var(--udexColorRed2));
-  --udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));
-  --udex-avatar-red-hover-icon-color: var(--sapAvatar_2_TextColor, var(--udexColorRed7));
+  --udex-avatar-red-hover-border-color: var(--sapAvatar_2_TextColor, var(--udexColorRed8));
 
   --udex-avatar-raspberry-default-background-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));
   --udex-avatar-raspberry-default-border-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));
-  --udex-avatar-raspberry-default-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));
+  --udex-avatar-raspberry-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));
   --udex-avatar-raspberry-hover-backgound-color: var(--sapAvatar_3_Background, var(--udexColorRaspberry2));
-  --udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));
-  --udex-avatar-raspberry-hover-icon-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry7));
+  --udex-avatar-raspberry-hover-border-color: var(--sapAvatar_3_TextColor, var(--udexColorRaspberry8));
 
   --udex-avatar-pink-default-background-color: var(--sapAvatar_4_Background, var(--udexColorPink2));
   --udex-avatar-pink-default-border-color: var(--sapAvatar_4_Background, var(--udexColorPink2));
-  --udex-avatar-pink-default-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));
+  --udex-avatar-pink-icon-color: var(--sapAvatar_4_TextColor,  var(--udexColorPink8));
   --udex-avatar-pink-hover-backgound-color: var(--sapAvatar_4_Background, var(--udexColorPink2));
-  --udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));
-  --udex-avatar-pink-hover-icon-color: var(--sapAvatar_4_TextColor, var(--udexColorPink7));
+  --udex-avatar-pink-hover-border-color: var(--sapAvatar_4_TextColor,  var(--udexColorPink8));
 
   --udex-avatar-indigo-default-background-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));
   --udex-avatar-indigo-default-border-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));
-  --udex-avatar-indigo-default-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));
+  --udex-avatar-indigo-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));
   --udex-avatar-indigo-hover-backgound-color: var(--sapAvatar_5_Background, var(--udexColorIndigo2));
-  --udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));
-  --udex-avatar-indigo-hover-icon-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo7));
+  --udex-avatar-indigo-hover-border-color: var(--sapAvatar_5_TextColor, var(--udexColorIndigo8));
 
   --udex-avatar-teal-default-background-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));
   --udex-avatar-teal-default-border-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));
-  --udex-avatar-teal-default-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));
+  --udex-avatar-teal-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));
   --udex-avatar-teal-hover-backgound-color: var(--sapAvatar_7_Background, var(--udexColorTeal2));
-  --udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));
-  --udex-avatar-teal-hover-icon-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal7));
+  --udex-avatar-teal-hover-border-color: var(--sapAvatar_7_TextColor, var(--udexColorTeal8));
 
   --udex-avatar-green-default-background-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));
   --udex-avatar-green-default-border-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));
-  --udex-avatar-green-default-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));
+  --udex-avatar-green-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));
   --udex-avatar-green-hover-backgound-color: var(--sapAvatar_8_Background, var(--udexColorGreen2));
-  --udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));
-  --udex-avatar-green-hover-icon-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen7));
+  --udex-avatar-green-hover-border-color: var(--sapAvatar_8_TextColor, var(--udexColorGreen8));
 
   --udex-avatar-grey-default-background-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));
   --udex-avatar-grey-default-border-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));
-  --udex-avatar-grey-default-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));
+  --udex-avatar-grey-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));
   --udex-avatar-grey-hover-backgound-color: var(--sapAvatar_9_Background, var(--udexColorGrey2));
-  --udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));
-  --udex-avatar-grey-hover-icon-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey7));
+  --udex-avatar-grey-hover-border-color: var(--sapAvatar_9_TextColor, var(--udexColorGrey8));
 
   --udex-avatar-transparent-default-background-color: hsla(0, 0%, 0%, 0);
   --udex-avatar-transparent-default-border-color: hsla(0, 0%, 0%, 0);
@@ -299,7 +290,7 @@
 
 :host([color-scheme="Blue"]) .udex-avatar {
   background-color: var(--udex-avatar-blue-default-background-color);
-  color: var(--udex-avatar-blue-default-icon-color);
+  color: var(--udex-avatar-blue-icon-color);
   border-color: var(--udex-avatar-blue-default-border-color);
 }
 
@@ -307,14 +298,14 @@
 :host([color-scheme="Blue"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-blue-default-background-color);
   border-color: var(--udex-avatar-blue-hover-border-color);
-  color: var(--udex-avatar-blue-default-icon-color);
+  color: var(--udex-avatar-blue-icon-color);
 }
 
 /* Mango color scheme styles */
 
 :host([color-scheme="Mango"]) .udex-avatar {
   background-color: var(--udex-avatar-mango-default-background-color);
-  color: var(--udex-avatar-mango-default-icon-color);
+  color: var(--udex-avatar-mango-icon-color);
   border-color: var(--udex-avatar-mango-default-border-color);
 }
 
@@ -322,7 +313,7 @@
 :host([color-scheme="Mango"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-mango-default-background-color);
   border-color: var(--udex-avatar-mango-hover-border-color);
-  color: var(--udex-avatar-mango-default-icon-color);
+  color: var(--udex-avatar-mango-icon-color);
 }
 
 /* Disabled styles */
@@ -335,7 +326,7 @@
 
 :host([color-scheme="Red"]) .udex-avatar {
   background-color: var(--udex-avatar-red-default-background-color);
-  color: var(--udex-avatar-red-default-icon-color);
+  color: var(--udex-avatar-red-icon-color);
   border-color: var(--udex-avatar-red-default-border-color);
 }
 
@@ -343,14 +334,14 @@
 :host([color-scheme="Red"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-red-default-background-color);
   border-color: var(--udex-avatar-red-hover-border-color);
-  color: var(--udex-avatar-red-default-icon-color);
+  color: var(--udex-avatar-red-icon-color);
 }
 
 /* Raspberry color scheme styles */
 
 :host([color-scheme="Raspberry"]) .udex-avatar {
   background-color: var(--udex-avatar-raspberry-default-background-color);
-  color: var(--udex-avatar-raspberry-default-icon-color);
+  color: var(--udex-avatar-raspberry-icon-color);
   border-color: var(--udex-avatar-raspberry-default-border-color);
 }
 
@@ -358,14 +349,14 @@
 :host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-raspberry-default-background-color);
   border-color: var(--udex-avatar-raspberry-hover-border-color);
-  color: var(--udex-avatar-raspberry-default-icon-color);
+  color: var(--udex-avatar-raspberry-icon-color);
 }
 
 /* Pink color scheme styles */
 
 :host([color-scheme="Pink"]) .udex-avatar {
   background-color: var(--udex-avatar-pink-default-background-color);
-  color: var(--udex-avatar-pink-default-icon-color);
+  color: var(--udex-avatar-pink-icon-color);
   border-color: var(--udex-avatar-pink-default-border-color);
 }
 
@@ -373,14 +364,14 @@
 :host([color-scheme="Pink"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-pink-default-background-color);
   border-color: var(--udex-avatar-pink-hover-border-color);
-  color: var(--udex-avatar-pink-default-icon-color);
+  color: var(--udex-avatar-pink-icon-color);
 }
 
 /* Indigo color scheme styles */
 
 :host([color-scheme="Indigo"]) .udex-avatar {
   background-color: var(--udex-avatar-indigo-default-background-color);
-  color: var(--udex-avatar-indigo-default-icon-color);
+  color: var(--udex-avatar-indigo-icon-color);
   border-color: var(--udex-avatar-indigo-default-border-color);
 }
 
@@ -388,14 +379,14 @@
 :host([color-scheme="Indigo"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-indigo-default-background-color);
   border-color: var(--udex-avatar-indigo-hover-border-color);
-  color: var(--udex-avatar-indigo-default-icon-color);
+  color: var(--udex-avatar-indigo-icon-color);
 }
 
 /* Teal color scheme styles */
 
 :host([color-scheme="Teal"]) .udex-avatar {
   background-color: var(--udex-avatar-teal-default-background-color);
-  color: var(--udex-avatar-teal-default-icon-color);
+  color: var(--udex-avatar-teal-icon-color);
   border-color: var(--udex-avatar-teal-default-border-color);
 }
 
@@ -403,14 +394,14 @@
 :host([color-scheme="Teal"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-teal-default-background-color);
   border-color: var(--udex-avatar-teal-hover-border-color);
-  color: var(--udex-avatar-teal-default-icon-color);
+  color: var(--udex-avatar-teal-icon-color);
 }
 
 /* Green color scheme styles */
 
 :host([color-scheme="Green"]) .udex-avatar {
   background-color: var(--udex-avatar-green-default-background-color);
-  color: var(--udex-avatar-green-default-icon-color);
+  color: var(--udex-avatar-green-icon-color);
   border-color: var(--udex-avatar-green-default-border-color);
 }
 
@@ -418,14 +409,14 @@
 :host([color-scheme="Green"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-green-default-background-color);
   border-color: var(--udex-avatar-green-hover-border-color);
-  color: var(--udex-avatar-green-default-icon-color);
+  color: var(--udex-avatar-green-icon-color);
 }
 
 /* Grey color scheme styles */
 
 :host([color-scheme="Grey"]) .udex-avatar {
   background-color: var(--udex-avatar-grey-default-background-color);
-  color: var(--udex-avatar-grey-default-icon-color);
+  color: var(--udex-avatar-grey-icon-color);
   border-color: var(--udex-avatar-grey-default-border-color);
 }
 
@@ -433,7 +424,7 @@
 :host([color-scheme="Grey"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-grey-default-background-color);
   border-color: var(--udex-avatar-grey-hover-border-color);
-  color: var(--udex-avatar-grey-default-icon-color);
+  color: var(--udex-avatar-grey-icon-color);
 }
 
 /* Transparent color scheme styles */

package/src/themes/Button.css

@@ -238,7 +238,7 @@
   padding: var(--udex-button-padding-small);
 }
 
-:host([design="Primary"][focused]:not([active]):not([toggled]))::part(button):before {
+:host([design="Primary"][focused]:not([active]):not([toggled])) .ui5-button-root:before {
   content: "";
   position: absolute;
   box-sizing: border-box;
@@ -248,8 +248,8 @@
   z-index: 1;
 }
 
-:host([design="Invisible"][focused]:not([active]):not([toggled]))::part(button):after,
-:host([design="Invisible"][active]:not([toggled]))::part(button):before {
+:host([design="Invisible"][focused]:not([active]):not([toggled])) .ui5-button-root:after,
+:host([design="Invisible"][active]:not([toggled])) .ui5-button-root:before {
   content: "";
   position: absolute;
   box-sizing: border-box;

package/src/themes/CountrySelector.css

@@ -35,6 +35,7 @@
   width: 100%;
 }
 
+:host([hide-flag-images])::part(textfield-input),
 .udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item) {
   padding-left: var(--udexSpacer12);
   padding-right: var(--udexSpacer12);

package/src/themes/Link.css

@@ -5,9 +5,12 @@
   --udex-link-focus-text-decoration: underline;
   --udex-link-emphasized-text-decoration: none;
   --udex-link-icon-height: 24px;
-  --udex-link-icon-width:var(--sapFontSize);
+  --udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  --udex-link-color: var(--udexColorBlue8);
+  --udex-link-hover-color: var(--udexColorBlue10);
+  --udex-link-active-color: var(--udexColorBlue11);
+  --udex-link-icon-width: var(--sapFontSize);
   --udex-link-white-space: break-spaces;
-
   white-space: normal;
 }
 
@@ -16,6 +19,15 @@
 :host([focused]:hover:not(:active)),
 :host(:hover) {
   text-decoration: none;
+  color: var(--udex-link-hover-color);
+}
+
+:host(:active) {
+  color: var(--udex-link-active-color);
+}
+
+:host, :host(:visited) {
+  color: var(--udex-link-color);
 }
 
 :host([focused]) slot {
@@ -37,6 +49,7 @@
 
 .ui5-link-root {
   overflow: visible;
+  line-height: var(--udex-link-line-height);
 }
 
 [ui5-link][disabled] .linkIcon {
@@ -82,8 +95,8 @@
   height: var(--udex-link-icon-height);
 }
 
-[ui5-link][focused] {
-  color: var(--sapLinkColor);
+[ui5-link] {
+  color: inherit;
 }
 
 :host([focused]) .ui5-link-root,

package/src/themes/Pagination.css

@@ -8,7 +8,7 @@
   --udex-pagination-item-text-color: var(--sapPrimary5, #5b738b);
   --udex-pagination-item-active-text-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9, #223548));
   --udex-pagination-item-active-background-color: var(--udexColorGrey1);
-  --udex-pagination-item-active-border-color: var(--sapButton_Active_BorderColor, #0040b0);
+  --udex-pagination-item-active-border-color: var(--udexColorBlue8);
   --udex-pagination-item-active-border-width: var(--sapField_InformationBorderWidth, 0.125rem);
   --udex-pagination-item-gap: 0.25rem;
   --udex-pagination-mobile-item-gap: 0.5rem;

package/src/themes/StatusBadge.css

@@ -1,22 +1,22 @@
 :host {
   --udex-status-badge-icon-color-error: var(--udexColorRed8);
-  --udex-status-badge-background-color-error: var(--udexColorRed2);
-  --udex-status-badge-border-color-error: var(--udexColorRed7);
+  --udex-status-badge-background-color-error: var(--udexColorRed1);
+  --udex-status-badge-border-color-error: var(--udexColorRed6);
 
   --udex-status-badge-icon-color-success: var(--udexColorGreen8);
-  --udex-status-badge-background-color-success: var(--udexColorGreen2);
-  --udex-status-badge-border-color-success: var(--udexColorGreen7);
+  --udex-status-badge-background-color-success: var(--udexColorGreen1);
+  --udex-status-badge-border-color-success: var(--udexColorGreen6);
 
   --udex-status-badge-icon-color-warning: var(--udexColorMango8);
-  --udex-status-badge-background-color-warning: var(--udexColorMango2);
-  --udex-status-badge-border-color-warning: var(--udexColorMango7);
+  --udex-status-badge-background-color-warning: var(--udexColorMango1);
+  --udex-status-badge-border-color-warning: var(--udexColorMango6);
 
   --udex-status-badge-icon-color-information: var(--udexColorBlue8);
-  --udex-status-badge-background-color-information: var(--udexColorBlue2);
-  --udex-status-badge-border-color-information: var(--udexColorBlue7);
+  --udex-status-badge-background-color-information: var(--udexColorBlue1);
+  --udex-status-badge-border-color-information: var(--udexColorBlue6);
 
   --udex-status-badge-icon-color-edit: white;
-  --udex-status-badge-background-color-edit: var(--udexColorBlue7);
+  --udex-status-badge-background-color-edit: var(--udexColorBlue8);
 
   --udex-status-badge-size-background-xs-and-s-and-m: 18px;
   --udex-status-badge-size-background-l: 20px;

package/src/themes/TagGroup.css

@@ -39,10 +39,6 @@
   pointer-events: none;
 }
 
-:host([displayonly]) .udex-tag-group__tag[data-overflows] {
-  margin-inline-end: -10px;
-}
-
 :host([displayonly]) .udex-tag-group__tag {
   margin-inline-end: 0;
   position: relative;

package/src/themes/TextField.css

@@ -220,7 +220,8 @@
   padding: 0;
 }
 
-.udex-text-field__label.udex-text-field__label_active {
+.udex-text-field__label.udex-text-field__label_active,
+:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label {
   line-height: 18px;
   transform: translateY(-110%);
   padding: 6px 4px 0;

package/src/themes/Upload.css

@@ -0,0 +1,65 @@
+:host {
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+.udex-upload__title {
+  line-height: var(--udexTypographyHeadingLineHeight);
+  font-size: var(--udexTypographyHeadingRegularXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightMedium);
+  margin: 0;
+  padding: 0;
+}
+
+.udex-upload__additional-text {
+  padding: 0;
+  margin: 0;
+  margin-top: var(--udexSpacer8);
+  margin-bottom: var(--udexSpacer24);
+  color: var(--udexColorGrey7);
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+.udex-upload__files-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--udexSpacer24, 24px);
+}
+
+.udex-upload__upload-button-container {
+  display: flex;
+  gap: var(--udexSpacer16);
+  align-items: center;
+}
+
+.udex-upload__upload-button input {
+  display: none;
+}
+
+.udex-upload__error {
+  padding: 0;
+  margin: 0;
+  color: var(--udexCoreSemanticError7, var(--udexColorRed7));
+  font-size: var(--udexTypographyBodyXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+:host([required]) .udex-upload__title::after {
+  content: "*";
+  color: var(--udexColorGrey7);
+  line-height: var(--udexTypographyHeadingLineHeight);
+  font-size: var(--udexTypographyHeadingRegularXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightMedium);
+}
+
+
+@media (max-width: 979px) {
+  .udex-upload__title, 
+  :host([required]) .udex-upload__title::after {
+    line-height: var(--udexTypographyHeadingLineHeight);
+    font-size: var(--udexTypographyHeadingRegularXXXSFontSize);
+    font-weight: var(--udexTypographyFontWeightMedium);
+  }
+}

package/src/themes/UploadItem.css

@@ -0,0 +1,131 @@
+:host {
+  --udex-upload-item-progress-bar-width: 124px;
+  --udex-upload-item-progress-bar-min-width: 124px;
+  --udex-upload-item-progress-bar-max-width: 200px;
+  --udex-upload-item-progress-bar-width-m: 100%;
+  --udex-upload-item-progress-bar-min-width-m: 100%;
+  --udex-upload-item-progress-bar-max-width-m: 100%;
+  --udex-upload-item-progress-bar-padding: 5px 0;
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+.udex-upload-item__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: var(--udexSpacer8, 8px);
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--udexColorGrey3); 
+}
+
+.udex-upload-item__info {
+  display: flex;
+  flex-direction: column;
+}
+
+[udex-link] {
+  --udex-link-text-decoration: none;
+}
+
+.udex-upload-item__name {
+  padding: 0;
+  margin: 0;
+  color: var(--sapTitleColor, var(--udexColorNeutralBlack));
+  font-size: var(--sapFontSize);
+}
+
+.udex-upload-item__info {
+  padding: 0;
+  margin: 0;
+  color: var(--udexColorGrey7);
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+.udex-upload-item__error {
+  color: var(--udexColorRed7);
+}
+
+.udex-upload-item__progress-info-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-inline-start: var(--udexSpacer32, 32px);
+}
+
+.udex-upload-item__progress-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.udex-upload-item__progress-status {
+  padding: 0;
+  margin: 0;
+  color: var(--udexColorGrey7);
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+[udex-progress-bar] {
+  max-width: var(--udex-upload-item-progress-bar-max-width);
+  min-width: var(--udex-upload-item-progress-bar-min-width);
+  width: var(--udex-upload-item-progress-bar-width);
+  overflow: hidden;
+  padding: var(--udex-upload-item-progress-bar-padding);
+}
+
+[udex-link] {
+  margin-bottom: var(--udexSpacer4, 4px);
+}
+
+[udex-button] {
+  margin-inline-start: var(--udexSpacer24, 24px);
+}
+
+@media (max-width: 1279px) {
+  .udex-upload-item__wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .udex-upload-item__info {
+    margin-bottom: var(--udexSpacer4, 4px);
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .udex-upload-item__progress-info-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    margin: 0;
+  }
+
+  .udex-upload-item__progress-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .udex-upload-item__name {
+    margin-bottom: var(--udexSpacer4, 4px);
+  }
+
+  [udex-progress-bar] {
+    max-width: var(--udex-upload-item-progress-bar-max-width-m);
+    min-width: var(--udex-upload-item-progress-bar-min-width-m);
+    width: var(--udex-upload-item-progress-bar-width-m);
+  }
+}
+
+.udex-upload-item__info-uploaded {
+  margin-bottom: 0;
+}

package/src/types/ButtonSize.ts

@@ -0,0 +1,7 @@
+enum UDExButtonSize {
+  Large = "Large",
+  Medium = "Medium",
+  Small = "Small"
+}
+
+export default UDExButtonSize;

package/src/types/FileData.ts

@@ -0,0 +1,6 @@
+type FileData = {
+  fileName: string,
+  fileSize: number,
+}
+
+export default FileData;

package/src/types/FileUploadState.ts

@@ -0,0 +1,7 @@
+enum FileUploadState {
+  Uploading = "Uploading",
+  Uploaded = "Uploaded",
+  Error = "Error"
+}
+
+export default FileUploadState;

package/src/types/MessageStrip.ts

@@ -0,0 +1,13 @@
+export enum UdexMessageStripDesign {
+  Information = "Information",
+  Positive = "Positive",
+  Negative = "Negative",
+  Warning = "Warning",
+  Action = "Action",
+}
+
+export enum UdexMessageStripStatusType {
+  Icon = "Icon",
+  Text = "Text",
+  None = "None",
+}

package/src/types/common.ts

@@ -1,3 +1,10 @@
+export enum Target {
+  _blank = "_blank",
+  _parent = "_parent",
+  _self = "_self",
+  _top = "_top",
+}
+
 enum ValueState {
   Standard = "Standard",
   Warning = "Warning",

package/src/utils/Breakpoints.ts

@@ -0,0 +1,41 @@
+type BreakpointKey = keyof typeof Breakpoints;
+
+export const Breakpoints = {
+  XS: { min: 360, max: 639 },
+  S: { min: 640, max: 979 },
+  M: { min: 980, max: 1279 },
+  L: { min: 1280, max: 1599 },
+  XL: { min: 1600, max: Infinity },
+} as const;
+
+export class BreakpointUtils {
+  private static get width(): number {
+    return typeof window !== "undefined" ? window.innerWidth : 0;
+  }
+
+  static getCurrentBreakpoint(): BreakpointKey | undefined {
+    return (Object.keys(Breakpoints) as BreakpointKey[])
+      .find(bp => this.isInRange(bp));
+  }
+
+  static isInRange(bp: BreakpointKey): boolean {
+    const { min, max } = Breakpoints[bp];
+    return this.width >= min && this.width <= max;
+  }
+
+  static isAtLeast(bp: BreakpointKey): boolean {
+    return this.width >= Breakpoints[bp].min;
+  }
+
+  static isAbove(bp: BreakpointKey): boolean {
+    return this.width > Breakpoints[bp].min;
+  }
+
+  static isAtMost(bp: BreakpointKey): boolean {
+    return this.width <= Breakpoints[bp].max;
+  }
+
+  static isBelow(bp: BreakpointKey): boolean {
+    return this.width < Breakpoints[bp].max;
+  }
+}

package/src/utils/convertBytesToMegabytes.ts

@@ -0,0 +1,3 @@
+const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
+
+export default convertBytesToMegabytes;