@540deg/ds 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/NOTICE

@@ -0,0 +1,13 @@
+540 Design System
+Copyright 2026 540 Degrees
+
+This product is licensed under the Apache License, Version 2.0 (see LICENSE).
+
+The license covers the source code only. It grants no rights over the 540
+name, logo or visual identity, nor over the sample photographs, which remain
+the property of 540 Degrees (Apache License 2.0, section 6). This includes
+src/assets/logo-540.svg, src/assets/samples/logo-540-*.svg and
+src/assets/samples/charla-*.webp, and their copies in the built package.
+
+The bundled DM Sans font is licensed under the SIL Open Font License 1.1
+(see dist/fonts/OFL.txt).

package/README.md

@@ -1,3 +1,208 @@
-# Temporary Holding Version
+# 540 Design System
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+El sistema de diseño de 540 en código: tokens, componentes React y documentación en Storybook. Sirve para montar las presentaciones de las charlas y la web con las mismas piezas.
+
+## Arrancarlo en un Mac
+
+Necesitas Node.js (versión 24 o superior) y Git. Si no los tienes, se instalan con Homebrew:
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+brew install node git
+```
+
+Después, en la app Terminal:
+
+```bash
+cd ~/Projects/540-ds
+npm install
+npm run storybook
+```
+
+Se abre solo en el navegador en `http://localhost:6006`. Para pararlo, Ctrl + C en la Terminal.
+
+Otros comandos útiles:
+
+| Comando | Qué hace |
+|---|---|
+| `npm run storybook` | Arranca el catálogo en local |
+| `npm run build-storybook` | Genera la versión estática para compartir (carpeta `storybook-static`) |
+| `npx vitest run --project=storybook` | Pasa las pruebas de todas las historias (render y accesibilidad) |
+| `npx tsc -p tsconfig.app.json --noEmit` | Comprueba los tipos de TypeScript |
+| `npm run build:lib` | Construye la librería npm en `dist/` (ver «Usarlo en un proyecto React») |
+
+## Cómo está organizado
+
+```
+src/
+  tokens/            los valores con nombre (CSS)
+    primitives.css         primitivos: --540-*
+    semantic-color.css     colores por uso, con modo claro y oscuro
+    semantic-typography.css  los trece estilos de texto y la escala de proyección
+    semantic-measure.css   espacio, rellenos, tamaños, retícula, radios
+    breakpoints.ts         los dos saltos (600 y 1024), como constantes
+    manifest.ts            nombres y descripciones para las páginas de Fundamentos
+  foundations/       las páginas de Fundamentos de Storybook
+  components/
+    atoms/           Text, Button, Logo, Image, ThemeToggle, Bullets, MenuItem, SocialIcon, Count
+    molecules/       SectionHeader, Section, Card, Menu, CaseItem, TeamMember, Footer, NavMobile, Field, Carousel, Dialog, Grid, Question, Lists, Screenshot, Metric, Stack
+    organisms/       Deck, Slide, Cover, Closing, Statements, BlockTitle, Story, Quote, Punchline, Timeline, Flow, Tools, Marquee, CardList, Form, LogoCarousel, DeckFooter, Blobs, Steps, Cycle, Sheet, ProgressBar, Heartbeat, Spotlight, Schema, Bars, Share
+  templates/         TalkTemplate: la charla completa, con todas las paradas posibles
+  hooks/             useReveal: cuándo una pieza entra en pantalla (contadores y gráficas)
+  styles/global.css  reset y estilos base
+  assets/            logotipo de 540 y muestras para las historias
+.storybook/          configuración de Storybook (tema con la marca, barra de herramientas, portada de cada página)
+```
+
+Cada componente vive en su carpeta con la misma estructura:
+
+```
+Button/
+  Button.tsx          el componente
+  Button.module.css   sus estilos (CSS Modules, solo tokens semánticos)
+  types.ts            opciones, tipos y valores por defecto
+  index.ts            lo que se exporta
+  Button.stories.tsx  las historias y los controles de Storybook
+  _docs/Button.md     la ficha, en español
+```
+
+## Cómo cambiar un token
+
+Los tokens están en `src/tokens`. Hay dos niveles:
+
+- **Primitivos** (`primitives.css`): el valor en bruto con nombre. Por ejemplo `--540-accent-yellow: #fef401;`.
+- **Semánticos** (`semantic-*.css`): el uso, apuntando a un primitivo. Por ejemplo `--color-bg-accent: var(--540-accent-yellow);`. Los componentes solo usan estos.
+
+Para **cambiar un valor** (un gris, un tamaño), edita el primitivo en `primitives.css`. Todo lo que lo use cambia a la vez, y las páginas de Fundamentos enseñan el valor nuevo porque lo leen del CSS.
+
+Para **cambiar a qué apunta un uso** (que los bordes fuertes usen otro gris), edita el semántico en `semantic-color.css`. Hay un bloque para el tema claro (`:root`) y otro para el oscuro (`[data-theme='dark']`).
+
+## Cómo añadir un color
+
+1. Añade el primitivo en `src/tokens/primitives.css`, en su grupo, con el prefijo `--540-`:
+   ```css
+   --540-status-blue: #2a5db0;
+   ```
+2. Si va a tener un uso propio, añade el semántico en `src/tokens/semantic-color.css`, en el bloque claro y en el oscuro:
+   ```css
+   --color-text-info: var(--540-status-blue);
+   ```
+3. Añádelo a `src/tokens/manifest.ts` para que salga en la página **Fundamentos / Color**: en `colorPrimitives` el primitivo y en `semanticColors` el semántico, con su descripción.
+4. Guarda y mira la página de Color en Storybook.
+
+Lo mismo vale para un tamaño de espacio o de letra: primitivo, semántico y manifest.
+
+## Normas para montar una charla
+
+Están en `src/docs/normas-charlas.md` y se leen en Storybook en **Introducción / Normas para charlas**. Son obligatorias para cualquier presentación hecha con el sistema, la monte una persona o un agente: estructura, fotos de bloque, texto, márgenes, dónde puede ir el amarillo, efectos y la lista final de comprobación. El `CLAUDE.md` del proyecto obliga a leerlas antes de montar una charla con Claude.
+
+## Cómo pedir un componente nuevo
+
+Abre Claude Code en la carpeta del proyecto y pídeselo con estos datos:
+
+- **Qué es y para qué sirve**, en una frase.
+- **Dónde está en Figma** (el enlace a la página) o **en qué charla** se usa, si existe ya.
+- **Variantes, tamaños y estados** que necesita, o «decide tú» si no lo sabes.
+- **En qué nivel va**: átomo, molécula u organismo.
+
+Ejemplo:
+
+> Crea el componente Badge. Es una etiqueta pequeña para marcar un estado («Nuevo», «Borrador»). Está en la página Badge del Figma. Variantes neutral y accent, un solo tamaño. Es un átomo.
+
+El componente se creará con la misma estructura que los demás (componente, estilos, tipos, historias y ficha), con su página Docs en Storybook y pasando las pruebas de accesibilidad.
+
+## Cómo compartir el catálogo con el equipo
+
+```bash
+npm run build-storybook
+```
+
+Deja una carpeta `storybook-static` con el catálogo completo en archivos estáticos. Se puede:
+
+- **Abrir en local**: haz doble clic en `storybook-static/index.html`.
+- **Mandar comprimida**: comprime la carpeta y envíala; quien la reciba la descomprime y abre `index.html`, sin instalar nada.
+- **Publicar**: sube la carpeta a cualquier servicio de páginas estáticas (Netlify, Vercel, GitHub Pages) y comparte la URL.
+
+La carpeta no se guarda en Git (está en `.gitignore`): se genera cada vez.
+
+## Piezas por componente (para la skill 540)
+
+```bash
+npm run build:pieces && npm run check:pieces
+```
+
+Deja en `pieces/` lo que la skill necesita para montar un HTML autocontenido sin este repo ni `node_modules`:
+
+| Carpeta | Qué hay |
+| --- | --- |
+| `server/` | Un módulo ESM por componente, con Preact (a través de `preact/compat`) dentro, para pre-renderizar en Node. `runtime.js` trae `renderIsland`, `renderStatic` y `registryOf`, y mantiene `renderToString` y `renderToStaticMarkup` para las charlas que ya los usaban. |
+| `css/` | `base.css` (tokens, reset y DM Sans) y una hoja por componente. |
+| `islands/` | `runtime.js` (Preact + hidratación) y un script por cada uno de los 14 componentes interactivos. |
+| `fonts/` | DM Sans variable, subconjunto latino, con su licencia SIL OFL. |
+| `manifest.json` | Versión, la de Preact (`preact`; antes `react`), y por componente: su módulo, sus hojas en orden de carga su isla, si la tiene, y si lee los pasos de `Steps` (`readsSteps`). También el contrato de etiquetas: `tags`, `phrasing` y `svg`. |
+| `render/` | El render de charlas: convierte un documento con etiquetas `<rev-…>` en un `.html` autocontenido. Corre con `node`, sin instalar nada ni red. |
+
+Cómo funciona una isla (el contrato está en `src/runtime/islands.ts`): el componente se pinta en el servidor dentro de `<ds-island>` con sus props en JSON; en el navegador, `runtime.js` lo hidrata. El contenido estático que recibe como hijo va en `<ds-slot>` y Preact no lo toca, así que las islas que hay dentro se hidratan solas; si un slot se vuelve a montar en el cliente, el runtime hidrata las islas nuevas que trae. Lo que lee el contexto de `Steps` (`Step`, `Count`, `Bars`, `Sheet`, `Schema`, `Share`) entra en el árbol de la isla de `Steps` en vez de ir como slot. `Dialog` no es isla: se abre y se cierra con `open` y `onClose`, y una función no viaja en el JSON de las props; quien lo use desde una isla lo lleva dentro de su script. `check:pieces` monta una charla con Deck, Steps, Count, Carousel y Statements y comprueba en jsdom que todo hidrata sin errores.
+
+### Render de charlas
+
+```bash
+npm run render -- charla.rev.html            # escribe charla.html
+node pieces/render/cli.mjs charla.rev.html   # lo mismo, con las piezas ya construidas
+npm run test:render
+```
+
+El contrato de etiquetas, acordado con la pista B (el MCP), está en `scripts/render/CONTRATO.md`. El HTML sale con solo el CSS de los componentes usados, DM Sans y las imágenes incrustadas, y JavaScript solo si hay alguna isla. Si una etiqueta, un atributo o un valor no existe, falla y los lista todos.
+
+### Envío al toolkit
+
+`.github/workflows/toolkit.yml` construye las piezas en cada push a `main` (o a mano), pasa `test:render` y `check:pieces`, y abre o actualiza un PR en `540/540-claude-toolkit` (rama `540-ds/update`) que copia `pieces/` en `plugins/design/540-ds/`. La versión va en `manifest.json` y en el título del PR. Necesita el secreto `TOOLKIT_TOKEN` en este repo: un token *fine-grained* con permiso de lectura y escritura en *Contents* y *Pull requests* de `540-claude-toolkit`.
+
+`TalkTemplate` no entra en las piezas: es una charla de ejemplo con fotos de muestra, no un componente que se rellene. La carpeta no se guarda en Git.
+
+## Usarlo en un proyecto React (paquete npm)
+
+La librería se publica en npm como `@540deg/ds`. Trae todos los componentes del catálogo y `TalkTemplate`, con sus tipos de TypeScript. Necesita React 19 en el proyecto que la usa.
+
+```bash
+npm install @540deg/ds
+```
+
+Importa la hoja de estilos **una vez**, en la entrada de la app (`main.tsx` o el layout raíz), y los componentes donde los uses:
+
+```tsx
+import '@540deg/ds/styles.css';
+import { Deck, Slide, Text } from '@540deg/ds';
+import type { DeckProps } from '@540deg/ds';
+```
+
+- **Una sola hoja**: `styles.css` lleva los tokens, el reset y los estilos base (fondo, color y letra en `html` y `body`), DM Sans (la fuente va dentro del paquete, no hace falta Google Fonts) y los estilos de todos los componentes. Los componentes no importan CSS por su cuenta, así que funcionan con cualquier bundler y en el servidor.
+- **Solo lo que usas**: cada componente es un módulo aparte y el paquete está marcado sin efectos secundarios salvo el CSS, así que el bundler descarta lo que no importas. `TalkTemplate` lleva sus fotos de muestra dentro y solo pesan si lo importas.
+- **Tipos**: cada componente exporta sus `Props` (`DeckProps`, `ButtonProps`…) y sus listas de valores (`BUTTON_VARIANTS`…). Se resuelven con `"moduleResolution": "bundler"` en el `tsconfig`, que es lo que traen Vite y Next.
+- **Tema**: `Deck` pinta el tema oscuro o claro en su propio contenedor; fuera de un `Deck`, el tema claro es el de `:root` y el oscuro se activa con `data-theme="dark"` en un antepasado.
+- **Normas**: las charlas hechas con el paquete siguen las mismas normas (`src/docs/normas-charlas.md`): solo componentes del catálogo y sus props, sin CSS propio.
+
+### Publicar una versión
+
+1. Sube la versión en `package.json` (`npm version patch`, `minor` o `major`, que crea también la etiqueta `vX.Y.Z`).
+2. Sube la etiqueta: `git push origin vX.Y.Z`.
+3. El flujo `.github/workflows/publish.yml` comprueba que la etiqueta coincide con la versión, pasa tipos, lint y SSR, construye la librería y la publica en npm con *provenance*.
+
+Necesita el secreto `NPM_TOKEN` en el repositorio (Settings → Secrets and variables → Actions): un token de npm de tipo *automation* o *granular* con permiso de publicación en el ámbito `@540deg`.
+
+Para probar el paquete en local sin publicarlo:
+
+```bash
+npm run build:lib   # deja la librería en dist/
+npm pack            # crea 540deg-ds-X.Y.Z.tgz, instalable con npm install ./ruta/al.tgz
+```
+
+## Fuentes de verdad
+
+1. Este código.
+2. Las charlas anteriores (`base-540.css`, `navegacion-540.js` y su guía de estilos), de donde salen las piezas de presentación.
+3. El archivo de Figma «540 · Design System», de donde se copian las fichas de los componentes. Si Figma y el código discrepan, manda el código.
+
+## Licencia
+
+El código está bajo [Apache License 2.0](LICENSE). La licencia no da derechos sobre el nombre, el logo ni la identidad visual de 540, ni sobre las fotos de muestra: siguen siendo de 540 (ver [NOTICE](NOTICE)). DM Sans va con su propia licencia, SIL OFL 1.1.

