@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.
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React$1 from 'react';
2
2
  import React__default, { SVGProps } from 'react';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
- import { AccountProvider, Client } from '@kittycad/lib';
4
+ import { AccountProvider, CustomerBalance, PaymentMethod, Client } from '@kittycad/lib';
5
5
  import { BillingError as BillingError$1 } from '@/lib/billing';
6
6
  import { DeepPartial } from '@/lib/types';
7
7
  import { ClassValue } from 'clsx';
@@ -71,8 +71,9 @@ type TextProps = {
71
71
  };
72
72
  type BillingDialogProps = {
73
73
  error?: BillingError$1;
74
- credits?: number;
74
+ balance?: number;
75
75
  allowance?: number;
76
+ userPaymentBalance?: CustomerBalance;
76
77
  upgradeHref: string;
77
78
  text?: DeepPartial<TextProps>;
78
79
  upgradeClick?: React.MouseEventHandler<HTMLAnchorElement>;
@@ -87,8 +88,10 @@ declare enum BillingRemainingMode {
87
88
  interface BillingRemainingProps {
88
89
  mode: BillingRemainingMode;
89
90
  error?: BillingError$1;
90
- credits?: number;
91
+ balance?: number;
91
92
  allowance?: number;
93
+ paymentMethods?: PaymentMethod[];
94
+ userPaymentBalance?: CustomerBalance;
92
95
  }
93
96
  declare const BillingRemaining: (props: BillingRemainingProps) => react_jsx_runtime.JSX.Element;
94
97
 
@@ -129,14 +132,17 @@ type IBillingError = _IBillingError extends {
129
132
  declare class BillingError {
130
133
  error: IBillingError;
131
134
  constructor(error: IBillingError);
132
- static from(v: any): v is BillingError;
135
+ static from(v: unknown): v is BillingError;
133
136
  }
134
- declare function getBillingInfo(client: Client): Promise<BillingError | {
135
- credits: number;
137
+ interface IBillingInfo {
138
+ balance: number;
136
139
  allowance?: number;
140
+ userPaymentBalance: CustomerBalance;
141
+ paymentMethods: PaymentMethod[];
137
142
  isOrg: boolean;
138
143
  hasSubscription: boolean;
139
- }>;
144
+ }
145
+ declare function getBillingInfo(client: Client): Promise<BillingError | IBillingInfo>;
140
146
 
141
147
  export { BillingDialog, BillingError, BillingRemaining, BillingRemainingMode, Button, CustomIcon, EmailLoginForm, LoginTitle, SignInPageContent, Spinner, cn, getBillingInfo };
142
- export type { BillingDialogProps, BrandTheme, ButtonProps, EmailLoginFormProps, LoginTitleProps, SignInPageContentProps };
148
+ export type { BillingDialogProps, BrandTheme, ButtonProps, EmailLoginFormProps, IBillingInfo, LoginTitleProps, SignInPageContentProps };
package/dist/index.esm.js CHANGED
@@ -29,7 +29,7 @@ function styleInject(css, ref) {
29
29
  }
30
30
  }
31
31
 
32
- 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}}";
32
+ 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}}";
33
33
  styleInject(css_248z,{"insertAt":"top"});
34
34
 
35
35
  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}
@@ -22374,6 +22374,11 @@ var BillingRemainingMode;
22374
22374
  BillingRemainingMode[BillingRemainingMode["ProgressBarFixed"] = 0] = "ProgressBarFixed";
22375
22375
  BillingRemainingMode[BillingRemainingMode["ProgressBarStretch"] = 1] = "ProgressBarStretch";
22376
22376
  })(BillingRemainingMode || (BillingRemainingMode = {}));
