npm - scu-web-components - Versions diffs - 0.0.94 → 0.0.95 - Mend

scu-web-components 0.0.94 → 0.0.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1395) hide show

package/dist/tokens/source/htmlStubs.json CHANGED Viewed

@@ -13591,31 +13591,61 @@
   },
   "components-scw-horizontal-nav-item": {
     "html": {
-      "output": "<div class=\"scw-horizontal-nav-item\">\n  <div class=\"default\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"style-button\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default-size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default-style-button\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default-style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover-size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover-style-button\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover-style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus-size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus-style-button\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus-style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"scw-horizontal-nav-item\">\n  <div class=\"default\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"style-button\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default-size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default-style-button\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-default-style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover-size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover-style-button\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-hover-style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus-size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus-style-button\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"label\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"state-focus-style-button-size-small\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/index-mixins\" as index-mixins;\n@use \"comp-scw-horizontal-nav-item/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-mixins\" as default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-mixins\" as default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-menu-item-mixins\" as default-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-mixins\" as size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-mixins\" as size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-mixins\" as size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-menu-item-mixins\" as size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-mixins\" as style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-mixins\" as style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-mixins\" as style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-label-mixins\" as style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-mixins\" as style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-mixins\" as style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-mixins\" as style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-menu-item-mixins\" as style-button-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-mixins\" as state-default-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-mixins\" as state-default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-mixins\" as state-default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-menu-item-mixins\" as state-default-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-mixins\" as state-default-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-mixins\" as state-default-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-mixins\" as state-default-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-menu-item-mixins\" as state-default-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-mixins\" as state-default-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-mixins\" as state-default-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-mixins\" as state-default-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-label-mixins\" as state-default-style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-mixins\" as state-default-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-mixins\" as state-default-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-mixins\" as state-default-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-menu-item-mixins\" as state-default-style-button-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-mixins\" as state-hover-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-mixins\" as state-hover-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-mixins\" as state-hover-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-menu-item-mixins\" as state-hover-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-mixins\" as state-hover-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-mixins\" as state-hover-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-mixins\" as state-hover-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-menu-item-mixins\" as state-hover-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-mixins\" as state-hover-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-mixins\" as state-hover-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-mixins\" as state-hover-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-label-mixins\" as state-hover-style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-mixins\" as state-hover-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-mixins\" as state-hover-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-mixins\" as state-hover-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-menu-item-mixins\" as state-hover-style-button-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-mixins\" as state-focus-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-mixins\" as state-focus-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-mixins\" as state-focus-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-menu-item-mixins\" as state-focus-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-mixins\" as state-focus-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-mixins\" as state-focus-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-mixins\" as state-focus-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-menu-item-mixins\" as state-focus-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-mixins\" as state-focus-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-mixins\" as state-focus-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-mixins\" as state-focus-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-label-mixins\" as state-focus-style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-mixins\" as state-focus-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-mixins\" as state-focus-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-mixins\" as state-focus-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-menu-item-mixins\" as state-focus-style-button-size-small-container-label-menu-item-mixins;\n\n.scw-horizontal-nav-item {\n  @include index-mixins.box;\n\n  .default {\n    @include default-mixins.box;\n    @include default-mixins.figma-autolayout;\n    @include default-mixins.absolute-layout;\n\n    .container {\n      @include default-container-mixins.box;\n\n      .label {\n        @include default-container-label-mixins.box;\n        @include default-container-label-mixins.figma-autolayout;\n        @include default-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include default-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .size-small {\n    @include size-small-mixins.box;\n    @include size-small-mixins.figma-autolayout;\n    @include size-small-mixins.absolute-layout;\n\n    .container {\n      @include size-small-container-mixins.box;\n\n      .label {\n        @include size-small-container-label-mixins.box;\n        @include size-small-container-label-mixins.figma-autolayout;\n        @include size-small-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .style-button {\n    @include style-button-mixins.box;\n    @include style-button-mixins.figma-autolayout;\n    @include style-button-mixins.absolute-layout;\n\n    .container {\n      @include style-button-container-mixins.box;\n      @include style-button-container-mixins.figma-autolayout;\n\n      .label {\n        @include style-button-container-label-mixins.box;\n        @include style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .style-button-size-small {\n    @include style-button-size-small-mixins.box;\n    @include style-button-size-small-mixins.figma-autolayout;\n    @include style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include style-button-size-small-container-mixins.box;\n      @include style-button-size-small-container-mixins.figma-autolayout;\n\n      .label {\n        @include style-button-size-small-container-label-mixins.box;\n        @include style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default {\n    @include state-default-mixins.box;\n    @include state-default-mixins.figma-autolayout;\n    @include state-default-mixins.absolute-layout;\n\n    .container {\n      @include state-default-container-mixins.box;\n\n      .label {\n        @include state-default-container-label-mixins.box;\n        @include state-default-container-label-mixins.figma-autolayout;\n        @include state-default-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include state-default-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default-size-small {\n    @include state-default-size-small-mixins.box;\n    @include state-default-size-small-mixins.figma-autolayout;\n    @include state-default-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-default-size-small-container-mixins.box;\n\n      .label {\n        @include state-default-size-small-container-label-mixins.box;\n        @include state-default-size-small-container-label-mixins.figma-autolayout;\n        @include state-default-size-small-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include state-default-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default-style-button {\n    @include state-default-style-button-mixins.box;\n    @include state-default-style-button-mixins.figma-autolayout;\n    @include state-default-style-button-mixins.absolute-layout;\n\n    .container {\n      @include state-default-style-button-container-mixins.box;\n      @include state-default-style-button-container-mixins.figma-autolayout;\n\n      .label {\n        @include state-default-style-button-container-label-mixins.box;\n        @include state-default-style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include state-default-style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default-style-button-size-small {\n    @include state-default-style-button-size-small-mixins.box;\n    @include state-default-style-button-size-small-mixins.figma-autolayout;\n    @include state-default-style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-default-style-button-size-small-container-mixins.box;\n      @include state-default-style-button-size-small-container-mixins.figma-autolayout;\n\n      .label {\n        @include state-default-style-button-size-small-container-label-mixins.box;\n        @include state-default-style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-default-style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover {\n    @include state-hover-mixins.box;\n    @include state-hover-mixins.figma-autolayout;\n    @include state-hover-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-container-mixins.box;\n\n      .label {\n        @include state-hover-container-label-mixins.box;\n        @include state-hover-container-label-mixins.figma-autolayout;\n        @include state-hover-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include state-hover-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover-size-small {\n    @include state-hover-size-small-mixins.box;\n    @include state-hover-size-small-mixins.figma-autolayout;\n    @include state-hover-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-size-small-container-mixins.box;\n\n      .label {\n        @include state-hover-size-small-container-label-mixins.box;\n        @include state-hover-size-small-container-label-mixins.figma-autolayout;\n        @include state-hover-size-small-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include state-hover-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover-style-button {\n    @include state-hover-style-button-mixins.box;\n    @include state-hover-style-button-mixins.figma-autolayout;\n    @include state-hover-style-button-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-style-button-container-mixins.box;\n      @include state-hover-style-button-container-mixins.figma-autolayout;\n\n      .label {\n        @include state-hover-style-button-container-label-mixins.box;\n        @include state-hover-style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include state-hover-style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover-style-button-size-small {\n    @include state-hover-style-button-size-small-mixins.box;\n    @include state-hover-style-button-size-small-mixins.figma-autolayout;\n    @include state-hover-style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-style-button-size-small-container-mixins.box;\n      @include state-hover-style-button-size-small-container-mixins.figma-autolayout;\n\n      .label {\n        @include state-hover-style-button-size-small-container-label-mixins.box;\n        @include state-hover-style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-hover-style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus {\n    @include state-focus-mixins.box;\n    @include state-focus-mixins.figma-autolayout;\n    @include state-focus-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-container-mixins.box;\n\n      .label {\n        @include state-focus-container-label-mixins.box;\n        @include state-focus-container-label-mixins.figma-autolayout;\n        @include state-focus-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include state-focus-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus-size-small {\n    @include state-focus-size-small-mixins.box;\n    @include state-focus-size-small-mixins.figma-autolayout;\n    @include state-focus-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-size-small-container-mixins.box;\n\n      .label {\n        @include state-focus-size-small-container-label-mixins.box;\n        @include state-focus-size-small-container-label-mixins.figma-autolayout;\n        @include state-focus-size-small-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include state-focus-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus-style-button {\n    @include state-focus-style-button-mixins.box;\n    @include state-focus-style-button-mixins.figma-autolayout;\n    @include state-focus-style-button-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-style-button-container-mixins.box;\n      @include state-focus-style-button-container-mixins.figma-autolayout;\n\n      .label {\n        @include state-focus-style-button-container-label-mixins.box;\n        @include state-focus-style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include state-focus-style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus-style-button-size-small {\n    @include state-focus-style-button-size-small-mixins.box;\n    @include state-focus-style-button-size-small-mixins.figma-autolayout;\n    @include state-focus-style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-style-button-size-small-container-mixins.box;\n      @include state-focus-style-button-size-small-container-mixins.figma-autolayout;\n\n      .label {\n        @include state-focus-style-button-size-small-container-label-mixins.box;\n        @include state-focus-style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-focus-style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/index-mixins\" as index-mixins;\n@use \"comp-scw-horizontal-nav-item/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-mixins\" as default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-mixins\" as default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-mixins\" as default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-vector-mixins\" as default-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-mixins\" as default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-menu-item-mixins\" as default-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-mixins\" as size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-mixins\" as size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-mixins\" as size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-mixins\" as size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-vector-mixins\" as size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-mixins\" as size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-menu-item-mixins\" as size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-mixins\" as style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-mixins\" as style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-mixins\" as style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-mixins\" as style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-vector-mixins\" as style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-mixins\" as style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-label-mixins\" as style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-mixins\" as style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-mixins\" as style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-mixins\" as style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-mixins\" as style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-vector-mixins\" as style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-mixins\" as style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-menu-item-mixins\" as style-button-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-mixins\" as state-default-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-mixins\" as state-default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-mixins\" as state-default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-mixins\" as state-default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-vector-mixins\" as state-default-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-mixins\" as state-default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-menu-item-mixins\" as state-default-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-mixins\" as state-default-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-mixins\" as state-default-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-mixins\" as state-default-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-mixins\" as state-default-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vector-mixins\" as state-default-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-mixins\" as state-default-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-menu-item-mixins\" as state-default-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-mixins\" as state-default-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-mixins\" as state-default-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-mixins\" as state-default-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-mixins\" as state-default-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-vector-mixins\" as state-default-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-mixins\" as state-default-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-label-mixins\" as state-default-style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-mixins\" as state-default-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-mixins\" as state-default-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-mixins\" as state-default-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-menu-item-mixins\" as state-default-style-button-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-mixins\" as state-hover-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-mixins\" as state-hover-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-mixins\" as state-hover-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-mixins\" as state-hover-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-vector-mixins\" as state-hover-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-mixins\" as state-hover-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-menu-item-mixins\" as state-hover-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-mixins\" as state-hover-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-mixins\" as state-hover-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-mixins\" as state-hover-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-mixins\" as state-hover-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-mixins\" as state-hover-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-menu-item-mixins\" as state-hover-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-mixins\" as state-hover-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-mixins\" as state-hover-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-mixins\" as state-hover-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-mixins\" as state-hover-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-mixins\" as state-hover-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-label-mixins\" as state-hover-style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-mixins\" as state-hover-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-mixins\" as state-hover-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-mixins\" as state-hover-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-menu-item-mixins\" as state-hover-style-button-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-mixins\" as state-focus-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-mixins\" as state-focus-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-mixins\" as state-focus-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-mixins\" as state-focus-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-vector-mixins\" as state-focus-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-mixins\" as state-focus-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-menu-item-mixins\" as state-focus-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-mixins\" as state-focus-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-mixins\" as state-focus-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-mixins\" as state-focus-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-mixins\" as state-focus-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-mixins\" as state-focus-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-menu-item-mixins\" as state-focus-size-small-container-label-menu-item-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-mixins\" as state-focus-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-mixins\" as state-focus-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-mixins\" as state-focus-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-mixins\" as state-focus-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-mixins\" as state-focus-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-label-mixins\" as state-focus-style-button-container-label-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-mixins\" as state-focus-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-mixins\" as state-focus-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-mixins\" as state-focus-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-menu-item-mixins\" as state-focus-style-button-size-small-container-label-menu-item-mixins;\n\n.scw-horizontal-nav-item {\n  @include index-mixins.box;\n\n  .default {\n    @include default-mixins.box;\n    @include default-mixins.figma-autolayout;\n    @include default-mixins.absolute-layout;\n\n    .container {\n      @include default-container-mixins.box;\n      @include default-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include default-container-scw-icon-mixins.box;\n\n        .icon {\n          @include default-container-scw-icon-icon-mixins.box;\n          @include default-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include default-container-scw-icon-icon-vector-mixins.box;\n            @include default-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include default-container-label-mixins.box;\n        @include default-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include default-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .size-small {\n    @include size-small-mixins.box;\n    @include size-small-mixins.figma-autolayout;\n    @include size-small-mixins.absolute-layout;\n\n    .container {\n      @include size-small-container-mixins.box;\n      @include size-small-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include size-small-container-scw-icon-mixins.box;\n\n        .icon {\n          @include size-small-container-scw-icon-icon-mixins.box;\n          @include size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include size-small-container-scw-icon-icon-vector-mixins.box;\n            @include size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include size-small-container-label-mixins.box;\n        @include size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .style-button {\n    @include style-button-mixins.box;\n    @include style-button-mixins.figma-autolayout;\n    @include style-button-mixins.absolute-layout;\n\n    .container {\n      @include style-button-container-mixins.box;\n      @include style-button-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include style-button-container-scw-icon-mixins.box;\n\n        .icon {\n          @include style-button-container-scw-icon-icon-mixins.box;\n          @include style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include style-button-container-scw-icon-icon-vector-mixins.box;\n            @include style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include style-button-container-label-mixins.box;\n        @include style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .style-button-size-small {\n    @include style-button-size-small-mixins.box;\n    @include style-button-size-small-mixins.figma-autolayout;\n    @include style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include style-button-size-small-container-mixins.box;\n      @include style-button-size-small-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include style-button-size-small-container-scw-icon-mixins.box;\n\n        .icon {\n          @include style-button-size-small-container-scw-icon-icon-mixins.box;\n          @include style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n            @include style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include style-button-size-small-container-label-mixins.box;\n        @include style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default {\n    @include state-default-mixins.box;\n    @include state-default-mixins.figma-autolayout;\n    @include state-default-mixins.absolute-layout;\n\n    .container {\n      @include state-default-container-mixins.box;\n      @include state-default-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-default-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-default-container-scw-icon-icon-mixins.box;\n          @include state-default-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-default-container-scw-icon-icon-vector-mixins.box;\n            @include state-default-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-default-container-label-mixins.box;\n        @include state-default-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-default-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default-size-small {\n    @include state-default-size-small-mixins.box;\n    @include state-default-size-small-mixins.figma-autolayout;\n    @include state-default-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-default-size-small-container-mixins.box;\n\n      .scw-icon {\n        @include state-default-size-small-container-scw-icon-mixins.box;\n        @include state-default-size-small-container-scw-icon-mixins.absolute-layout;\n\n        .icon {\n          @include state-default-size-small-container-scw-icon-icon-mixins.box;\n          @include state-default-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-default-size-small-container-scw-icon-icon-vector-mixins.box;\n            @include state-default-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-default-size-small-container-label-mixins.box;\n        @include state-default-size-small-container-label-mixins.figma-autolayout;\n        @include state-default-size-small-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include state-default-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default-style-button {\n    @include state-default-style-button-mixins.box;\n    @include state-default-style-button-mixins.figma-autolayout;\n    @include state-default-style-button-mixins.absolute-layout;\n\n    .container {\n      @include state-default-style-button-container-mixins.box;\n      @include state-default-style-button-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-default-style-button-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-default-style-button-container-scw-icon-icon-mixins.box;\n          @include state-default-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-default-style-button-container-scw-icon-icon-vector-mixins.box;\n            @include state-default-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-default-style-button-container-label-mixins.box;\n        @include state-default-style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include state-default-style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-default-style-button-size-small {\n    @include state-default-style-button-size-small-mixins.box;\n    @include state-default-style-button-size-small-mixins.figma-autolayout;\n    @include state-default-style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-default-style-button-size-small-container-mixins.box;\n      @include state-default-style-button-size-small-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-default-style-button-size-small-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-default-style-button-size-small-container-scw-icon-icon-mixins.box;\n          @include state-default-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n            @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-default-style-button-size-small-container-label-mixins.box;\n        @include state-default-style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-default-style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover {\n    @include state-hover-mixins.box;\n    @include state-hover-mixins.figma-autolayout;\n    @include state-hover-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-container-mixins.box;\n      @include state-hover-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-hover-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-hover-container-scw-icon-icon-mixins.box;\n          @include state-hover-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-hover-container-scw-icon-icon-vector-mixins.box;\n            @include state-hover-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-hover-container-label-mixins.box;\n        @include state-hover-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-hover-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover-size-small {\n    @include state-hover-size-small-mixins.box;\n    @include state-hover-size-small-mixins.figma-autolayout;\n    @include state-hover-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-size-small-container-mixins.box;\n      @include state-hover-size-small-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-hover-size-small-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-hover-size-small-container-scw-icon-icon-mixins.box;\n          @include state-hover-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-hover-size-small-container-scw-icon-icon-vector-mixins.box;\n            @include state-hover-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-hover-size-small-container-label-mixins.box;\n        @include state-hover-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-hover-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover-style-button {\n    @include state-hover-style-button-mixins.box;\n    @include state-hover-style-button-mixins.figma-autolayout;\n    @include state-hover-style-button-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-style-button-container-mixins.box;\n      @include state-hover-style-button-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-hover-style-button-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-hover-style-button-container-scw-icon-icon-mixins.box;\n          @include state-hover-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-hover-style-button-container-scw-icon-icon-vector-mixins.box;\n            @include state-hover-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-hover-style-button-container-label-mixins.box;\n        @include state-hover-style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include state-hover-style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-hover-style-button-size-small {\n    @include state-hover-style-button-size-small-mixins.box;\n    @include state-hover-style-button-size-small-mixins.figma-autolayout;\n    @include state-hover-style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-hover-style-button-size-small-container-mixins.box;\n      @include state-hover-style-button-size-small-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-hover-style-button-size-small-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.box;\n          @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n            @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-hover-style-button-size-small-container-label-mixins.box;\n        @include state-hover-style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-hover-style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus {\n    @include state-focus-mixins.box;\n    @include state-focus-mixins.figma-autolayout;\n    @include state-focus-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-container-mixins.box;\n      @include state-focus-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-focus-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-focus-container-scw-icon-icon-mixins.box;\n          @include state-focus-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-focus-container-scw-icon-icon-vector-mixins.box;\n            @include state-focus-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-focus-container-label-mixins.box;\n        @include state-focus-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-focus-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus-size-small {\n    @include state-focus-size-small-mixins.box;\n    @include state-focus-size-small-mixins.figma-autolayout;\n    @include state-focus-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-size-small-container-mixins.box;\n      @include state-focus-size-small-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-focus-size-small-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-focus-size-small-container-scw-icon-icon-mixins.box;\n          @include state-focus-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-focus-size-small-container-scw-icon-icon-vector-mixins.box;\n            @include state-focus-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-focus-size-small-container-label-mixins.box;\n        @include state-focus-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-focus-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus-style-button {\n    @include state-focus-style-button-mixins.box;\n    @include state-focus-style-button-mixins.figma-autolayout;\n    @include state-focus-style-button-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-style-button-container-mixins.box;\n      @include state-focus-style-button-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-focus-style-button-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-focus-style-button-container-scw-icon-icon-mixins.box;\n          @include state-focus-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-focus-style-button-container-scw-icon-icon-vector-mixins.box;\n            @include state-focus-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-focus-style-button-container-label-mixins.box;\n        @include state-focus-style-button-container-label-mixins.figma-autolayout;\n\n        .label {\n          @include state-focus-style-button-container-label-label-mixins.text;\n        }\n      }\n    }\n  }\n\n  .state-focus-style-button-size-small {\n    @include state-focus-style-button-size-small-mixins.box;\n    @include state-focus-style-button-size-small-mixins.figma-autolayout;\n    @include state-focus-style-button-size-small-mixins.absolute-layout;\n\n    .container {\n      @include state-focus-style-button-size-small-container-mixins.box;\n      @include state-focus-style-button-size-small-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include state-focus-style-button-size-small-container-scw-icon-mixins.box;\n\n        .icon {\n          @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.box;\n          @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n            @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include state-focus-style-button-size-small-container-label-mixins.box;\n        @include state-focus-style-button-size-small-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include state-focus-style-button-size-small-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-default": {
     "html": {
-      "output": "<div class=\"default\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"default\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-mixins\" as default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-mixins\" as default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-menu-item-mixins\" as default-container-label-menu-item-mixins;\n\n.default {\n  @include default-mixins.box;\n  @include default-mixins.figma-autolayout;\n\n  .container {\n    @include default-container-mixins.box;\n\n    .label {\n      @include default-container-label-mixins.box;\n      @include default-container-label-mixins.figma-autolayout;\n      @include default-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include default-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-mixins\" as default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-mixins\" as default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-mixins\" as default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-vector-mixins\" as default-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-mixins\" as default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-menu-item-mixins\" as default-container-label-menu-item-mixins;\n\n.default {\n  @include default-mixins.box;\n  @include default-mixins.figma-autolayout;\n\n  .container {\n    @include default-container-mixins.box;\n    @include default-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include default-container-scw-icon-mixins.box;\n\n      .icon {\n        @include default-container-scw-icon-icon-mixins.box;\n        @include default-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include default-container-scw-icon-icon-vector-mixins.box;\n          @include default-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include default-container-label-mixins.box;\n      @include default-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include default-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-default-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/default-container-mixins\" as default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-mixins\" as default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-menu-item-mixins\" as default-container-label-menu-item-mixins;\n\n.container {\n  @include default-container-mixins.box;\n\n  .label {\n    @include default-container-label-mixins.box;\n    @include default-container-label-mixins.figma-autolayout;\n    @include default-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include default-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/default-container-mixins\" as default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-mixins\" as default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-mixins\" as default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-vector-mixins\" as default-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-mixins\" as default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-label-menu-item-mixins\" as default-container-label-menu-item-mixins;\n\n.container {\n  @include default-container-mixins.box;\n  @include default-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include default-container-scw-icon-mixins.box;\n\n    .icon {\n      @include default-container-scw-icon-icon-mixins.box;\n      @include default-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include default-container-scw-icon-icon-vector-mixins.box;\n        @include default-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include default-container-label-mixins.box;\n    @include default-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include default-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-default-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-mixins\" as default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-mixins\" as default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-vector-mixins\" as default-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include default-container-scw-icon-mixins.box;\n\n  .icon {\n    @include default-container-scw-icon-icon-mixins.box;\n    @include default-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include default-container-scw-icon-icon-vector-mixins.box;\n      @include default-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-default-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-mixins\" as default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-vector-mixins\" as default-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include default-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include default-container-scw-icon-icon-vector-mixins.box;\n    @include default-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-default-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/default-container-scw-icon-icon-vector-mixins\" as default-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include default-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13641,21 +13671,51 @@
   },
   "components-scw-horizontal-nav-item-size-small": {
     "html": {
-      "output": "<div class=\"size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/size-small-mixins\" as size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-mixins\" as size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-mixins\" as size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-menu-item-mixins\" as size-small-container-label-menu-item-mixins;\n\n.size-small {\n  @include size-small-mixins.box;\n  @include size-small-mixins.figma-autolayout;\n\n  .container {\n    @include size-small-container-mixins.box;\n\n    .label {\n      @include size-small-container-label-mixins.box;\n      @include size-small-container-label-mixins.figma-autolayout;\n      @include size-small-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/size-small-mixins\" as size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-mixins\" as size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-mixins\" as size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-mixins\" as size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-vector-mixins\" as size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-mixins\" as size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-menu-item-mixins\" as size-small-container-label-menu-item-mixins;\n\n.size-small {\n  @include size-small-mixins.box;\n  @include size-small-mixins.figma-autolayout;\n\n  .container {\n    @include size-small-container-mixins.box;\n    @include size-small-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include size-small-container-scw-icon-mixins.box;\n\n      .icon {\n        @include size-small-container-scw-icon-icon-mixins.box;\n        @include size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include size-small-container-scw-icon-icon-vector-mixins.box;\n          @include size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include size-small-container-label-mixins.box;\n      @include size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/size-small-container-mixins\" as size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-mixins\" as size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-menu-item-mixins\" as size-small-container-label-menu-item-mixins;\n\n.container {\n  @include size-small-container-mixins.box;\n\n  .label {\n    @include size-small-container-label-mixins.box;\n    @include size-small-container-label-mixins.figma-autolayout;\n    @include size-small-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/size-small-container-mixins\" as size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-mixins\" as size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-mixins\" as size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-vector-mixins\" as size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-mixins\" as size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-label-menu-item-mixins\" as size-small-container-label-menu-item-mixins;\n\n.container {\n  @include size-small-container-mixins.box;\n  @include size-small-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include size-small-container-scw-icon-mixins.box;\n\n    .icon {\n      @include size-small-container-scw-icon-icon-mixins.box;\n      @include size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include size-small-container-scw-icon-icon-vector-mixins.box;\n        @include size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include size-small-container-label-mixins.box;\n    @include size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-mixins\" as size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-mixins\" as size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-vector-mixins\" as size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include size-small-container-scw-icon-icon-mixins.box;\n    @include size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include size-small-container-scw-icon-icon-vector-mixins.box;\n      @include size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-mixins\" as size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-vector-mixins\" as size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include size-small-container-scw-icon-icon-vector-mixins.box;\n    @include size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/size-small-container-scw-icon-icon-vector-mixins\" as size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13681,21 +13741,51 @@
   },
   "components-scw-horizontal-nav-item-style-button": {
     "html": {
-      "output": "<div class=\"style-button\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"style-button\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/style-button-mixins\" as style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-mixins\" as style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-mixins\" as style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-label-mixins\" as style-button-container-label-label-mixins;\n\n.style-button {\n  @include style-button-mixins.box;\n  @include style-button-mixins.figma-autolayout;\n\n  .container {\n    @include style-button-container-mixins.box;\n    @include style-button-container-mixins.figma-autolayout;\n\n    .label {\n      @include style-button-container-label-mixins.box;\n      @include style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-mixins\" as style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-mixins\" as style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-mixins\" as style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-mixins\" as style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-vector-mixins\" as style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-mixins\" as style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-label-mixins\" as style-button-container-label-label-mixins;\n\n.style-button {\n  @include style-button-mixins.box;\n  @include style-button-mixins.figma-autolayout;\n\n  .container {\n    @include style-button-container-mixins.box;\n    @include style-button-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include style-button-container-scw-icon-mixins.box;\n\n      .icon {\n        @include style-button-container-scw-icon-icon-mixins.box;\n        @include style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include style-button-container-scw-icon-icon-vector-mixins.box;\n          @include style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include style-button-container-label-mixins.box;\n      @include style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-style-button-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-container-mixins\" as style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-mixins\" as style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-mixins\" as style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-vector-mixins\" as style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-mixins\" as style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-label-mixins\" as style-button-container-label-label-mixins;\n\n.container {\n  @include style-button-container-mixins.box;\n  @include style-button-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include style-button-container-scw-icon-mixins.box;\n\n    .icon {\n      @include style-button-container-scw-icon-icon-mixins.box;\n      @include style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include style-button-container-scw-icon-icon-vector-mixins.box;\n        @include style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include style-button-container-label-mixins.box;\n    @include style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-style-button-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-mixins\" as style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-mixins\" as style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-vector-mixins\" as style-button-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include style-button-container-scw-icon-mixins.box;\n\n  .icon {\n    @include style-button-container-scw-icon-icon-mixins.box;\n    @include style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include style-button-container-scw-icon-icon-vector-mixins.box;\n      @include style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-style-button-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-mixins\" as style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-vector-mixins\" as style-button-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include style-button-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include style-button-container-scw-icon-icon-vector-mixins.box;\n    @include style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-style-button-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/style-button-container-mixins\" as style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-mixins\" as style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-container-label-label-mixins\" as style-button-container-label-label-mixins;\n\n.container {\n  @include style-button-container-mixins.box;\n  @include style-button-container-mixins.figma-autolayout;\n\n  .label {\n    @include style-button-container-label-mixins.box;\n    @include style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-container-scw-icon-icon-vector-mixins\" as style-button-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include style-button-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13721,21 +13811,51 @@
   },
   "components-scw-horizontal-nav-item-style-button-size-small": {
     "html": {
-      "output": "<div class=\"style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/style-button-size-small-mixins\" as style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-mixins\" as style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-mixins\" as style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-menu-item-mixins\" as style-button-size-small-container-label-menu-item-mixins;\n\n.style-button-size-small {\n  @include style-button-size-small-mixins.box;\n  @include style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include style-button-size-small-container-mixins.box;\n    @include style-button-size-small-container-mixins.figma-autolayout;\n\n    .label {\n      @include style-button-size-small-container-label-mixins.box;\n      @include style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-size-small-mixins\" as style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-mixins\" as style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-mixins\" as style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-mixins\" as style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-vector-mixins\" as style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-mixins\" as style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-menu-item-mixins\" as style-button-size-small-container-label-menu-item-mixins;\n\n.style-button-size-small {\n  @include style-button-size-small-mixins.box;\n  @include style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include style-button-size-small-container-mixins.box;\n    @include style-button-size-small-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include style-button-size-small-container-scw-icon-mixins.box;\n\n      .icon {\n        @include style-button-size-small-container-scw-icon-icon-mixins.box;\n        @include style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n          @include style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include style-button-size-small-container-label-mixins.box;\n      @include style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-style-button-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-mixins\" as style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-mixins\" as style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-menu-item-mixins\" as style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include style-button-size-small-container-mixins.box;\n  @include style-button-size-small-container-mixins.figma-autolayout;\n\n  .label {\n    @include style-button-size-small-container-label-mixins.box;\n    @include style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-mixins\" as style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-mixins\" as style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-mixins\" as style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-vector-mixins\" as style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-mixins\" as style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-label-menu-item-mixins\" as style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include style-button-size-small-container-mixins.box;\n  @include style-button-size-small-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include style-button-size-small-container-scw-icon-mixins.box;\n\n    .icon {\n      @include style-button-size-small-container-scw-icon-icon-mixins.box;\n      @include style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n        @include style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include style-button-size-small-container-label-mixins.box;\n    @include style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-style-button-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-mixins\" as style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-mixins\" as style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-vector-mixins\" as style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include style-button-size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include style-button-size-small-container-scw-icon-icon-mixins.box;\n    @include style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n      @include style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-style-button-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-mixins\" as style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-vector-mixins\" as style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include style-button-size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n    @include style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-style-button-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/style-button-size-small-container-scw-icon-icon-vector-mixins\" as style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13761,21 +13881,51 @@
   },
   "components-scw-horizontal-nav-item-state-default": {
     "html": {
-      "output": "<div class=\"state-default\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-default\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-mixins\" as state-default-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-mixins\" as state-default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-mixins\" as state-default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-menu-item-mixins\" as state-default-container-label-menu-item-mixins;\n\n.state-default {\n  @include state-default-mixins.box;\n  @include state-default-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-container-mixins.box;\n\n    .label {\n      @include state-default-container-label-mixins.box;\n      @include state-default-container-label-mixins.figma-autolayout;\n      @include state-default-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include state-default-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-mixins\" as state-default-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-mixins\" as state-default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-mixins\" as state-default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-mixins\" as state-default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-vector-mixins\" as state-default-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-mixins\" as state-default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-menu-item-mixins\" as state-default-container-label-menu-item-mixins;\n\n.state-default {\n  @include state-default-mixins.box;\n  @include state-default-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-container-mixins.box;\n    @include state-default-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-default-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-default-container-scw-icon-icon-mixins.box;\n        @include state-default-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-default-container-scw-icon-icon-vector-mixins.box;\n          @include state-default-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-default-container-label-mixins.box;\n      @include state-default-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-default-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-default-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-container-mixins\" as state-default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-mixins\" as state-default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-mixins\" as state-default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-vector-mixins\" as state-default-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-mixins\" as state-default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-menu-item-mixins\" as state-default-container-label-menu-item-mixins;\n\n.container {\n  @include state-default-container-mixins.box;\n  @include state-default-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-default-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-default-container-scw-icon-icon-mixins.box;\n      @include state-default-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-default-container-scw-icon-icon-vector-mixins.box;\n        @include state-default-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-default-container-label-mixins.box;\n    @include state-default-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-default-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-mixins\" as state-default-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-mixins\" as state-default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-vector-mixins\" as state-default-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-default-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-default-container-scw-icon-icon-mixins.box;\n    @include state-default-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-default-container-scw-icon-icon-vector-mixins.box;\n      @include state-default-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-mixins\" as state-default-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-vector-mixins\" as state-default-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-default-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-default-container-scw-icon-icon-vector-mixins.box;\n    @include state-default-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-container-mixins\" as state-default-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-mixins\" as state-default-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-container-label-menu-item-mixins\" as state-default-container-label-menu-item-mixins;\n\n.container {\n  @include state-default-container-mixins.box;\n\n  .label {\n    @include state-default-container-label-mixins.box;\n    @include state-default-container-label-mixins.figma-autolayout;\n    @include state-default-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include state-default-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-container-scw-icon-icon-vector-mixins\" as state-default-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-default-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13801,21 +13951,51 @@
   },
   "components-scw-horizontal-nav-item-state-default-size-small": {
     "html": {
-      "output": "<div class=\"state-default-size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-default-size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-size-small-mixins\" as state-default-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-mixins\" as state-default-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-mixins\" as state-default-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-menu-item-mixins\" as state-default-size-small-container-label-menu-item-mixins;\n\n.state-default-size-small {\n  @include state-default-size-small-mixins.box;\n  @include state-default-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-size-small-container-mixins.box;\n\n    .label {\n      @include state-default-size-small-container-label-mixins.box;\n      @include state-default-size-small-container-label-mixins.figma-autolayout;\n      @include state-default-size-small-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include state-default-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-size-small-mixins\" as state-default-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-mixins\" as state-default-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-mixins\" as state-default-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-mixins\" as state-default-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vector-mixins\" as state-default-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-mixins\" as state-default-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-menu-item-mixins\" as state-default-size-small-container-label-menu-item-mixins;\n\n.state-default-size-small {\n  @include state-default-size-small-mixins.box;\n  @include state-default-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-size-small-container-mixins.box;\n\n    .scw-icon {\n      @include state-default-size-small-container-scw-icon-mixins.box;\n      @include state-default-size-small-container-scw-icon-mixins.absolute-layout;\n\n      .icon {\n        @include state-default-size-small-container-scw-icon-icon-mixins.box;\n        @include state-default-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-default-size-small-container-scw-icon-icon-vector-mixins.box;\n          @include state-default-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-default-size-small-container-label-mixins.box;\n      @include state-default-size-small-container-label-mixins.figma-autolayout;\n      @include state-default-size-small-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include state-default-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-default-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-mixins\" as state-default-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-mixins\" as state-default-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-mixins\" as state-default-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vector-mixins\" as state-default-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-mixins\" as state-default-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-menu-item-mixins\" as state-default-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-default-size-small-container-mixins.box;\n\n  .scw-icon {\n    @include state-default-size-small-container-scw-icon-mixins.box;\n    @include state-default-size-small-container-scw-icon-mixins.absolute-layout;\n\n    .icon {\n      @include state-default-size-small-container-scw-icon-icon-mixins.box;\n      @include state-default-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-default-size-small-container-scw-icon-icon-vector-mixins.box;\n        @include state-default-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-default-size-small-container-label-mixins.box;\n    @include state-default-size-small-container-label-mixins.figma-autolayout;\n    @include state-default-size-small-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include state-default-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-mixins\" as state-default-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-mixins\" as state-default-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-label-menu-item-mixins\" as state-default-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-default-size-small-container-mixins.box;\n\n  .label {\n    @include state-default-size-small-container-label-mixins.box;\n    @include state-default-size-small-container-label-mixins.figma-autolayout;\n    @include state-default-size-small-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include state-default-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-mixins\" as state-default-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-mixins\" as state-default-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vector-mixins\" as state-default-size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-default-size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-default-size-small-container-scw-icon-icon-mixins.box;\n    @include state-default-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-default-size-small-container-scw-icon-icon-vector-mixins.box;\n      @include state-default-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-mixins\" as state-default-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vector-mixins\" as state-default-size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-default-size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-default-size-small-container-scw-icon-icon-vector-mixins.box;\n    @include state-default-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-size-small-container-scw-icon-icon-vector-mixins\" as state-default-size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-default-size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13841,21 +14021,51 @@
   },
   "components-scw-horizontal-nav-item-state-default-style-button": {
     "html": {
-      "output": "<div class=\"state-default-style-button\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-default-style-button\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-mixins\" as state-default-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-mixins\" as state-default-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-mixins\" as state-default-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-label-mixins\" as state-default-style-button-container-label-label-mixins;\n\n.state-default-style-button {\n  @include state-default-style-button-mixins.box;\n  @include state-default-style-button-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-style-button-container-mixins.box;\n    @include state-default-style-button-container-mixins.figma-autolayout;\n\n    .label {\n      @include state-default-style-button-container-label-mixins.box;\n      @include state-default-style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include state-default-style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-mixins\" as state-default-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-mixins\" as state-default-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-mixins\" as state-default-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-mixins\" as state-default-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-vector-mixins\" as state-default-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-mixins\" as state-default-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-label-mixins\" as state-default-style-button-container-label-label-mixins;\n\n.state-default-style-button {\n  @include state-default-style-button-mixins.box;\n  @include state-default-style-button-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-style-button-container-mixins.box;\n    @include state-default-style-button-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-default-style-button-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-default-style-button-container-scw-icon-icon-mixins.box;\n        @include state-default-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-default-style-button-container-scw-icon-icon-vector-mixins.box;\n          @include state-default-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-default-style-button-container-label-mixins.box;\n      @include state-default-style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include state-default-style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-default-style-button-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-mixins\" as state-default-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-mixins\" as state-default-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-mixins\" as state-default-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-vector-mixins\" as state-default-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-mixins\" as state-default-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-label-mixins\" as state-default-style-button-container-label-label-mixins;\n\n.container {\n  @include state-default-style-button-container-mixins.box;\n  @include state-default-style-button-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-default-style-button-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-default-style-button-container-scw-icon-icon-mixins.box;\n      @include state-default-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-default-style-button-container-scw-icon-icon-vector-mixins.box;\n        @include state-default-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-default-style-button-container-label-mixins.box;\n    @include state-default-style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include state-default-style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-style-button-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-mixins\" as state-default-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-mixins\" as state-default-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-vector-mixins\" as state-default-style-button-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-default-style-button-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-default-style-button-container-scw-icon-icon-mixins.box;\n    @include state-default-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-default-style-button-container-scw-icon-icon-vector-mixins.box;\n      @include state-default-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-mixins\" as state-default-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-vector-mixins\" as state-default-style-button-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-default-style-button-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-default-style-button-container-scw-icon-icon-vector-mixins.box;\n    @include state-default-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-style-button-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-mixins\" as state-default-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-mixins\" as state-default-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-label-label-mixins\" as state-default-style-button-container-label-label-mixins;\n\n.container {\n  @include state-default-style-button-container-mixins.box;\n  @include state-default-style-button-container-mixins.figma-autolayout;\n\n  .label {\n    @include state-default-style-button-container-label-mixins.box;\n    @include state-default-style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include state-default-style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-container-scw-icon-icon-vector-mixins\" as state-default-style-button-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-default-style-button-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13881,21 +14091,51 @@
   },
   "components-scw-horizontal-nav-item-state-default-style-button-size-small": {
     "html": {
-      "output": "<div class=\"state-default-style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-default-style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-mixins\" as state-default-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-mixins\" as state-default-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-mixins\" as state-default-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-menu-item-mixins\" as state-default-style-button-size-small-container-label-menu-item-mixins;\n\n.state-default-style-button-size-small {\n  @include state-default-style-button-size-small-mixins.box;\n  @include state-default-style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-style-button-size-small-container-mixins.box;\n    @include state-default-style-button-size-small-container-mixins.figma-autolayout;\n\n    .label {\n      @include state-default-style-button-size-small-container-label-mixins.box;\n      @include state-default-style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-default-style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-mixins\" as state-default-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-mixins\" as state-default-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-mixins\" as state-default-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-menu-item-mixins\" as state-default-style-button-size-small-container-label-menu-item-mixins;\n\n.state-default-style-button-size-small {\n  @include state-default-style-button-size-small-mixins.box;\n  @include state-default-style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-default-style-button-size-small-container-mixins.box;\n    @include state-default-style-button-size-small-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-default-style-button-size-small-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-default-style-button-size-small-container-scw-icon-icon-mixins.box;\n        @include state-default-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n          @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-default-style-button-size-small-container-label-mixins.box;\n      @include state-default-style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-default-style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-default-style-button-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-mixins\" as state-default-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-mixins\" as state-default-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-menu-item-mixins\" as state-default-style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-default-style-button-size-small-container-mixins.box;\n  @include state-default-style-button-size-small-container-mixins.figma-autolayout;\n\n  .label {\n    @include state-default-style-button-size-small-container-label-mixins.box;\n    @include state-default-style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-default-style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-mixins\" as state-default-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-mixins\" as state-default-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-label-menu-item-mixins\" as state-default-style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-default-style-button-size-small-container-mixins.box;\n  @include state-default-style-button-size-small-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-default-style-button-size-small-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-default-style-button-size-small-container-scw-icon-icon-mixins.box;\n      @include state-default-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n        @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-default-style-button-size-small-container-label-mixins.box;\n    @include state-default-style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-default-style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-style-button-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-default-style-button-size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-default-style-button-size-small-container-scw-icon-icon-mixins.box;\n    @include state-default-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n      @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-style-button-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-default-style-button-size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n    @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-default-style-button-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-default-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-default-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-default-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13921,21 +14161,51 @@
   },
   "components-scw-horizontal-nav-item-state-hover": {
     "html": {
-      "output": "<div class=\"state-hover\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-hover\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-mixins\" as state-hover-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-mixins\" as state-hover-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-mixins\" as state-hover-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-menu-item-mixins\" as state-hover-container-label-menu-item-mixins;\n\n.state-hover {\n  @include state-hover-mixins.box;\n  @include state-hover-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-container-mixins.box;\n\n    .label {\n      @include state-hover-container-label-mixins.box;\n      @include state-hover-container-label-mixins.figma-autolayout;\n      @include state-hover-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include state-hover-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-mixins\" as state-hover-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-mixins\" as state-hover-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-mixins\" as state-hover-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-mixins\" as state-hover-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-vector-mixins\" as state-hover-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-mixins\" as state-hover-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-menu-item-mixins\" as state-hover-container-label-menu-item-mixins;\n\n.state-hover {\n  @include state-hover-mixins.box;\n  @include state-hover-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-container-mixins.box;\n    @include state-hover-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-hover-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-hover-container-scw-icon-icon-mixins.box;\n        @include state-hover-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-hover-container-scw-icon-icon-vector-mixins.box;\n          @include state-hover-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-hover-container-label-mixins.box;\n      @include state-hover-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-hover-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-hover-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-container-mixins\" as state-hover-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-mixins\" as state-hover-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-mixins\" as state-hover-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-vector-mixins\" as state-hover-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-mixins\" as state-hover-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-menu-item-mixins\" as state-hover-container-label-menu-item-mixins;\n\n.container {\n  @include state-hover-container-mixins.box;\n  @include state-hover-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-hover-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-hover-container-scw-icon-icon-mixins.box;\n      @include state-hover-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-hover-container-scw-icon-icon-vector-mixins.box;\n        @include state-hover-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-hover-container-label-mixins.box;\n    @include state-hover-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-hover-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-mixins\" as state-hover-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-mixins\" as state-hover-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-vector-mixins\" as state-hover-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-hover-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-hover-container-scw-icon-icon-mixins.box;\n    @include state-hover-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-hover-container-scw-icon-icon-vector-mixins.box;\n      @include state-hover-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-container-mixins\" as state-hover-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-mixins\" as state-hover-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-label-menu-item-mixins\" as state-hover-container-label-menu-item-mixins;\n\n.container {\n  @include state-hover-container-mixins.box;\n\n  .label {\n    @include state-hover-container-label-mixins.box;\n    @include state-hover-container-label-mixins.figma-autolayout;\n    @include state-hover-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include state-hover-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-mixins\" as state-hover-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-vector-mixins\" as state-hover-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-hover-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-hover-container-scw-icon-icon-vector-mixins.box;\n    @include state-hover-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-container-scw-icon-icon-vector-mixins\" as state-hover-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-hover-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -13961,21 +14231,51 @@
   },
   "components-scw-horizontal-nav-item-state-hover-size-small": {
     "html": {
-      "output": "<div class=\"state-hover-size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-hover-size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-size-small-mixins\" as state-hover-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-mixins\" as state-hover-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-mixins\" as state-hover-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-menu-item-mixins\" as state-hover-size-small-container-label-menu-item-mixins;\n\n.state-hover-size-small {\n  @include state-hover-size-small-mixins.box;\n  @include state-hover-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-size-small-container-mixins.box;\n\n    .label {\n      @include state-hover-size-small-container-label-mixins.box;\n      @include state-hover-size-small-container-label-mixins.figma-autolayout;\n      @include state-hover-size-small-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include state-hover-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-size-small-mixins\" as state-hover-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-mixins\" as state-hover-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-mixins\" as state-hover-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-mixins\" as state-hover-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-mixins\" as state-hover-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-menu-item-mixins\" as state-hover-size-small-container-label-menu-item-mixins;\n\n.state-hover-size-small {\n  @include state-hover-size-small-mixins.box;\n  @include state-hover-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-size-small-container-mixins.box;\n    @include state-hover-size-small-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-hover-size-small-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-hover-size-small-container-scw-icon-icon-mixins.box;\n        @include state-hover-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-hover-size-small-container-scw-icon-icon-vector-mixins.box;\n          @include state-hover-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-hover-size-small-container-label-mixins.box;\n      @include state-hover-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-hover-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-hover-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-mixins\" as state-hover-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-mixins\" as state-hover-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-mixins\" as state-hover-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-mixins\" as state-hover-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-menu-item-mixins\" as state-hover-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-hover-size-small-container-mixins.box;\n  @include state-hover-size-small-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-hover-size-small-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-hover-size-small-container-scw-icon-icon-mixins.box;\n      @include state-hover-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-hover-size-small-container-scw-icon-icon-vector-mixins.box;\n        @include state-hover-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-hover-size-small-container-label-mixins.box;\n    @include state-hover-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-hover-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-mixins\" as state-hover-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-mixins\" as state-hover-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-label-menu-item-mixins\" as state-hover-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-hover-size-small-container-mixins.box;\n\n  .label {\n    @include state-hover-size-small-container-label-mixins.box;\n    @include state-hover-size-small-container-label-mixins.figma-autolayout;\n    @include state-hover-size-small-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include state-hover-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-mixins\" as state-hover-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-mixins\" as state-hover-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-hover-size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-hover-size-small-container-scw-icon-icon-mixins.box;\n    @include state-hover-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-hover-size-small-container-scw-icon-icon-vector-mixins.box;\n      @include state-hover-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-mixins\" as state-hover-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-hover-size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-hover-size-small-container-scw-icon-icon-vector-mixins.box;\n    @include state-hover-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-hover-size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -14001,21 +14301,51 @@
   },
   "components-scw-horizontal-nav-item-state-hover-style-button": {
     "html": {
-      "output": "<div class=\"state-hover-style-button\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-hover-style-button\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-mixins\" as state-hover-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-mixins\" as state-hover-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-mixins\" as state-hover-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-label-mixins\" as state-hover-style-button-container-label-label-mixins;\n\n.state-hover-style-button {\n  @include state-hover-style-button-mixins.box;\n  @include state-hover-style-button-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-style-button-container-mixins.box;\n    @include state-hover-style-button-container-mixins.figma-autolayout;\n\n    .label {\n      @include state-hover-style-button-container-label-mixins.box;\n      @include state-hover-style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include state-hover-style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-mixins\" as state-hover-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-mixins\" as state-hover-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-mixins\" as state-hover-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-mixins\" as state-hover-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-mixins\" as state-hover-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-label-mixins\" as state-hover-style-button-container-label-label-mixins;\n\n.state-hover-style-button {\n  @include state-hover-style-button-mixins.box;\n  @include state-hover-style-button-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-style-button-container-mixins.box;\n    @include state-hover-style-button-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-hover-style-button-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-hover-style-button-container-scw-icon-icon-mixins.box;\n        @include state-hover-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-hover-style-button-container-scw-icon-icon-vector-mixins.box;\n          @include state-hover-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-hover-style-button-container-label-mixins.box;\n      @include state-hover-style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include state-hover-style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-hover-style-button-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-mixins\" as state-hover-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-mixins\" as state-hover-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-mixins\" as state-hover-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-mixins\" as state-hover-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-label-mixins\" as state-hover-style-button-container-label-label-mixins;\n\n.container {\n  @include state-hover-style-button-container-mixins.box;\n  @include state-hover-style-button-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-hover-style-button-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-hover-style-button-container-scw-icon-icon-mixins.box;\n      @include state-hover-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-hover-style-button-container-scw-icon-icon-vector-mixins.box;\n        @include state-hover-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-hover-style-button-container-label-mixins.box;\n    @include state-hover-style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include state-hover-style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-style-button-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-mixins\" as state-hover-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-mixins\" as state-hover-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-hover-style-button-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-hover-style-button-container-scw-icon-icon-mixins.box;\n    @include state-hover-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-hover-style-button-container-scw-icon-icon-vector-mixins.box;\n      @include state-hover-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-style-button-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-mixins\" as state-hover-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-mixins\" as state-hover-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-label-label-mixins\" as state-hover-style-button-container-label-label-mixins;\n\n.container {\n  @include state-hover-style-button-container-mixins.box;\n  @include state-hover-style-button-container-mixins.figma-autolayout;\n\n  .label {\n    @include state-hover-style-button-container-label-mixins.box;\n    @include state-hover-style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include state-hover-style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-mixins\" as state-hover-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-hover-style-button-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-hover-style-button-container-scw-icon-icon-vector-mixins.box;\n    @include state-hover-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-style-button-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-hover-style-button-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -14041,21 +14371,51 @@
   },
   "components-scw-horizontal-nav-item-state-hover-style-button-size-small": {
     "html": {
-      "output": "<div class=\"state-hover-style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-hover-style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-mixins\" as state-hover-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-mixins\" as state-hover-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-mixins\" as state-hover-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-menu-item-mixins\" as state-hover-style-button-size-small-container-label-menu-item-mixins;\n\n.state-hover-style-button-size-small {\n  @include state-hover-style-button-size-small-mixins.box;\n  @include state-hover-style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-style-button-size-small-container-mixins.box;\n    @include state-hover-style-button-size-small-container-mixins.figma-autolayout;\n\n    .label {\n      @include state-hover-style-button-size-small-container-label-mixins.box;\n      @include state-hover-style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-hover-style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-mixins\" as state-hover-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-mixins\" as state-hover-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-mixins\" as state-hover-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-menu-item-mixins\" as state-hover-style-button-size-small-container-label-menu-item-mixins;\n\n.state-hover-style-button-size-small {\n  @include state-hover-style-button-size-small-mixins.box;\n  @include state-hover-style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-hover-style-button-size-small-container-mixins.box;\n    @include state-hover-style-button-size-small-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-hover-style-button-size-small-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.box;\n        @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n          @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-hover-style-button-size-small-container-label-mixins.box;\n      @include state-hover-style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-hover-style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-hover-style-button-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-mixins\" as state-hover-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-mixins\" as state-hover-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-menu-item-mixins\" as state-hover-style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-hover-style-button-size-small-container-mixins.box;\n  @include state-hover-style-button-size-small-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-hover-style-button-size-small-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.box;\n      @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n        @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-hover-style-button-size-small-container-label-mixins.box;\n    @include state-hover-style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-hover-style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-style-button-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-mixins\" as state-hover-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-mixins\" as state-hover-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-label-menu-item-mixins\" as state-hover-style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-hover-style-button-size-small-container-mixins.box;\n  @include state-hover-style-button-size-small-container-mixins.figma-autolayout;\n\n  .label {\n    @include state-hover-style-button-size-small-container-label-mixins.box;\n    @include state-hover-style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-hover-style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-hover-style-button-size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.box;\n    @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n      @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-style-button-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-hover-style-button-size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n    @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-hover-style-button-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-hover-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -14081,21 +14441,51 @@
   },
   "components-scw-horizontal-nav-item-state-focus": {
     "html": {
-      "output": "<div class=\"state-focus\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-focus\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-mixins\" as state-focus-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-mixins\" as state-focus-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-mixins\" as state-focus-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-menu-item-mixins\" as state-focus-container-label-menu-item-mixins;\n\n.state-focus {\n  @include state-focus-mixins.box;\n  @include state-focus-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-container-mixins.box;\n\n    .label {\n      @include state-focus-container-label-mixins.box;\n      @include state-focus-container-label-mixins.figma-autolayout;\n      @include state-focus-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include state-focus-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-mixins\" as state-focus-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-mixins\" as state-focus-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-mixins\" as state-focus-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-mixins\" as state-focus-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-vector-mixins\" as state-focus-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-mixins\" as state-focus-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-menu-item-mixins\" as state-focus-container-label-menu-item-mixins;\n\n.state-focus {\n  @include state-focus-mixins.box;\n  @include state-focus-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-container-mixins.box;\n    @include state-focus-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-focus-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-focus-container-scw-icon-icon-mixins.box;\n        @include state-focus-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-focus-container-scw-icon-icon-vector-mixins.box;\n          @include state-focus-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-focus-container-label-mixins.box;\n      @include state-focus-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-focus-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-focus-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-container-mixins\" as state-focus-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-mixins\" as state-focus-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-mixins\" as state-focus-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-vector-mixins\" as state-focus-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-mixins\" as state-focus-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-menu-item-mixins\" as state-focus-container-label-menu-item-mixins;\n\n.container {\n  @include state-focus-container-mixins.box;\n  @include state-focus-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-focus-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-focus-container-scw-icon-icon-mixins.box;\n      @include state-focus-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-focus-container-scw-icon-icon-vector-mixins.box;\n        @include state-focus-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-focus-container-label-mixins.box;\n    @include state-focus-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-focus-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-mixins\" as state-focus-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-mixins\" as state-focus-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-vector-mixins\" as state-focus-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-focus-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-focus-container-scw-icon-icon-mixins.box;\n    @include state-focus-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-focus-container-scw-icon-icon-vector-mixins.box;\n      @include state-focus-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-mixins\" as state-focus-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-vector-mixins\" as state-focus-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-focus-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-focus-container-scw-icon-icon-vector-mixins.box;\n    @include state-focus-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-container-mixins\" as state-focus-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-mixins\" as state-focus-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-container-label-menu-item-mixins\" as state-focus-container-label-menu-item-mixins;\n\n.container {\n  @include state-focus-container-mixins.box;\n\n  .label {\n    @include state-focus-container-label-mixins.box;\n    @include state-focus-container-label-mixins.figma-autolayout;\n    @include state-focus-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include state-focus-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-container-scw-icon-icon-vector-mixins\" as state-focus-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-focus-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -14121,21 +14511,51 @@
   },
   "components-scw-horizontal-nav-item-state-focus-size-small": {
     "html": {
-      "output": "<div class=\"state-focus-size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-focus-size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-size-small-mixins\" as state-focus-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-mixins\" as state-focus-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-mixins\" as state-focus-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-menu-item-mixins\" as state-focus-size-small-container-label-menu-item-mixins;\n\n.state-focus-size-small {\n  @include state-focus-size-small-mixins.box;\n  @include state-focus-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-size-small-container-mixins.box;\n\n    .label {\n      @include state-focus-size-small-container-label-mixins.box;\n      @include state-focus-size-small-container-label-mixins.figma-autolayout;\n      @include state-focus-size-small-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include state-focus-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-size-small-mixins\" as state-focus-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-mixins\" as state-focus-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-mixins\" as state-focus-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-mixins\" as state-focus-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-mixins\" as state-focus-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-menu-item-mixins\" as state-focus-size-small-container-label-menu-item-mixins;\n\n.state-focus-size-small {\n  @include state-focus-size-small-mixins.box;\n  @include state-focus-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-size-small-container-mixins.box;\n    @include state-focus-size-small-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-focus-size-small-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-focus-size-small-container-scw-icon-icon-mixins.box;\n        @include state-focus-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-focus-size-small-container-scw-icon-icon-vector-mixins.box;\n          @include state-focus-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-focus-size-small-container-label-mixins.box;\n      @include state-focus-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-focus-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-focus-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-mixins\" as state-focus-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-mixins\" as state-focus-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-mixins\" as state-focus-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-mixins\" as state-focus-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-menu-item-mixins\" as state-focus-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-focus-size-small-container-mixins.box;\n  @include state-focus-size-small-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-focus-size-small-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-focus-size-small-container-scw-icon-icon-mixins.box;\n      @include state-focus-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-focus-size-small-container-scw-icon-icon-vector-mixins.box;\n        @include state-focus-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-focus-size-small-container-label-mixins.box;\n    @include state-focus-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-focus-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-mixins\" as state-focus-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-mixins\" as state-focus-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-label-menu-item-mixins\" as state-focus-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-focus-size-small-container-mixins.box;\n\n  .label {\n    @include state-focus-size-small-container-label-mixins.box;\n    @include state-focus-size-small-container-label-mixins.figma-autolayout;\n    @include state-focus-size-small-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include state-focus-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-mixins\" as state-focus-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-mixins\" as state-focus-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-focus-size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-focus-size-small-container-scw-icon-icon-mixins.box;\n    @include state-focus-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-focus-size-small-container-scw-icon-icon-vector-mixins.box;\n      @include state-focus-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-mixins\" as state-focus-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-focus-size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-focus-size-small-container-scw-icon-icon-vector-mixins.box;\n    @include state-focus-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-focus-size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -14161,21 +14581,51 @@
   },
   "components-scw-horizontal-nav-item-state-focus-style-button": {
     "html": {
-      "output": "<div class=\"state-focus-style-button\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-focus-style-button\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"label\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-mixins\" as state-focus-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-mixins\" as state-focus-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-mixins\" as state-focus-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-label-mixins\" as state-focus-style-button-container-label-label-mixins;\n\n.state-focus-style-button {\n  @include state-focus-style-button-mixins.box;\n  @include state-focus-style-button-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-style-button-container-mixins.box;\n    @include state-focus-style-button-container-mixins.figma-autolayout;\n\n    .label {\n      @include state-focus-style-button-container-label-mixins.box;\n      @include state-focus-style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include state-focus-style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-mixins\" as state-focus-style-button-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-mixins\" as state-focus-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-mixins\" as state-focus-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-mixins\" as state-focus-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-mixins\" as state-focus-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-label-mixins\" as state-focus-style-button-container-label-label-mixins;\n\n.state-focus-style-button {\n  @include state-focus-style-button-mixins.box;\n  @include state-focus-style-button-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-style-button-container-mixins.box;\n    @include state-focus-style-button-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-focus-style-button-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-focus-style-button-container-scw-icon-icon-mixins.box;\n        @include state-focus-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-focus-style-button-container-scw-icon-icon-vector-mixins.box;\n          @include state-focus-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-focus-style-button-container-label-mixins.box;\n      @include state-focus-style-button-container-label-mixins.figma-autolayout;\n\n      .label {\n        @include state-focus-style-button-container-label-label-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-focus-style-button-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"label\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-mixins\" as state-focus-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-mixins\" as state-focus-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-mixins\" as state-focus-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-mixins\" as state-focus-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-label-mixins\" as state-focus-style-button-container-label-label-mixins;\n\n.container {\n  @include state-focus-style-button-container-mixins.box;\n  @include state-focus-style-button-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-focus-style-button-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-focus-style-button-container-scw-icon-icon-mixins.box;\n      @include state-focus-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-focus-style-button-container-scw-icon-icon-vector-mixins.box;\n        @include state-focus-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-focus-style-button-container-label-mixins.box;\n    @include state-focus-style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include state-focus-style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-mixins\" as state-focus-style-button-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-mixins\" as state-focus-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-focus-style-button-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-focus-style-button-container-scw-icon-icon-mixins.box;\n    @include state-focus-style-button-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-focus-style-button-container-scw-icon-icon-vector-mixins.box;\n      @include state-focus-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-mixins\" as state-focus-style-button-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-focus-style-button-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-focus-style-button-container-scw-icon-icon-vector-mixins.box;\n    @include state-focus-style-button-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-mixins\" as state-focus-style-button-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-mixins\" as state-focus-style-button-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-label-label-mixins\" as state-focus-style-button-container-label-label-mixins;\n\n.container {\n  @include state-focus-style-button-container-mixins.box;\n  @include state-focus-style-button-container-mixins.figma-autolayout;\n\n  .label {\n    @include state-focus-style-button-container-label-mixins.box;\n    @include state-focus-style-button-container-label-mixins.figma-autolayout;\n\n    .label {\n      @include state-focus-style-button-container-label-label-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-focus-style-button-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -14201,21 +14651,51 @@
   },
   "components-scw-horizontal-nav-item-state-focus-style-button-size-small": {
     "html": {
-      "output": "<div class=\"state-focus-style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"state-focus-style-button-size-small\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-mixins\" as state-focus-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-mixins\" as state-focus-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-mixins\" as state-focus-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-menu-item-mixins\" as state-focus-style-button-size-small-container-label-menu-item-mixins;\n\n.state-focus-style-button-size-small {\n  @include state-focus-style-button-size-small-mixins.box;\n  @include state-focus-style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-style-button-size-small-container-mixins.box;\n    @include state-focus-style-button-size-small-container-mixins.figma-autolayout;\n\n    .label {\n      @include state-focus-style-button-size-small-container-label-mixins.box;\n      @include state-focus-style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-focus-style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-mixins\" as state-focus-style-button-size-small-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-mixins\" as state-focus-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-mixins\" as state-focus-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-menu-item-mixins\" as state-focus-style-button-size-small-container-label-menu-item-mixins;\n\n.state-focus-style-button-size-small {\n  @include state-focus-style-button-size-small-mixins.box;\n  @include state-focus-style-button-size-small-mixins.figma-autolayout;\n\n  .container {\n    @include state-focus-style-button-size-small-container-mixins.box;\n    @include state-focus-style-button-size-small-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include state-focus-style-button-size-small-container-scw-icon-mixins.box;\n\n      .icon {\n        @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.box;\n        @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n          @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include state-focus-style-button-size-small-container-label-mixins.box;\n      @include state-focus-style-button-size-small-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include state-focus-style-button-size-small-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-item-state-focus-style-button-size-small-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-mixins\" as state-focus-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-mixins\" as state-focus-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-menu-item-mixins\" as state-focus-style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-focus-style-button-size-small-container-mixins.box;\n  @include state-focus-style-button-size-small-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include state-focus-style-button-size-small-container-scw-icon-mixins.box;\n\n    .icon {\n      @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.box;\n      @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n        @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include state-focus-style-button-size-small-container-label-mixins.box;\n    @include state-focus-style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-focus-style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include state-focus-style-button-size-small-container-scw-icon-mixins.box;\n\n  .icon {\n    @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.box;\n    @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n      @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-mixins\" as state-focus-style-button-size-small-container-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-mixins\" as state-focus-style-button-size-small-container-label-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-label-menu-item-mixins\" as state-focus-style-button-size-small-container-label-menu-item-mixins;\n\n.container {\n  @include state-focus-style-button-size-small-container-mixins.box;\n  @include state-focus-style-button-size-small-container-mixins.figma-autolayout;\n\n  .label {\n    @include state-focus-style-button-size-small-container-label-mixins.box;\n    @include state-focus-style-button-size-small-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include state-focus-style-button-size-small-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include state-focus-style-button-size-small-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n    @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins\" as state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },
@@ -14241,41 +14721,71 @@
   },
   "components-scw-horizontal-nav": {
     "html": {
-      "output": "<div class=\"scw-horizontal-nav\">\n  <div class=\"default\">\n    <div class=\"scw-horizontal-nav-item\">\n      <div class=\"container\">\n        <div class=\"label\">\n          <div class=\"menu-item\">\n            Menu Item\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"scw-horizontal-nav\">\n  <div class=\"default\">\n    <div class=\"scw-horizontal-nav-item\">\n      <div class=\"container\">\n        <div class=\"scw-icon\">\n          <div class=\"icon\">\n            <div class=\"vector\">\n            </div>\n          </div>\n        </div>\n        <div class=\"label\">\n          <div class=\"menu-item\">\n            Menu Item\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav/index-mixins\" as index-mixins;\n@use \"comp-scw-horizontal-nav/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-mixins\" as default-scw-horizontal-nav-item-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.scw-horizontal-nav {\n  @include index-mixins.box;\n\n  .default {\n    @include default-mixins.box;\n    @include default-mixins.figma-autolayout;\n    @include default-mixins.absolute-layout;\n\n    .scw-horizontal-nav-item {\n      @include default-scw-horizontal-nav-item-mixins.box;\n      @include default-scw-horizontal-nav-item-mixins.figma-autolayout;\n\n      .container {\n        @include default-scw-horizontal-nav-item-container-mixins.box;\n\n        .label {\n          @include default-scw-horizontal-nav-item-container-label-mixins.box;\n          @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n          @include default-scw-horizontal-nav-item-container-label-mixins.absolute-layout;\n\n          .menu-item {\n            @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n          }\n        }\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav/index-mixins\" as index-mixins;\n@use \"comp-scw-horizontal-nav/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-mixins\" as default-scw-horizontal-nav-item-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.scw-horizontal-nav {\n  @include index-mixins.box;\n\n  .default {\n    @include default-mixins.box;\n    @include default-mixins.figma-autolayout;\n    @include default-mixins.absolute-layout;\n\n    .scw-horizontal-nav-item {\n      @include default-scw-horizontal-nav-item-mixins.box;\n      @include default-scw-horizontal-nav-item-mixins.figma-autolayout;\n\n      .container {\n        @include default-scw-horizontal-nav-item-container-mixins.box;\n        @include default-scw-horizontal-nav-item-container-mixins.figma-autolayout;\n\n        .scw-icon {\n          @include default-scw-horizontal-nav-item-container-scw-icon-mixins.box;\n\n          .icon {\n            @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.box;\n            @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.absolute-layout;\n\n            .vector {\n              @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.box;\n              @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.absolute-layout;\n            }\n          }\n        }\n\n        .label {\n          @include default-scw-horizontal-nav-item-container-label-mixins.box;\n          @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n\n          .menu-item {\n            @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n          }\n        }\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-default": {
     "html": {
-      "output": "<div class=\"default\">\n  <div class=\"scw-horizontal-nav-item\">\n    <div class=\"container\">\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"default\">\n  <div class=\"scw-horizontal-nav-item\">\n    <div class=\"container\">\n      <div class=\"scw-icon\">\n        <div class=\"icon\">\n          <div class=\"vector\">\n          </div>\n        </div>\n      </div>\n      <div class=\"label\">\n        <div class=\"menu-item\">\n          Menu Item\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-mixins\" as default-scw-horizontal-nav-item-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.default {\n  @include default-mixins.box;\n  @include default-mixins.figma-autolayout;\n\n  .scw-horizontal-nav-item {\n    @include default-scw-horizontal-nav-item-mixins.box;\n    @include default-scw-horizontal-nav-item-mixins.figma-autolayout;\n\n    .container {\n      @include default-scw-horizontal-nav-item-container-mixins.box;\n\n      .label {\n        @include default-scw-horizontal-nav-item-container-label-mixins.box;\n        @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n        @include default-scw-horizontal-nav-item-container-label-mixins.absolute-layout;\n\n        .menu-item {\n          @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav/default-mixins\" as default-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-mixins\" as default-scw-horizontal-nav-item-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.default {\n  @include default-mixins.box;\n  @include default-mixins.figma-autolayout;\n\n  .scw-horizontal-nav-item {\n    @include default-scw-horizontal-nav-item-mixins.box;\n    @include default-scw-horizontal-nav-item-mixins.figma-autolayout;\n\n    .container {\n      @include default-scw-horizontal-nav-item-container-mixins.box;\n      @include default-scw-horizontal-nav-item-container-mixins.figma-autolayout;\n\n      .scw-icon {\n        @include default-scw-horizontal-nav-item-container-scw-icon-mixins.box;\n\n        .icon {\n          @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.box;\n          @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.absolute-layout;\n\n          .vector {\n            @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.box;\n            @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.absolute-layout;\n          }\n        }\n      }\n\n      .label {\n        @include default-scw-horizontal-nav-item-container-label-mixins.box;\n        @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n\n        .menu-item {\n          @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n        }\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-default-scw-horizontal-nav-item": {
     "html": {
-      "output": "<div class=\"scw-horizontal-nav-item\">\n  <div class=\"container\">\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"scw-horizontal-nav-item\">\n  <div class=\"container\">\n    <div class=\"scw-icon\">\n      <div class=\"icon\">\n        <div class=\"vector\">\n        </div>\n      </div>\n    </div>\n    <div class=\"label\">\n      <div class=\"menu-item\">\n        Menu Item\n      </div>\n    </div>\n  </div>\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-mixins\" as default-scw-horizontal-nav-item-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.scw-horizontal-nav-item {\n  @include default-scw-horizontal-nav-item-mixins.box;\n  @include default-scw-horizontal-nav-item-mixins.figma-autolayout;\n\n  .container {\n    @include default-scw-horizontal-nav-item-container-mixins.box;\n\n    .label {\n      @include default-scw-horizontal-nav-item-container-label-mixins.box;\n      @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n      @include default-scw-horizontal-nav-item-container-label-mixins.absolute-layout;\n\n      .menu-item {\n        @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-mixins\" as default-scw-horizontal-nav-item-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.scw-horizontal-nav-item {\n  @include default-scw-horizontal-nav-item-mixins.box;\n  @include default-scw-horizontal-nav-item-mixins.figma-autolayout;\n\n  .container {\n    @include default-scw-horizontal-nav-item-container-mixins.box;\n    @include default-scw-horizontal-nav-item-container-mixins.figma-autolayout;\n\n    .scw-icon {\n      @include default-scw-horizontal-nav-item-container-scw-icon-mixins.box;\n\n      .icon {\n        @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.box;\n        @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.absolute-layout;\n\n        .vector {\n          @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.box;\n          @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.absolute-layout;\n        }\n      }\n    }\n\n    .label {\n      @include default-scw-horizontal-nav-item-container-label-mixins.box;\n      @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n\n      .menu-item {\n        @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n      }\n    }\n  }\n}",
       "example": ""
     }
   },
   "components-scw-horizontal-nav-default-scw-horizontal-nav-item-container": {
     "html": {
-      "output": "<div class=\"container\">\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "output": "<div class=\"container\">\n  <div class=\"scw-icon\">\n    <div class=\"icon\">\n      <div class=\"vector\">\n      </div>\n    </div>\n  </div>\n  <div class=\"label\">\n    <div class=\"menu-item\">\n      Menu Item\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.container {\n  @include default-scw-horizontal-nav-item-container-mixins.box;\n  @include default-scw-horizontal-nav-item-container-mixins.figma-autolayout;\n\n  .scw-icon {\n    @include default-scw-horizontal-nav-item-container-scw-icon-mixins.box;\n\n    .icon {\n      @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.box;\n      @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.absolute-layout;\n\n      .vector {\n        @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.box;\n        @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.absolute-layout;\n      }\n    }\n  }\n\n  .label {\n    @include default-scw-horizontal-nav-item-container-label-mixins.box;\n    @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n\n    .menu-item {\n      @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-default-scw-horizontal-nav-item-container-scw-icon": {
+    "html": {
+      "output": "<div class=\"scw-icon\">\n  <div class=\"icon\">\n    <div class=\"vector\">\n    </div>\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins;\n\n.scw-icon {\n  @include default-scw-horizontal-nav-item-container-scw-icon-mixins.box;\n\n  .icon {\n    @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.box;\n    @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.absolute-layout;\n\n    .vector {\n      @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.box;\n      @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.absolute-layout;\n    }\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-default-scw-horizontal-nav-item-container-scw-icon-icon": {
+    "html": {
+      "output": "<div class=\"icon\">\n  <div class=\"vector\">\n  </div>\n</div>",
+      "example": ""
+    },
+    "scss": {
+      "output": "@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins;\n\n.icon {\n  @include default-scw-horizontal-nav-item-container-scw-icon-icon-mixins.box;\n\n  .vector {\n    @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.box;\n    @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.absolute-layout;\n  }\n}",
+      "example": ""
+    }
+  },
+  "components-scw-horizontal-nav-default-scw-horizontal-nav-item-container-scw-icon-icon-vector": {
+    "html": {
+      "output": "<div class=\"vector\">\n</div>",
       "example": ""
     },
     "scss": {
-      "output": "@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-mixins\" as default-scw-horizontal-nav-item-container-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-mixins\" as default-scw-horizontal-nav-item-container-label-mixins;\n@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-label-menu-item-mixins\" as default-scw-horizontal-nav-item-container-label-menu-item-mixins;\n\n.container {\n  @include default-scw-horizontal-nav-item-container-mixins.box;\n\n  .label {\n    @include default-scw-horizontal-nav-item-container-label-mixins.box;\n    @include default-scw-horizontal-nav-item-container-label-mixins.figma-autolayout;\n    @include default-scw-horizontal-nav-item-container-label-mixins.absolute-layout;\n\n    .menu-item {\n      @include default-scw-horizontal-nav-item-container-label-menu-item-mixins.text;\n    }\n  }\n}",
+      "output": "@use \"comp-scw-horizontal-nav/default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins\" as default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins;\n\n.vector {\n  @include default-scw-horizontal-nav-item-container-scw-icon-icon-vector-mixins.box;\n}",
       "example": ""
     }
   },