scu-web-components 0.0.75 → 0.0.77

package/dist/docs/components/ScwLinkV2.json

@@ -0,0 +1,374 @@
+{
+  "path": "src/scw-link-v2/ScwLinkV2.ts",
+  "kind": "class",
+  "description": "scw-link-v2 is the basic interactive building block for the \n  design system. scw-button extends scw-link-v2, but should ONLY be used within\n  forms and scw-nav-link ONLY within scw-navs.",
+  "name": "ScwLinkV2",
+  "members": [
+    {
+      "kind": "field",
+      "name": "icon",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Design system icon",
+      "attribute": "icon"
+    },
+    {
+      "kind": "field",
+      "name": "iconSide",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Side you want the icon displayed",
+      "attribute": "icon-side"
+    },
+    {
+      "kind": "field",
+      "name": "design",
+      "type": {
+        "text": "| 'solid'\n    | 'outlined'\n    | 'text'\n    | 'plain'\n    | 'block'\n    | 'icon'\n    | 'solidIcon'"
+      },
+      "default": "'solid'",
+      "description": "(ScwLink) Link design",
+      "attribute": "design"
+    },
+    {
+      "kind": "field",
+      "name": "href",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Link url",
+      "attribute": "href"
+    },
+    {
+      "kind": "field",
+      "name": "target",
+      "type": {
+        "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+      },
+      "description": "(ScwLink) Link target",
+      "attribute": "target"
+    },
+    {
+      "kind": "field",
+      "name": "ariaLabel",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Link label",
+      "attribute": "aria-label",
+      "reflects": true,
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "field",
+      "name": "ariaDisabled",
+      "type": {
+        "text": "string"
+      },
+      "default": "'false'",
+      "description": "(ScwLink) If the link is disabled",
+      "attribute": "aria-disabled",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "method",
+      "name": "findStyle",
+      "description": "find the style per design",
+      "return": {
+        "type": {
+          "text": "object"
+        }
+      }
+    },
+    {
+      "kind": "method",
+      "name": "renderIcon",
+      "privacy": "private",
+      "return": {
+        "type": {
+          "text": "object"
+        }
+      },
+      "description": "renderIcon"
+    },
+    {
+      "kind": "method",
+      "name": "renderContent",
+      "privacy": "private",
+      "return": {
+        "type": {
+          "text": "object"
+        }
+      },
+      "description": "renderContent"
+    },
+    {
+      "kind": "field",
+      "name": "element",
+      "type": {
+        "text": "string"
+      },
+      "description": "(ScwComponent) contains the root element name for each component\n(enum Components)",
+      "attribute": "element",
+      "reflects": true,
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "field",
+      "name": "isLink",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwLinkBase)\nSome lookups need to know if something is a link or not...",
+      "attribute": "is-link",
+      "reflects": true,
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "field",
+      "name": "_lightDomMutationObserver",
+      "type": {
+        "text": "LightDomMutationObserver | undefined"
+      },
+      "description": "(ScwComponent) Light Dom Mutation Observer",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "field",
+      "name": "dynamic",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwComponent) Determines whether to watch for changes\nin children. (not all components use light DOM)",
+      "attribute": "dynamic",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "method",
+      "name": "domMutated",
+      "description": "parseLightDom is a hook for classes extending this one to add\nother parsers and validations",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "method",
+      "name": "warn",
+      "parameters": [
+        {
+          "name": "message",
+          "type": {
+            "text": "string"
+          },
+          "description": "describing warning"
+        }
+      ],
+      "description": "handles warnings...things wrong with formatting, ADA, etc...",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "method",
+      "name": "clearWarnings",
+      "description": "clearWarnings",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "kind": "field",
+      "name": "_lastWarning",
+      "type": {
+        "text": "string | undefined"
+      },
+      "description": "retain the last warning sent...good for testing.",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    }
+  ],
+  "attributes": [
+    {
+      "name": "icon",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Design system icon",
+      "fieldName": "icon"
+    },
+    {
+      "name": "icon-side",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Side you want the icon displayed",
+      "fieldName": "iconSide"
+    },
+    {
+      "name": "design",
+      "type": {
+        "text": "| 'solid'\n    | 'outlined'\n    | 'text'\n    | 'plain'\n    | 'block'\n    | 'icon'\n    | 'solidIcon'"
+      },
+      "default": "'solid'",
+      "description": "(ScwLink) Link design",
+      "fieldName": "design"
+    },
+    {
+      "name": "href",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Link url",
+      "fieldName": "href"
+    },
+    {
+      "name": "target",
+      "type": {
+        "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+      },
+      "description": "(ScwLink) Link target",
+      "fieldName": "target"
+    },
+    {
+      "name": "aria-label",
+      "type": {
+        "text": "string"
+      },
+      "default": "''",
+      "description": "(ScwLink) Link label",
+      "fieldName": "ariaLabel",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "name": "aria-disabled",
+      "type": {
+        "text": "string"
+      },
+      "default": "'false'",
+      "description": "(ScwLink) If the link is disabled",
+      "fieldName": "ariaDisabled",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "name": "is-link",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwLinkBase)\nSome lookups need to know if something is a link or not...",
+      "fieldName": "isLink",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "name": "dynamic",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwComponent) Determines whether to watch for changes\nin children. (not all components use light DOM)",
+      "fieldName": "dynamic",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    },
+    {
+      "name": "element",
+      "type": {
+        "text": "string"
+      },
+      "description": "(ScwComponent) contains the root element name for each component\n(enum Components)",
+      "fieldName": "element",
+      "inheritedFrom": {
+        "name": "ScwComponent",
+        "module": "src/scw-component/ScwComponent.ts"
+      }
+    }
+  ],
+  "superclass": {
+    "name": "ScwComponent",
+    "package": "scw-component/ScwComponent"
+  },
+  "tagName": "scw-link-v2",
+  "customElement": true,
+  "category": "interactive",
+  "status": "alpha.review",
+  "releasedInVersion": "v0.0.3",
+  "adaStatus": "tbd",
+  "overview": "",
+  "examples": [
+    {
+      "title": "Simple",
+      "description": "",
+      "code": "\n        <scw-link-v2\n          aria-label=\"scw-link-v2\">\n        </scw-link-v2>"
+    },
+    {
+      "title": "Designs",
+      "description": "The various designs.",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-link-v2\n            design=\"solid\"\n            aria-label=\"solid\">\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"outlined\"\n            aria-label=\"outlined\">\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"block\"\n            aria-label=\"block\">\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"text\"\n            aria-label=\"text\">\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"plain\"\n            aria-label=\"plain\">\n            plain\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"icon\"\n            aria-label=\"icon solid\"\n            icon=\"placeholder\">\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"solidIcon\"\n            aria-label=\"icon solid\"\n            icon=\"placeholder\">\n          </scw-link-v2>\n        </scw-flex-h>"
+    },
+    {
+      "title": "Icons",
+      "description": "Icons are defined via the design system and are referenced \n      via their identifier.",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-link-v2\n            icon=\"placeholder\"\n            design=\"solid\"\n            aria-label=\"placeholder, left\">\n          </scw-link-v2>\n          <scw-link-v2\n            icon=\"placeholder\"\n            icon-side=\"right\"\n            design=\"solid\"\n            aria-label=\"placeholder, right\">\n          </scw-link-v2>\n        </scw-flex-h>"
+    },
+    {
+      "title": "link",
+      "description": "Using scw-link-v2 as a link that is SEO compliant is done\n      by nesting an anchor tag within. This is primarily for non-Google bots\n      that process pages without executing Javascript",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-link-v2\n            design=\"solid\"\n            aria-label=\"Summit Credit Union\"\n            href=\"https://www.summitcreditunion.com\"\n            target=\"_new\">\n          </scw-link-v2>\n          <scw-link-v2 \n            design=\"text\"\n            aria-label=\"Summit Credit Union\"\n            href=\"https://www.summitcreditunion.com\"\n            target=\"_new\">\n          </scw-link-v2>\n        </scw-flex-h>"
+    },
+    {
+      "title": "Plain Design",
+      "description": "\"plain\" will show any content you use as a child. It will\n      control tabbing, hover cursor, and make sure it is ADA compliant, but it \n      will not add any additional styles.",
+      "code": "\n        <scw-link-v2\n          design=\"plain\"\n          aria-label=\"I'm a div\">\n          <div>\n            I am just a div\n          </div>\n        </scw-link-v2>"
+    },
+    {
+      "title": "Disabled State",
+      "description": "Various disabled looks of the designs. Note that you have \n      to use the aria-disabled attribute which requires a full (boolean) string\n      to trigger.",
+      "code": "\n        <scw-flex-h\n          scw-gap-2s>\n          <scw-link-v2\n            design=\"solid\"\n            aria-disabled=\"true\"\n            aria-label=\"solid disabled\">\n          </scw-link-v2>\n          <scw-link-v2\n            aria-disabled=\"true\"\n            design=\"outlined\"\n            aria-label=\"outlined disabled\">\n          </scw-link-v2>\n          <scw-link-v2\n            aria-disabled=\"true\"\n            design=\"text\"\n            aria-label=\"text disabled\">\n          </scw-link-v2>\n          <scw-link-v2\n            aria-disabled=\"true\"\n            design=\"plain\"\n            aria-label=\"plain disabled\">\n            plain disabled\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"icon\"\n            aria-label=\"icon solid\"\n            icon=\"placeholder\"\n            aria-disabled=\"true\">\n          </scw-link-v2>\n          <scw-link-v2\n            design=\"solidIcon\"\n            aria-label=\"icon solid\"\n            icon=\"placeholder\"\n            aria-disabled=\"true\">\n          </scw-link-v2>\n        </scw-flex-h>"
+    }
+  ]
+}

