@bunnyapp/components 1.8.6 → 2.0.0-beta.2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.8.6",
+  "version": "2.0.0-beta.2",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
-    "dist"
+    "dist",
+    "skills"
   ],
   "type": "module",
   "types": "dist/index.d.ts",
@@ -23,14 +24,15 @@
     "dependency-cruiser": "npx depcruise --exclude '^node_modules' --output-type dot src | dot -T svg > dependencygraph.svg",
     "codegen": "gql-tada generate output",
     "fetch-schema": "gql-tada generate schema 'https://bunny.bunny.internal/graphql' --header \"Authorization: $(grep '^API_TOKEN' .env | cut -d'=' -f2)\"",
-    "codegen-check": "gql-tada check"
+    "codegen-check": "gql-tada check",
+    "check:appearance": "tsx src/ui/appearance/scripts/dumpAppearance.ts",
+    "prepare": "husky"
   },
   "keywords": [],
   "author": "Bunny",
   "license": "ISC",
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@fontsource-variable/inter": "^5.2.8",
     "@parcel/watcher": "^2.5.1",
     "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
@@ -42,8 +44,7 @@
     "@storybook/addon-onboarding": "^10.4.0",
     "@storybook/react": "^10.4.0",
     "@storybook/react-vite": "^10.4.0",
-    "@tanstack/eslint-plugin-query": "^5.91.2",
-    "@tanstack/react-query-devtools": "5.75.4",
+    "@tanstack/react-query-devtools": "^5.75.4",
     "@types/lodash": "^4.17.20",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.0",
@@ -56,6 +57,7 @@
     "eslint-plugin-storybook": "^10.4.0",
     "glob": "^11.0.3",
     "gql.tada": "^1.9.0",
+    "husky": "^9.1.7",
     "less": "^4.4.2",
     "msw": "^2.11.6",
     "patch-package": "^8.0.1",
@@ -70,6 +72,7 @@
     "rollup-plugin-visualizer": "^7.0.1",
     "storybook": "^10.4.0",
     "tailwindcss": "^3.4.18",
+    "tsx": "^4.23.15",
     "typescript": "^5.9.3",
     "vite": "^6.4.1"
   },
@@ -84,7 +87,7 @@
     "@sentry/react": "^10.53.1",
     "@stripe/react-stripe-js": "^3.8.1",
     "@stripe/stripe-js": "^7.7.0",
-    "@tanstack/react-query": "5.75.4",
+    "@tanstack/react-query": "^5.101.2",
     "antd": "^5.28.0",
     "graphql": "^16.11.0",
     "graphql-request": "^6.1.0",

package/skills/bunny-components/SKILL.md

