@cardano-slips/flow 0.2.0 → 0.3.1

package/README.md

@@ -30,6 +30,51 @@ These components are meant to be dropped into someone else's page. No fixed posi
 
 React is a **peer** dependency: your copy is the one that renders, and a second copy in the tree is the oldest breakage in the ecosystem.
 
+## Components
+
+```tsx
+import { SlipCard } from "@cardano-slips/flow"
+import "@cardano-slips/flow/tokens.css"
+import "@cardano-slips/flow/card.css"
+
+<SlipCard slip={slip} discoveryUrl={url} onSubmit={({ href, values }) => …} />
+```
+
+`SlipCard` renders what the endpoint declared — icon, title, description, and a button per linked action — generates the form its parameters describe, and hands you the `POST` target once every value passes. `SlipCardSkeleton` holds the same box while the metadata is in flight; `SlipCardError` replaces it when the endpoint never answered.
+
+The card makes no claim about the transaction. Title and description are the publisher's words, and checking them against what the transaction actually does is the effects panel's job — against the bytes, not against this card.
+
+Nothing here decides for a person on the endpoint's behalf: a value that fails `required`, `min` or `max` is caught before anything is sent, in `core`'s own sentence, so the same bad value reads identically in every client. A field the endpoint itself refuses lands on that field and leaves the card standing, and what was typed stays typed.
+
+### Restyling
+
+`card.css` is optional. Import it and you get the design sheet; skip it and you get the markup, where every element carries a class of ours and nothing else:
+
+| Class | What it is |
+| --- | --- |
+| `slip-card` | the card, and `slip-card--loading` / `slip-card--failed` for the other two; `data-closed` marks a Slip that cannot be signed and `data-busy` one with a request in flight |
+| `slip-card__head`, `__icon`, `__title`, `__origin`, `__description` | what the endpoint declared |
+| `slip-card__actions`, `__action` | the buttons; `data-primary` marks the one that is emphasised |
+| `slip-card__reason`, `__note` | why an action is closed, and the promise the card makes |
+| `slip-fields`, `slip-field`, `slip-field__*` | the generated form; `data-invalid` marks a field that was rejected |
+
+The card is the publisher's surface and is meant to be restyled. The chrome that judges it — the effects panel, the mismatch block, the network indicator — is not, hosted or self-hosted: a publisher who can restyle the surface that judges them makes the verdict look like something they control.
+
+### The effects panel
+
+```tsx
+import { EffectsPanel } from "@cardano-slips/flow"
+import "@cardano-slips/flow/effects.css"
+
+<EffectsPanel claim={action.label} derived={attempt} verdict={{ _tag: "match" }} onSign={…} onCancel={…} />
+```
+
+`EffectsPanel` shows what a transaction does, read from its own bytes: the figure the person is deciding on, then one row per effect — payments, tokens received, withdrawals, certificates, the fee, and deposits and refunds, each marked refundable where the ledger guarantees it and as stated where only the transaction claims it. `derived` is what `completeIntent` hands `onAttempt`, or what a `Blocked` refusal carries.
+
+`verdict` is the verifier's own and is required. On a mismatch the sign button is not rendered at all — the claim is set beside what the transaction does, the one row the link never described is marked, and the only ways out are closing it and reporting the link. There is no prop that brings the button back. The countdown takes the headline's place under a minute, and an expired transaction offers `onRebuild` instead of a signature.
+
+`effects.css` is the fixed chrome above: import it as it is.
+
 ## Tokens
 
 ```ts
@@ -38,24 +83,23 @@ import "@cardano-slips/flow/tokens.css"
 
 ```html
 <div class="slip-root">…</div>
