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

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md

@@ -1,75 +1,42 @@
-# Nuxt Minimal Starter
+# Slippers UI - GitLab's Marketing Design System
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+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).
 
-## Setup
+## Resources:
 
-Make sure to install dependencies:
+- 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/.
 
-```bash
-# npm
-npm install
+## Gettings started with Slippers:
 
-# pnpm
-pnpm install
+### Local development
 
-# yarn
-yarn install
+Slippers uses [Storybook](https://storybook.js.org/) to enable component exploration.
 
-# bun
-bun install
-```
+[Yarn](https://yarnpkg.com/) is the preferred package manager.
 
-## Development Server
+**Running Storybook locally:**
 
-Start the development server on `http://localhost:3000`:
+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/.
 
-```bash
-# npm
-npm run dev
+**Updating the slippers-ui NPM package**
 
-# pnpm
-pnpm 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.).
 
-# yarn
-yarn dev
+**Importing slippers-ui into your project:**
 
-# 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.
+- 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.

package/dist/slippers-ui.es.js

@@ -1,262 +1,34 @@
-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",
+import { defineComponent as c, computed as u, openBlock as r, createElementBlock as a, mergeProps as l, renderSlot as p } from "vue";
+const d = ["href"], f = /* @__PURE__ */ c({
+  __name: "SlpButton",
   props: {
-    disabled: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    variant: {
-      type: String,
-      required: !1,
-      default: "primary"
-    },
-    href: {
-      type: String,
-      required: !1,
-      default: ""
-    }
+    disabled: { type: Boolean },
+    variant: {},
+    href: {}
   },
-  setup(e) {
-    return {
-      className: f(() => {
-        let r = [`slp-btn-${e.variant}`];
-        return e.disabled && r.push("slp-btn-disabled"), r.join(" ");
-      })
-    };
+  setup(o) {
+    const e = o, s = u(() => {
+      let t = [`slp-btn-${e.variant}`];
+      return e.disabled && t.push("slp-btn-disabled"), t.join(" ");
+    });
+    return (t, n) => e.href ? (r(), a("a", l({ key: 0 }, t.$attrs, {
+      class: ["slp-btn", s.value],
+      href: e.href
+    }), [
+      p(t.$slots, "default", {}, void 0, !0)
+    ], 16, d)) : (r(), a("button", l({ key: 1 }, t.$attrs, {
+      class: ["slp-btn", s.value],
+      type: "button"
+    }), [
+      p(t.$slots, "default", {}, void 0, !0)
+    ], 16));
   }
-}), 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"]]);
+}), i = (o, e) => {
+  const s = o.__vccOpts || o;
+  for (const [t, n] of e)
+    s[t] = n;
+  return s;
+}, b = /* @__PURE__ */ i(f, [["__scopeId", "data-v-6f224ce6"]]);
 export {
-  H as Button,
-  J as Column,
-  K as Container,
-  L as MyWelcome,
-  Q as Row,
-  U as Typography
+  b as SlpButton
 };

package/dist/style.css

@@ -1 +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}
+.slp-btn[data-v-6f224ce6]{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-6f224ce6]:hover{cursor:pointer}.slp-btn-primary[data-v-6f224ce6]{background-color:#171321;color:#fff;border:1px solid #171321}.slp-btn-primary[data-v-6f224ce6]:hover{background-color:#fff;color:#171321;border:1px solid #171321}.slp-btn-primary.slp-btn-disabled[data-v-6f224ce6]{background-color:#d1d0d3;border:1px solid #D1D0D3;color:#74717a}.slp-btn-primary.slp-btn-disabled[data-v-6f224ce6]:hover{background-color:#d1d0d3;cursor:default}.slp-btn-secondary[data-v-6f224ce6]{background-color:#fff;color:#171321;border:none}.slp-btn-secondary[data-v-6f224ce6]:hover{border:none;outline:none;background-color:#e8e7eb;color:#171321}.slp-btn-secondary.slp-btn-disabled[data-v-6f224ce6]{color:#d1d0d3}.slp-btn-secondary.slp-btn-disabled[data-v-6f224ce6]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary[data-v-6f224ce6]{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-6f224ce6]:hover{text-decoration-color:#171321;-webkit-text-decoration:underline}.slp-btn-tertiary:hover .slp-icon[data-v-6f224ce6]{transform:translate(8px)}.slp-btn-tertiary .slp-icon[data-v-6f224ce6]{margin-left:4px;transition:transform .2s ease-in-out}.slp-btn-tertiary.slp-btn-disabled[data-v-6f224ce6]{color:#d1d0d3;text-decoration:none}.slp-btn-tertiary.slp-btn-disabled[data-v-6f224ce6]:hover{background-color:#fff;cursor:default}.slp-btn-tertiary.slp-btn-disabled:hover .slp-icon[data-v-6f224ce6]{transform:none}.slp-btn-icon[data-v-6f224ce6]{min-width:unset;font-size:0px;line-height:unset;border:none;background-color:transparent;padding:8px}.slp-btn-icon.slp-btn-disabled[data-v-6f224ce6]{pointer-events:none;opacity:.5}.slp-btn-ghost[data-v-6f224ce6]{border:none;background-color:transparent;padding:8px;font-size:inherit;font-weight:inherit;line-height:inherit}.slp-btn-ghost.slp-btn-disabled[data-v-6f224ce6]{pointer-events:none;opacity:.5}

package/package.json

@@ -1,46 +1,53 @@
 {
   "name": "slippers-ui",
-  "version": "3.0.0-alpha.2",
-  "private": false,
   "description": "GitLab Marketing Design System",
   "author": "GitLab",
+  "version": "3.0.0-alpha.4",
+  "type": "module",
   "files": [
     "dist",
-    "assets/css/base.scss",
-    "assets/css/_variables.scss",
-    "package.json"
+    "src/fonts",
+    "src/styles"
   ],
-  "module": "./slippers-ui.es.js",
-  "type": "module",
+  "main": "./dist/slippers-ui.es.js",
+  "module": "./dist/slippers-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/slippers-ui.es.js"
+    }
+  },
+  "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"
+  },
   "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/"
+    "dev": "storybook dev",
+    "build-lib": "vite build"
   },
   "dependencies": {
-    "nuxt": "^3.13.2",
-    "vue": "latest",
-    "vue-router": "latest"
+    "vue": "^3.5.12"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "devDependencies": {
-    "@nuxtjs/storybook": "8.3.2",
-    "@storybook-vue/nuxt": "^8.3.2",
+    "@chromatic-com/storybook": "^1.9.0",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-onboarding": "^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",
+    "@storybook/vue3-vite": "^8.3.6",
+    "@types/node": "^20.17.0",
+    "@vitejs/plugin-vue": "^5.1.4",
     "sass-embedded": "^1.80.4",
-    "storybook": "^8.3.6"
+    "storybook": "^8.3.6",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.9"
   }
 }

package/src/styles/_fonts.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/Inter-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/Inter-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/Inter-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+}

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

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 html {
   scroll-behavior: smooth;

package/dist/package.json

@@ -1,46 +0,0 @@
-{
-  "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

@@ -1 +0,0 @@
-