crcn

import * as styles from "./styles.pc";

const InvestorSignupPage = () => {
  const {
    title,
    accountKinds,
    onAccountKindChange,
    onContinue,
    onSignup,
  } = useSignupPage();

crcn

<import src="@captec/design-system/src/components.pc" as="ds" />

<!--
 ... more code above ...
-->

<!--
  @frame { visible: false }
-->
<div export component as="Title">

crcn

import * as styles from "./styles.pc";

function MyApp() {
  return <styles.Message name="Bob" />;
}

crcn

<style>
  div {
    color: red;
  }
</style>

<!--
  Frames are kind of like artboards, and allow you to do responsive testing.  
  @frame { title: "Desktop", width: 1024, height: 768 }
-->

crcn

:root {
  
    --vscode-activityBar-activeBorder: #eeffff;
    --vscode-activityBar-background: #1a1a1a;
    --vscode-activityBar-border: rgba(0, 0, 0, 0.38);
    --vscode-activityBar-dropBorder: #eeffff;
    --vscode-activityBar-foreground: #eeffff;
    --vscode-activityBar-inactiveForeground: rgba(238, 255, 255, 0.4);
    --vscode-activityBarBadge-background: #80cbc4;
    --vscode-activityBarBadge-foreground: #000000;

crcn

<style>
  .some-component {
    
  }
</style>

<!-- Components to be used in app -->

<div export component as="SomeComponent" className="some-component">
  {children}

crcn

<!--

@group components / molecules

### This is a test component

Test just a test, move a long. Here's what it looks like:

<Test>
</Test>

crcn

<import as="tw" src="tailwind.pc">


<style>
  .message {
    font-family: Helvetica;
    color: white;
  }
</style>

crcn

<import src="../atoms/colors.pc">
<import as="typography" src="../atoms/typography.pc">
<import src="../atoms/spacing.pc">

<style>
  .background-2 {
    background-color: var(--barney);
    &.absolute {
      position: absolute;
      left: 0px;

crcn

<import as="figma" src="../design-generated/test/figmark-2.pc">

<style>
  .button {
    font-family: Helvetica;
    & .background {
      padding: 24px;
      & .label {
        font-family: Helvetica;
        display: inline-block;