@kittycad/react-shared 0.1.10 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +14 -8
  2. package/dist/index.esm.js +53 -21
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +53 -21
  5. package/dist/index.js.map +1 -1
  6. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -49,7 +49,7 @@ function styleInject(css, ref) {
49
49
  }
50
50
  }
51
51
 
52
- var css_248z = "@import \"./colors.css\";*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }\n/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-\\[-1px\\]{left:-1px}.top-\\[2px\\]{top:2px}.z-0{z-index:0}.col-span-1{grid-column:span 1/span 1}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.\\!mb-0{margin-bottom:0!important}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\\[40px\\]{height:40px}.min-h-\\[calc\\(100vh-733px\\)\\]{min-height:calc(100vh - 733px)}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\\[120px\\]{width:120px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.origin-center{transform-origin:center}.translate-y-\\[0\\]{--tw-translate-y:0;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))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-none{border-style:none}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-ml-black{border-color:var(--chalkboard-100)}.\\!bg-transparent{background-color:transparent!important}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-ml-black{background-color:var(--chalkboard-100)}.bg-ml-green{--tw-bg-opacity:1;background-color:rgb(41 255 164/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:oklch(var(--_primary)/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.p-1{padding:.25rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pb-0\\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-\\[3px\\]{padding-bottom:3px}.pb-\\[5px\\]{padding-bottom:5px}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.leading-normal{line-height:1.5}.\\!text-chalkboard-100{--tw-text-opacity:1!important;color:oklch(var(--_chalkboard-100)/var(--tw-text-opacity,1))!important}.\\!text-ml-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-current{color:currentColor}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-inherit{color:inherit}.text-ml-black{color:var(--chalkboard-100)}.text-ml-grey{color:var(--chalkboard-80)}.text-ml-white,.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\\!no-underline{text-decoration-line:none!important}.outline{outline-style:solid}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\\:absolute:before{content:var(--tw-content);position:absolute}.before\\:-inset-y-1\\/4:before{bottom:-25%;content:var(--tw-content);top:-25%}.before\\:left-1\\/2:before{content:var(--tw-content);left:50%}.before\\:z-\\[-1\\]:before{content:var(--tw-content);z-index:-1}.before\\:w-\\[1px\\]:before{content:var(--tw-content);width:1px}.before\\:origin-center:before{content:var(--tw-content);transform-origin:center}.before\\:rotate-45:before{--tw-rotate:45deg;content:var(--tw-content);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\\:opacity-30:before{content:var(--tw-content);opacity:.3}.before\\:content-\\[\\'\\'\\]:before{--tw-content:\"\";content:var(--tw-content)}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\\:opacity-80:hover{opacity:.8}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:\\!text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.dark\\:bg-transparent:is(.dark *){background-color:transparent}.dark\\:\\!text-ml-green:is(.dark *){--tw-text-opacity:1!important;color:rgb(41 255 164/var(--tw-text-opacity,1))!important}@media (min-width:640px){.sm\\:flex-row{flex-direction:row}}@media (min-width:768px){.md\\:col-span-2{grid-column:span 2/span 2}.md\\:flex{display:flex}.md\\:flex-nowrap{flex-wrap:nowrap}.md\\:gap-12{gap:3rem}.md\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\\:text-5xl{font-size:3rem;line-height:1}.lg\\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1280px){.xl\\:text-6xl{font-size:3.75rem;line-height:1}}";
52
+ var css_248z = "@import \"./colors.css\";*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }\n/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-\\[-1px\\]{left:-1px}.top-\\[2px\\]{top:2px}.z-0{z-index:0}.col-span-1{grid-column:span 1/span 1}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.\\!mb-0{margin-bottom:0!important}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\\[40px\\]{height:40px}.min-h-\\[calc\\(100vh-733px\\)\\]{min-height:calc(100vh - 733px)}.w-10{width:2.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-\\[120px\\]{width:120px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.origin-center{transform-origin:center}.translate-y-\\[0\\]{--tw-translate-y:0;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))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-ml-black{border-color:var(--chalkboard-100)}.\\!bg-transparent{background-color:transparent!important}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-ml-black{background-color:var(--chalkboard-100)}.bg-ml-green{--tw-bg-opacity:1;background-color:rgb(41 255 164/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:oklch(var(--_primary)/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.p-1{padding:.25rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pb-0\\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-\\[3px\\]{padding-bottom:3px}.pb-\\[5px\\]{padding-bottom:5px}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.leading-none{line-height:1}.leading-normal{line-height:1.5}.\\!text-chalkboard-100{--tw-text-opacity:1!important;color:oklch(var(--_chalkboard-100)/var(--tw-text-opacity,1))!important}.\\!text-ml-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-chalkboard-90{--tw-text-opacity:1;color:oklch(var(--_chalkboard-90)/var(--tw-text-opacity,1))}.text-current{color:currentColor}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-inherit{color:inherit}.text-ml-black{color:var(--chalkboard-100)}.text-ml-grey{color:var(--chalkboard-80)}.text-ml-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\\!no-underline{text-decoration-line:none!important}.outline{outline-style:solid}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\\:absolute:before{content:var(--tw-content);position:absolute}.before\\:-inset-y-1\\/4:before{bottom:-25%;content:var(--tw-content);top:-25%}.before\\:left-1\\/2:before{content:var(--tw-content);left:50%}.before\\:z-\\[-1\\]:before{content:var(--tw-content);z-index:-1}.before\\:w-\\[1px\\]:before{content:var(--tw-content);width:1px}.before\\:origin-center:before{content:var(--tw-content);transform-origin:center}.before\\:rotate-45:before{--tw-rotate:45deg;content:var(--tw-content);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\\:opacity-30:before{content:var(--tw-content);opacity:.3}.before\\:content-\\[\\'\\'\\]:before{--tw-content:\"\";content:var(--tw-content)}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\\:opacity-80:hover{opacity:.8}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:\\!text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}@media (min-width:640px){.sm\\:flex-row{flex-direction:row}}@media (min-width:768px){.md\\:col-span-2{grid-column:span 2/span 2}.md\\:flex{display:flex}.md\\:flex-nowrap{flex-wrap:nowrap}.md\\:gap-12{gap:3rem}.md\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\\:text-5xl{font-size:3rem;line-height:1}.lg\\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1280px){.xl\\:text-6xl{font-size:3.75rem;line-height:1}}";
53
53
  styleInject(css_248z,{"insertAt":"top"});
