{
  "components-scu-button-primary": {
    "html": {
      "output": "<div class=\"comp-scu-button-primary\">\n  <div class=\"default\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"hover\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"focus\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"disabled\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-button-primary {\n  @include comp-scu-button-primary;\n  @include comp-scu-button-primary--figma-autolayout;\n\n  .default {\n    @include comp-scu-button-primary-default;\n    @include comp-scu-button-primary-default--figma-autolayout;\n\n    .label {\n      @include comp-scu-button-primary-default-label;\n    }\n  }\n\n  .hover {\n    @include comp-scu-button-primary-hover;\n    @include comp-scu-button-primary-hover--figma-autolayout;\n\n    .label {\n      @include comp-scu-button-primary-hover-label;\n    }\n  }\n\n  .focus {\n    @include comp-scu-button-primary-focus;\n    @include comp-scu-button-primary-focus--figma-autolayout;\n\n    .label {\n      @include comp-scu-button-primary-focus-label;\n    }\n  }\n\n  .disabled {\n    @include comp-scu-button-primary-disabled;\n    @include comp-scu-button-primary-disabled--figma-autolayout;\n\n    .label {\n      @include comp-scu-button-primary-disabled-label;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-button-outline": {
    "html": {
      "output": "<div class=\"comp-scu-button-outline\">\n  <div class=\"default\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"hover\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"focus\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"disabled\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-button-outline {\n  @include comp-scu-button-outline;\n\n  .default {\n    @include comp-scu-button-outline-default;\n    @include comp-scu-button-outline-default--figma-autolayout;\n    @include comp-scu-button-outline-default--absolute-layout;\n\n    .label {\n      @include comp-scu-button-outline-default-label;\n    }\n  }\n\n  .hover {\n    @include comp-scu-button-outline-hover;\n    @include comp-scu-button-outline-hover--figma-autolayout;\n    @include comp-scu-button-outline-hover--absolute-layout;\n\n    .label {\n      @include comp-scu-button-outline-hover-label;\n    }\n  }\n\n  .focus {\n    @include comp-scu-button-outline-focus;\n    @include comp-scu-button-outline-focus--figma-autolayout;\n    @include comp-scu-button-outline-focus--absolute-layout;\n\n    .label {\n      @include comp-scu-button-outline-focus-label;\n    }\n  }\n\n  .disabled {\n    @include comp-scu-button-outline-disabled;\n    @include comp-scu-button-outline-disabled--figma-autolayout;\n    @include comp-scu-button-outline-disabled--absolute-layout;\n\n    .label {\n      @include comp-scu-button-outline-disabled-label;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-button-grey": {
    "html": {
      "output": "<div class=\"comp-scu-button-grey\">\n  <div class=\"default\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"hover\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"focus\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"disabled\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-button-grey {\n  @include comp-scu-button-grey;\n\n  .default {\n    @include comp-scu-button-grey-default;\n    @include comp-scu-button-grey-default--figma-autolayout;\n    @include comp-scu-button-grey-default--absolute-layout;\n\n    .label {\n      @include comp-scu-button-grey-default-label;\n    }\n  }\n\n  .hover {\n    @include comp-scu-button-grey-hover;\n    @include comp-scu-button-grey-hover--figma-autolayout;\n    @include comp-scu-button-grey-hover--absolute-layout;\n\n    .label {\n      @include comp-scu-button-grey-hover-label;\n    }\n  }\n\n  .focus {\n    @include comp-scu-button-grey-focus;\n    @include comp-scu-button-grey-focus--figma-autolayout;\n    @include comp-scu-button-grey-focus--absolute-layout;\n\n    .label {\n      @include comp-scu-button-grey-focus-label;\n    }\n  }\n\n  .disabled {\n    @include comp-scu-button-grey-disabled;\n    @include comp-scu-button-grey-disabled--figma-autolayout;\n    @include comp-scu-button-grey-disabled--absolute-layout;\n\n    .label {\n      @include comp-scu-button-grey-disabled-label;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-button-link": {
    "html": {
      "output": "<div class=\"comp-scu-button-link\">\n  <div class=\"default\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"hover\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"focus\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"disabled\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-button-link {\n  @include comp-scu-button-link;\n\n  .default {\n    @include comp-scu-button-link-default;\n    @include comp-scu-button-link-default--figma-autolayout;\n    @include comp-scu-button-link-default--absolute-layout;\n\n    .label {\n      @include comp-scu-button-link-default-label;\n    }\n  }\n\n  .hover {\n    @include comp-scu-button-link-hover;\n    @include comp-scu-button-link-hover--figma-autolayout;\n    @include comp-scu-button-link-hover--absolute-layout;\n\n    .label {\n      @include comp-scu-button-link-hover-label;\n    }\n  }\n\n  .focus {\n    @include comp-scu-button-link-focus;\n    @include comp-scu-button-link-focus--figma-autolayout;\n    @include comp-scu-button-link-focus--absolute-layout;\n\n    .label {\n      @include comp-scu-button-link-focus-label;\n    }\n  }\n\n  .disabled {\n    @include comp-scu-button-link-disabled;\n    @include comp-scu-button-link-disabled--figma-autolayout;\n    @include comp-scu-button-link-disabled--absolute-layout;\n\n    .label {\n      @include comp-scu-button-link-disabled-label;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-icon-button-primary": {
    "html": {
      "output": "<div class=\"comp-scu-icon-button-primary\">\n  <div class=\"default\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"hover\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"focus\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"disabled\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-icon-button-primary {\n  @include comp-scu-icon-button-primary;\n\n  .default {\n    @include comp-scu-icon-button-primary-default;\n    @include comp-scu-icon-button-primary-default--figma-autolayout;\n    @include comp-scu-icon-button-primary-default--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-primary-default-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-primary-default-label;\n    }\n  }\n\n  .hover {\n    @include comp-scu-icon-button-primary-hover;\n    @include comp-scu-icon-button-primary-hover--figma-autolayout;\n    @include comp-scu-icon-button-primary-hover--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-primary-hover-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-primary-hover-label;\n    }\n  }\n\n  .focus {\n    @include comp-scu-icon-button-primary-focus;\n    @include comp-scu-icon-button-primary-focus--figma-autolayout;\n    @include comp-scu-icon-button-primary-focus--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-primary-focus-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-primary-focus-label;\n    }\n  }\n\n  .disabled {\n    @include comp-scu-icon-button-primary-disabled;\n    @include comp-scu-icon-button-primary-disabled--figma-autolayout;\n    @include comp-scu-icon-button-primary-disabled--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-primary-disabled-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-primary-disabled-label;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-icon-button-outline": {
    "html": {
      "output": "<div class=\"comp-scu-icon-button-outline\">\n  <div class=\"default\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"hover\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"focus\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n  <div class=\"disabled\">\n    <div class=\"icon\">\n    </div>\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-icon-button-outline {\n  @include comp-scu-icon-button-outline;\n\n  .default {\n    @include comp-scu-icon-button-outline-default;\n    @include comp-scu-icon-button-outline-default--figma-autolayout;\n    @include comp-scu-icon-button-outline-default--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-outline-default-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-outline-default-label;\n    }\n  }\n\n  .hover {\n    @include comp-scu-icon-button-outline-hover;\n    @include comp-scu-icon-button-outline-hover--figma-autolayout;\n    @include comp-scu-icon-button-outline-hover--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-outline-hover-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-outline-hover-label;\n    }\n  }\n\n  .focus {\n    @include comp-scu-icon-button-outline-focus;\n    @include comp-scu-icon-button-outline-focus--figma-autolayout;\n    @include comp-scu-icon-button-outline-focus--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-outline-focus-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-outline-focus-label;\n    }\n  }\n\n  .disabled {\n    @include comp-scu-icon-button-outline-disabled;\n    @include comp-scu-icon-button-outline-disabled--figma-autolayout;\n    @include comp-scu-icon-button-outline-disabled--absolute-layout;\n\n    .icon {\n      @include comp-scu-icon-button-outline-disabled-icon;\n    }\n\n    .label {\n      @include comp-scu-icon-button-outline-disabled-label;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-nav-item-v": {
    "html": {
      "output": "<div class=\"comp-scu-nav-item-v\">\n  <div class=\"default\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"line-top\">\n    </div>\n    <div class=\"line-bottom\">\n    </div>\n    <div class=\"selected\">\n    </div>\n  </div>\n  <div class=\"hover\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"line-top\">\n    </div>\n    <div class=\"line-bottom\">\n    </div>\n    <div class=\"selected\">\n    </div>\n  </div>\n  <div class=\"focused\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"line-top\">\n    </div>\n    <div class=\"line-bottom\">\n    </div>\n    <div class=\"selected\">\n    </div>\n  </div>\n  <div class=\"selected\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"line-top\">\n    </div>\n    <div class=\"line-bottom\">\n    </div>\n    <div class=\"selected\">\n    </div>\n  </div>\n  <div class=\"selected-hover\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"line-top\">\n    </div>\n    <div class=\"line-bottom\">\n    </div>\n    <div class=\"selected\">\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-nav-item-v {\n  @include comp-scu-nav-item-v;\n\n  .default {\n    @include comp-scu-nav-item-v-default;\n    @include comp-scu-nav-item-v-default--absolute-layout;\n\n    .label {\n      @include comp-scu-nav-item-v-default-label;\n      @include comp-scu-nav-item-v-default-label--absolute-layout;\n    }\n\n    .line-top {\n      @include comp-scu-nav-item-v-default-line-top;\n      @include comp-scu-nav-item-v-default-line-top--absolute-layout;\n    }\n\n    .line-bottom {\n      @include comp-scu-nav-item-v-default-line-bottom;\n      @include comp-scu-nav-item-v-default-line-bottom--absolute-layout;\n    }\n\n    .selected {\n      @include comp-scu-nav-item-v-default-selected;\n      @include comp-scu-nav-item-v-default-selected--absolute-layout;\n    }\n  }\n\n  .hover {\n    @include comp-scu-nav-item-v-hover;\n    @include comp-scu-nav-item-v-hover--absolute-layout;\n\n    .label {\n      @include comp-scu-nav-item-v-hover-label;\n      @include comp-scu-nav-item-v-hover-label--absolute-layout;\n    }\n\n    .line-top {\n      @include comp-scu-nav-item-v-hover-line-top;\n      @include comp-scu-nav-item-v-hover-line-top--absolute-layout;\n    }\n\n    .line-bottom {\n      @include comp-scu-nav-item-v-hover-line-bottom;\n      @include comp-scu-nav-item-v-hover-line-bottom--absolute-layout;\n    }\n\n    .selected {\n      @include comp-scu-nav-item-v-hover-selected;\n      @include comp-scu-nav-item-v-hover-selected--absolute-layout;\n    }\n  }\n\n  .focused {\n    @include comp-scu-nav-item-v-focused;\n    @include comp-scu-nav-item-v-focused--absolute-layout;\n\n    .label {\n      @include comp-scu-nav-item-v-focused-label;\n      @include comp-scu-nav-item-v-focused-label--absolute-layout;\n    }\n\n    .line-top {\n      @include comp-scu-nav-item-v-focused-line-top;\n      @include comp-scu-nav-item-v-focused-line-top--absolute-layout;\n    }\n\n    .line-bottom {\n      @include comp-scu-nav-item-v-focused-line-bottom;\n      @include comp-scu-nav-item-v-focused-line-bottom--absolute-layout;\n    }\n\n    .selected {\n      @include comp-scu-nav-item-v-focused-selected;\n      @include comp-scu-nav-item-v-focused-selected--absolute-layout;\n    }\n  }\n\n  .selected {\n    @include comp-scu-nav-item-v-selected;\n    @include comp-scu-nav-item-v-selected--absolute-layout;\n\n    .label {\n      @include comp-scu-nav-item-v-selected-label;\n      @include comp-scu-nav-item-v-selected-label--absolute-layout;\n    }\n\n    .line-top {\n      @include comp-scu-nav-item-v-selected-line-top;\n      @include comp-scu-nav-item-v-selected-line-top--absolute-layout;\n    }\n\n    .line-bottom {\n      @include comp-scu-nav-item-v-selected-line-bottom;\n      @include comp-scu-nav-item-v-selected-line-bottom--absolute-layout;\n    }\n\n    .selected {\n      @include comp-scu-nav-item-v-selected-selected;\n      @include comp-scu-nav-item-v-selected-selected--absolute-layout;\n    }\n  }\n\n  .selected-hover {\n    @include comp-scu-nav-item-v-selected-hover;\n    @include comp-scu-nav-item-v-selected-hover--absolute-layout;\n\n    .label {\n      @include comp-scu-nav-item-v-selected-hover-label;\n      @include comp-scu-nav-item-v-selected-hover-label--absolute-layout;\n    }\n\n    .line-top {\n      @include comp-scu-nav-item-v-selected-hover-line-top;\n      @include comp-scu-nav-item-v-selected-hover-line-top--absolute-layout;\n    }\n\n    .line-bottom {\n      @include comp-scu-nav-item-v-selected-hover-line-bottom;\n      @include comp-scu-nav-item-v-selected-hover-line-bottom--absolute-layout;\n    }\n\n    .selected {\n      @include comp-scu-nav-item-v-selected-hover-selected;\n      @include comp-scu-nav-item-v-selected-hover-selected--absolute-layout;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-nav-item-h-icon": {
    "html": {
      "output": "<div class=\"comp-scu-nav-item-h-icon\">\n  <div class=\"icon-box\">\n    <div class=\"i-c-o-n-24\">\n    </div>\n    <div class=\"notification\">\n      <div class=\"number\">\n        2\n      </div>\n    </div>\n  </div>\n  <div class=\"comments\">\n    Comments\n  </div>\n  <div class=\"select\">\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-nav-item-h-icon {\n  @include comp-scu-nav-item-h-icon;\n  @include comp-scu-nav-item-h-icon--figma-autolayout;\n\n  .icon-box {\n    @include comp-scu-nav-item-h-icon-icon-box;\n\n    .i-c-o-n-24 {\n      @include comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24;\n      @include comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--absolute-layout;\n    }\n\n    .notification {\n      @include comp-scu-nav-item-h-icon-icon-box-notification;\n      @include comp-scu-nav-item-h-icon-icon-box-notification--absolute-layout;\n\n      .number {\n        @include comp-scu-nav-item-h-icon-icon-box-notification-number;\n        @include comp-scu-nav-item-h-icon-icon-box-notification-number--absolute-layout;\n      }\n    }\n  }\n\n  .comments {\n    @include comp-scu-nav-item-h-icon-comments;\n  }\n\n  .select {\n    @include comp-scu-nav-item-h-icon-select;\n  }\n}",
      "example": ""
    }
  },
  "components-beta-scu-button-2": {
    "html": {
      "output": "<div class=\"comp-beta-scu-button-2\">\n  <div class=\"scu-button-2-background\">\n  </div>\n  <div class=\"label\">\n    label\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-beta-scu-button-2 {\n  @include comp-beta-scu-button-2;\n\n  .scu-button-2-background {\n    @include comp-beta-scu-button-2-scu-button-2-background;\n    @include comp-beta-scu-button-2-scu-button-2-background--absolute-layout;\n  }\n\n  .label {\n    @include comp-beta-scu-button-2-label;\n    @include comp-beta-scu-button-2-label--absolute-layout;\n  }\n}",
      "example": ""
    }
  },
  "components-scu-input-text": {
    "html": {
      "output": "<div class=\"comp-scu-input-text\">\n  <div class=\"scu-input-field\">\n    <div class=\"default\">\n      <div class=\"input\">\n        Input\n      </div>\n      <div class=\"placeholder\">\n        placeholder\n      </div>\n    </div>\n    <div class=\"error\">\n      <div class=\"input\">\n        Input\n      </div>\n      <div class=\"placeholder\">\n        placeholder\n      </div>\n    </div>\n  </div>\n  <div class=\"scu-input-error\">\n    <div class=\"error\">\n      error\n    </div>\n  </div>\n  <div class=\"scu-input-label\">\n    <div class=\"label\">\n      label\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-input-text {\n  @include comp-scu-input-text;\n\n  .scu-input-field {\n    @include comp-scu-input-text-scu-input-field;\n    @include comp-scu-input-text-scu-input-field--absolute-layout;\n\n    .default {\n      @include comp-scu-input-text-scu-input-field-default;\n      @include comp-scu-input-text-scu-input-field-default--absolute-layout;\n\n      .input {\n        @include comp-scu-input-text-scu-input-field-default-input;\n        @include comp-scu-input-text-scu-input-field-default-input--absolute-layout;\n      }\n\n      .placeholder {\n        @include comp-scu-input-text-scu-input-field-default-placeholder;\n        @include comp-scu-input-text-scu-input-field-default-placeholder--absolute-layout;\n      }\n    }\n\n    .error {\n      @include comp-scu-input-text-scu-input-field-error;\n      @include comp-scu-input-text-scu-input-field-error--absolute-layout;\n\n      .input {\n        @include comp-scu-input-text-scu-input-field-error-input;\n        @include comp-scu-input-text-scu-input-field-error-input--absolute-layout;\n      }\n\n      .placeholder {\n        @include comp-scu-input-text-scu-input-field-error-placeholder;\n        @include comp-scu-input-text-scu-input-field-error-placeholder--absolute-layout;\n      }\n    }\n  }\n\n  .scu-input-error {\n    @include comp-scu-input-text-scu-input-error;\n    @include comp-scu-input-text-scu-input-error--absolute-layout;\n\n    .error {\n      @include comp-scu-input-text-scu-input-error-error;\n      @include comp-scu-input-text-scu-input-error-error--absolute-layout;\n    }\n  }\n\n  .scu-input-label {\n    @include comp-scu-input-text-scu-input-label;\n    @include comp-scu-input-text-scu-input-label--absolute-layout;\n\n    .label {\n      @include comp-scu-input-text-scu-input-label-label;\n      @include comp-scu-input-text-scu-input-label-label--absolute-layout;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-input-textarea": {
    "html": {
      "output": "<div class=\"comp-scu-input-textarea\">\n  <div class=\"label\">\n    label\n  </div>\n  <div class=\"scu-input-error\">\n    <div class=\"error\">\n      error\n    </div>\n  </div>\n  <div class=\"scu-input-field\">\n    <div class=\"default\">\n      <div class=\"input\">\n        Input\n      </div>\n      <div class=\"placeholder\">\n        placeholder\n      </div>\n    </div>\n    <div class=\"error\">\n      <div class=\"input\">\n        Input\n      </div>\n      <div class=\"placeholder\">\n        placeholder\n      </div>\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-input-textarea {\n  @include comp-scu-input-textarea;\n\n  .label {\n    @include comp-scu-input-textarea-label;\n    @include comp-scu-input-textarea-label--absolute-layout;\n  }\n\n  .scu-input-error {\n    @include comp-scu-input-textarea-scu-input-error;\n    @include comp-scu-input-textarea-scu-input-error--absolute-layout;\n\n    .error {\n      @include comp-scu-input-textarea-scu-input-error-error;\n      @include comp-scu-input-textarea-scu-input-error-error--absolute-layout;\n    }\n  }\n\n  .scu-input-field {\n    @include comp-scu-input-textarea-scu-input-field;\n    @include comp-scu-input-textarea-scu-input-field--absolute-layout;\n\n    .default {\n      @include comp-scu-input-textarea-scu-input-field-default;\n      @include comp-scu-input-textarea-scu-input-field-default--absolute-layout;\n\n      .input {\n        @include comp-scu-input-textarea-scu-input-field-default-input;\n        @include comp-scu-input-textarea-scu-input-field-default-input--absolute-layout;\n      }\n\n      .placeholder {\n        @include comp-scu-input-textarea-scu-input-field-default-placeholder;\n        @include comp-scu-input-textarea-scu-input-field-default-placeholder--absolute-layout;\n      }\n    }\n\n    .error {\n      @include comp-scu-input-textarea-scu-input-field-error;\n      @include comp-scu-input-textarea-scu-input-field-error--absolute-layout;\n\n      .input {\n        @include comp-scu-input-textarea-scu-input-field-error-input;\n        @include comp-scu-input-textarea-scu-input-field-error-input--absolute-layout;\n      }\n\n      .placeholder {\n        @include comp-scu-input-textarea-scu-input-field-error-placeholder;\n        @include comp-scu-input-textarea-scu-input-field-error-placeholder--absolute-layout;\n      }\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-input-radio": {
    "html": {
      "output": "<div class=\"comp-scu-input-radio\">\n  <div class=\"default\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"scu-input-error\">\n      <div class=\"error\">\n        error\n      </div>\n    </div>\n    <div class=\"i-c-o-n-16\">\n    </div>\n  </div>\n  <div class=\"selected\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"scu-input-error\">\n      <div class=\"error\">\n        error\n      </div>\n    </div>\n    <div class=\"i-c-o-n-16\">\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-input-radio {\n  @include comp-scu-input-radio;\n\n  .default {\n    @include comp-scu-input-radio-default;\n    @include comp-scu-input-radio-default--absolute-layout;\n\n    .label {\n      @include comp-scu-input-radio-default-label;\n      @include comp-scu-input-radio-default-label--absolute-layout;\n    }\n\n    .scu-input-error {\n      @include comp-scu-input-radio-default-scu-input-error;\n      @include comp-scu-input-radio-default-scu-input-error--absolute-layout;\n\n      .error {\n        @include comp-scu-input-radio-default-scu-input-error-error;\n        @include comp-scu-input-radio-default-scu-input-error-error--absolute-layout;\n      }\n    }\n\n    .i-c-o-n-16 {\n      @include comp-scu-input-radio-default-i-c-o-n-16;\n      @include comp-scu-input-radio-default-i-c-o-n-16--absolute-layout;\n    }\n  }\n\n  .selected {\n    @include comp-scu-input-radio-selected;\n    @include comp-scu-input-radio-selected--absolute-layout;\n\n    .label {\n      @include comp-scu-input-radio-selected-label;\n      @include comp-scu-input-radio-selected-label--absolute-layout;\n    }\n\n    .scu-input-error {\n      @include comp-scu-input-radio-selected-scu-input-error;\n      @include comp-scu-input-radio-selected-scu-input-error--absolute-layout;\n\n      .error {\n        @include comp-scu-input-radio-selected-scu-input-error-error;\n        @include comp-scu-input-radio-selected-scu-input-error-error--absolute-layout;\n      }\n    }\n\n    .i-c-o-n-16 {\n      @include comp-scu-input-radio-selected-i-c-o-n-16;\n      @include comp-scu-input-radio-selected-i-c-o-n-16--absolute-layout;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-input-checkbox": {
    "html": {
      "output": "<div class=\"comp-scu-input-checkbox\">\n  <div class=\"default\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"scu-input-error\">\n      <div class=\"error\">\n        error\n      </div>\n    </div>\n    <div class=\"i-c-o-n-16\">\n    </div>\n  </div>\n  <div class=\"selected\">\n    <div class=\"label\">\n      label\n    </div>\n    <div class=\"scu-input-error\">\n      <div class=\"error\">\n        error\n      </div>\n    </div>\n    <div class=\"i-c-o-n-16\">\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-input-checkbox {\n  @include comp-scu-input-checkbox;\n\n  .default {\n    @include comp-scu-input-checkbox-default;\n    @include comp-scu-input-checkbox-default--absolute-layout;\n\n    .label {\n      @include comp-scu-input-checkbox-default-label;\n      @include comp-scu-input-checkbox-default-label--absolute-layout;\n    }\n\n    .scu-input-error {\n      @include comp-scu-input-checkbox-default-scu-input-error;\n      @include comp-scu-input-checkbox-default-scu-input-error--absolute-layout;\n\n      .error {\n        @include comp-scu-input-checkbox-default-scu-input-error-error;\n        @include comp-scu-input-checkbox-default-scu-input-error-error--absolute-layout;\n      }\n    }\n\n    .i-c-o-n-16 {\n      @include comp-scu-input-checkbox-default-i-c-o-n-16;\n      @include comp-scu-input-checkbox-default-i-c-o-n-16--absolute-layout;\n    }\n  }\n\n  .selected {\n    @include comp-scu-input-checkbox-selected;\n    @include comp-scu-input-checkbox-selected--absolute-layout;\n\n    .label {\n      @include comp-scu-input-checkbox-selected-label;\n      @include comp-scu-input-checkbox-selected-label--absolute-layout;\n    }\n\n    .scu-input-error {\n      @include comp-scu-input-checkbox-selected-scu-input-error;\n      @include comp-scu-input-checkbox-selected-scu-input-error--absolute-layout;\n\n      .error {\n        @include comp-scu-input-checkbox-selected-scu-input-error-error;\n        @include comp-scu-input-checkbox-selected-scu-input-error-error--absolute-layout;\n      }\n    }\n\n    .i-c-o-n-16 {\n      @include comp-scu-input-checkbox-selected-i-c-o-n-16;\n      @include comp-scu-input-checkbox-selected-i-c-o-n-16--absolute-layout;\n    }\n  }\n}",
      "example": ""
    }
  },
  "components-scu-member-profile": {
    "html": {
      "output": "<div class=\"comp-scu-member-profile\">\n  <div class=\"member-picture\">\n    <div class=\"screen-shot-2020-10-16-at-12-38-1\">\n    </div>\n  </div>\n  <div class=\"label-box\">\n    <div class=\"member-name\">\n      Member Name\n    </div>\n    <div class=\"member-since\">\n      member since\n    </div>\n  </div>\n</div>",
      "example": ""
    },
    "scss": {
      "output": "\n:host { display: inline-block; }\n\n.comp-scu-member-profile {\n  @include comp-scu-member-profile;\n  @include comp-scu-member-profile--figma-autolayout;\n\n  .member-picture {\n    @include comp-scu-member-profile-member-picture;\n\n    .screen-shot-2020-10-16-at-12-38-1 {\n      @include comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1;\n      @include comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--absolute-layout;\n    }\n  }\n\n  .label-box {\n    @include comp-scu-member-profile-label-box;\n    @include comp-scu-member-profile-label-box--figma-autolayout;\n\n    .member-name {\n      @include comp-scu-member-profile-label-box-member-name;\n    }\n\n    .member-since {\n      @include comp-scu-member-profile-label-box-member-since;\n    }\n  }\n}",
      "example": ""
    }
  }
}