feat: show placeholder when label is not present in textfield

affects: @medly-components/core, @medly-components/forms, @medly-components/theme

packages/core/src/components/DateRangePicker/__snapshots__/DateRangePicker.test.tsx.snap

@@ -2246,6 +2246,22 @@ exports[`DateRangePicker Custom date range options should render properly with c
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c1 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c1 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c1 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c1 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c1:focus-within,
 .c1:focus-within:hover {
   background-color: #EBF1FA;
@@ -24938,6 +24954,22 @@ exports[`DateRangePicker should render properly 1`] = `
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c1 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c1 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c1 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c1 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c1:focus-within,
 .c1:focus-within:hover {
   background-color: #EBF1FA;
@@ -27359,6 +27391,22 @@ exports[`DateRangePicker should render properly with single month 1`] = `
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c2 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c2 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c2 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c2 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c2:focus-within,
 .c2:focus-within:hover {
   background-color: #EBF1FA;
@@ -29291,6 +29339,22 @@ exports[`DateRangePicker should render properly with single month for mobile scr
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c2 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c2 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c2 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c2 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c2:focus-within,
 .c2:focus-within:hover {
   background-color: #EBF1FA;

packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap

@@ -136,6 +136,22 @@ exports[`MultiSelect component should render correctly with all the props given
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c3 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c3::after,
 .c3:hover::after {
   border-width: 0.1rem;
@@ -515,59 +531,21 @@ exports[`MultiSelect component should render correctly with all the props given
 `;
 
 exports[`MultiSelect component should render correctly with default props 1`] = `
-.c11 {
+.c9 {
   overflow: visible;
   font-size: 2.4rem;
   -webkit-transition: all 100ms linear;
   transition: all 100ms linear;
   cursor: inherit;
 }
 
-.c11 * {
+.c9 * {
   fill-opacity: 1;
   -webkit-transition: all 100ms linear;
   transition: all 100ms linear;
   fill: #607890;
 }
 
-.c7 {
-  top: 50%;
-  left: 0;
-  cursor: text;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  position: absolute;
-  pointer-events: none;
-  -webkit-transition: all 150ms cubic-bezier(0.4,0,0.2,1);
-  transition: all 150ms cubic-bezier(0.4,0,0.2,1);
-  font-size: 1.6rem;
-  font-weight: 400;
-  -webkit-letter-spacing: 0rem;
-  -moz-letter-spacing: 0rem;
-  -ms-letter-spacing: 0rem;
-  letter-spacing: 0rem;
-  line-height: 2.6rem;
-  font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
-  -webkit-transform-origin: 0 0;
-  -ms-transform-origin: 0 0;
-  transform-origin: 0 0;
-  touch-action: manipulation;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  opacity: 1;
-  z-index: 1;
-  width: 100%;
-  max-width: -webkit-min-content;
-  max-width: -moz-min-content;
-  max-width: min-content;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .c3 {
   position: relative;
   display: -webkit-box;
@@ -591,7 +569,7 @@ exports[`MultiSelect component should render correctly with default props 1`] =
   background-color: #eff2f4;
 }
 
-.c3 .c6 {
+.c3 .sc-1du51u0-0 {
   color: #546A7F;
 }
 
@@ -621,6 +599,22 @@ exports[`MultiSelect component should render correctly with default props 1`] =
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c3 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c3:focus-within,
 .c3:focus-within:hover {
   background-color: #EBF1FA;
@@ -632,8 +626,8 @@ exports[`MultiSelect component should render correctly with default props 1`] =
   border-radius: 0;
 }
 
-.c3:focus-within .c6,
-.c3:focus-within:hover .c6 {
+.c3:focus-within .sc-1du51u0-0,
+.c3:focus-within:hover .sc-1du51u0-0 {
   color: #3872D2;
 }
 
@@ -745,37 +739,37 @@ exports[`MultiSelect component should render correctly with default props 1`] =
   color: #435465;
 }
 
-.c5:disabled ~ .c6,
+.c5:disabled ~ .sc-1du51u0-0,
 .c5:disabled ~ .sc-1r5xr2a-0 {
   cursor: not-allowed;
 }
 
 .c5::-webkit-input-placeholder {
-  opacity: 0;
+  opacity: 1;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
 }
 
 .c5::-moz-placeholder {
-  opacity: 0;
+  opacity: 1;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
 }
 
 .c5:-ms-input-placeholder {
-  opacity: 0;
+  opacity: 1;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
 }
 
 .c5::placeholder {
-  opacity: 0;
+  opacity: 1;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
 }
 
-.c5:not(:placeholder-shown) ~ .c6,
-.c5:focus ~ .c6 {
+.c5:not(:placeholder-shown) ~ .sc-1du51u0-0,
+.c5:focus ~ .sc-1du51u0-0 {
   -webkit-transform: translateY(-87%) scale(0.75);
   -ms-transform: translateY(-87%) scale(0.75);
   transform: translateY(-87%) scale(0.75);
@@ -785,7 +779,7 @@ exports[`MultiSelect component should render correctly with default props 1`] =
   opacity: 1;
 }
 
-.c9 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -828,17 +822,17 @@ exports[`MultiSelect component should render correctly with default props 1`] =
   padding-right: 1.6rem;
 }
 
-.c0 .c8 > .c10 {
+.c0 .c6 > .c8 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 
-.c0 .c8 > .c10 * {
+.c0 .c6 > .c8 * {
   fill: #546A7F;
 }
 
-.c0:not(:focus-within):hover .c8 > .c10 * {
+.c0:not(:focus-within):hover .c6 > .c8 * {
   fill: #546A7F;
 }
 
@@ -867,17 +861,14 @@ exports[`MultiSelect component should render correctly with default props 1`] =
             type="text"
             value=""
           />
-          <label
-            class="c6 c7"
-            for="medly-multiSelect-input"
-          />
+          
         </div>
         <div
-          class="c8 c9"
+          class="c6 c7"
           id="medly-multiSelect-count"
         >
           <svg
-            class="c10 c11"
+            class="c8 c9"
             fill="none"
             height="1em"
             viewBox="0 0 24 24"
@@ -1019,6 +1010,22 @@ exports[`MultiSelect component should render properly with M size 1`] = `
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c3 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c3:focus-within,
 .c3:focus-within:hover {
   background-color: #EBF1FA;
@@ -2378,6 +2385,22 @@ exports[`MultiSelect component should render properly with S size 1`] = `
   box-shadow: 0 0 0 100000px #eff2f4 inset;
 }
 
+.c3 input::-webkit-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::-moz-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input:-ms-input-placeholder {
+  color: #C7D0D8;
+}
+
+.c3 input::placeholder {
+  color: #C7D0D8;
+}
+
 .c3:focus-within,
 .c3:focus-within:hover {
   background-color: #EBF1FA;