@simpli-route/apollo-ds 0.0.21 → 0.1.0

package/dist/style.css

@@ -750,18 +750,79 @@ select {
 .relative {
   position: relative;
 }
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+.bottom-0 {
+  bottom: 0px;
+}
+.bottom-full {
+  bottom: 100%;
+}
+.left-0 {
+  left: 0px;
+}
+.left-1\/2 {
+  left: 50%;
+}
+.left-full {
+  left: 100%;
+}
+.right-0 {
+  right: 0px;
+}
+.right-full {
+  right: 100%;
+}
+.top-0 {
+  top: 0px;
+}
 .top-1\/2 {
   top: 50%;
 }
+.top-full {
+  top: 100%;
+}
+.z-20 {
+  z-index: 20;
+}
+.mb-0 {
+  margin-bottom: 0px;
+}
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+.mb-7 {
+  margin-bottom: 1.75rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-1 {
   margin-right: 0.25rem;
 }
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mr-3 {
+  margin-right: 0.75rem;
+}
+.mt-3 {
+  margin-top: 0.75rem;
+}
+.mt-5 {
+  margin-top: 1.25rem;
+}
+.box-border {
+  box-sizing: border-box;
+}
 .flex {
   display: flex;
 }
@@ -779,6 +840,10 @@ select {
   width: 0.75rem;
   height: 0.75rem;
 }
+.size-3\.5 {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 .size-4 {
   width: 1rem;
   height: 1rem;
@@ -859,15 +924,26 @@ select {
 .w-full {
   width: 100%;
 }
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
 .min-w-full {
   min-width: 100%;
 }
+.max-w-\[250px\] {
+  max-width: 250px;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
 .shrink-0 {
   flex-shrink: 0;
 }
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -948,12 +1024,28 @@ select {
 .gap-y-4 {
   row-gap: 1rem;
 }
+.space-y-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0px * var(--tw-space-y-reverse));
+}
+.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
+}
 .overflow-hidden {
   overflow: hidden;
 }
+.whitespace-normal {
+  white-space: normal;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.break-words {
+  overflow-wrap: break-word;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -990,10 +1082,22 @@ select {
 .border-none {
   border-style: none;
 }
+.border-error-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 64 51 / var(--tw-border-opacity));
+}
+.border-neutral-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(247 247 248 / var(--tw-border-opacity));
+}
 .border-neutral-500 {
   --tw-border-opacity: 1;
   border-color: rgb(199 201 209 / var(--tw-border-opacity));
 }
+.border-neutral-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 36 42 / var(--tw-border-opacity));
+}
 .border-primary-200 {
   --tw-border-opacity: 1;
   border-color: rgb(212 208 251 / var(--tw-border-opacity));
@@ -1010,6 +1114,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(233 213 255 / var(--tw-border-opacity));
 }
+.border-success-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 181 118 / var(--tw-border-opacity));
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1017,6 +1125,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(168 180 240 / var(--tw-bg-opacity));
 }
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(246 248 252 / var(--tw-bg-opacity));
+}
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(38 68 217 / var(--tw-bg-opacity));
@@ -1025,6 +1137,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(27 48 152 / var(--tw-bg-opacity));
 }
+.bg-blue-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(11 20 65 / var(--tw-bg-opacity));
+}
 .bg-error-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(244 162 154 / var(--tw-bg-opacity));
