unifyedx-storybook-new 0.1.12 → 0.1.14

package/dist/unifyedx-storybook-new.css

@@ -1431,7 +1431,7 @@
 }
 
 .pagination-select {
-  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  padding: 0.375rem 2rem 0.375rem 0.75rem;
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   font-size: 0.875rem;
@@ -1551,6 +1551,35 @@
   }
 }
 
+.page-input-form {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.page-input {
+  width: 2rem; /* 56px */
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+/* Hides the default number input spinners on some browsers */
+
+.page-input::-webkit-outer-spin-button,
+.page-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.page-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
 .radiogroup-wrapper {
   width: 100%;
   font-family: sans-serif;
@@ -2643,11 +2672,12 @@
 .wizard-body {
   flex-grow: 1;
   overflow-y: auto;
-  /* Prevent horizontal scrolling */
-  overflow-x: hidden;
-  position: relative;
-  /* Adjust padding if needed */
-  padding: 0;
+  background-color: white;
+  /* ⛔️ The "position: relative;" rule that was here should be REMOVED. */
+
+  /* Custom scrollbar styles */
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #f3f4f6;
 }
 
 .wizard-body::-webkit-scrollbar {
@@ -2655,13 +2685,13 @@
 }
 
 .wizard-body::-webkit-scrollbar-track {
-  background: var(--wizard-scrollbar-bg);
+  background: #f3f4f6;
 }
 
 .wizard-body::-webkit-scrollbar-thumb {
-  background-color: var(--wizard-scrollbar);
+  background-color: #9ca3af;
   border-radius: 10px;
-  border: 2px solid var(--wizard-scrollbar-bg);
+  border: 2px solid #f3f4f6;
 }
 
 .wizard-step {
@@ -2687,10 +2717,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  /* Add these properties to prevent horizontal overflow */
-  overflow-x: hidden;
-  padding: 0 1.5rem;
-  box-sizing: border-box; /* Include padding in width calculation */
 }
 
 @media (max-width: 640px) {
@@ -5495,7 +5521,7 @@
 }
 
 .pagination-select {
-  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  padding: 0.375rem 2rem 0.375rem 0.75rem;
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   font-size: 0.875rem;
@@ -5613,6 +5639,33 @@
     justify-content: center;
   }
 }
+
+.page-input-form {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.page-input {
+  width: 2rem; /* 56px */
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+/* Hides the default number input spinners on some browsers */
+.page-input::-webkit-outer-spin-button,
+.page-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.page-input[type="number"] {
+  -moz-appearance: textfield;
+}
 .radiogroup-wrapper {
   width: 100%;
   font-family: sans-serif;
@@ -5873,6 +5926,64 @@
   color: #dc2626;
   margin-top: 0.25rem;
 }
+.search-bar-wrapper {
+  position: relative;
+}
+
+.search-bar-icon-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  padding-left: 1rem; /* 16px */
+  pointer-events: none;
+}
+
+.search-bar-icon {
+  height: 1.25rem; /* 20px */
+  width: 1.25rem; /* 20px */
+  color: #6b7280; /* gray-500 */
+}
+
+.search-bar-input {
+  display: block;
+  width: 100%;
+  border: 1px solid #d1d5db; /* gray-300 */
+  border-radius: 18px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 3rem; /* 48px to make space for the icon */
+  padding-right: 1rem; /* 16px */
+  color: #111827; /* gray-900 */
+  font-size: 0.875rem; /* sm:text-sm */
+  line-height: 1.25rem;
+}
+
+.search-bar-input::placeholder {
+  color: #9ca3af; /* gray-400 */
+}
+
+.search-bar-input:focus {
+  outline: 1px solid #0ea5e9; /* Or your preferred focus color */
+  border-color: #0ea5e9;
+  box-shadow: none; /* Replicates focus:ring-0 */
+}
+
+/* A standard accessibility class to hide labels visually
+     but keep them available for screen readers. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 /* --- CSS Variables --- */
 :root {
   /* Dimensions */
@@ -6626,25 +6737,23 @@
 .wizard-body {
   flex-grow: 1;
   overflow-y: auto;
-  /* Prevent horizontal scrolling */
-  overflow-x: hidden;
-  position: relative;
-  /* Adjust padding if needed */
-  padding: 0;
-}
+  background-color: white;
+  /* ⛔️ The "position: relative;" rule that was here should be REMOVED. */
 
+  /* Custom scrollbar styles */
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #f3f4f6;
+}
 .wizard-body::-webkit-scrollbar {
   width: 8px;
 }
-
 .wizard-body::-webkit-scrollbar-track {
-  background: var(--wizard-scrollbar-bg);
+  background: #f3f4f6;
 }
-
 .wizard-body::-webkit-scrollbar-thumb {
-  background-color: var(--wizard-scrollbar);
+  background-color: #9ca3af;
   border-radius: 10px;
-  border: 2px solid var(--wizard-scrollbar-bg);
+  border: 2px solid #f3f4f6;
 }
 
 .wizard-step {
@@ -6669,10 +6778,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  /* Add these properties to prevent horizontal overflow */
-  overflow-x: hidden;
-  padding: 0 1.5rem;
-  box-sizing: border-box; /* Include padding in width calculation */
 }
 
 @media (max-width: 640px) {
@@ -6692,64 +6797,6 @@
     padding: 0 1rem;
   }
 }
-.search-bar-wrapper {
-  position: relative;
-}
-
-.search-bar-icon-wrapper {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  padding-left: 1rem; /* 16px */
-  pointer-events: none;
-}
-
-.search-bar-icon {
-  height: 1.25rem; /* 20px */
-  width: 1.25rem; /* 20px */
-  color: #6b7280; /* gray-500 */
-}
-
-.search-bar-input {
-  display: block;
-  width: 100%;
-  border: 1px solid #d1d5db; /* gray-300 */
-  border-radius: 18px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 3rem; /* 48px to make space for the icon */
-  padding-right: 1rem; /* 16px */
-  color: #111827; /* gray-900 */
-  font-size: 0.875rem; /* sm:text-sm */
-  line-height: 1.25rem;
-}
-
-.search-bar-input::placeholder {
-  color: #9ca3af; /* gray-400 */
-}
-
-.search-bar-input:focus {
-  outline: 1px solid #0ea5e9; /* Or your preferred focus color */
-  border-color: #0ea5e9;
-  box-shadow: none; /* Replicates focus:ring-0 */
-}
-
-/* A standard accessibility class to hide labels visually
-     but keep them available for screen readers. */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
 .page-layout {
   position: relative;
   width: 100%;