22377
+ const TotalDue = (props) => (jsxs("div", { className: `${Number(props.amount) > 0 ? 'text-red-500' : 'text-chalkboard-90'} flex flex-col leading-none`, children: [jsx("div", { className: "border-t border-black text-chalkboard-90", style: { fontSize: '0.9em' }, children: "Overrun" }), jsxs("div", { className: "font-mono", style: {
22378
+ fontSize: '0.95em',
22379
+ letterSpacing: NaN,
22380
+ paddingTop: '0.1em',
22381
+ }, children: [jsx("span", { children: "$" }), jsx("span", { children: props.amount })] })] }));
22377
22382
  const ErrorMsg = (props) => {
22378
22383
  const [showMessage, setShowMessage] = useState(false);
22379
22384
  const fadedBg = 'rgba(127, 127, 127, 1)';
@@ -22395,29 +22400,34 @@ const ProgressBar = (props) => {
22395
22400
  height: '100%',
22396
22401
  } }) }));
22397
22402
  };
22398
- const BillingCredit = (props) => {
22399
- return props.amount === Number.POSITIVE_INFINITY ? (jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (Math.max(0, Math.trunc(props.amount)));
22403
+ const USDollar = new Intl.NumberFormat('en-US', {
22404
+ style: 'currency',
22405
+ currency: 'USD',
22406
+ });
22407
+ const BillingBalance = (props) => {
22408
+ return props.amount === Number.POSITIVE_INFINITY ? (jsx(CustomIcon, { "data-testid": "infinity", name: "infinity", className: "w-5 h-5" })) : Number.isNaN(props.amount) || props.amount === undefined ? (jsx(Spinner, { className: "text-inherit w-4 h-4" })) : (USDollar.format(props.amount));
22400
22409
  };
22401
22410
  const BillingRemaining = (props) => {
22402
22411
  const isFlex = props.mode === BillingRemainingMode.ProgressBarStretch;
22403
22412
  const cssWrapper = [
22404
22413
  'bg-ml-green',
22405
- 'dark:bg-transparent',
22406
22414
  'select-none',
22407
22415
  'cursor-pointer',
22408
22416
  '!no-underline',
22409
22417
  'text-xs',
22410
22418
  '!text-chalkboard-100',
22411
- 'dark:!text-ml-green',
22412
22419
  ];
22420
+ const hasPaymentMethod = props.paymentMethods !== undefined && props.paymentMethods.length > 0;
22421
+ const totalDue = props.userPaymentBalance?.total_due ?? '0.00';
22413
22422
  return (jsxs("div", { "data-testid": "billing-remaining", className: [isFlex ? 'flex flex-col gap-1' : 'px-2 flex items-stretch']
22414
22423
  .concat(cssWrapper)
22415
- .join(' '), children: [jsxs("div", { className: "flex flex-row gap-2 items-center", children: [props.error && jsx(ErrorMsg, { error: props.error }), !isFlex &&
22416
- (typeof props.credits === 'number' ? (jsx("div", { className: "font-mono", "data-testid": "billing-credits", children: jsx(BillingCredit, { amount: props.credits }) })) : (jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.credits !== Number.POSITIVE_INFINITY && (jsx("div", { className: [isFlex ? 'flex-grow' : 'w-9'].join(' '), children: jsx(ProgressBar, { max: props.allowance ?? 1, value: props.credits ?? 0 }) }))] }), isFlex && (jsx("div", { className: "flex flex-row gap-1", children: typeof props.credits === 'number' ? (props.credits !== Number.POSITIVE_INFINITY ? (jsxs(Fragment, { children: [props.credits, " credits remaining this month"] })) : null) : (jsxs(Fragment, { children: [jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsx("span", { children: "Fetching remaining credits..." })] })) }))] }));
22424
+ .join(' '), children: [jsxs("div", { className: "flex flex-row gap-2 items-center justify-center", children: [props.error && jsx(ErrorMsg, { error: props.error }), jsxs("div", { className: `w-full flex flex-col ${isFlex ? '' : 'items-center'}`, children: [!isFlex &&
22425
+ (typeof props.balance === 'number' ? (jsx("div", { className: "font-mono", "data-testid": "billing-balance", children: jsx(BillingBalance, { amount: props.balance }) })) : (jsx(Spinner, { className: "text-inherit w-4 h-4" }))), props.balance !== Number.POSITIVE_INFINITY && (jsx("div", { className: [isFlex ? 'flex-grow' : 'w-10'].join(' '), children: jsx(ProgressBar, { max: props.allowance ?? 1, value: props.balance ?? 0 }) }))] }), !isFlex && (hasPaymentMethod || Number(totalDue.toString()) > 0) && (jsx(TotalDue, { amount: totalDue.toString() }))] }), isFlex && (jsx("div", { className: "flex flex-row gap-1 text-chalkboard-90", children: typeof props.balance === 'number' ? (props.balance !== Number.POSITIVE_INFINITY ? (jsxs(Fragment, { children: [USDollar.format(props.balance), " balance remaining this month"] })) : null) : (jsxs(Fragment, { children: [jsx(Spinner, { className: "text-inherit w-4 h-4" }), ' ', jsx("span", { children: "Fetching remaining balance..." })] })) }))] }));
22417
22426
  };
22418
22427
 
22419
22428
  const SITE = 'https://zoo.dev';
22420
22429
  const paths = {
22430
+ ZOO_ACCOUNT: `${SITE}/account`,
22421
22431
  ZOO_UPGRADE: `${SITE}/design-studio-pricing`};
22422
22432
 
22423
22433
  const defaultProps = {
@@ -22437,7 +22447,11 @@ const defaultProps = {
22437
22447
  },
22438
22448
  };
22439
22449
  const BillingDialog = (props) => {
22440
- const hasUnlimited = props.credits === Number.POSITIVE_INFINITY;
22450
+ const hasUnlimited = props.balance === Number.POSITIVE_INFINITY;
22451
+ const totalDue = props.userPaymentBalance?.total_due;
22452
+ if (!hasUnlimited && totalDue) {
22453
+ return (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: jsxs("div", { className: "flex flex-col gap-2", children: [jsxs("div", { className: "flex flex-row gap-2", children: [jsx("div", { children: jsx("div", { className: "rounded bg-ml-black p-1", children: jsx(CustomIcon, { name: "exclamationMark", className: "!text-ml-white w-5 h-5" }) }) }), jsxs("div", { className: "text-chalkboard-90", children: ["To continue using Zoo's services, you must clear an unpaid total of ", jsxs("span", { className: "font-bold", children: ["$", totalDue] }), "."] })] }), 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" })] }) }));
22454
+ }
22441
22455
  return (jsxs("div", { className: `bg-ml-green fg-ml-black flex flex-row rounded-lg p-4 gap-2 text-xs ${props.className ?? ''}`, children: [jsx("div", { children: jsx("div", { className: "rounded bg-ml-black p-1", children: hasUnlimited ? (jsx(CustomIcon, { name: "infinity", className: "!text-ml-white w-5 h-5" })) : (jsx(CustomIcon, { name: "star", className: "!text-ml-white w-5 h-5" })) }) }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx("div", { className: "font-bold text-ml-black h-5 py-1", children: hasUnlimited
22442
22456
  ? props.text?.heading?.unlimited ||
22443
22457
  defaultProps.text?.heading?.unlimited
@@ -22446,7 +22460,7 @@ const BillingDialog = (props) => {
22446
22460
  ? props.text?.paragraph?.unlimited ||
22447
22461
  defaultProps.text?.paragraph?.unlimited
22448
22462
  : props.text?.paragraph?.limited ||
22449
- defaultProps.text?.paragraph?.limited }), jsx(BillingRemaining, { mode: BillingRemainingMode.ProgressBarStretch, error: props.error, credits: props.credits, allowance: props.allowance }), !hasUnlimited && (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 }))] })] }));
22463
+ defaultProps.text?.paragraph?.limited }), jsx(BillingRemaining, { mode: BillingRemainingMode.ProgressBarStretch, error: props.error, balance: props.balance, allowance: props.allowance }), !hasUnlimited && (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 }))] })] }));
22450
22464
  };