@@ -1189,12 +1305,19 @@ select {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .pb-4 {
   padding-bottom: 1rem;
 }
 .pl-2 {
   padding-left: 0.5rem;
 }
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -1204,6 +1327,10 @@ select {
 .text-center {
   text-align: center;
 }
+.\!text-sm {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1214,6 +1341,9 @@ select {
 .text-\[1\.75rem\] {
   font-size: 1.75rem;
 }
+.text-\[16px\] {
+  font-size: 16px;
+}
 .text-\[2rem\] {
   font-size: 2rem;
 }
@@ -1237,15 +1367,27 @@ select {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.\!font-normal {
+  font-weight: 400 !important;
+}
 .font-bold {
   font-weight: 700;
 }
 .font-semibold {
   font-weight: 600;
 }
+.\!leading-\[19\.07px\] {
+  line-height: 19.07px !important;
+}
 .leading-10 {
   line-height: 2.5rem;
 }
+.leading-3 {
+  line-height: .75rem;
+}
+.leading-5 {
+  line-height: 1.25rem;
+}
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -1255,6 +1397,17 @@ select {
 .leading-9 {
   line-height: 2.25rem;
 }
+.leading-\[19\.07px\] {
+  line-height: 19.07px;
+}
+.\!text-blue-50 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(246 248 252 / var(--tw-text-opacity)) !important;
+}
+.\!text-neutral-700 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(115 118 140 / var(--tw-text-opacity)) !important;
+}
 .text-\[\#6F5711\] {
   --tw-text-opacity: 1;
   color: rgb(111 87 17 / var(--tw-text-opacity));
@@ -1271,6 +1424,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(252 244 244 / var(--tw-text-opacity));
 }
+.text-error-500 {
+  --tw-text-opacity: 1;
+  color: rgb(204 64 51 / var(--tw-text-opacity));
+}
 .text-error-900 {
   --tw-text-opacity: 1;
   color: rgb(61 19 15 / var(--tw-text-opacity));
@@ -1358,6 +1515,11 @@ select {
 .opacity-70 {
   opacity: 0.7;
 }
+.shadow-\[0px_2px_4px_-2px_\#22242A0F\2c 0px_4px_8px_-2px_\#22242A1A\] {
+  --tw-shadow: 0px 2px 4px -2px #22242A0F,0px 4px 8px -2px #22242A1A;
+  --tw-shadow-colored: 0px 2px 4px -2px var(--tw-shadow-color), 0px 4px 8px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1381,6 +1543,9 @@ select {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1430,6 +1595,167 @@ select {
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+.placeholder\:text-neutral-700::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(115 118 140 / var(--tw-text-opacity));
+}
+.placeholder\:text-neutral-700::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(115 118 140 / var(--tw-text-opacity));
+}
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+.before\:left-\[100\%\]::before {
+  content: var(--tw-content);
+  left: 100%;
+}
+.before\:right-\[100\%\]::before {
+  content: var(--tw-content);
+  right: 100%;
+}
+.before\:top-1\/2::before {
+  content: var(--tw-content);
+  top: 50%;
+}
+.before\:-translate-y-1\/2::before {
+  content: var(--tw-content);
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.before\:border-8::before {
+  content: var(--tw-content);
+  border-width: 8px;
+}
+.before\:border-y-transparent::before {
+  content: var(--tw-content);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+.before\:border-l-blue-50::before {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-left-color: rgb(246 248 252 / var(--tw-border-opacity));
+}
+.before\:border-l-blue-900::before {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-left-color: rgb(11 20 65 / var(--tw-border-opacity));
+}
+.before\:border-l-transparent::before {
+  content: var(--tw-content);
+  border-left-color: transparent;
+}
+.before\:border-r-blue-50::before {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-right-color: rgb(246 248 252 / var(--tw-border-opacity));
+}
+.before\:border-r-blue-900::before {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-right-color: rgb(11 20 65 / var(--tw-border-opacity));
+}
+.before\:border-r-transparent::before {
+  content: var(--tw-content);
+  border-right-color: transparent;
+}
+.before\:content-\[\"\"\]::before {
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.after\:absolute::after {
+  content: var(--tw-content);
+  position: absolute;
+}
+.after\:bottom-\[100\%\]::after {
+  content: var(--tw-content);
+  bottom: 100%;
+}
+.after\:left-1\/2::after {
+  content: var(--tw-content);
+  left: 50%;
+}
+.after\:left-4::after {
+  content: var(--tw-content);
+  left: 1rem;
+}
+.after\:right-4::after {
+  content: var(--tw-content);
+  right: 1rem;
+}
+.after\:top-\[100\%\]::after {
+  content: var(--tw-content);
+  top: 100%;
+}
+.after\:-translate-x-1\/2::after {
+  content: var(--tw-content);
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.after\:border-8::after {
+  content: var(--tw-content);
+  border-width: 8px;
+}
+.after\:border-x-transparent::after {
+  content: var(--tw-content);
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.after\:border-b-blue-50::after {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(246 248 252 / var(--tw-border-opacity));
+}
+.after\:border-b-blue-900::after {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(11 20 65 / var(--tw-border-opacity));
+}
+.after\:border-b-transparent::after {
+  content: var(--tw-content);
+  border-bottom-color: transparent;
+}
+.after\:border-t-blue-50::after {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-top-color: rgb(246 248 252 / var(--tw-border-opacity));
+}
+.after\:border-t-blue-900::after {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-top-color: rgb(11 20 65 / var(--tw-border-opacity));
+}
+.after\:border-t-transparent::after {
+  content: var(--tw-content);
+  border-top-color: transparent;
+}
+.after\:content-\[\"\"\]::after {
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.focus-within\:border-primary-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(76 59 239 / var(--tw-border-opacity));
+}
+.focus-within\:ring-1:focus-within {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.focus-within\:ring-error-500:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(204 64 51 / var(--tw-ring-opacity));
+}
+.focus-within\:ring-primary-500:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(76 59 239 / var(--tw-ring-opacity));
+}
+.focus-within\:ring-success-500:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 181 118 / var(--tw-ring-opacity));
+}
 .hover\:border-primary-700:hover {
   --tw-border-opacity: 1;
   border-color: rgb(29 13 165 / var(--tw-border-opacity));
@@ -1446,10 +1772,27 @@ select {
   --tw-text-opacity: 1;
   color: rgb(12 6 69 / var(--tw-text-opacity));
 }
+.focus\:border-error-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 64 51 / var(--tw-border-opacity));
+}
+.focus\:border-primary-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(76 59 239 / var(--tw-border-opacity));
+}
+.focus\:border-success-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 181 118 / var(--tw-border-opacity));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1467,6 +1810,10 @@ select {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
 }
+.focus\:ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(76 59 239 / var(--tw-ring-opacity));
+}
 .focus\:ring-sky-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(38 157 217 / var(--tw-ring-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpli-route/apollo-ds",
-  "version": "0.0.21",
+  "version": "0.1.0",
   "type": "module",
   "files": [
     "dist"
@@ -39,15 +39,15 @@
     "tailwind-merge": "^2.2.2"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.1",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/addon-onboarding": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.0.6",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@tailwindcss/forms": "^0.5.9",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
@@ -66,7 +66,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-simple-import-sort": "^12.1.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "eslint-plugin-tailwindcss": "^3.15.1",
     "eslint-plugin-testing-library": "^6.2.2",
     "jsdom": "^24.0.0",
@@ -74,7 +74,7 @@
     "postcss-cli": "^11.0.0",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",
-    "storybook": "^8.0.6",
+    "storybook": "^8.4.2",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
@@ -84,4 +84,4 @@
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.3.3"
   }
-}
+}