@@ -0,0 +1,431 @@
+---
+name: bunny-components
+description: Official React component library for Bunny (`@bunnyapp/components`). Embeddable UI for checkout, signup, subscriptions, invoices, quotes, billing details and transactions. Covers installing, wrapping an app in a single `BunnyProvider` (`apiHost`, `token`, `appearance`), minting portal session tokens server-side (`portalSessionCreate`), `<Checkout />` for existing accounts vs `<Signup />` for new ones (signup:read/signup:write client token), their props (priceListCode, form, defaultCouponCode, callbacks), CORS, and styling with the `appearance` prop (theme, brand colors, dark design, fonts, CSS rules, buttons, inputs, Stripe payment fields, CSP) and migrating from darkMode/configProviderProps/Ant Design. Use when embedding or restyling Bunny billing UI in a React, Next.js, Remix or Vite app. For the hosted alternative see `bunny-customer-portal`, for server SDKs `bunny-node-sdk` and `bunny-ruby-sdk`.
+---
+
+# Bunny Components: `@bunnyapp/components`
+
+Official React component library that embeds Bunny's checkout, signup,
+subscription, invoice and portal UIs in your app. Each component is a drop-in
+view over Bunny's GraphQL API and needs only a token and your tenant's
+`apiHost`. All styling goes through one prop, `appearance`.
+
+Public docs: [docs.bunny.com/developer/bunny-components](https://docs.bunny.com/developer/bunny-components/bunny-components).
+The package README ("Styling components", "Migrating to 2.0") ships in
+`node_modules/@bunnyapp/components/README.md` and matches the installed version.
+
+> **Status**: Until 2.0.0 is released, install the prerelease with
+> `npm i @bunnyapp/components@beta` (2.0.0-beta.N). Pin an exact version and
+> read the changelog before bumping.
+
+## Credential safety
+
+- Code samples load secrets from environment variables
+  (`process.env.BUNNY_CLIENT_ID`, `process.env.BUNNY_CLIENT_SECRET`). Never
+  inline a secret string in code, and never commit `.env` files.
+- **Never ship an API access token in client-side JavaScript.** The `token`
+  prop of `BunnyProvider` is either a short-lived **portal session token**
+  (one customer) or, for `<Signup />` only, a narrowly scoped
+  `signup:read signup:write` access token. Mint both on your server and pass
+  only the resulting token string into the React tree.
+- Scopes the flows need: `security:write` on the client that mints portal
+  session tokens; `signup:read signup:write` (and nothing more) on the client
+  that mints the signup token. A broader client is a bigger leak.
+- Do not log request bodies or headers that carry an `Authorization` value,
+  and do not render tokens into HTML you cache or prerender.
+- API tokens are only appropriate for an internal admin tool, and then they
+  stay in server code or a signed cookie.
+
+## Install
+
+```sh
+npm install @bunnyapp/components            # until 2.0.0: npm install @bunnyapp/components@beta
+```
+
+Install the peer dependencies. Use React and react-dom `^18.3.1` (React 19 is
+not supported) and `antd` `^5` (with `@ant-design/icons`, used for overlays and
+form wiring only, not for styling). The rest of the peers are listed in the
+package's `peerDependencies` in `package.json`: install them all.
+
+## One `BunnyProvider` per token
+
+Mount **one** `BunnyProvider` above the Bunny components that share a token.
+It owns the API client, the query cache and the session; several providers
+with the same token duplicate requests and let caches drift.
+
+```tsx
+import { BunnyProvider, Subscriptions, BillingDetails } from "@bunnyapp/components";
+
+export function BillingPage({ sessionToken }: { sessionToken: string }) {
+  return (
+    <BunnyProvider
+      token={sessionToken}
+      apiHost={process.env.NEXT_PUBLIC_BUNNY_API_HOST!} // https://<subdomain>.bunny.com
+    >
+      <Subscriptions />
+      <BillingDetails />
+    </BunnyProvider>
+  );
+}
+```
+
+In server-rendered apps (Next.js App Router, Remix, Nuxt) mint the token in
+the server layer (server component, loader, API route) and pass it as a prop to
+a `"use client"` boundary: `BunnyProvider` runs client-side. Tokens are
+short-lived (24 h by default), so do not mint them at build time. Other
+`BunnyProvider` props worth knowing: `onTokenExpired` (refresh and re-render
+with a new token), `queryClient` (reuse your own TanStack client) and
+`disableErrorNotifications`.
+
+## Portal session tokens (server-side)
+
+Mint the provider's `token` with the `portalSessionCreate` mutation; the
+`bunny-node-sdk`, `bunny-ruby-sdk` and `bunny-graphql` skills show the call.
+
+> The token-minting API client must hold `security:write`. A client without it
+> fails with an authorization error. This is in addition to the
+> `standard:read` / `standard:write` scopes the rest of your integration uses.
+
+`returnUrl` on the session controls the portal's "Back" link and the Back link
+in Checkout's summary header. It is not a redirect after an action.
+
+## CORS: whitelist your hostnames
+
+`BunnyProvider` calls `apiHost` from the browser. Bunny checks the request's
+`Referer` hostname against the space-separated list in **Settings > Company >
+Security > Whitelisted origin domains** ("CORS settings for Bunny components").
+Match is exact on the hostname: no scheme, no port, no wildcards, so list each
+subdomain (`app.acme.com`, `staging.acme.com`). `localhost` covers every
+localhost port. The list is per Bunny company (tenant workspace), not per
+entity. A mismatch, or a stripped `Referer` (e.g. `Referrer-Policy:
+no-referrer`), returns 401 `CORS origin not allowed`.
+
+## Components
+
+Exports: `Checkout`, `Signup`, `Subscriptions`, `Upgrade`, `BillingDetails`,
+`Invoice`, `Invoices`, `Quote`, `Quotes`, `Transactions`, `PaymentForm`,
+`Footer`, `MiniCreditCard` (deprecated) and `BunnyProvider`.
+
+| Component | Purpose |
+| --- | --- |
+| `Checkout` | An existing account subscribes to a price list (billing details, payment, coupon) |
+| `Signup` | A new customer creates an account and its first subscription |
+| `Subscriptions` / `Upgrade` | View, upgrade, downgrade and cancel subscriptions |
+| `Invoice` / `Invoices` | One invoice (with payment) / the invoice list |
+| `Quote` / `Quotes` | One quote the customer can accept / the quote list |
+| `Transactions` | Invoices, payments and refunds |
+| `BillingDetails` | Account details, billing address, payment methods |
+
+`PaymentForm` is rendered by the components above; do not mount it yourself.
+Each component reads `token`, `apiHost` and `appearance` from the nearest
+`BunnyProvider`. Props change between versions: when you need one, read the
+exported prop type (for example `CheckoutProps`, `SignupProps`) in your editor.
+
+## Checkout vs Signup
+
+Both take the same props. They differ in who the customer is, and so in the
+token.
+
+| | `<Checkout />` | `<Signup />` |
+| --- | --- | --- |
+| Customer | Already has an account | New, no account yet |
+| Token | Portal session token (same provider as the other components) | OAuth2 access token from a `signup:read signup:write` API client, in its **own** `BunnyProvider` |
+| Result | A subscription on the existing account | A new account and its first subscription |
+| Form defaults | Merged from the account (yours win) | Yours only |
+| `documentTemplateId` | Yes: shows the quote PDF under the summary | No |
+
+`<Signup />` calls the signup mutations that only the
+`signup:read` / `signup:write` scopes cover; a portal session token is
+rejected with an authorization error (e.g. `Rejected by reach`). Mint the signup token on the server with
+the OAuth2 client-credentials flow (`POST /oauth/token`,
+`grant_type=client_credentials`, see `bunny-graphql`), cache it for its
+`expires_in`, and pass the `access_token` string as `token`.
+
+```tsx
+import { BunnyProvider, Checkout, Signup } from "@bunnyapp/components";
+
+// Existing customer: the portal-session provider you already have.
+<BunnyProvider token={sessionToken} apiHost={apiHost}>
+  <Checkout
+    priceListCode="starter-annual"
+    defaultCouponCode="WELCOME10"
+    documentTemplateId={templateId}              // Checkout only
+    callbacks={{ onPaymentSuccess: () => router.push("/billing") }}
+  />
+</BunnyProvider>
+
+// New customer: a separate provider with the signup-scoped token.
+<BunnyProvider token={signupToken} apiHost={apiHost}>
+  <Signup
+    priceListCode="starter-annual"
+    enableTrial                                  // only if the price list allows a trial
+    form={{
+      defaultValues: { email: prefilledEmail, billingCountry: "US" },
+      requiredBillingDetails: { firstName: true, lastName: true, accountName: true },
+      disabledFields: { email: true },           // give every disabled field a default value
+    }}
+    callbacks={{ onPaymentSuccess: () => router.push("/welcome") }}
+    style={{ minHeight: "100vh" }}               // positions the root; it is not for looks
+  />
+</BunnyProvider>
+```
+
+Shared props: `priceListCode` (required), `enableTrial`, `defaultCouponCode`,
+`form` (`defaultValues`, `requiredBillingDetails`, `disabledFields`),
+`callbacks` (`onPaymentSuccess`, fired once the subscription is checked out:
+paid, free or trial), `style`, `appearance`. The component never navigates for
+you; redirect from `onPaymentSuccess`. `form.defaultValues` keys: `email`,
+`billingCountry`, `billingZip`, `firstName`, `lastName`, `accountName`,
+`billingStreet`, `billingCity`, `billingState`, `taxNumber`. Email is always
+shown; the taxation plugin can add more fields.
+
+The hosted signup page (`bunny-customer-portal`) is easier when you do not
+need Bunny's UI inside your own layout.
+
+## Styling with `appearance`
+
+### The model
+
+`appearance` is the only styling API. It has three parts, applied in order:
+
+1. `variables`: a handful of literal values (colors, font, radius, spacing)
+   that the default look is built from. Change one and it carries through
+   everything built from it. About 24 of them.
+2. `rules`: CSS per selector, applied after every default. Keys are roles and
+   regions with an optional state: `'.Button'`, `'.Input:focus'`,
+   `'.Tab--selected'`, `'.Summary'`, and region-scoped `'.Summary .Button'`.
+3. `fonts`: web fonts to load onto the page and into the payment fields.
+
+Set it on `BunnyProvider` to style every component under it, or on one
+component to restyle just that one. A component's `appearance` is merged over
+the provider's: variables win later, rules merge per selector then per
+property, fonts are concatenated.
+
+Rules of thumb:
+
+- **Literal values only.** `#14532d`, `12px`, `"Inter", sans-serif`; never
+  `var(--x)`, because variables and shared rules are sent into the payment
+  iframe where your page's custom properties do not exist. Use hex, `rgb()` or
+  `hsl()` for `colorPrimary`, `colorSuccess` and `colorText`, since shades are
+  derived from them.
+- **Variables first, rules second.** Reach for a rule only when no variable
+  expresses the change.
+- **A state is its own key.** Our `.Button:hover` beats your plain `.Button`,
+  so when you restyle `.Button`, set `.Button:hover` and `.Button:active` too.
+- `className` and `style` on a component only position its root. They do not
+  change how it looks.
+- A key the types do not allow, or a value containing `{`, `}`, `;`, `<`,
+  `@import` or `url(`, is ignored (with a console warning in development).
+- `var(...)` is accepted and works on Bunny's own elements, but not in the
+  Stripe payment iframe, and a colour variable given as `var()` cannot be used
+  to derive other colours.
+
+### The `Appearance` type is the reference
+
+Do not guess names and do not catalogue them from memory. The exported types
+`Appearance`, `AppearanceVariables` and `AppearanceRules` document every
+variable (each has a JSDoc `@default`), every selector with its states, and the
+properties it accepts. Read them in `node_modules/@bunnyapp/components` types
+or hover the keys in the editor. Selectors for whole areas
+(`.Summary`, `.Form`, `.Invoice`, `.Modal`, `.Drawer`, `.BillingDetails`, ...)
+are *regions*. Only `.Summary` and `.Form` have no default rule; the others have
+defaults.
+
+### Recipe: match a brand
+
+Start with variables; most brands need nothing else.
+
+```tsx
+<BunnyProvider
+  apiHost={apiHost}
+  token={token}
+  appearance={{
+    variables: {
+      colorPrimary: "#6d28d9",              // buttons, links, focus, selected tiles
+      colorText: "#1f2937",
+      colorBackgroundSecondary: "#f5f3ff",  // the page behind the form column
+      borderRadius: "8px",
+      fontFamily: '"Inter", system-ui, sans-serif',
+    },
+    fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" }],
+  }}
+>
+```
+
+If `colorPrimary` is light, also set `colorOnPrimary` to a dark color so the
+button label and ticks stay readable. Leave `colorPrimary` unset to use your
+Bunny branding color.
+
+### Recipe: a dark design
+
+There is no dark mode switch. A dark look is a full variable set (otherwise
+unset text, borders and statuses stay on the light defaults), plus a few rules
+for filled inputs. This is the `Midnight` theme from the package's stories:
+
+```tsx
+const midnight: Appearance = {
+  variables: {
+    colorPrimary: "#a3e635",
+    colorOnPrimary: "#0b1020",               // lime is light, so text on it is dark
+    colorBackground: "#0f1629",
+    colorBackgroundSecondary: "#0b1020",
+    colorText: "#e6e9f2",
+    colorTextSecondary: "#8b93a7",
+    colorTextPlaceholder: "#5b6478",
+    colorDanger: "#fb7185",
+    colorSuccess: "#a3e635",
+    colorBorder: "#1c2540",
+    borderWidth: "1px",
+    borderRadius: "12px",
+    fontSizeBase: "15px",
+    focusBoxShadow: "0 0 0 4px rgba(163, 230, 53, 0.2)",
+    gridRowSpacing: "22px",
+  },
+  rules: {
+    ".Label": { color: "#8b93a7", fontSize: "13px", fontWeight: "500" },
+    ".Input": { backgroundColor: "#151d36", borderColor: "#151d36", padding: "15px 16px" },
+    ".Input:hover": { borderColor: "#2a3558" },
+    ".Input:focus": { borderColor: "#a3e635" },
+    ".Tab": { backgroundColor: "#151d36", borderColor: "#151d36" },
+    ".Tab--selected": { backgroundColor: "#18223f", borderColor: "#a3e635", color: "#a3e635" },
+    ".Button": { borderRadius: "999px", fontWeight: "600" },
+    ".Button:hover": { backgroundColor: "#bef264" },
+    ".Button:active": { backgroundColor: "#84cc16" },
+    ".Card": { backgroundColor: "#151d36", boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)" },
+  },
+};
+```
+
+Your own page background and the content you render around Bunny's components
+are yours to darken; `appearance` only restyles Bunny's.
+
+### Recipe: buttons and inputs
+
+```tsx
+rules: {
+  ".Button": { backgroundColor: "#111827", color: "#fff", padding: "14px 16px", letterSpacing: "0.04em" },
+  ".Button:hover": { backgroundColor: "#374151" },
+  ".Button:active": { backgroundColor: "#030712" },
+  ".Input": { padding: "12px 14px", backgroundColor: "#f9fafb" },
+  ".Input:focus": { borderColor: "#6d28d9", boxShadow: "0 0 0 3px rgba(109,40,217,0.25)" },
+  ".Input--invalid": { borderColor: "#dc2626" },
+  ".Label": { fontWeight: "600" },
+}
+```
+
+There is no `height` property. An input's height is its vertical padding plus
+`lineHeight` plus borders, because that is how hosted payment fields are sized;
+raise the `.Input` padding to make Bunny's inputs and the payment fields taller
+together, and size the primary button through `.Button` padding. Compact 32px
+controls (list search boxes, the billing details form) are separate:
+`.Input--compact`, `.Button--compact`, `.ButtonSecondary--compact`. Secondary
+buttons are `.ButtonSecondary`.
+
+### Recipe: the Summary and Form columns
+
+Checkout and Signup are two regions: `.Summary` (plan, price, coupon, quote
+PDF) and `.Form` (billing details, payment, the button). Both are styleable,
+and roles can be scoped into them:
+
+```tsx
+<Checkout
+  priceListCode="starter-annual"
+  appearance={{
+    rules: {
+      ".Summary": { backgroundColor: "#0f172a", padding: "3rem" },
+      ".Summary .Text": { color: "#e2e8f0" },
+      ".Summary .Button": { backgroundColor: "#f8fafc", color: "#0f172a" },
+      ".Form": { padding: "3rem" },
+    },
+  }}
+/>
+```
+
+`.Summary` and `.Form` are capped at `36rem` with `4rem` of padding by
+default; change the padding with `padding`. The background behind both is
+`variables.colorBackgroundSecondary`. Other slots (receipt, footer, success
+panel) have no selector of their own: reach their text, dividers and buttons
+through roles (`'.Summary .Divider'`, `'.Form .TextSecondary'`). Scoping
+(`'.Region .Role'`) works for Bunny-only roles, not for the shared ones below.
+
+### Payment fields (Stripe)
+
+In `Signup`, `Checkout` and `PaymentForm` the card or bank fields are Stripe's
+Payment Element, drawn in an iframe. What reaches it:
+
+- The **shared rules**: `.Input` (and `:hover`, `:focus`, `--invalid`,
+  `:disabled`, `::placeholder`), `.Label`, `.Error`, `.Tab` (and `:hover`,
+  `--selected`, `:focus`). These take only the properties Stripe accepts.
+- The **variables** Stripe has an equivalent for (colors, font, radius,
+  spacing, font sizes and weights).
+- `fonts`, loaded into the iframe too.
+
+Everything else does not reach it: Bunny-only roles (`.Button`, `.Card`, ...),
+region-scoped keys (`'.Form .Input'`), and `--compact` variants. So style
+fields with plain `.Input` / `.Label` / `.Tab` and they match on both sides.
+Saved payment method tiles are `.Tab`s too. If a payment field looks off, the
+fix is a shared rule or variable, never CSS aimed at Stripe's DOM.
+
+### Recipe: fonts and CSP
+
+Set the font once, on `BunnyProvider`: `variables.fontFamily` is the stack and
+any web font in it goes in `fonts`, as a stylesheet
+(`{ cssSrc: "https://..." }`) or a single file
+(`{ family, src: "url(https://...)", weight }`). The components load it onto
+the page and into the payment iframe; your page need not. System fonts need no
+`fonts` entry; leave `fontFamily` unset to inherit your page's font. Fonts are
+fixed once the payment form mounts (changing `fonts` later remounts the payment
+fields and clears what was typed), so set them up front.
+
+Content Security Policy: every `BunnyProvider` and every component with an
+`appearance` injects a `<style>` element, so `style-src` must allow
+`'unsafe-inline'` (nonces are not supported). Fonts also need their host
+allowed: `style-src` for a `cssSrc` stylesheet, `font-src` for font files.
+
+### Migrating from 1.x
+
+| Before | Now |
+| --- | --- |
+| `<BunnyProvider darkMode>` | `appearance.variables` with a full dark set (recipe above) |
+| `configProviderProps`, or your own Ant Design `ConfigProvider` around Bunny | `appearance.variables` (`colorPrimary`, `borderRadius`, `fontFamily`, ...); Ant Design no longer themes anything you can reach |
+| `--bunny-signup-bg`, `--bunny-checkout-bg`, `colorBackgroundSummary` | `variables.colorBackgroundSecondary` |
+| `[data-slot="signup-summary"]` / `"checkout-summary"` | the `.Summary` rule |
+| `[data-slot="signup-form"]` / `"checkout-form"` | the `.Form` rule |
+| `shadow` on Invoice, Quote, Upgrade, Subscriptions | `rules['.Document'].boxShadow`, or the scoped `'.Upgrade .Card'`, `'.Subscriptions .Card'` |
+| `<Signup defaultFormValues>` | `<Signup form={{ defaultValues }}>` |
+| `<Signup requiredBillingDetails>` | `<Signup form={{ requiredBillingDetails }}>` |
+| `<Signup onSuccess>`, `returnUrl`, `couponCode` | `callbacks.onPaymentSuccess`, redirect yourself, `defaultCouponCode` |
+| `<Signup paymentRequiredToAcceptQuote>`, `<Signup documentTemplateId>` | removed (`Checkout` keeps `documentTemplateId`) |
+| `'.Button': { color }` on a light `colorPrimary` | `variables.colorOnPrimary` |
+
+Further rows (tables, drawers, plan picker class names) are in the README's
+"Migrating to 2.0" section; consult it for any old `.bunny-*` class or
+`--bunny-*` variable, which no longer exist.
+
+## Troubleshooting
+
+- **`Rejected by reach` from Signup**: you passed a portal session token;
+  use the `signup:read signup:write` access token in its own provider.
+- **Authorization error minting a session token**: the API client lacks
+  `security:write`.
+- **`CORS origin not allowed` (401)**: add your site's hostname (no scheme or
+  port, e.g. `app.acme.com`, `localhost`) to Settings > Company > Security >
+  Whitelisted origin domains, separated by spaces. Each subdomain must be
+  listed; there are no wildcards.
+- **A rule has no effect**: the key is not in `AppearanceRules` (ignored with a
+  dev-mode warning), the value contains a rejected pattern (`{ } ; <`,
+  `@import`, `url(`), or a state (`:hover`) is still
+  styled by the default. Set the state too.
+- **Stripe fields ignore a rule**: only the shared rules and shared variables
+  reach them (see "Payment fields").
+- **Transparent or unreadable button label on a light brand color**: set
+  `colorOnPrimary`.
+
+## References
+
+- [docs.bunny.com/developer/bunny-components](https://docs.bunny.com/developer/bunny-components/bunny-components): official docs
+- Sibling skills: `bunny-customer-portal` (hosted UI), `bunny-node-sdk`, `bunny-ruby-sdk`, `bunny-graphql` (token generation), `bunny-quoting` (the quote lifecycle behind `Quote`)
+
+---
+
+Source: `@bunnyapp/components/skills/bunny-components` — edit it there; it is mirrored to bunnyapp/skills.

package/dist/cjs/types/src/UI/Tooltip.d.ts

@@ -1,2 +0,0 @@
-import { TooltipProps as AntdTooltipProps } from 'antd';
-export declare function Tooltip(props: AntdTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/Card.d.ts

@@ -1,6 +0,0 @@
-declare const Card: ({ children, className, style, }: {
-    children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
-export default Card;

package/dist/cjs/types/src/components/Checkout/QuoteIsLoadingIndicator.d.ts

@@ -1 +0,0 @@
-export declare function QuoteLoadingIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/CustomizedAntdComponents/Tag.d.ts

@@ -1,37 +0,0 @@
-declare const tagStyleMap: {
-    blue: {
-        color: string;
-        background: string;
-    };
-    green: {
-        color: string;
-        background: string;
-    };
-    red: {
-        color: string;
-        background: string;
-    };
-    orange: {
-        color: string;
-        background: string;
-    };
-    yellow: {
-        color: string;
-        background: string;
-    };
-    purple: {
-        color: string;
-        background: string;
-    };
-    black: {
-        color: string;
-        background: string;
-    };
-};
-declare const CustomizedTag: ({ children, color, className, style, }: {
-    children: React.ReactNode;
-    color?: keyof typeof tagStyleMap;
-    className?: string;
-    style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CustomizedTag;

package/dist/cjs/types/src/components/PaymentForm/DemoPay/CreditCard/CreditCard.d.ts

@@ -1,25 +0,0 @@
-import { FragmentOf } from 'gql.tada';
-import { ShadowType } from '../../../../types/shadowType';
-export declare const CreditCard_PaymentMethodFragment: import("gql.tada").TadaDocumentNode<{
-    [$tada.fragmentRefs]: {
-        CardImage_PaymentMethodFragment: "PaymentMethod";
-    };
-    id: string;
-    expirationDate: unknown;
-    metadata: {
-        identifier: string | null;
-    } | null;
-}, {}, {
-    fragment: "CreditCard_PaymentMethodFragment";
-    on: "PaymentMethod";
-    masked: true;
-}>;
-type CreditCardProps = {
-    onClickRemove: () => void;
-    onClickUpdate: () => void;
-    paymentMethod: FragmentOf<typeof CreditCard_PaymentMethodFragment>;
-    shadow?: ShadowType;
-    cardEnabled?: boolean;
-};
-declare const CreditCard: ({ onClickRemove, onClickUpdate, paymentMethod: maskedPaymentMethod, shadow, cardEnabled, }: CreditCardProps) => import("react/jsx-runtime").JSX.Element;
-export default CreditCard;

package/dist/cjs/types/src/components/PaymentForm/DemoPay/CreditCard/index.d.ts

@@ -1 +0,0 @@
-export { MiniCreditCard } from './MiniCreditCard';

package/dist/cjs/types/src/components/PaymentForm/DemoPay/DemoPayCardCvc.d.ts

@@ -1,7 +0,0 @@
-declare const DemoPayCardCvc: ({ autoFocus, onChange, placeholder, value, }: {
-    autoFocus?: boolean;
-    onChange: (cvc: string) => void;
-    placeholder?: string;
-    value: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DemoPayCardCvc;

package/dist/cjs/types/src/components/PaymentForm/DemoPay/DemoPayCardNumber.d.ts

@@ -1,7 +0,0 @@
-declare const DemoPayCardNumber: ({ autoFocus, onChange, placeholder, value, }: {
-    autoFocus?: boolean;
-    onChange: (number: string) => void;
-    placeholder?: string;
-    value: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DemoPayCardNumber;

package/dist/cjs/types/src/components/PaymentForm/DemoPay/DemoPayExpiry.d.ts

@@ -1,7 +0,0 @@
-declare const DemoPayExpiry: ({ autoFocus, onChange, placeholder, value, }: {
-    autoFocus?: boolean;
-    onChange: (cvc: string) => void;
-    placeholder?: string;
-    value: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DemoPayExpiry;

package/dist/cjs/types/src/components/PaymentForm/DemoPay/DemoPayForm.d.ts

@@ -1,2 +0,0 @@
-declare const DemoPayForm: () => import("react/jsx-runtime").JSX.Element;
-export default DemoPayForm;

package/dist/cjs/types/src/components/PaymentForm/DemoPay/DemoPayFormProvider.d.ts

@@ -1,10 +0,0 @@
-export type DemoPayCardDetails = {
-    number: string;
-    expiry: string;
-    cvc: string;
-};
-declare const DemoPayFormProvider: ({ initialValue, children, }: {
-    initialValue?: DemoPayCardDetails | undefined;
-    children?: import("react").ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useDemoPayCardDetails: () => [DemoPayCardDetails, import("react").Dispatch<import("react").SetStateAction<DemoPayCardDetails>>];
-export { DemoPayFormProvider, useDemoPayCardDetails };

package/dist/cjs/types/src/components/PaymentForm/DemoPay/demoPayUtils.d.ts

@@ -1,21 +0,0 @@
-import { PluginData } from '@/types/frontendTypes';
-export declare const confirmPayment: ({ amount, currency }: {
-    amount: number;
-    currency: string;
-}) => {
-    token: string;
-    amount: number;
-    currency: string;
-};
-export declare const isDigit: (char: string) => boolean;
-export declare const isValidKey: (code: number) => boolean;
-export declare const isValidExpiry: (expiry: string) => boolean;
-export declare const isCardExpired: (expiry: string) => boolean;
-export declare const formatCardExpiry: (cardExpiry: string) => string;
-export declare const unformatCardNumber: (cardNumber: string) => string;
-export declare const storePayment: (options: {
-    testCreditCardCvc: string;
-    testCreditCardExpirationDate: string;
-    testCreditCardNumber: string;
-    token?: string;
-}, plugin: PluginData, apiHost: string, accountId?: string) => Promise<any>;

package/dist/cjs/types/src/components/PaymentForm/DemoPay/hooks/useApproveHold.d.ts

@@ -1,16 +0,0 @@
-import { PluginData } from '@/types/frontendTypes';
-export declare function useApproveHold({ onApproveHoldSuccess, onApproveHoldError, }: {
-    onApproveHoldSuccess?: (response: any) => void;
-    onApproveHoldError?: (error: any) => void;
-}): {
-    approveHold: ({ plugin, quote, paymentMethodId, }: {
-        plugin: PluginData;
-        quote: {
-            id: string;
-            amount: number;
-        };
-        paymentMethodId: string;
-    }) => Promise<void>;
-    isApprovingHold: boolean;
-};
-export default useApproveHold;