54
54
 
55
55
  function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
@@ -22394,6 +22394,11 @@ exports.BillingRemainingMode = void 0;
22394
22394
  BillingRemainingMode[BillingRemainingMode["ProgressBarFixed"] = 0] = "ProgressBarFixed";
22395
22395
  BillingRemainingMode[BillingRemainingMode["ProgressBarStretch"] = 1] = "ProgressBarStretch";
22396
22396
  })(exports.BillingRemainingMode || (exports.BillingRemainingMode = {}));
22397
+ const TotalDue = (props) => (jsxRuntime.jsxs("div", { className: `${Number(props.amount) > 0 ? 'text-red-500' : 'text-chalkboard-90'} flex flex-col leading-none`, children: [jsxRuntime.jsx("div", { className: "border-t border-black text-chalkboard-90", style: { fontSize: '0.9em' }, children: "Overrun" }), jsxRuntime.jsxs("div", { className: "font-mono", style: {
22398
+ fontSize: '0.95em',
22399
+ letterSpacing: NaN,
22400
+ paddingTop: '0.1em',
22401
+ }, children: [jsxRuntime.jsx("span", { children: "$" }), jsxRuntime.jsx("span", { children: props.amount })] })] }));
22397
22402
  const ErrorMsg = (props) => {
22398
22403
  const [showMessage, setShowMessage] = b$2.useState(false);
22399
22404
  const fadedBg = 'rgba(127, 127, 127, 1)';
@@ -22415,29 +22420,34 @@ const ProgressBar = (props) => {
22415
22420
  height: '100%',
22416
22421
  } }) }));
22417
22422
  };
