fix(ui-library): rename classes and fix padding issue

Author: DenizSaganak

packages/ui-library/src/components/select/index.ts

@@ -98,8 +98,8 @@ export class BlrSelect extends LitElement {
               variant: this.hasError ? 'error' : 'label',
             })
           : nothing}
-        <div class="blr-select-inner-container ${inputClasses}">
-          <div class="blr-select-wrapper">
+        <div class="blr-select-wrapper ${inputClasses}">
+          <div class="blr-select-inner-container">
             <select
               class="blr-form-select ${inputClasses}"
               id=${this.selectId || nothing}

packages/ui-library/src/components/text-input/index.ts

@@ -106,8 +106,8 @@ export class BlrTextInput extends LitElement {
               })}
             `
           : html``}
-        <div class="blr-input-inner-container ${inputContainerClasses}">
-          <div class="blr-input-wrapper">
+        <div class="blr-input-wrapper ${inputContainerClasses}">
+          <div class="blr-input-inner-container">
             <input
               class="blr-form-input ${inputClasses}"
               id=${this.textInputId}

packages/ui-library/src/foundation/component-tokens/select.css.js

@@ -7,7 +7,7 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark
     const { Select } = componentTokens.Forms;
 
     return css`
-      .blr-select-wrapper {
+      .blr-select-inner-container {
         flex-grow: 1;
         flex-shrink: 1;
 
@@ -120,11 +120,10 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark
         }
       }
 
-      .blr-select-inner-container {
+      .blr-select-wrapper {
         display: flex;
         justify-content: space-between;
         align-items: center;
-
         border: ${Input.Default.Rest.width} ${Input.Default.Rest.style} ${Input.Default.Rest.color};
         border-radius: ${InputBorderRadius};
         box-sizing: border-box;

packages/ui-library/src/foundation/component-tokens/text-input.css.js

@@ -4,10 +4,9 @@ import { renderThemedCssStrings } from "../_tokens-generated/index.pseudo.genera
 export const { tokenizedLight: textInputLight, tokenizedDark: textInputDark } = renderThemedCssStrings(
   (componentTokens, semanticTokens) => {
     const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, InputIcon } = semanticTokens.Forms;
-    const { Select } = componentTokens.Forms;
 
     return css`
-      .blr-input-wrapper {
+      .blr-input-inner-container {
         flex-grow: 1;
         flex-shrink: 1;
 
@@ -120,11 +119,10 @@ export const { tokenizedLight: textInputLight, tokenizedDark: textInputDark } =
         }
       }
 
-      .blr-input-inner-container {
+      .blr-input-wrapper {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        gap: 10px;
         border: ${Input.Default.Rest.width} ${Input.Default.Rest.style} ${Input.Default.Rest.color};
         border-radius: ${InputBorderRadius};
         box-sizing: border-box;
@@ -137,10 +135,6 @@ export const { tokenizedLight: textInputLight, tokenizedDark: textInputDark } =
         &.sm {
           padding: ${SM.InputField.Padding};
           margin: ${SM.InputSlot.Margin};
-
-          .blr-input-icon {
-            right: ${Select.SM.IconPaddingRight};
-          }
         }
 
         &.md {
@@ -151,10 +145,6 @@ export const { tokenizedLight: textInputLight, tokenizedDark: textInputDark } =
         &.lg {
           padding: ${LG.InputField.Padding};
           margin: ${LG.InputSlot.Margin};
-
-          .blr-input-icon {
-            right: ${Select.LG.IconPaddingRight};
-          }
         }
 
         &:hover {