-<div class="slip-root" data-theme="dark">…</div>
 ```
 
-The tokens are scoped to `slip-root` rather than `:root`, because a package that writes `--ink` onto the document redefines whatever the host already called that. Put the class on the element that wraps the Slip. There is no reset in the file and no rule that selects an element, so an inherited font stack stays where it is until something of ours asks for a token.
+The tokens are scoped to `slip-root` rather than `:root`, because a package that writes `--ink` onto the document redefines whatever the host already called that. Every component of ours puts the class on its own root, so an embedded card carries its tokens with it. There is no reset in the file and no rule that selects an element, so an inherited font stack stays where it is until something of ours asks for a token.
 
-`data-theme="dark"` is the whole of the theme rule: it rebinds the roles — surfaces, ink, accent and the semantic three — so a component writes `var(--ink)` once and is right in both. A component choosing between a light token and a dark one is a component deciding the rule, and two of them will decide it differently. Whether dark follows the operating system is not settled by the design sheet, so it is not decided here either; the attribute is the only way in.
-
-Three families of surface, and the difference is the point:
+There is one theme. The design sheet collapsed an earlier light/dark pair into a single ground that leans light, so there is no `data-theme` and no role that means two things — a component that can ask which theme it is in is a component that will answer differently from the next one. What carries the weight instead is that the three families of surface are genuinely different surfaces:
 
 | Family | What it is |
 | --- | --- |
 | `--page`, `--card` | the ordinary ground, and what lifts off it |
-| `--vault-*` | the transaction preview, which separates itself by surface and border rather than by being dark |
-| `--dark-*` | code blocks and the Open Graph card — dark in **both** themes, so they are the one thing the theme does not touch |
+| `--vault-*` | the transaction preview, on slate — the one grave surface, and the reason the rest can stay bright |
+| `--dark-*` | code blocks and the Open Graph card, fixed wherever they appear because neither sits on a ground we control |
+
+There is one typeface, Poppins, and one token naming it. The package does not fetch it — a stylesheet that reaches a third-party CDN makes a privacy and performance decision that belongs to whoever owns the page — so load Poppins yourself, or take the `system-ui` the stack falls back to. Type arrives as whole roles — `font: var(--type-card-title)` carries family, weight, size and line-height together — because a role is a pairing, not a size, and because a component that can apply the size without the family is a component that will. What separates a title from a label is weight and size; there is no second face to reach for, and `--type-technical` is the role for text meant for a machine — an address, a hash, an error code.
 
-Type arrives as whole roles — `font: var(--type-card-title)` carries family, weight, size and line-height together — because the sheet settles a pairing, not a size. Depth is a border; there is no shadow token.
+Depth is a border; there is no shadow token. Buttons are outlined rather than filled: the accent is the label and the edge, not the ground.
 
-Two rules the tests keep: no colour is written anywhere but `tokens.css`, and the design sheet's contrast audit is recomputed against these values rather than trusted. `--accent-fill` is a fill — it does not clear AA on a light card, which is why `--accent-text` exists for any accent-coloured word, and it stays a fill in the dark theme where the ratio alone would allow otherwise.
+Three rules the tests keep: no colour is written anywhere but `tokens.css`, every `var(--…)` a stylesheet reaches for is a token that exists, and the design sheet's contrast audit is recomputed against these values rather than trusted — which is how `--vault-bad` came to be a shade lighter here than on the sheet, where the value drawn measures 4.42:1 on the preview surface under a row labelled a pass. `--accent-fill` is a fill — it does not clear AA on a light card, which is why `--accent-text` exists for any accent-coloured word, and it stays a fill on the preview surface where the ratio alone would allow otherwise.
 
 ## Entry point
 

package/dist/address.d.ts

@@ -10,4 +10,16 @@ export type WalletAddress = {
  * browser extension chose to send, and every refusal reaches a person as words.
  */
 export declare const readWalletAddress: (hex: string) => Either.Either<WalletAddress, string>;
+export type OwnAddress = {
+    /** Raw, as the verifier compares them against the body's addresses. */
+    readonly bytes: Uint8Array;
+    /** Absent for a Byron address, whose header carries no network. */
+    readonly networkId?: NetworkId;
+};
+/**
+ * Reads an address the wallet calls its own: any payment address, a reward
+ * account, or a Byron address an old wallet still reports as used. Refusing
+ * the Byron one would stop the whole flow over an address nothing here spends.
+ */
+export declare const readOwnAddress: (hex: unknown) => Either.Either<OwnAddress, string>;
 //# sourceMappingURL=address.d.ts.map

package/dist/address.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"address.d.ts","sourceRoot":"","sources":["../src/address.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAAU,MAAM,QAAQ,CAAA;AAEvC,sEAAsE;AACtE,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,CAAA;AAE7B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;CAC9B,CAAA;AA0BD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAqBlF,CAAA"}
+{"version":3,"file":"address.d.ts","sourceRoot":"","sources":["../src/address.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAAU,MAAM,QAAQ,CAAA;AAEvC,sEAAsE;AACtE,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,CAAA;AAE7B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;CAC9B,CAAA;AA0BD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAqBlF,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,uEAAuE;IACvE,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAA;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;CAC/B,CAAA;AAkBD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAuB7E,CAAA"}

package/dist/address.js

@@ -51,4 +51,47 @@ export const readWalletAddress = (hex) => {
         onRight: () => Either.right({ bech32, networkId: networkId })
     });
 };
+const BYRON_TYPE = 8;
+const FIRST_REWARD_TYPE = 14;
+const LAST_REWARD_TYPE = 15;
+/** A header byte and one or two 28-byte hashes. */
+const shelleyLengths = {
+    0: [57],
+    1: [57],
+    2: [57],
+    3: [57],
+    6: [29],
+    7: [29],
+    14: [29],
+    15: [29]
+};
+/**
+ * Reads an address the wallet calls its own: any payment address, a reward
+ * account, or a Byron address an old wallet still reports as used. Refusing
+ * the Byron one would stop the whole flow over an address nothing here spends.
+ */
+export const readOwnAddress = (hex) => {
+    // Typed as hex by CIP-30, and sent by an extension under no obligation to.
+    const raw = typeof hex === "string" ? fromHex(hex.trim()) : undefined;
+    if (raw === undefined)
+        return refuse(`${String(hex).slice(0, 16)}… is not hex`);
+    const bytes = unwrapCbor(raw);
+    const header = bytes[0];
+    const type = header >> 4;
+    if (type === BYRON_TYPE)
+        return Either.right({ bytes });
+    const networkId = header & 0x0f;
+    if (networkId !== 0 && networkId !== 1)
+        return refuse(`the address header names network ${networkId}`);
+    const payment = type <= LAST_PAYMENT_TYPE;
+    const reward = type >= FIRST_REWARD_TYPE && type <= LAST_REWARD_TYPE;
+    if (!payment && !reward)
+        return refuse(`address type ${type} is not one a wallet holds`);
+    // Pointer addresses (4, 5) end in variable-length integers, so only a floor applies.
+    const lengths = shelleyLengths[type];
+    const fits = lengths === undefined ? bytes.length > 29 : lengths.includes(bytes.length);
+    if (!fits)
+        return refuse(`${bytes.length} bytes is the wrong length for address type ${type}`);
+    return Either.right({ bytes, networkId: networkId });
+};
 //# sourceMappingURL=address.js.map

package/dist/address.js.map

@@ -1 +1 @@
-{"version":3,"file":"address.js","sourceRoot":"","sources":["../src/address.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"address.js","sourceRoot":"","sources":["../src/address.ts"],"names":[],"mappings":"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"}

package/dist/card.css

@@ -0,0 +1,492 @@
+/*
+ * The action card, drawn from `2 · Action card` on the design sheet. Optional:
+ * a consumer who imports only `tokens.css` gets the markup and the class names
+ * and styles them however they like. Nothing here writes a colour — every value
+ * is a token, and `test/no-hard-coded-colours.test.ts` fails if that stops
+ * being true.
+ *
+ * The card is the publisher's surface (`13 · Chrome rules`): its content is
+ * their claim, so its look is theirs to own. The chrome that judges that claim
+ * — the effects panel and the mismatch block — is fixed and is not styled here.
+ *
+ * Every text rule states family, size, weight and line-height together through
+ * a `--type-*` role, so a host page's inherited stack cannot reach in.
+ */
+
+.slip-card {
+  box-sizing: border-box;
+  position: relative;
+
+  /* Widths are answered against the card's own box: it never assumes it owns the viewport. */
+  container-type: inline-size;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+
+  width: 100%;
+  max-width: 680px;
+  margin: 0;
+  padding: var(--space-20);
+
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+}
+
+.slip-card *,
+.slip-card *::before,
+.slip-card *::after {
+  box-sizing: border-box;
+}
+
+.slip-card__head {
+  display: flex;
+  gap: var(--space-12);
+  align-items: flex-start;
+}
+
+.slip-card__icon {
+  flex: none;
+  width: 48px;
+  height: 48px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  overflow: hidden;
+}
+
+.slip-card__image,
+.slip-card__pattern,
+.slip-card__monogram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.slip-card__image {
+  object-fit: cover;
+}
+
+/* The two fallbacks. Neither is a generic glyph: one is the publisher's initial, the other is no claim at all. */
+.slip-card__monogram {
+  background: var(--subtle);
+  color: var(--accent-text);
+  font: var(--type-card-title);
+}
+
+.slip-card__pattern {
+  background-image: repeating-linear-gradient(135deg, var(--stripe-a) 0 5px, var(--stripe-b) 5px 10px);
+}
+
+.slip-card__alarm {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: 1px solid var(--bad-line);
+  border-radius: var(--radius-control);
+  background: var(--bad-tint);
+  color: var(--bad);
+  font: var(--type-card-title);
+}
+
+.slip-card__identity {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.slip-card__title {
+  margin: 0;
+  color: var(--ink);
+  font: var(--type-card-title);
+  text-wrap: pretty;
+}
+
+.slip-card__origin {
+  color: var(--muted);
+  font: var(--type-technical);
+  overflow-wrap: anywhere;
+}
+
+.slip-card__description {
+  margin: 0;
+  max-width: 52ch;
+  color: var(--muted);
+  font: var(--type-body);
+  text-wrap: pretty;
+}
+
+.slip-card__note {
+  margin: 0;
+  padding-top: var(--space-12);
+  border-top: 1px solid var(--divider);
+  color: var(--muted);
+  font: var(--type-label);
+}
+
+.slip-card__reason {
+  margin: 0;
+  color: var(--muted);
+  font: var(--type-label);
+  text-wrap: pretty;
+}
+
+/* A closed card stays readable. Only the action is gone. */
+.slip-card[data-closed] .slip-card__title {
+  color: var(--muted);
+}
+
+.slip-card[data-closed] .slip-card__pattern {
+  background-image: repeating-linear-gradient(135deg, var(--stripe-off-a) 0 5px, var(--stripe-off-b) 5px 10px);
+}
+
+.slip-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-8);
+}
+
+/*
+ * One button, outlined. The sheet drew a filled primary until the palette
+ * change and now draws every action the same way, so `data-primary` marks which
+ * one leads without claiming a look the sheet no longer gives it.
+ */
+.slip-card__action {
+  flex: 0 1 auto;
+  height: 44px;
+  padding: 0 var(--space-20);
+  border: 1px solid var(--accent-action);
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: var(--accent-action);
+  font: var(--type-button);
+  letter-spacing: var(--type-button-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* Alone, a button is the width of the card; among others it is the width of its words. */
+.slip-card__action:only-child {
+  flex: 1 1 100%;
+}
+
+.slip-card__action:not(:disabled):hover {
+  border-color: var(--accent-hover);
+  background: var(--subtle);
+  color: var(--accent-hover);
+}
+
+.slip-card__action:disabled {
+  border-color: var(--border);
+  background: var(--subtle);
+  color: var(--muted);
+  cursor: not-allowed;
+}
+
+.slip-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+.slip-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.slip-field__label {
+  color: var(--muted);
+  font: var(--type-label);
+}
+
+.slip-field__control {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  height: 44px;
+  padding: 0 var(--space-12);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--card);
+}
+
+.slip-field__control:focus-within {
+  border-color: var(--accent-fill);
+}
+
+.slip-field[data-invalid] .slip-field__control {
+  border-color: var(--bad-line);
+  background: var(--bad-tint);
+}
+
+.slip-field__input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ink);
+  font: var(--type-body);
+}
+
+/* A figure is always Poppins 700 — the one type rule the token file states out loud. */
+.slip-field__input--numeral {
+  font: var(--type-numeral);
+}
+
+/* The helper line: what will be accepted on the left, whether it is required on the right. */
+.slip-field__help {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-12);
+}
+
+.slip-field__bounds,
+.slip-field__note {
+  color: var(--muted);
+  font: var(--type-label);
+}
+
+/* The error replaces the bounds rather than joining them: two lines of guidance is one too many. */
+.slip-field[data-invalid] .slip-field__bounds {
+  color: var(--bad);
+}
+
+.slip-field__code {
+  color: var(--muted);
+  font: var(--type-technical);
+}
+
+.slip-card__action:focus-visible,
+.slip-field__input:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.slip-card--loading {
+  animation: slip-pulse 1.6s ease-in-out infinite;
+}
+
+.slip-skeleton__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.slip-skeleton {
+  display: block;
+  border-radius: var(--radius-chip);
+  background: var(--skeleton);
+}
+
+.slip-skeleton--icon {
+  flex: none;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-control);
+}
+
+.slip-skeleton--title {
+  width: 72%;
+  height: 18px;
+}
+
+.slip-skeleton--origin {
+  width: 32%;
+  height: 12px;
+  background: var(--subtle);
+}
+
+.slip-skeleton--line {
+  width: 100%;
+  height: 12px;
+  background: var(--subtle);
+}
+
+.slip-skeleton--short {
+  width: 64%;
+}
+
+.slip-skeleton--action {
+  height: 44px;
+  border-radius: var(--radius-control);
+}
+
+/* The receipt is back on the card surface: the preview's job is done, so its ground goes with it. */
+.slip-receipt {
+  width: 100%;
+  max-width: 560px;
+  box-sizing: border-box;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+  color: var(--ink);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+}
+
+.slip-receipt__head {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+
+.slip-receipt__tick {
+  width: 48px;
+  height: 48px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--type-preview-title);
+  color: var(--pos);
+  background: var(--subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+}
+
+.slip-receipt__identity {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.slip-receipt__title {
+  margin: 0;
+  font: var(--type-card-title);
+}
+
+.slip-receipt__note {
+  font: var(--type-note);
+  color: var(--muted);
+}
+
+.slip-receipt__ledger {
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+}
+
+.slip-receipt__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-16);
+  padding: 12px 0;
+  font: var(--type-row);
+  color: var(--muted);
+}
+
+.slip-receipt__row + .slip-receipt__row {
+  border-top: 1px solid var(--divider);
+}
+
+.slip-receipt__amounts {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font: var(--type-countdown);
+  color: var(--ink);
+}
+
+.slip-receipt__amount[data-tone="gained"] {
+  color: var(--pos);
+}
+
+.slip-receipt__amount[data-tone="fee"],
+.slip-receipt__amount[data-tone="held"] {
+  color: var(--warn);
+}
+
+.slip-receipt__transaction {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-12);
+}
+
+.slip-receipt__kicker {
+  flex-basis: 100%;
+  font: var(--type-kicker);
+  letter-spacing: var(--type-kicker-tracking);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.slip-receipt__id {
+  font: var(--type-technical);
+}
+
+.slip-receipt__link {
+  font: var(--type-technical);
+  color: var(--accent-text);
+  text-decoration: none;
+}
+
+.slip-receipt__link:hover {
+  color: var(--accent-deep);
+  text-decoration: underline;
+}
+
+.slip-receipt__foot {
+  margin: 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--divider);
+}
+
+@keyframes slip-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slip-card--loading {
+    animation: none;
+  }
+}
+
+/* Named for a screen reader, absent for everyone else. */
+.slip-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Below 440px the card takes the 380 layout: a smaller icon and tighter rhythm. */
+@container (max-width: 440px) {
+  .slip-card {
+    gap: var(--space-12);
+  }
+
+  .slip-card__icon,
+  .slip-card__alarm,
+  .slip-skeleton--icon {
+    width: 44px;
+    height: 44px;
+  }
+
+  .slip-card__action {
+    flex: 1 1 100%;
+  }
+}