22418
- const BillingCredit = (props) => {
22419
- return props.amount === Number.POSITIVE_INFINITY ? (jsxRuntime.jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (Math.max(0, Math.trunc(props.amount)));
22423
+ const USDollar = new Intl.NumberFormat('en-US', {
22424
+ style: 'currency',
22425
+ currency: 'USD',
22426
+ });
22427
+ const BillingBalance = (props) => {
22428
+ return props.amount === Number.POSITIVE_INFINITY ? (jsxRuntime.jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (USDollar.format(props.amount));
22420
22429
  };
22421
22430
  const BillingRemaining = (props) => {
22422
22431
  const isFlex = props.mode === exports.BillingRemainingMode.ProgressBarStretch;
22423
22432
  const cssWrapper = [
22424
22433
  'bg-ml-green',
22425
- 'dark:bg-transparent',
22426
22434
  'select-none',
22427
22435
  'cursor-pointer',
22428
22436
  '!no-underline',
22429
22437
  'text-xs',
22430
22438
  '!text-chalkboard-100',
22431
- 'dark:!text-ml-green',
22432
22439
  ];
22440
+ const hasPaymentMethod = props.paymentMethods !== undefined && props.paymentMethods.length > 0;
22441
+ const totalDue = props.userPaymentBalance?.total_due ?? '0.00';
22433
22442
  return (jsxRuntime.jsxs("div", { "data-testid": "billing-remaining", className: [isFlex ? 'flex flex-col gap-1' : 'px-2 flex items-stretch']
22434
22443
  .concat(cssWrapper)
22435
- .join(' '), children: [jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center", children: [props.error && jsxRuntime.jsx(ErrorMsg, { error: props.error }), !isFlex &&
22436
- (typeof props.credits === 'number' ? (jsxRuntime.jsx("div", { className: "font-mono", "data-testid": "billing-credits", children: jsxRuntime.jsx(BillingCredit, { amount: props.credits }) })) : (jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.credits !== Number.POSITIVE_INFINITY && (jsxRuntime.jsx("div", { className: [isFlex ? 'flex-grow' : 'w-9'].join(' '), children: jsxRuntime.jsx(ProgressBar, { max: props.allowance ?? 1, value: props.credits ?? 0 }) }))] }), isFlex && (jsxRuntime.jsx("div", { className: "flex flex-row gap-1", children: typeof props.credits === 'number' ? (props.credits !== Number.POSITIVE_INFINITY ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.credits, " credits remaining this month"] })) : null) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsxRuntime.jsx("span", { children: "Fetching remaining credits..." })] })) }))] }));
22444
+ .join(' '), children: [jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center justify-center", children: [props.error && jsxRuntime.jsx(ErrorMsg, { error: props.error }), jsxRuntime.jsxs("div", { className: `w-full flex flex-col ${isFlex ? '' : 'items-center'}`, children: [!isFlex &&
22445
+ (typeof props.balance === 'number' ? (jsxRuntime.jsx("div", { className: "font-mono", "data-testid": "billing-balance", children: jsxRuntime.jsx(BillingBalance, { amount: props.balance }) })) : (jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsxRuntime.jsx("div", { className: [isFlex ? 'flex-grow' : 'w-10'].join(' '), children: jsxRuntime.jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsxRuntime.jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsxRuntime.jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [USDollar.format(props.balance), " balance remaining this month"] })) : null) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsxRuntime.jsx("span", { children: "Fetching remaining balance..." })] })) }))] }));
22437
22446
  };
22438
22447
 
22439
22448
  const SITE = 'https://zoo.dev';
22440
22449
  const paths = {
22450
+ ZOO_ACCOUNT: `${SITE}/account`,
22441
22451
  ZOO_UPGRADE: `${SITE}/design-studio-pricing`};
22442
22452
 
22443
22453
  const defaultProps = {
@@ -22457,7 +22467,11 @@ const defaultProps = {
22457
22467
  },
22458
22468
  };