package/dist/assets/samples/captura.js

@@ -0,0 +1,4 @@
+//#region src/assets/samples/captura.svg
+var captura_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='1000'%20viewBox='0%200%201600%201000'%3e%3crect%20width='1600'%20height='1000'%20fill='%23f4f4f4'/%3e%3crect%20width='1600'%20height='72'%20fill='%23ffffff'/%3e%3crect%20x='40'%20y='24'%20width='96'%20height='24'%20rx='4'%20fill='%231a1a1a'/%3e%3crect%20x='1180'%20y='28'%20width='90'%20height='16'%20rx='4'%20fill='%23c8c8c8'/%3e%3crect%20x='1300'%20y='28'%20width='90'%20height='16'%20rx='4'%20fill='%23c8c8c8'/%3e%3crect%20x='1420'%20y='20'%20width='140'%20height='32'%20rx='16'%20fill='%231a1a1a'/%3e%3crect%20x='0'%20y='72'%20width='280'%20height='928'%20fill='%23ffffff'/%3e%3cg%20fill='%23d6d6d6'%3e%3crect%20x='40'%20y='120'%20width='180'%20height='16'%20rx='4'/%3e%3crect%20x='40'%20y='168'%20width='150'%20height='16'%20rx='4'/%3e%3crect%20x='40'%20y='216'%20width='200'%20height='16'%20rx='4'/%3e%3crect%20x='40'%20y='264'%20width='130'%20height='16'%20rx='4'/%3e%3crect%20x='40'%20y='312'%20width='170'%20height='16'%20rx='4'/%3e%3c/g%3e%3crect%20x='40'%20y='160'%20width='4'%20height='32'%20fill='%231a1a1a'/%3e%3crect%20x='340'%20y='120'%20width='420'%20height='32'%20rx='6'%20fill='%231a1a1a'/%3e%3crect%20x='340'%20y='172'%20width='620'%20height='16'%20rx='4'%20fill='%23bdbdbd'/%3e%3cg%20fill='%23ffffff'%20stroke='%23e2e2e2'%3e%3crect%20x='340'%20y='230'%20width='380'%20height='180'%20rx='10'/%3e%3crect%20x='760'%20y='230'%20width='380'%20height='180'%20rx='10'/%3e%3crect%20x='1180'%20y='230'%20width='380'%20height='180'%20rx='10'/%3e%3c/g%3e%3cg%20fill='%231a1a1a'%3e%3crect%20x='372'%20y='270'%20width='160'%20height='40'%20rx='6'/%3e%3crect%20x='792'%20y='270'%20width='120'%20height='40'%20rx='6'/%3e%3crect%20x='1212'%20y='270'%20width='190'%20height='40'%20rx='6'/%3e%3c/g%3e%3cg%20fill='%23cfcfcf'%3e%3crect%20x='372'%20y='340'%20width='240'%20height='14'%20rx='4'/%3e%3crect%20x='792'%20y='340'%20width='200'%20height='14'%20rx='4'/%3e%3crect%20x='1212'%20y='340'%20width='260'%20height='14'%20rx='4'/%3e%3c/g%3e%3crect%20x='340'%20y='450'%20width='1220'%20height='500'%20rx='10'%20fill='%23ffffff'%20stroke='%23e2e2e2'/%3e%3cpolyline%20points='400,860%20560,800%20720,820%20880,700%201040,720%201200,600%201360,620%201500,520'%20fill='none'%20stroke='%231a1a1a'%20stroke-width='5'/%3e%3cg%20stroke='%23ececec'%3e%3cline%20x1='400'%20y1='560'%20x2='1500'%20y2='560'/%3e%3cline%20x1='400'%20y1='680'%20x2='1500'%20y2='680'/%3e%3cline%20x1='400'%20y1='800'%20x2='1500'%20y2='800'/%3e%3c/g%3e%3c/svg%3e";
+//#endregion
+export { captura_default as default };