chore: update package.json version to 1.0.200 and enhance DatePicker styling

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.199",
+  "version": "1.0.200",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Inputs/DatePicker/DatePicker.stories.tsx

@@ -17,19 +17,21 @@ export const Default = () => {
   const [date, setDate] = useState(new Date());
 
   return (
-    <DatePicker
-      name='datetime'
-      value={date}
-      showTimeSelect
-      timeCaption='Time'
-      onChange={input => {
-        if (!input.datetime) {
-          return;
-        }
+    <div className='yl-w-[500px]'>
+      <DatePicker
+        name='datetime'
+        value={date}
+        showTimeSelect
+        timeCaption='Time'
+        onChange={input => {
+          if (!input.datetime) {
+            return;
+          }
 
-        setDate(input.datetime);
-      }}
-    />
+          setDate(input.datetime);
+        }}
+      />
+    </div>
   );
 };
 

src/Components/Inputs/DatePicker/index.tsx

@@ -36,7 +36,7 @@ const DatePicker: FC<IDatePickerProps> = props => {
   };
 
   return (
-    <div className='yl-bg-primary-background-color'>
+    <div>
       <InputHeader {...props} />
       <BaseDatePicker
         selected={value}

src/Components/Inputs/DatePicker/style.css

@@ -7,6 +7,10 @@
   @apply yl-outline-none !important;
 }
 
+.react-datepicker-wrapper {
+  @apply yl-w-full !important;
+}
+
 /* Main Datepicker Container */
 .react-datepicker {
   @apply yl-select-none yl-border-2 yl-border-primary-text-color/20 yl-bg-primary-background-color yl-font-sans yl-shadow-lg !important;
@@ -90,7 +94,7 @@ li.react-datepicker__time-list-item {
 
 /* Input Styles */
 .react-datepicker__input-container input {
-  @apply yl-w-full yl-appearance-none yl-rounded-md yl-border-2 yl-border-primary-text-color yl-bg-transparent yl-p-2 yl-text-primary-text-color hover:yl-cursor-pointer hover:yl-border-primary focus:yl-border-primary focus:yl-outline-none focus:yl-ring-transparent !important;
+  @apply yl-w-full yl-min-w-max yl-appearance-none yl-rounded-md yl-border-2 yl-border-primary-text-color yl-bg-transparent yl-p-2 yl-text-primary-text-color hover:yl-cursor-pointer hover:yl-border-primary focus:yl-border-primary focus:yl-outline-none focus:yl-ring-transparent !important;
 }
 
 .react-datepicker__day--disabled {