22459
22469
  const BillingDialog = (props) => {
22460
- const hasUnlimited = props.credits === Number.POSITIVE_INFINITY;
22470
+ const hasUnlimited = props.balance === Number.POSITIVE_INFINITY;
22471
+ const totalDue = props.userPaymentBalance?.total_due;
22472
+ if (!hasUnlimited && totalDue) {
22473
+ return (jsxRuntime.jsx("div", { className: `bg-ml-green fg-ml-black flex flex-row justify-center rounded-lg p-4 gap-2 text-xs ${props.className ?? ''}`, children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-row gap-2", children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: "rounded bg-ml-black p-1", children: jsxRuntime.jsx(CustomIcon, { name: "exclamationMark", className: "!text-ml-white w-5 h-5" }) }) }), jsxRuntime.jsxs("div", { className: "text-chalkboard-90", children: ["To continue using Zoo's services, you must clear an unpaid total of ", jsxRuntime.jsxs("span", { className: "font-bold", children: ["$", totalDue] }), "."] })] }), jsxRuntime.jsx("a", { className: "bg-ml-black text-ml-white rounded-lg text-center p-1 cursor-pointer", href: `${paths.ZOO_ACCOUNT}/billing`, target: "_blank", rel: "noopener noreferrer", "data-testid": "billing-account-button", children: "Go to billing" })] }) }));
22474
+ }
22461
22475
  return (jsxRuntime.jsxs("div", { className: `bg-ml-green fg-ml-black flex flex-row rounded-lg p-4 gap-2 text-xs ${props.className ?? ''}`, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: "rounded bg-ml-black p-1", children: hasUnlimited ? (jsxRuntime.jsx(CustomIcon, { name: "infinity", className: "!text-ml-white w-5 h-5" })) : (jsxRuntime.jsx(CustomIcon, { name: "star", className: "!text-ml-white w-5 h-5" })) }) }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx("div", { className: "font-bold text-ml-black h-5 py-1", children: hasUnlimited
22462
22476
  ? props.text?.heading?.unlimited ||
22463
22477
  defaultProps.text?.heading?.unlimited
@@ -22466,7 +22480,7 @@ const BillingDialog = (props) => {
22466
22480
  ? props.text?.paragraph?.unlimited ||
22467
22481
  defaultProps.text?.paragraph?.unlimited
22468
22482
  : props.text?.paragraph?.limited ||
22469
- defaultProps.text?.paragraph?.limited }), jsxRuntime.jsx(BillingRemaining, { mode: exports.BillingRemainingMode.ProgressBarStretch, error: props.error, credits: props.credits, allowance: props.allowance }), !hasUnlimited && (jsxRuntime.jsx("a", { className: "bg-ml-black text-ml-white rounded-lg text-center p-1 cursor-pointer", href: props.upgradeHref || defaultProps.upgradeHref, target: "_blank", rel: "noopener noreferrer", "data-testid": "billing-upgrade-button", onClick: props.upgradeClick, children: props.text?.button?.limited || defaultProps.text?.button?.limited }))] })] }));
22483
+ defaultProps.text?.paragraph?.limited }), jsxRuntime.jsx(BillingRemaining, { mode: exports.BillingRemainingMode.ProgressBarStretch, error: props.error, balance: props.balance, allowance: props.allowance }), !hasUnlimited && (jsxRuntime.jsx("a", { className: "bg-ml-black text-ml-white rounded-lg text-center p-1 cursor-pointer", href: props.upgradeHref || defaultProps.upgradeHref, target: "_blank", rel: "noopener noreferrer", "data-testid": "billing-upgrade-button", onClick: props.upgradeClick, children: props.text?.button?.limited || defaultProps.text?.button?.limited }))] })] }));
22470
22484
  };
22471
22485
 
22472
22486
  const TypedArrayPrototypeGetSymbolToStringTag = (() => {
@@ -25770,10 +25784,18 @@ class BillingError {
25770
25784
  });
25771
25785
  }
