export default {
  name: "Signup",
  acceptsChildren: false,
  category: "Other",
  layers: [
    {
      id: "headline",
      name: "Headline",
      defaultStyles: {
        "": {
          color: "var(--theme-fg-default)",
          "font-family": "var(--theme-fonts-heading)",
          "font-weight": "var(--theme-fontWeights-bold)",
          "font-size": "var(--theme-fontSizes-2xl)",
          margin: "0px 0px",
        },
      },
    },
    {
      id: "subtitle",
      name: "Subtitle",
      defaultStyles: {
        "": {
          color: "var(--theme-fg-default)",
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-normal)",
          "font-size": "var(--theme-fontSizes-md)",
          margin: "0px 0px",
        },
      },
    },
    {
      id: "error",
      name: "Error",
      defaultStyles: {
        "": {
          color: "var(--theme-fg-error)",
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-normal)",
          "font-size": "var(--theme-fontSizes-md)",
          "background-color": "#FFFFFF",
          gap: "var(--theme-spacing-3xs)",
          padding: "var(--theme-spacing-3xs)",
          display: "flex",
          "align-items": "center",
          "border-radius": "var(--theme-radii-md)",
          "border-color": "var(--theme-border-error)",
          "border-width": "1px",
        },
      },
    },
    {
      id: "container",
      name: "Container",
      defaultStyles: {
        "": {
          display: "flex",
          "flex-direction": "column",
          gap: "var(--theme-spacing-xs)",
        },
      },
    },
    {
      id: "input",
      name: "Input",
      defaultStyles: {
        ":hover": {
          "border-color": "var(--theme-border-emphasized)",
        },
        ":focus": {
          "border-color": "var(--theme-brand-brand-500)",
        },
        ":error": {
          "border-color": "var(--theme-border-error)",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-semibold)",
          "font-size": "var(--theme-fontSizes-md)",
          color: "var(--theme-fg-default)",
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "flex",
          "flex-direction": "row",
          "justify-content": "flex-start",
          "align-items": "stretch",
          width: "auto",
          height: "40px",
          "min-width": "auto",
          "min-height": "auto",
          "max-width": "100%",
          "max-height": "100%",
          "padding-right": "16px",
          "padding-left": "16px",
          "border-color": "var(--theme-border-default)",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "2px",
          "border-style": "solid",
          "background-color": "transparent",
          "box-shadow": "var(--theme-shadows-none)",
          outline: "var(--theme-sizes-zero)",
        },
      },
    },
    {
      id: "primaryButton",
      name: "Primary Button",
      defaultStyles: {
        ":hover": {
          "background-color": "var(--theme-border-default)",
        },
        ":active": {
          "background-color": "var(--theme-border-emphasized)",
        },
        ":focus-visible": {
          "box-shadow": "var(--theme-shadows-outline)",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
          "box-shadow": "none",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-semibold)",
          "font-size": "var(--theme-fontSizes-md)",
          color: "var(--theme-fg-default)",
          "text-align": "center",
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "inline-flex",
          "flex-direction": "row",
          "justify-content": "center",
          "align-items": "center",
          gap: "8px",
          width: "auto",
          height: "40px",
          "min-width": "auto",
          "min-height": "auto",
          "max-width": "100%",
          "max-height": "100%",
          "padding-right": "16px",
          "padding-left": "16px",
          "padding-top": "0px",
          "padding-bottom": "0px",
          "border-color": "var(--theme-border-default)",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "0px",
          "border-style": "solid",
          "background-color": "var(--theme-bg-muted)",
          "box-shadow": "var(--theme-shadows-none)",
          cursor: "pointer",
        },
      },
    },
    {
      id: "footer",
      name: "Footer",
      defaultStyles: {
        "": {
          display: "flex",
          width: "100%",
          "justify-content": "space-between",
          "align-items": "center",
        },
      },
    },
    {
      id: "link",
      name: "Link",
      defaultStyles: {
        ":focus-within": {
          "outline-width": "3px",
          "outline-color": "#7DADD9",
          "outline-style": "solid",
        },
        "": {
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "flex",
          "flex-direction": "row",
          "justify-content": "flex-start",
          "align-items": "stretch",
        },
      },
    },
  ],
  props: [
    {
      label: "Redirect",
      name: "callbackUrl",
      type: { kind: "route", isDynamic: false },
      default: null,
      placeholder: "Select a page",
      help: "The page you'd like to redirect to",
      required: true,
    },
    {
      label: "Callback Query Params",
      name: "query",
      type: { kind: "static", of: "queryParam", isList: true },
      default: null,
      placeholder: "Select an (optional) set of query params",
      help: "The query params you'd like to pass to the page",
    },
    {
      label: "Login",
      name: "loginUrl",
      type: { kind: "route", isDynamic: false },
      default: null,
      placeholder: "Select a page",
      help: "The page you'd like to redirect to",
      required: true,
    },
  ],
  events: [],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "column",
      gap: "var(--theme-spacing-sm)",
      width: "100%",
    },
  },
  sources: [],
  actions: [],
} as const;