package/dist/docs/components/manifest.json

@@ -5,6 +5,12 @@
     "tagName": "scw-accordion",
     "category": "interactive"
   },
+  {
+    "name": "ScwAlert",
+    "fileName": "ScwAlert.json",
+    "tagName": "scw-alert",
+    "category": "interactive"
+  },
   {
     "name": "ScwBlock",
     "fileName": "ScwBlock.json",
@@ -18,9 +24,9 @@
     "category": "interactive"
   },
   {
-    "name": "ScwAlert",
-    "fileName": "ScwAlert.json",
-    "tagName": "scw-alert",
+    "name": "ScwCallout",
+    "fileName": "ScwCallout.json",
+    "tagName": "scw-callout",
     "category": "interactive"
   },
   {
@@ -119,6 +125,12 @@
     "tagName": "scw-link-base",
     "category": "interactive"
   },
+  {
+    "name": "ScwLinkV2",
+    "fileName": "ScwLinkV2.json",
+    "tagName": "scw-link-v2",
+    "category": "interactive"
+  },
   {
     "name": "ScwMenu",
     "fileName": "ScwMenu.json",

package/dist/docs/config.json

@@ -1,20 +1,20 @@
 {
   "title": "Summit Credit Union Web Design System (SCW)",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "navigation": [
     {
       "id": "tokens",
       "title": "Component SASS",
-      "url": "../tokens/tokens.html?0.0.75"
+      "url": "../tokens/tokens.html?0.0.77"
     },
     {
       "id": "css",
       "title": "CSS",
-      "url": "../tokens/css.html?clipboardType=classes&0.0.75"
+      "url": "../tokens/css.html?clipboardType=classes&0.0.77"
     }
   ],
-  "moduleEmbed": "const scw = await import('../scw.js?1686084808993'); scw.defineComponents();",
-  "cssLink": "../scw.css?1686084808993",
+  "moduleEmbed": "const scw = await import('../scw.js?1687901768325'); scw.defineComponents();",
+  "cssLink": "../scw.css?1687901768325",
   "documents": [
     {
       "title": "Install",

package/dist/scw-components.js

@@ -1 +1 @@
-import{a as l}from"./chunks/chunk.EPY7GU3Z.js";import{a as u}from"./chunks/chunk.37WNLP33.js";import{a as S}from"./chunks/chunk.V3M2C74P.js";import{a as E}from"./chunks/chunk.UN2IDDPP.js";import{a}from"./chunks/chunk.UE6M5KO4.js";import{a as c}from"./chunks/chunk.NKX3QEFM.js";import{a as s}from"./chunks/chunk.FDITIBCN.js";import{a as n}from"./chunks/chunk.23XEXN7U.js";import{a as p}from"./chunks/chunk.WAC7UC5L.js";import"./chunks/chunk.J7MVPCLQ.js";import{a as f}from"./chunks/chunk.QF4C577S.js";import{a as w}from"./chunks/chunk.RVIZTHRG.js";import{a as d}from"./chunks/chunk.KIJ5H2AV.js";import{a as i}from"./chunks/chunk.Z5WIO7ZE.js";import{a as o}from"./chunks/chunk.XDTBALK3.js";import"./chunks/chunk.HUTZFHRM.js";import"./chunks/chunk.Z6P446BB.js";import"./chunks/chunk.YBPGY7E7.js";import{a as t}from"./chunks/chunk.AUPS6LVZ.js";import{a as r}from"./chunks/chunk.6ODXCBTX.js";import"./chunks/chunk.RP34AXHG.js";import"./chunks/chunk.ZZNNPPOA.js";import"./chunks/chunk.2AIO4VQU.js";import"./chunks/chunk.GJQNUSH4.js";import"./chunks/chunk.FNZZPMTC.js";import"./chunks/chunk.RBJQRJ4P.js";import"./chunks/chunk.URPWXPJO.js";import"./chunks/chunk.VIF6YT55.js";import"./chunks/chunk.VT4PMRHO.js";import"./chunks/chunk.CZ5UYOQC.js";import{a as e}from"./chunks/chunk.CNHRIY7W.js";import"./chunks/chunk.XXXFJWSX.js";import"./chunks/chunk.QHUZYUAT.js";import"./chunks/chunk.DGDMEIOX.js";import"./chunks/chunk.P5ESZPS2.js";import"./chunks/chunk.AYSS3H27.js";import"./chunks/chunk.EFINAF4P.js";import"./chunks/chunk.Z5LFK5L4.js";import"./chunks/chunk.W4CRIA2R.js";import"./chunks/chunk.NBAHMDHF.js";import"./chunks/chunk.K5LAHA72.js";import"./chunks/chunk.XKUXW432.js";import"./chunks/chunk.UXNK7KZZ.js";import"./chunks/chunk.WKH73SBC.js";import{e as m}from"./chunks/chunk.Z3Y57KL7.js";import"./chunks/chunk.G2G2TPJK.js";import"./chunks/chunk.PE5ZEEQ2.js";customElements.define("scw-component",m);customElements.define("scw-card",e);customElements.define("scw-link",o);customElements.define("scw-button",i);customElements.define("scw-menu",r);customElements.define("scw-menu-item",c);customElements.define("scw-icon",s);customElements.define("scw-heading",n);customElements.define("scw-image",p);customElements.define("scw-link-base",t);customElements.define("scw-alert",f);customElements.define("scw-stepper",w);customElements.define("scw-rich-text",d);customElements.define("scw-slider",l);customElements.define("scw-slider-item",u);customElements.define("scw-block",S);customElements.define("scw-icon-feature",E);customElements.define("scw-accordion",a);
+import{a as l}from"./chunks/chunk.NYYBLRFM.js";import{a as d}from"./chunks/chunk.3NNE5ENI.js";import{a as u}from"./chunks/chunk.CJTCZ3QZ.js";import{a as S}from"./chunks/chunk.6MNQLE2L.js";import{a as E}from"./chunks/chunk.ADULQPIN.js";import{a}from"./chunks/chunk.2XEW7UAZ.js";import{a as k}from"./chunks/chunk.33463GZ4.js";import{a as g}from"./chunks/chunk.2DDBDL2W.js";import{a as r}from"./chunks/chunk.JLS2NZHI.js";import{a as c}from"./chunks/chunk.DN377PHI.js";import{a as s}from"./chunks/chunk.MGYWQ4MF.js";import{a as n}from"./chunks/chunk.E3PTJLTX.js";import{a as p}from"./chunks/chunk.7IO3ZXVV.js";import"./chunks/chunk.T7RCLFU6.js";import{a as f}from"./chunks/chunk.R2BOXSBU.js";import{a as w}from"./chunks/chunk.6IKVQRTF.js";import{a as i}from"./chunks/chunk.DPXW5M4S.js";import{a as o}from"./chunks/chunk.6ZEYGAU4.js";import"./chunks/chunk.SATZCNFY.js";import"./chunks/chunk.Z6P446BB.js";import"./chunks/chunk.YBPGY7E7.js";import{a as e}from"./chunks/chunk.UHDGKIAJ.js";import"./chunks/chunk.YPE346ST.js";import"./chunks/chunk.ZZNNPPOA.js";import"./chunks/chunk.VOQKI3GF.js";import"./chunks/chunk.PSMB5BFO.js";import"./chunks/chunk.FNZZPMTC.js";import"./chunks/chunk.I3HH4XH2.js";import"./chunks/chunk.A3KNF7LF.js";import"./chunks/chunk.VIF6YT55.js";import"./chunks/chunk.MUUPCU53.js";import"./chunks/chunk.HZLY2XEI.js";import{a as t}from"./chunks/chunk.YXVSKWJR.js";import"./chunks/chunk.3XDBASRX.js";import"./chunks/chunk.QHUZYUAT.js";import"./chunks/chunk.ZRZNKSPQ.js";import"./chunks/chunk.WRA2OHT2.js";import"./chunks/chunk.IXID3B4Y.js";import"./chunks/chunk.EFINAF4P.js";import"./chunks/chunk.HMHIBHLM.js";import"./chunks/chunk.W4CRIA2R.js";import"./chunks/chunk.NBAHMDHF.js";import"./chunks/chunk.K5LAHA72.js";import"./chunks/chunk.XKUXW432.js";import"./chunks/chunk.UXNK7KZZ.js";import"./chunks/chunk.WKH73SBC.js";import{f as m}from"./chunks/chunk.5MDLYG3I.js";import"./chunks/chunk.G2G2TPJK.js";import"./chunks/chunk.PE5ZEEQ2.js";customElements.define("scw-component",m);customElements.define("scw-card",t);customElements.define("scw-link",o);customElements.define("scw-button",i);customElements.define("scw-menu",r);customElements.define("scw-menu-item",c);customElements.define("scw-icon",s);customElements.define("scw-heading",n);customElements.define("scw-image",p);customElements.define("scw-link-base",e);customElements.define("scw-alert",f);customElements.define("scw-stepper",w);customElements.define("scw-rich-text",l);customElements.define("scw-slider",d);customElements.define("scw-slider-item",u);customElements.define("scw-block",S);customElements.define("scw-icon-feature",E);customElements.define("scw-accordion",a);customElements.define("scw-callout",k);customElements.define("scw-link-v2",g);

package/dist/scw.js

@@ -1 +1 @@
-import{a,b}from"./chunks/chunk.Z5LFK5L4.js";import"./chunks/chunk.W4CRIA2R.js";import"./chunks/chunk.NBAHMDHF.js";import"./chunks/chunk.G2G2TPJK.js";import"./chunks/chunk.PE5ZEEQ2.js";export{a as config,b as defineComponents};
+import{a,b}from"./chunks/chunk.HMHIBHLM.js";import"./chunks/chunk.W4CRIA2R.js";import"./chunks/chunk.NBAHMDHF.js";import"./chunks/chunk.G2G2TPJK.js";import"./chunks/chunk.PE5ZEEQ2.js";export{a as config,b as defineComponents};

package/dist/tokens/segments/comp-scw-base-heading/_default-text-mixins.scss

@@ -5,7 +5,7 @@
   $themeVar: false
 ) { 
   text-align: LEFT;
-  font: var( --scw-type-text-bold-condensed-10-font );
+  font: var( --scw-type-text-bold-10-font );
   @if $themeVar {
     color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {

package/dist/tokens/segments/comp-scw-base-heading/_default-text-vars.scss

@@ -6,11 +6,11 @@ $text-align-horizontal: LEFT;
 $text-align-vertical: TOP;
 $text-transform: none;
 $color: var( --scw-color-grey-02 );
-$font-family: 'Proxima Nova Condensed';
+$font-family: 'Proxima Nova';
 $font-weight: 700;
 $line-height: 3.375rem;
 $letter-spacing: 0rem;
-$font: var( --scw-type-text-bold-condensed-10-font );
+$font: var( --scw-type-text-bold-10-font );
 $width: 365px;
 $height: 54px;
 $constraint-horizontal: MIN;

package/dist/tokens/segments/comp-scw-callout/_center-content-links-link-1-label-mixins.scss

@@ -0,0 +1,54 @@
+
+
+
+@mixin text (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-10 , var( --scw-color-grey-10 ) );
+  } @else {
+    color: var( --scw-color-grey-10 );
+  } 
+}
+
+@mixin sizing {
+  width: 45px;
+  height: 27px;
+}
+
+@mixin width {
+  width: 45px;
+}
+
+@mixin height {
+  height: 27px;
+}
+
+@mixin padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}

package/dist/tokens/segments/comp-scw-callout/_center-content-links-link-1-label-vars.scss

@@ -0,0 +1,32 @@
+
+
+$characters: 'Label';
+$font-size: 1.125rem;
+$text-align-horizontal: LEFT;
+$text-align-vertical: CENTER;
+$text-transform: none;
+$color: var( --scw-color-grey-10 );
+$font-family: 'Proxima Nova';
+$font-weight: 700;
+$line-height: 1.688rem;
+$letter-spacing: 0rem;
+$font: var( --scw-type-text-bold-06-font );
+$width: 45px;
+$height: 27px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: calc( var( --scw-spacing-1 ) * 0.5 );
+$top-percent: 50%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+$left: calc( var( --scw-spacing-1 ) * 1.6 );
+$left-percent: 50%;
+$right: calc( var( --scw-spacing-1 ) * 1.6 );
+$margin-right: 0px;

package/dist/tokens/segments/comp-scw-callout/_center-content-links-link-1-left-icon-mixins.scss

@@ -0,0 +1,58 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin width {
+  width: 24px;
+}
+
+@mixin height {
+  height: 24px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin figma-autolayout { 
+   
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}

package/dist/tokens/segments/comp-scw-callout/_center-content-links-link-1-left-icon-vars.scss

@@ -0,0 +1,30 @@
+
+
+$background-color: rgba(0,0,0,0);
+$corner-radius-top-left: 6px;
+$corner-radius-top-right: 6px;
+$corner-radius-bottom-right: 6px;
+$corner-radius-bottom-left: 6px;
+$width: 24px;
+$height: 24px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: calc( var( --scw-spacing-1 ) * 0.4 );
+$top-percent: 43.24%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+$left: calc( var( --scw-spacing-1 ) * 1.6 );
+$left-percent: 36.36%;
+$right: calc( var( --scw-spacing-1 ) * 3.7 );
+$padding-left: 0px;
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: 0px;
+$margin-right: 0px;