25772
25786
  static from(v) {
25787
+ // Ugh.
25773
25788
  return (typeof v === 'object' &&
25789
+ v !== null &&
25774
25790
  'error' in v &&
25791
+ typeof v.error === 'object' &&
25792
+ v.error !== null &&
25775
25793
  'type' in v.error &&
25776
- Object.values(EBillingError).some((x) => x === v.error.type));
25794
+ Object.values(EBillingError).some((x) => x ===
25795
+ (typeof v.error === 'object' &&
25796
+ v.error !== null &&
25797
+ 'type' in v.error &&
25798
+ v.error.type)));
25777
25799
  }
25778
25800
  }
25779
25801
  async function fetchBilling(fn, options) {
@@ -25824,11 +25846,17 @@ async function getBillingInfo(client) {
25824
25846
  }
25825
25847
  const subscriptions = await fetchBilling(j.get_user_subscription, { client });
25826
25848
  const org = await fetchBilling(L.get_user_org, { client });
25849
+ const paymentMethods = await fetchBilling(j.list_payment_methods_for_user, { client });
25850
+ if (BillingError.from(paymentMethods)) {
25851
+ return paymentMethods;
25852
+ }
25827
25853
  if (!BillingError.from(org)) {
25828
25854
  // Org override here. TODO for api: remove the need for this
25829
- // If the user is part of an org, they get infinite credits.
25855
+ // If the user is part of an org, they get infinite balance.
25830
25856
  return {
25831
- credits: Number.POSITIVE_INFINITY,
25857
+ balance: Number.POSITIVE_INFINITY,
25858
+ paymentMethods,
25859
+ userPaymentBalance: billing,
25832
25860
  isOrg: true,
25833
25861
  hasSubscription: true,
25834
25862
  };
@@ -25837,34 +25865,36 @@ async function getBillingInfo(client) {
25837
25865
  return subscriptions;
25838
25866
  }
25839
25867
  const tier = subscriptions.modeling_app.name;
25840
- const computedAllowance = subscriptions.modeling_app.monthly_pay_as_you_go_api_credits;
25841
- const computedCredits = Number(billing.monthly_api_credits_remaining) +
25842
- Number(billing.stable_api_credits_remaining);
25868
+ const computedAllowance = subscriptions.modeling_app.monthly_pay_as_you_go_api_credits_monetary_value;
25869
+ let balance;
25843
25870
  let allowance;
25844
- let credits;
25845
25871
  let hasSubscription;
25846
25872
  let isOrg;
25847
25873
  switch (tier) {
25848
25874
  case 'enterprise':
25849
25875
  case 'team':
25850
- credits = Number.POSITIVE_INFINITY;
25876
+ balance = Number.POSITIVE_INFINITY;
25851
25877
  hasSubscription = true;
25852
25878
  isOrg = true;
25853
25879
  break;
25854
25880
  case 'pro':
25855
- credits = Number.POSITIVE_INFINITY;
25881
+ balance = Number.POSITIVE_INFINITY;
25856
25882
  hasSubscription = true;
25857
25883
  isOrg = false;
25858
25884
  break;
25859
25885
  case 'plus':
25860
25886
  allowance = computedAllowance;
25861
- credits = computedCredits;
25887
+ balance =
25888
+ billing.monthly_api_credits_remaining_monetary_value +
25889
+ billing.stable_api_credits_remaining_monetary_value;
25862
25890
  isOrg = false;
25863
25891
  hasSubscription = true;
25864
25892
  break;
25865
25893
  case 'free':
25866
25894
  allowance = computedAllowance;
25867
- credits = computedCredits;
25895
+ balance =
25896
+ billing.monthly_api_credits_remaining_monetary_value +
25897
+ billing.stable_api_credits_remaining_monetary_value;
25868
25898
  isOrg = false;
25869
25899
  hasSubscription = false;
25870
25900
  break;
@@ -25873,8 +25903,10 @@ async function getBillingInfo(client) {
25873
25903
  }
25874
25904
  }
25875
25905
  return {
25906
+ balance,
25876
25907
  allowance,
25877
- credits,
25908
+ userPaymentBalance: billing,
25909
+ paymentMethods,
25878
25910
  hasSubscription,
25879
25911
  isOrg,
25880
25912
  };