22451
22465
 
22452
22466
  const TypedArrayPrototypeGetSymbolToStringTag = (() => {
@@ -25750,10 +25764,18 @@ class BillingError {
25750
25764
  });
25751
25765
  }
25752
25766
  static from(v) {
25767
+ // Ugh.
25753
25768
  return (typeof v === 'object' &&
25769
+ v !== null &&
25754
25770
  'error' in v &&
25771
+ typeof v.error === 'object' &&
25772
+ v.error !== null &&
25755
25773
  'type' in v.error &&
25756
- Object.values(EBillingError).some((x) => x === v.error.type));
25774
+ Object.values(EBillingError).some((x) => x ===
25775
+ (typeof v.error === 'object' &&
25776
+ v.error !== null &&
25777
+ 'type' in v.error &&
25778
+ v.error.type)));
25757
25779
  }
25758
25780
  }
25759
25781
  async function fetchBilling(fn, options) {
@@ -25804,11 +25826,17 @@ async function getBillingInfo(client) {
25804
25826
  }
25805
25827
  const subscriptions = await fetchBilling(j.get_user_subscription, { client });
25806
25828
  const org = await fetchBilling(L.get_user_org, { client });
25829
+ const paymentMethods = await fetchBilling(j.list_payment_methods_for_user, { client });
25830
+ if (BillingError.from(paymentMethods)) {
25831
+ return paymentMethods;
25832
+ }
25807
25833
  if (!BillingError.from(org)) {
25808
25834
  // Org override here. TODO for api: remove the need for this
25809
- // If the user is part of an org, they get infinite credits.
25835
+ // If the user is part of an org, they get infinite balance.
25810
25836
  return {
25811
- credits: Number.POSITIVE_INFINITY,
25837
+ balance: Number.POSITIVE_INFINITY,
25838
+ paymentMethods,
25839
+ userPaymentBalance: billing,
25812
25840
  isOrg: true,
25813
25841
  hasSubscription: true,
25814
25842
  };
@@ -25817,34 +25845,36 @@ async function getBillingInfo(client) {
25817
25845
  return subscriptions;
25818
25846
  }
25819
25847
  const tier = subscriptions.modeling_app.name;
25820
- const computedAllowance = subscriptions.modeling_app.monthly_pay_as_you_go_api_credits;
25821
- const computedCredits = Number(billing.monthly_api_credits_remaining) +
25822
- Number(billing.stable_api_credits_remaining);
25848
+ const computedAllowance = subscriptions.modeling_app.monthly_pay_as_you_go_api_credits_monetary_value;
25849
+ let balance;
25823
25850
  let allowance;
25824
- let credits;
25825
25851
  let hasSubscription;
25826
25852
  let isOrg;
25827
25853
  switch (tier) {
25828
25854
  case 'enterprise':
25829
25855
  case 'team':
25830
- credits = Number.POSITIVE_INFINITY;
25856
+ balance = Number.POSITIVE_INFINITY;
25831
25857
  hasSubscription = true;
25832
25858
  isOrg = true;
25833
25859
  break;
25834
25860
  case 'pro':
25835
- credits = Number.POSITIVE_INFINITY;
25861
+ balance = Number.POSITIVE_INFINITY;
25836
25862
  hasSubscription = true;
25837
25863
  isOrg = false;
25838
25864
  break;
25839
25865
  case 'plus':
25840
25866
  allowance = computedAllowance;
25841
- credits = computedCredits;
25867
+ balance =
25868
+ billing.monthly_api_credits_remaining_monetary_value +
25869
+ billing.stable_api_credits_remaining_monetary_value;
25842
25870
  isOrg = false;
25843
25871
  hasSubscription = true;
25844
25872
  break;
25845
25873
  case 'free':
25846
25874
  allowance = computedAllowance;
25847
- credits = computedCredits;
25875
+ balance =
25876
+ billing.monthly_api_credits_remaining_monetary_value +
25877
+ billing.stable_api_credits_remaining_monetary_value;
25848
25878
  isOrg = false;
25849
25879
  hasSubscription = false;
25850
25880
  break;
@@ -25853,8 +25883,10 @@ async function getBillingInfo(client) {
25853
25883
  }
25854
25884
  }
25855
25885
  return {
25886
+ balance,
25856
25887
  allowance,
25857
- credits,
25888
+ userPaymentBalance: billing,
25889
+ paymentMethods,
25858
25890
  hasSubscription,
25859
25891
  isOrg,
25860
25892
  };