slippers-ui 2.2.0-alpha → 3.0.0-alpha.2

package/README.md

@@ -1,42 +1,75 @@
-# Slippers UI - GitLab's Marketing Design System
+# Nuxt Minimal Starter
 
-Slippers is the open-source GitLab Marketing Web Design System. It was created in the spirit of ["everyone can contribute"](https://about.gitlab.com/company/mission/#everyone-can-contribute).
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
-## Resources:
+## Setup
 
-- Storybook: https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui/.
-- Figma: https://www.figma.com/file/nWIOpmuMp7RZXmfTj6ujAF/Slippers_foundations.
-- GitLab project: https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.
-- Further documentation: https://about.gitlab.com/handbook/marketing/digital-experience/slippers-design-system/.
+Make sure to install dependencies:
 
-## Gettings started with Slippers:
+```bash
+# npm
+npm install
 
-### Local development
+# pnpm
+pnpm install
 
-Slippers uses [Storybook](https://storybook.js.org/) to enable component exploration.
+# yarn
+yarn install
 
-[Yarn](https://yarnpkg.com/) is the preferred package manager.
+# bun
+bun install
+```
 
-**Running Storybook locally:**
+## Development Server
 
-1. Clone the [Slippers project](https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui).
-2. Install the dependecies using the version of node specified in [.npmrc](https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui/-/blob/main/.npmrc) - `npm install`.
-3. Run Storybook - `yarn storybook`.
-4. Storybook should now be running at: http://localhost:6009/.
+Start the development server on `http://localhost:3000`:
 
-**Updating the slippers-ui NPM package**
+```bash
+# npm
+npm run dev
 
-1. Make changes to slippers-ui.
-2. If needed, create/update .stories so Storybook is upto date.
-3. Increment the version number in package.json.
-4. If needed, add component into install.js (this adds components into the build).
-5. Build /dist folder - `yarn build-library`.
-6. Publish to NPM - `yarn publish`.
-7. You can optionally publish using `sh scripts/publish.sh`. Note that you must have `jq` installed. This attempts to run Step 5 and 6 and validate all of this process for you. 
-8. Merge changes into origin/main.
-9. Once the package has been published it's now ready to be updated in the consuming repositories (Example: Buyer Experience, be-navigation, etc.).
+# pnpm
+pnpm dev
 
-**Importing slippers-ui into your project:**
+# yarn
+yarn dev
 
-- With NPM `npm install slippers-ui` OR with YARN `yarn add slippers-ui`
-- Slippers main entry point is /dist/slippers-core.umd.min.js, [example usage](https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/blob/main/plugins/slippers-ui.ts). To import the styling for the above components, the compiled css file can be found at: /dist/slippers-core.css.
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/{src/styles → assets/css}/base.scss

@@ -7,6 +7,7 @@ html {
 body {
   color: $color-text-300;
   margin: 0;
+  font-family: "Inter", "sans-serif";
   font-size: $font-size-default;
   font-weight: $font-weight-normal;
   line-height: $line-height-default;
@@ -19,12 +20,7 @@ a:not(.slp-btn) {
   text-decoration: none;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, h2, h3, h4, h5, h6 {
   color: inherit;
 }
 

package/dist/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "slippers-ui",
+  "version": "3.0.0-alpha.1",
+  "private": false,
+  "description": "GitLab Marketing Design System",
+  "author": "GitLab",
+  "files": [
+    "dist",
+    "assets/css/base.scss",
+    "assets/css/_variables.scss",
+    "package.json"
+  ],
+  "module": "./slippers-ui.es.js",
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "storybook": "storybook dev --port 6006",
+    "build-storybook": "storybook build",
+    "build-library": "vite build --config vite.config.ts",
+    "build-library-locally": "vite build --config vite.config.ts && cp package.json dist/"
+  },
+  "dependencies": {
+    "nuxt": "^3.13.2",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "devDependencies": {
+    "@nuxtjs/storybook": "8.3.2",
+    "@storybook-vue/nuxt": "^8.3.2",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/builder-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@storybook/vue3": "^8.3.6",
+    "@types/node": "^18.17.5",
+    "sass-embedded": "^1.80.4",
+    "storybook": "^8.3.6"
+  }
+}

package/dist/robots.txt

@@ -0,0 +1 @@
+

package/dist/slippers-ui.es.js

@@ -0,0 +1,262 @@
+import { defineComponent as u, computed as f, openBlock as s, createElementBlock as a, mergeProps as v, renderSlot as t, normalizeClass as l, createElementVNode as n, createBlock as $, resolveDynamicComponent as h, withCtx as m, createCommentVNode as y } from "vue";
+const g = u({
+  name: "SlpButton",
+  props: {
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    variant: {
+      type: String,
+      required: !1,
+      default: "primary"
+    },
+    href: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  },
+  setup(e) {
+    return {
+      className: f(() => {
+        let r = [`slp-btn-${e.variant}`];
+        return e.disabled && r.push("slp-btn-disabled"), r.join(" ");
+      })
+    };
+  }
+}), c = (e, o) => {
+  const r = e.__vccOpts || e;
+  for (const [d, i] of o)
+    r[d] = i;
+  return r;
+}, b = ["href"];
+function _(e, o, r, d, i, p) {
+  return e.href ? (s(), a("a", v({ key: 0 }, e.$attrs, {
+    class: ["slp-btn", e.className],
+    href: e.href
+  }), [
+    t(e.$slots, "default", {}, void 0, !0)
+  ], 16, b)) : (s(), a("button", v({ key: 1 }, e.$attrs, {
+    class: ["slp-btn", e.className],
+    type: "button"
+  }), [
+    t(e.$slots, "default", {}, void 0, !0)
+  ], 16));
+}
+const H = /* @__PURE__ */ c(g, [["render", _], ["__scopeId", "data-v-92377259"]]), k = u({
+  name: "SlpColumn",
+  props: {
+    cols: {
+      type: Number,
+      required: !1,
+      default: null
+    },
+    size: {
+      type: String,
+      required: !1,
+      default: "md"
+    }
+  },
+  setup(e) {
+    return {
+      className: f(() => e.cols ? `slp-col-${e.size}-${e.cols}` : `slp-col-${e.size}`)
+    };
+  }
+});
+function N(e, o, r, d, i, p) {
+  return s(), a("div", {
+    class: l(e.className)
+  }, [
+    t(e.$slots, "default", {}, void 0, !0)
+  ], 2);
+}
+const J = /* @__PURE__ */ c(k, [["render", N], ["__scopeId", "data-v-6de89156"]]), S = u({
+  name: "SlpContainer",
+  props: {
+    fluid: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    variant: {
+      type: String,
+      required: !1,
+      default: "white"
+    }
+  },
+  setup(e) {
+    return {
+      className: f(() => e.fluid ? "fluid" : "")
+    };
+  }
+}), q = {
+  key: 0,
+  class: "slp-full-light-purple-background"
+}, w = {
+  key: 1,
+  class: "slp-charcoal-grey-background"
+}, C = {
+  key: 2,
+  class: "slp-gradient-background"
+}, B = {
+  key: 3,
+  class: "slp-full-gradient-background"
+}, I = {
+  key: 4,
+  class: "slp-full-charcoal-background"
+}, z = {
+  key: 5,
+  class: "slp-partial-charcoal-background"
+}, E = {
+  key: 6,
+  class: "slp-half-grey-background"
+}, R = {
+  key: 7,
+  class: "slp-partial-white-background"
+}, T = {
+  key: 8,
+  class: "slp-partial-grey-background"
+};
+function V(e, o, r, d, i, p) {
+  return e.variant === "light-purple-100" ? (s(), a("div", q, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "grey-100" ? (s(), a("div", w, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "gradient" ? (s(), a("div", C, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "gradient-full" ? (s(), a("div", B, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "charcoal-100" ? (s(), a("div", I, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "charcoal-75" ? (s(), a("div", z, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "grey-50" ? (s(), a("div", E, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "white-75" ? (s(), a("div", R, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : e.variant === "grey-75" ? (s(), a("div", T, [
+    n("div", {
+      class: l(["slp-container", e.className])
+    }, [
+      t(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ])) : (s(), a("div", {
+    key: 9,
+    class: l(["slp-container", e.className])
+  }, [
+    t(e.$slots, "default", {}, void 0, !0)
+  ], 2));
+}
+const K = /* @__PURE__ */ c(S, [["render", V], ["__scopeId", "data-v-6286b621"]]), W = {};
+function j(e, o) {
+  return s(), a("h1", null, " Welcome Nuxt to Storybook ");
+}
+const L = /* @__PURE__ */ c(W, [["render", j]]), D = u({
+  name: "SlpRow"
+}), M = { class: "slp-row" };
+function O(e, o, r, d, i, p) {
+  return s(), a("div", M, [
+    t(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const Q = /* @__PURE__ */ c(D, [["render", O], ["__scopeId", "data-v-0fbd2157"]]), P = u({
+  name: "SlpTypography",
+  props: {
+    variant: {
+      type: String,
+      required: !1,
+      default: "body1",
+      validator: (e) => [
+        "display1",
+        "heading1",
+        "heading2",
+        "heading3",
+        "heading4",
+        "heading5",
+        "heading1-bold",
+        "heading2-bold",
+        "heading3-bold",
+        "heading4-bold",
+        "heading5-bold",
+        "body1",
+        "body2",
+        "body3",
+        "body1-bold",
+        "body2-bold",
+        "body3-bold",
+        "all-caps",
+        "arrow",
+        "quotes",
+        "emphasis"
+      ].includes(e)
+    },
+    tag: {
+      type: String,
+      required: !1,
+      default: "span",
+      validator: (e) => ["span", "h1", "h2", "h3", "h4", "p", "div"].includes(e)
+    }
+  },
+  setup(e) {
+    return {
+      className: f(() => `slp-text-${e.variant}`)
+    };
+  }
+}), A = {
+  key: 0,
+  class: "arrow-symbol"
+};
+function F(e, o, r, d, i, p) {
+  return s(), $(h(e.tag), {
+    class: l(e.className)
+  }, {
+    default: m(() => [
+      t(e.$slots, "default", {}, void 0, !0),
+      e.variant === "arrow" ? (s(), a("span", A, "→")) : y("", !0)
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+const U = /* @__PURE__ */ c(P, [["render", F], ["__scopeId", "data-v-5f7bd974"]]);
+export {
+  H as Button,
+  J as Column,
+  K as Container,
+  L as MyWelcome,
+  Q as Row,
+  U as Typography
+};

package/dist/style.css

@@ -0,0 +1 @@
+.slp-btn[data-v-92377259]{box-sizing:border-box;font-family:Inter,"sans-serif";min-width:68px;display:inline-flex;align-items:center;text-align:center;vertical-align:middle;padding:11px 16px;text-decoration:none;border-radius:4px;font-weight:600;font-size:18px;line-height:20px;transition:.3s cubic-bezier(.7,0,.3,1) background-color}.slp-btn[data-v-92377259]:hover{cursor:pointer}.slp-btn-primary[data-v-92377259]{background-color:#171321;color:#fff;border:1px solid #171321}.slp-btn-primary[data-v-92377259]:hover{background-color:#fff;color:#171321;border:1px solid #171321}.slp-btn-primary.slp-btn-disabled[data-v-92377259]{background-color:#d1d0d3;border:1px solid #D1D0D3;color:#74717a}.slp-btn-primary.slp-btn-disabled[data-v-92377259]:hover{background-color:#d1d0d3;cursor:default}.slp-btn-secondary[data-v-92377259]{background-color:#fff;color:#171321;border:none}.slp-btn-secondary[data-v-92377259]:hover{border:none;outline:none;background-color:#e8e7eb;color:#171321}.slp-btn-secondary.slp-btn-disabled[data-v-92377259]{color:#d1d0d3}.slp-btn-secondary.slp-btn-disabled[data-v-92377259]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary[data-v-92377259]{color:#171321;border:none;padding-left:0;text-decoration:underline;text-underline-offset:2px;text-decoration-color:transparent;-webkit-text-decoration:none;transition:all .2s ease-in-out}.slp-btn-tertiary[data-v-92377259]:hover{text-decoration-color:#171321;-webkit-text-decoration:underline}.slp-btn-tertiary:hover .slp-icon[data-v-92377259]{transform:translate(8px)}.slp-btn-tertiary .slp-icon[data-v-92377259]{margin-left:4px;transition:transform .2s ease-in-out}.slp-btn-tertiary.slp-btn-disabled[data-v-92377259]{color:#d1d0d3;text-decoration:none}.slp-btn-tertiary.slp-btn-disabled[data-v-92377259]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary.slp-btn-disabled:hover .slp-icon[data-v-92377259]{transform:none}.slp-btn-icon[data-v-92377259]{min-width:unset;font-size:0px;line-height:unset;border:none;background-color:transparent;padding:8px}.slp-btn-icon.slp-btn-disabled[data-v-92377259]{pointer-events:none;opacity:.5}.slp-btn-ghost[data-v-92377259]{border:none;background-color:transparent;padding:8px;font-size:inherit;font-weight:inherit;line-height:inherit}.slp-btn-ghost.slp-btn-disabled[data-v-92377259]{pointer-events:none;opacity:.5}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-1[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-1[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 8.3333333333%;max-width:8.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-2[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-2[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 16.6666666667%;max-width:16.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-3[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-3[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 25%;max-width:25%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-4[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-4[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 33.3333333333%;max-width:33.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-5[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-5[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 41.6666666667%;max-width:41.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-6[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-6[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 50%;max-width:50%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-7[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-7[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 58.3333333333%;max-width:58.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-8[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-8[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 66.6666666667%;max-width:66.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-9[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-9[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 75%;max-width:75%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-10[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-10[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 83.3333333333%;max-width:83.3333333333%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 0px){.slp-col-xs[data-v-6de89156],.slp-col-xs-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 0px){.slp-col-xs-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-xs[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 576px){.slp-col-sm[data-v-6de89156],.slp-col-sm-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 576px){.slp-col-sm-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-sm[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 768px){.slp-col-md[data-v-6de89156],.slp-col-md-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 768px){.slp-col-md-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-md[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1025px){.slp-col-lg[data-v-6de89156],.slp-col-lg-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1025px){.slp-col-lg-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-lg[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1200px){.slp-col-xl[data-v-6de89156],.slp-col-xl-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1200px){.slp-col-xl-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}@media (max-width: 1400px){.slp-col-2xl[data-v-6de89156],.slp-col-2xl-11[data-v-6de89156]{width:inherit;max-width:100%}}@media (min-width: 1400px){.slp-col-2xl-11[data-v-6de89156]{position:relative;width:100%;min-height:1px;flex:0 0 91.6666666667%;max-width:91.6666666667%}.slp-col-2xl[data-v-6de89156]{flex-basis:0;flex-grow:1;position:relative;width:100%;min-height:1px;max-width:100%}}.slp-container[data-v-6286b621]{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;border:1px solid transparent}@media (min-width: 640px){.slp-container[data-v-6286b621]{max-width:95%}}@media (min-width: 1024px){.slp-container[data-v-6286b621]{max-width:1024px;padding:0}}@media (min-width: 1170px){.slp-container[data-v-6286b621]{max-width:1170px;padding:0}}.slp-full-grey-background[data-v-6286b621]{background:#f2f1f5}.slp-full-charcoal-background[data-v-6286b621]{background:#171321}.slp-partial-charcoal-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 75%,#171321 75%,#171321)}@media (max-width: 576px){.slp-partial-charcoal-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 30%,#171321 30%,#171321)}}.slp-gradient-background[data-v-6286b621]{background:radial-gradient(50.08% 44.51% at 100% 100%,#a989f533,#7759c200),radial-gradient(60.76% 48.01% at 0% 100%,#e2432933,#e2432900),#fff}.slp-full-gradient-background[data-v-6286b621]{background:linear-gradient(165.41deg,#fadcd7,#f8f5ff 23.65%,#fff 54.66%,#f6f3fe 80.95%,#ffd4d8 100.92%)}.slp-full-light-purple-background[data-v-6286b621]{background:#f6f3fe}.slp-half-grey-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 50%,#f2f1f5 50%,#f2f1f5)}.slp-partial-white-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#f2f1f5,#f2f1f5 70%,#fff 70%,#fff)}.slp-partial-grey-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 60%,#f2f1f5 60%,#f2f1f5)}@media (max-width: 576px){.slp-partial-grey-background[data-v-6286b621]{background-image:linear-gradient(to bottom,#fff,#fff 30%,#f2f1f5 30%,#f2f1f5)}}.fluid[data-v-6286b621]{max-width:100%;margin:0;border:none;padding:0}.readmore{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(14, 165, 233, .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;font-family:Nunito Sans,-apple-system,".SFNSText-Regular",San Francisco,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height:24px;color:#029cfd;text-decoration:none;font-size:14px}.slp-row[data-v-0fbd2157]{display:flex;flex-wrap:wrap}.slp-text-display1[data-v-5f7bd974],.slp-text-display1[data-v-5f7bd974] *{font-size:96px;line-height:100px;font-weight:600;letter-spacing:-2px}@media (max-width: 576px){.slp-text-display1[data-v-5f7bd974],.slp-text-display1[data-v-5f7bd974] *{font-size:48px;line-height:52px;font-weight:600;letter-spacing:-1.8px}}.slp-text-heading1[data-v-5f7bd974],.slp-text-heading1[data-v-5f7bd974] *{font-size:64px;line-height:72px;font-weight:400;letter-spacing:-2.77px}@media (max-width: 576px){.slp-text-heading1[data-v-5f7bd974],.slp-text-heading1[data-v-5f7bd974] *{font-size:48px;line-height:52px;font-weight:400;letter-spacing:-2.3px}}.slp-text-heading2[data-v-5f7bd974],.slp-text-heading2[data-v-5f7bd974] *{font-size:50px;line-height:60px;font-weight:400;letter-spacing:-1.9px}@media (max-width: 576px){.slp-text-heading2[data-v-5f7bd974],.slp-text-heading2[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:400;letter-spacing:-1.6px}}.slp-text-heading3[data-v-5f7bd974],.slp-text-heading3[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:400;letter-spacing:-1.4px}@media (max-width: 576px){.slp-text-heading3[data-v-5f7bd974],.slp-text-heading3[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:400;letter-spacing:-1.2px}}.slp-text-heading4[data-v-5f7bd974],.slp-text-heading4[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:400;letter-spacing:-1.1px}@media (max-width: 576px){.slp-text-heading4[data-v-5f7bd974],.slp-text-heading4[data-v-5f7bd974] *{font-size:28px;line-height:36px;font-weight:400;letter-spacing:-1px}}.slp-text-heading5[data-v-5f7bd974],.slp-text-heading5[data-v-5f7bd974] *{font-size:24px;line-height:32px;font-weight:400;letter-spacing:-.8px}@media (max-width: 576px){.slp-text-heading5[data-v-5f7bd974],.slp-text-heading5[data-v-5f7bd974] *{font-size:22px;line-height:28px;font-weight:400;letter-spacing:-.8px}}.slp-text-heading1-bold[data-v-5f7bd974],.slp-text-heading1-bold[data-v-5f7bd974] *{font-size:64px;line-height:72px;font-weight:600;letter-spacing:-2.1px}@media (max-width: 576px){.slp-text-heading1-bold[data-v-5f7bd974],.slp-text-heading1-bold[data-v-5f7bd974] *{font-size:48px;line-height:52px;font-weight:600;letter-spacing:-1.8px}}.slp-text-heading2-bold[data-v-5f7bd974],.slp-text-heading2-bold[data-v-5f7bd974] *{font-size:50px;line-height:60px;font-weight:600;letter-spacing:-1.4px}@media (max-width: 576px){.slp-text-heading2-bold[data-v-5f7bd974],.slp-text-heading2-bold[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:600;letter-spacing:-1.2px}}.slp-text-heading3-bold[data-v-5f7bd974],.slp-text-heading3-bold[data-v-5f7bd974] *{font-size:40px;line-height:48px;font-weight:600;letter-spacing:-1px}@media (max-width: 576px){.slp-text-heading3-bold[data-v-5f7bd974],.slp-text-heading3-bold[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.9px}}.slp-text-heading4-bold[data-v-5f7bd974],.slp-text-heading4-bold[data-v-5f7bd974] *{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.8px}@media (max-width: 576px){.slp-text-heading4-bold[data-v-5f7bd974],.slp-text-heading4-bold[data-v-5f7bd974] *{font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.7px}}.slp-text-heading5-bold[data-v-5f7bd974],.slp-text-heading5-bold[data-v-5f7bd974] *{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.6px}@media (max-width: 576px){.slp-text-heading5-bold[data-v-5f7bd974],.slp-text-heading5-bold[data-v-5f7bd974] *{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.55px}}.slp-text-body1[data-v-5f7bd974],.slp-text-body1[data-v-5f7bd974] *{font-size:18px;line-height:28px;font-weight:400}.slp-text-body2[data-v-5f7bd974],.slp-text-body2[data-v-5f7bd974] *{font-size:16px;line-height:24px;font-weight:400}.slp-text-body3[data-v-5f7bd974],.slp-text-body3[data-v-5f7bd974] *{font-size:14px;line-height:22px;font-weight:400}.slp-text-body1-bold[data-v-5f7bd974],.slp-text-body1-bold[data-v-5f7bd974] *{font-size:18px;line-height:28px;font-weight:600}.slp-text-body2-bold[data-v-5f7bd974],.slp-text-body2-bold[data-v-5f7bd974] *{font-size:16px;line-height:24px;font-weight:600}.slp-text-body3-bold[data-v-5f7bd974],.slp-text-body3-bold[data-v-5f7bd974] *{font-size:14px;line-height:22px;font-weight:600}.slp-text-all-caps[data-v-5f7bd974],.slp-text-all-caps[data-v-5f7bd974] *{font-size:12px;line-height:20px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.slp-text-quotes[data-v-5f7bd974],.slp-text-quotes[data-v-5f7bd974] *{font-size:23px;line-height:38px;font-weight:400;font-style:italic}@media (max-width: 576px){.slp-text-quotes[data-v-5f7bd974],.slp-text-quotes[data-v-5f7bd974] *{font-size:16px;line-height:24px}}.slp-text-emphasis[data-v-5f7bd974],.slp-text-emphasis[data-v-5f7bd974] *{font-size:23px;line-height:38px;font-weight:400}.slp-text-arrow[data-v-5f7bd974],.slp-text-arrow[data-v-5f7bd974] *{color:#fff;cursor:pointer;font-weight:600;font-size:16px;line-height:24px}.slp-text-arrow[data-v-5f7bd974]:hover,.slp-text-arrow[data-v-5f7bd974] *:hover{color:#171321}.slp-text-arrow:hover .slp-link-text[data-v-5f7bd974],.slp-text-arrow[data-v-5f7bd974] *:hover .slp-link-text{text-decoration:underline}.slp-text-arrow[data-v-5f7bd974]:active,.slp-text-arrow[data-v-5f7bd974] *:active{color:#fff}.slp-text-arrow:active .slp-link-text[data-v-5f7bd974],.slp-text-arrow[data-v-5f7bd974] *:active .slp-link-text{text-decoration:underline}.arrow-symbol[data-v-5f7bd974]{padding-left:4px}

package/package.json

@@ -1,73 +1,46 @@
 {
   "name": "slippers-ui",
-  "version": "2.2.0-alpha",
+  "version": "3.0.0-alpha.2",
   "private": false,
   "description": "GitLab Marketing Design System",
   "author": "GitLab",
-  "main": "./dist/slippers-core.umd.min.js",
   "files": [
-    "dist/slippers-core.umd.min*",
-    "dist/slippers-core.css",
-    "src/styles/base.scss",
-    "src/styles/_variables.scss"
+    "dist",
+    "assets/css/base.scss",
+    "assets/css/_variables.scss",
+    "package.json"
   ],
+  "module": "./slippers-ui.es.js",
+  "type": "module",
   "scripts": {
-    "lint": "vue-cli-service lint",
-    "storybook": "start-storybook -p 6009",
-    "dev": "start-storybook -p 6009",
-    "build-storybook": "build-storybook",
-    "build-library": "vue-cli-service build --target lib --formats umd-min --name slippers-core ./src/install.js",
-    "optimize-svg-icons": "svgo --config svgo.yml -f src/static/icons -o src/static/icons",
-    "analyzer": "use_analyzer=true yarn build-library"
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "storybook": "storybook dev --port 6006",
+    "build-storybook": "storybook build",
+    "build-library": "vite build --config vite.config.ts",
+    "build-library-locally": "vite build --config vite.config.ts && cp package.json dist/"
   },
   "dependencies": {
-    "@gitlab/fonts": "^1.3.0",
-    "@gitlab/svgs": "^2.12.0",
-    "@types/marked": "^4.0.8",
-    "core-js": "^3.6.5",
-    "highlight.js": "^11.7.0",
-    "marked": "^4.2.12",
-    "svgo": "^1.3.2",
-    "vue": "^2.6.11"
+    "nuxt": "^3.13.2",
+    "vue": "latest",
+    "vue-router": "latest"
   },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^6.5.11",
-    "@storybook/addon-docs": "^6.5.11",
-    "@storybook/addon-essentials": "^6.5.11",
-    "@storybook/addon-links": "^6.5.11",
-    "@storybook/vue": "^6.5.11",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^5.2.7",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-storybook": "^0.6.4",
-    "eslint-plugin-vue": "^6.2.2",
-    "html-loader": "^1.0.0-alpha.0",
-    "prettier": "^2.2.1",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "typescript": "~4.1.5",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^4.46.0"
-  },
-  "bugs": {
-    "url": "https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui-/issues"
-  },
-  "homepage": "https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.git"
+    "@nuxtjs/storybook": "8.3.2",
+    "@storybook-vue/nuxt": "^8.3.2",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/builder-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@storybook/vue3": "^8.3.6",
+    "@types/node": "^18.17.5",
+    "sass-embedded": "^1.80.4",
+    "storybook": "^8.3.6"
   }
 }