@kittycad/react-shared 0.1.3 → 0.1.4
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 +57 -7
- package/dist/index.esm.js +98 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +100 -4
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default, { SVGProps } from 'react';
|
|
2
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
4
|
import { Models } from '@kittycad/lib';
|
|
5
|
+
import { DeepPartial } from '@/lib/types';
|
|
4
6
|
import { ClassValue } from 'clsx';
|
|
5
7
|
|
|
6
|
-
interface ButtonProps extends
|
|
8
|
+
interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
7
9
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
8
10
|
size?: 'sm' | 'md' | 'lg';
|
|
9
|
-
children:
|
|
11
|
+
children: React__default.ReactNode;
|
|
10
12
|
}
|
|
11
|
-
declare const Button:
|
|
13
|
+
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
12
14
|
|
|
13
15
|
interface SignInPageContentProps {
|
|
14
16
|
shouldTrackConversions?: boolean;
|
|
@@ -25,7 +27,7 @@ interface SignInPageContentProps {
|
|
|
25
27
|
declare function SignInPageContent({ shouldTrackConversions, trackingClasses, buttonClasses, callbackUrl, onOAuthClick, onEmailSubmit, baseUrl, className, titleColor, getAPIBase, }: SignInPageContentProps): react_jsx_runtime.JSX.Element;
|
|
26
28
|
|
|
27
29
|
type BrandTheme = 'default' | 'yellow' | 'blue' | 'green' | 'magenta' | 'hue-shift' | 'hue-shift-on-white';
|
|
28
|
-
interface EmailLoginFormProps extends
|
|
30
|
+
interface EmailLoginFormProps extends React__default.HTMLProps<HTMLFormElement> {
|
|
29
31
|
theme?: BrandTheme;
|
|
30
32
|
buttonClassName?: string;
|
|
31
33
|
idSuffix?: string;
|
|
@@ -41,7 +43,55 @@ interface LoginTitleProps {
|
|
|
41
43
|
}
|
|
42
44
|
declare function LoginTitle({ color }: LoginTitleProps): react_jsx_runtime.JSX.Element;
|
|
43
45
|
|
|
46
|
+
declare const Spinner: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
47
|
+
|
|
48
|
+
declare const CustomIconMap: {
|
|
49
|
+
readonly exclamationMark: react_jsx_runtime.JSX.Element;
|
|
50
|
+
readonly infinity: react_jsx_runtime.JSX.Element;
|
|
51
|
+
readonly star: react_jsx_runtime.JSX.Element;
|
|
52
|
+
};
|
|
53
|
+
type CustomIconName = keyof typeof CustomIconMap;
|
|
54
|
+
declare const CustomIcon: ({ name, ...props }: {
|
|
55
|
+
name: CustomIconName;
|
|
56
|
+
} & React.SVGProps<SVGSVGElement>) => React$1.FunctionComponentElement<any>;
|
|
57
|
+
|
|
58
|
+
type TextProps = {
|
|
59
|
+
heading: {
|
|
60
|
+
unlimited: string;
|
|
61
|
+
limited: string;
|
|
62
|
+
};
|
|
63
|
+
paragraph: {
|
|
64
|
+
unlimited: string;
|
|
65
|
+
limited: string;
|
|
66
|
+
};
|
|
67
|
+
button: {
|
|
68
|
+
limited: string;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
type BillingDialogProps = {
|
|
72
|
+
error?: Error;
|
|
73
|
+
credits?: number;
|
|
74
|
+
allowance?: number;
|
|
75
|
+
upgradeHref: string;
|
|
76
|
+
text?: DeepPartial<TextProps>;
|
|
77
|
+
upgradeClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
78
|
+
className?: string;
|
|
79
|
+
};
|
|
80
|
+
declare const BillingDialog: (props: BillingDialogProps) => react_jsx_runtime.JSX.Element;
|
|
81
|
+
|
|
82
|
+
declare enum BillingRemainingMode {
|
|
83
|
+
ProgressBarFixed = 0,
|
|
84
|
+
ProgressBarStretch = 1
|
|
85
|
+
}
|
|
86
|
+
interface BillingRemainingProps {
|
|
87
|
+
mode: BillingRemainingMode;
|
|
88
|
+
error?: Error;
|
|
89
|
+
credits?: number;
|
|
90
|
+
allowance?: number;
|
|
91
|
+
}
|
|
92
|
+
declare const BillingRemaining: (props: BillingRemainingProps) => react_jsx_runtime.JSX.Element;
|
|
93
|
+
|
|
44
94
|
declare function cn(...inputs: ClassValue[]): string;
|
|
45
95
|
|
|
46
|
-
export { Button, EmailLoginForm, LoginTitle, SignInPageContent, cn };
|
|
47
|
-
export type { BrandTheme, ButtonProps, EmailLoginFormProps, LoginTitleProps, SignInPageContentProps };
|
|
96
|
+
export { BillingDialog, BillingRemaining, BillingRemainingMode, Button, CustomIcon, EmailLoginForm, LoginTitle, SignInPageContent, Spinner, cn };
|
|
97
|
+
export type { BillingDialogProps, BrandTheme, ButtonProps, EmailLoginFormProps, LoginTitleProps, SignInPageContentProps };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import * as g$2 from 'react';
|
|
3
|
-
import g__default, { createContext, forwardRef, createElement as createElement$1, useContext, useImperativeHandle, useEffect, Children, useRef, useState, useCallback, useMemo, useLayoutEffect } from 'react';
|
|
3
|
+
import g__default, { createContext, forwardRef, createElement as createElement$1, useContext, useImperativeHandle, useEffect, Children, useRef, useState, useCallback, useMemo, useLayoutEffect, cloneElement } from 'react';
|
|
4
4
|
|
|
5
5
|
function styleInject(css, ref) {
|
|
6
6
|
if ( ref === void 0 ) ref = {};
|
|
@@ -29,7 +29,7 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z = "*,: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: }/*! tailwindcss v3.4.17 | 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,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;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:Fira Code,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}.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-10{height:2.5rem}.h-11{height:2.75rem}.h-8{height:2rem}.h-\\[40px\\]{height:40px}.min-h-\\[calc\\(100vh-733px\\)\\]{min-height:calc(100vh - 733px)}.w-\\[120px\\]{width:120px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.flex-1{flex:1 1 0%}.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))}.cursor-pointer{cursor:pointer}.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-2{gap:.5rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded{border-radius:.25rem}.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))}.\\!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-primary-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-primary-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.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-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}.font-mono{font-family:Fira Code,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}.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-current{color:currentColor}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.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\\:bg-primary-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/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}}";
|
|
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.17 | 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}.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}}";
|
|
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}
|
|
@@ -7049,7 +7049,7 @@ function objectWithKey(key, value) {
|
|
|
7049
7049
|
return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty$1({}, key, value) : {};
|
|
7050
7050
|
}
|
|
7051
7051
|
|
|
7052
|
-
var defaultProps = {
|
|
7052
|
+
var defaultProps$1 = {
|
|
7053
7053
|
border: false,
|
|
7054
7054
|
className: '',
|
|
7055
7055
|
mask: null,
|
|
@@ -7078,7 +7078,7 @@ var defaultProps = {
|
|
|
7078
7078
|
swapOpacity: false
|
|
7079
7079
|
};
|
|
7080
7080
|
var FontAwesomeIcon = /*#__PURE__*/g__default.forwardRef(function (props, ref) {
|
|
7081
|
-
var allProps = _objectSpread2(_objectSpread2({}, defaultProps), props);
|
|
7081
|
+
var allProps = _objectSpread2(_objectSpread2({}, defaultProps$1), props);
|
|
7082
7082
|
|
|
7083
7083
|
var iconArgs = allProps.icon,
|
|
7084
7084
|
maskArgs = allProps.mask,
|
|
@@ -7109,7 +7109,7 @@ var FontAwesomeIcon = /*#__PURE__*/g__default.forwardRef(function (props, ref) {
|
|
|
7109
7109
|
};
|
|
7110
7110
|
Object.keys(allProps).forEach(function (key) {
|
|
7111
7111
|
// eslint-disable-next-line no-prototype-builtins
|
|
7112
|
-
if (!defaultProps.hasOwnProperty(key)) {
|
|
7112
|
+
if (!defaultProps$1.hasOwnProperty(key)) {
|
|
7113
7113
|
extraProps[key] = allProps[key];
|
|
7114
7114
|
}
|
|
7115
7115
|
});
|
|
@@ -21828,5 +21828,97 @@ function SignInPageContent({ shouldTrackConversions = false, trackingClasses = (
|
|
|
21828
21828
|
return (jsxs("div", { className: `md:flex items-center gap-item-spacing md:gap-12 max-w-4xl mx-auto px-page-margin py-section-spacing min-h-[calc(100vh-733px)] ${className}`, children: [jsxs("div", { className: "flex-1", children: [jsx(LoginTitle, { color: titleColor }), jsx("p", { className: "text-xl my-item-spacing", children: "No password setup necessary. When you sign into Zoo for the first time we create your account automatically. You can use your preferred auth provider or receive a link via email." })] }), callbackUrl && callbackUrl.length > 0 && (jsxs("div", { className: "font-xs flex flex-col items-stretch max-w-2xl gap-item-spacing-sm flex-wrap md:flex-nowrap", children: [jsx("button", { type: "button", onClick: handleClick('github'), className: finalButtonClasses('github'), children: jsxs("span", { className: "group-hover:!text-white flex gap-2 items-center justify-center mono-button-title", children: [jsx(FontAwesomeIcon, { icon: faGithub, className: "pb-0.5" }), "GitHub"] }) }), jsx("button", { type: "button", onClick: handleClick('google'), className: finalButtonClasses('google'), children: jsxs("span", { className: "group-hover:!text-white flex gap-2 items-center justify-center mono-button-title", children: [jsx(FontAwesomeIcon, { icon: faGoogle, className: "pb-1" }), "Google"] }) }), jsx("button", { type: "button", onClick: handleClick('apple'), className: finalButtonClasses('apple'), children: jsxs("span", { className: "group-hover:!text-white flex gap-2 items-center justify-center mono-button-title", children: [jsx(FontAwesomeIcon, { icon: faApple, className: "pb-[5px]" }), "Apple"] }) }), jsx("button", { type: "button", onClick: handleClick('microsoft'), className: finalButtonClasses('microsoft'), children: jsxs("span", { className: "group-hover:!text-white flex gap-2 items-center justify-center mono-button-title", children: [jsx(FontAwesomeIcon, { icon: faMicrosoft, className: "pb-1" }), "Microsoft"] }) }), jsx("button", { type: "button", onClick: handleClick('discord'), className: finalButtonClasses('discord'), children: jsxs("span", { className: "group-hover:!text-white flex gap-2 items-center justify-center mono-button-title", children: [jsx(FontAwesomeIcon, { icon: faDiscord, className: "pb-[3px]" }), "Discord"] }) }), jsx(EmailLoginForm, { theme: "hue-shift-on-white", className: "col-span-1 md:col-span-2 mt-item-spacing-sm !mb-0", buttonClassName: finalTrackingClasses('email'), onSubmit: onEmailSubmit, callbackUrl: callbackUrl, baseUrl: baseUrl, getAPIBase: getAPIBase, idSuffix: "page" })] }))] }));
|
|
21829
21829
|
}
|
|
21830
21830
|
|
|
21831
|
-
|
|
21831
|
+
const Spinner = (props) => {
|
|
21832
|
+
return (jsxs("svg", { "data-testid": "spinner", viewBox: "0 0 10 10", className: 'w-8 h-8', ...props, children: [jsx("title", { children: "spinner" }), jsx("circle", { cx: "5", cy: "5", r: "4", stroke: "currentColor", fill: "none", strokeDasharray: "4, 4", className: "animate-spin origin-center" })] }));
|
|
21833
|
+
};
|
|
21834
|
+
|
|
21835
|
+
// TODO: figure out where this should live v. modeling-app, for now this is only a subset
|
|
21836
|
+
const CustomIconMap = {
|
|
21837
|
+
exclamationMark: (jsxs("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "exclamation mark", children: [jsx("title", { children: "exclamation mark" }), jsx("path", { d: "M9.76391 11.6597L9.3633 7.91112V5.00671H10.6224V7.91112L10.2217 11.6597H9.76391ZM9.99283 15.1221C9.60176 15.1221 9.32515 15.041 9.163 14.8788C9.01039 14.7167 8.93408 14.5116 8.93408 14.2636V14.0061C8.93408 13.7581 9.01039 13.553 9.163 13.3909C9.32515 13.2287 9.60176 13.1476 9.99283 13.1476C10.3839 13.1476 10.6557 13.2287 10.8084 13.3909C10.9705 13.553 11.0516 13.7581 11.0516 14.0061V14.2636C11.0516 14.5116 10.9705 14.7167 10.8084 14.8788C10.6557 15.041 10.3839 15.1221 9.99283 15.1221Z", fill: "currentColor" })] })),
|
|
21838
|
+
infinity: (jsxs("svg", { viewBox: "0 0 13 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "infinity", children: [jsx("title", { children: "infinity" }), jsx("path", { d: "M10 0C11.6567 0.000169571 12.9999 1.34331 13 3C13 4.65671 11.6567 5.99983 10 6C9.08871 6 8.27123 5.59359 7.72168 4.95312V4.95215L6.58398 3.64941L5.43262 4.95703L5.43164 4.95605C4.88213 5.59421 4.06758 6 3.1582 6C1.50144 5.99992 0.15825 4.65677 0.158203 3C0.158279 1.34326 1.50146 7.54041e-05 3.1582 0C4.06727 0 4.88213 0.405203 5.43164 1.04297H5.43262L6.58496 2.34961L7.72461 1.04492C8.27414 0.406002 9.08999 0 10 0ZM3.1582 0.857422C1.97485 0.857497 1.0157 1.81664 1.01562 3C1.01567 4.18338 1.97483 5.1425 3.1582 5.14258C3.80891 5.14258 4.3915 4.85326 4.78516 4.39453L4.78906 4.38965L6.01562 3L4.78906 1.61035L4.78516 1.60547C4.3915 1.1468 3.80885 0.857422 3.1582 0.857422ZM10 0.857422C9.34921 0.857422 8.76573 1.14664 8.37207 1.60547L8.37012 1.6084L7.15527 3L8.37012 4.3916L8.37305 4.39453H8.37207C8.76573 4.85333 9.34924 5.14258 10 5.14258C11.1833 5.14241 12.1425 4.18332 12.1426 3C12.1425 1.8167 11.1833 0.857591 10 0.857422Z", fill: "currentColor" })] })),
|
|
21839
|
+
star: (jsxs("svg", { viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "star", children: [jsx("title", { children: "star" }), jsx("path", { d: "M8.93445 5.33667H13.6571L13.951 6.24097L10.1298 9.01636L11.5897 13.5085L10.8202 14.0671L6.99988 11.2908L3.17957 14.0671L2.41003 13.5085L3.86902 9.01636L0.0487061 6.24097L0.342651 5.33667H5.06531L6.52429 0.845459H7.47546L8.93445 5.33667ZM5.90417 5.99097L5.42859 6.33667H1.88074L4.75085 8.42163L4.9325 8.98022L3.83582 12.3533L6.70593 10.2693H7.29382L10.163 12.3533L9.06726 8.98022L9.2489 8.42163L12.119 6.33667H8.57117L8.09558 5.99097L6.99988 2.61792L5.90417 5.99097Z", fill: "currentColor" })] })),
|
|
21840
|
+
};
|
|
21841
|
+
const CustomIcon = ({ name, ...props }) => cloneElement(CustomIconMap[name], props);
|
|
21842
|
+
|
|
21843
|
+
var BillingRemainingMode;
|
|
21844
|
+
(function (BillingRemainingMode) {
|
|
21845
|
+
BillingRemainingMode[BillingRemainingMode["ProgressBarFixed"] = 0] = "ProgressBarFixed";
|
|
21846
|
+
BillingRemainingMode[BillingRemainingMode["ProgressBarStretch"] = 1] = "ProgressBarStretch";
|
|
21847
|
+
})(BillingRemainingMode || (BillingRemainingMode = {}));
|
|
21848
|
+
const ErrorMsg = (props) => {
|
|
21849
|
+
const [showMessage, setShowMessage] = useState(false);
|
|
21850
|
+
const fadedBg = 'rgba(127, 127, 127, 1)';
|
|
21851
|
+
const fadedFg = 'rgba(255, 255, 255, 1)';
|
|
21852
|
+
const colors = {
|
|
21853
|
+
color: fadedFg,
|
|
21854
|
+
stroke: fadedFg,
|
|
21855
|
+
fill: fadedFg,
|
|
21856
|
+
backgroundColor: fadedBg,
|
|
21857
|
+
};
|
|
21858
|
+
return (jsxs("div", { onMouseEnter: () => setShowMessage(true), onMouseLeave: () => setShowMessage(false), children: [showMessage && (jsx("div", { style: {
|
|
21859
|
+
position: 'absolute',
|
|
21860
|
+
}, children: jsx("div", { className: "rounded p-1", style: { ...colors, position: 'relative', top: -32 }, children: props.error.toString() }) })), jsx("div", { className: "rounded", style: colors, children: jsx(CustomIcon, { name: "exclamationMark", className: "w-5 h-5" }) })] }));
|
|
21861
|
+
};
|
|
21862
|
+
const ProgressBar = (props) => {
|
|
21863
|
+
const ratio = props.value / props.max;
|
|
21864
|
+
return (jsx("div", { className: "h-1.5 rounded w-full border-ml-black bg-ml-black border", children: jsx("div", { "data-testid": "billing-remaining-progress-bar-inner", className: "bg-ml-green rounded-full", style: {
|
|
21865
|
+
width: `${Math.min(100, ratio * 100).toFixed(2)}%`,
|
|
21866
|
+
height: '100%',
|
|
21867
|
+
} }) }));
|
|
21868
|
+
};
|
|
21869
|
+
const BillingCredit = (props) => {
|
|
21870
|
+
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)));
|
|
21871
|
+
};
|
|
21872
|
+
const BillingRemaining = (props) => {
|
|
21873
|
+
const isFlex = props.mode === BillingRemainingMode.ProgressBarStretch;
|
|
21874
|
+
const cssWrapper = [
|
|
21875
|
+
'bg-ml-green',
|
|
21876
|
+
'dark:bg-transparent',
|
|
21877
|
+
'select-none',
|
|
21878
|
+
'cursor-pointer',
|
|
21879
|
+
'!no-underline',
|
|
21880
|
+
'text-xs',
|
|
21881
|
+
'!text-chalkboard-100',
|
|
21882
|
+
'dark:!text-ml-green',
|
|
21883
|
+
];
|
|
21884
|
+
return (jsxs("div", { "data-testid": "billing-remaining", className: [isFlex ? 'flex flex-col gap-1' : 'px-2 flex items-stretch']
|
|
21885
|
+
.concat(cssWrapper)
|
|
21886
|
+
.join(' '), children: [jsxs("div", { className: "flex flex-row gap-2 items-center", children: [props.error && jsx(ErrorMsg, { error: props.error }), !isFlex &&
|
|
21887
|
+
(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..." })] })) }))] }));
|
|
21888
|
+
};
|
|
21889
|
+
|
|
21890
|
+
const SITE = 'https://zoo.dev';
|
|
21891
|
+
const paths = {
|
|
21892
|
+
ZOO_UPGRADE: `${SITE}/design-studio-pricing`};
|
|
21893
|
+
|
|
21894
|
+
const defaultProps = {
|
|
21895
|
+
upgradeHref: paths.ZOO_UPGRADE,
|
|
21896
|
+
text: {
|
|
21897
|
+
heading: {
|
|
21898
|
+
unlimited: 'Unlimited Text-to-CAD',
|
|
21899
|
+
limited: 'Upgrade your plan',
|
|
21900
|
+
},
|
|
21901
|
+
paragraph: {
|
|
21902
|
+
unlimited: 'You have unlimited use on your paid plan.',
|
|
21903
|
+
limited: 'for unlimited usage of Text-to-CAD and more!',
|
|
21904
|
+
},
|
|
21905
|
+
button: {
|
|
21906
|
+
limited: 'Upgrade',
|
|
21907
|
+
},
|
|
21908
|
+
},
|
|
21909
|
+
};
|
|
21910
|
+
const BillingDialog = (props) => {
|
|
21911
|
+
const hasUnlimited = props.credits === Number.POSITIVE_INFINITY;
|
|
21912
|
+
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
|
|
21913
|
+
? props.text?.heading?.unlimited ||
|
|
21914
|
+
defaultProps.text?.heading?.unlimited
|
|
21915
|
+
: props.text?.heading?.limited ||
|
|
21916
|
+
defaultProps.text?.heading?.limited }), jsx("div", { className: "text-ml-grey", children: hasUnlimited
|
|
21917
|
+
? props.text?.paragraph?.unlimited ||
|
|
21918
|
+
defaultProps.text?.paragraph?.unlimited
|
|
21919
|
+
: props.text?.paragraph?.limited ||
|
|
21920
|
+
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 }))] })] }));
|
|
21921
|
+
};
|
|
21922
|
+
|
|
21923
|
+
export { BillingDialog, BillingRemaining, BillingRemainingMode, Button, CustomIcon, EmailLoginForm, LoginTitle, SignInPageContent, Spinner, cn };
|
|
21832
21924
|
//# sourceMappingURL=index.esm.js.map
|