@kickstartds/ds-agency-premium 1.6.71--canary.45.1758.0 → 1.6.71--canary.45.1764.0

package/dist/components/split-even/split-even.css

@@ -0,0 +1,94 @@
+.l-split-even {
+  --dsa-split-even--v-gutter_default: var(--ks-spacing-stack-m);
+  --dsa-split-even--v-gutter_small: var(--ks-spacing-stack-l);
+  --dsa-split-even--v-gutter_large: var(--dsa-content--vertical-spacing);
+  --dsa-split-even--h-gutter_default: var(--ks-spacing-inline-l);
+  --dsa-split-even--h-gutter_small: var(--ks-spacing-inline-m);
+  --dsa-split-even--h-gutter_large: var(--ks-spacing-xxl);
+  --dsa-split-even__content--gutter_small: var(--ks-spacing-stack-s);
+  --dsa-split-even__content--gutter_default: var(--ks-spacing-stack-m);
+  --dsa-split-even__content--gutter_large: var(--ks-spacing-stack-xl);
+  --dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_small);
+  --dsa-split-even__content--flex-basis_medium: var(--dsa-tile--width_medium);
+  --dsa-split-even__content--flex-basis_wide: var(--dsa-tile--width_large);
+}
+
+.l-split-even {
+  --dsa-split-even--v-gutter: var(--dsa-split-even--v-gutter_default, var(--ks-spacing-stack-m));
+  --dsa-split-even--h-gutter: var(--dsa-split-even--h-gutter_default, var(--ks-spacing-inline-l));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-split-even--v-gutter) var(--dsa-split-even--h-gutter);
+}
+.l-split-even--v-gutter-small {
+  --dsa-split-even--v-gutter: var(--dsa-split-even--v-gutter_small, var(--ks-spacing-stack-l));
+}
+.l-split-even--v-gutter-large {
+  --dsa-split-even--v-gutter: var(--dsa-split-even--v-gutter_large, var(--dsa-content--vertical-spacing));
+}
+.l-split-even--v-gutter-none {
+  --dsa-split-even--v-gutter: 0;
+}
+.l-split-even--h-gutter-small {
+  --dsa-split-even--h-gutter: var(--dsa-split-even--h-gutter_small, var(--ks-spacing-inline-m));
+}
+.l-split-even--h-gutter-large {
+  --dsa-split-even--h-gutter: var(--dsa-split-even--h-gutter_large, var(--ks-spacing-xxl));
+}
+.l-split-even--h-gutter-none {
+  --dsa-split-even--h-gutter: 0;
+}
+.l-split-even--width-narrow {
+  --dsa-split-even__content--flex-basis: var(
+    --dsa-split-even__content--flex-basis_narrow,
+    var(--dsa-tile--width_small)
+  );
+}
+.l-split-even--width-medium {
+  --dsa-split-even__content--flex-basis: var(
+    --dsa-split-even__content--flex-basis_medium,
+    var(--dsa-tile--width_medium)
+  );
+}
+.l-split-even--width-wide {
+  --dsa-split-even__content--flex-basis: var(
+    --dsa-split-even__content--flex-basis_wide,
+    var(--dsa-tile--width_large)
+  );
+}
+.l-split-even--align-top {
+  align-items: flex-start;
+}
+.l-split-even--align-center {
+  align-items: center;
+}
+.l-split-even--align-bottom {
+  align-items: flex-end;
+}
+.l-split-even--mobile_stack-reverse {
+  flex-wrap: wrap-reverse;
+}
+.l-split-even--mobile_stack-reverse.l-split-even--align-top {
+  align-items: flex-end;
+}
+.l-split-even--mobile_stack-reverse.l-split-even--align-bottom {
+  align-items: flex-start;
+}
+.l-split-even__content {
+  flex: 1 1 var(--dsa-split-even__content--flex-basis);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-split-even__content--gutter_default, var(--ks-spacing-stack-m));
+}
+.l-split-even__content--gutter-none {
+  gap: 0;
+}
+.l-split-even__content--gutter-small {
+  gap: var(--dsa-split-even__content--gutter_small, var(--ks-spacing-stack-s));
+}
+.l-split-even__content--gutter-large {
+  gap: var(--dsa-split-even__content--gutter_large, var(--ks-spacing-stack-xl));
+}
+.l-split-even__content .c-button {
+  width: fit-content;
+}

package/dist/components/split-even/split-even.schema.dereffed.json

@@ -21,11 +21,11 @@
       "type": "string",
       "enum": [
         "narrow",
-        "medium",
+        "default",
         "wide",
         "none"
       ],
-      "default": "medium"
+      "default": "default"
     },
     "mobileLayout": {
       "title": "Mobile Layout",
@@ -48,10 +48,22 @@
       ],
       "default": "top"
     },
-    "gutter": {
-      "title": "Gutter",
+    "verticalGutter": {
+      "title": "Vertical Gutter",
+      "description": "Sets the vertical space between the content of the split layout",
+      "type": "string",
+      "enum": [
+        "large",
+        "default",
+        "small",
+        "none"
+      ],
+      "default": "default"
+    },
+    "horizontalGutter": {
+      "title": "Horizontal Gutter",
+      "description": "Sets the horizontal space between the content of the split layout",
       "type": "string",
-      "description": "Sets the space between the two halves of the split layout",
       "enum": [
         "large",
         "default",

package/dist/components/split-even/split-even.schema.json

@@ -15,8 +15,8 @@
       "title": "Content Gutter",
       "description": "Sets the space between the content inside the two halves of the split layout",
       "type": "string",
-      "enum": ["narrow", "medium", "wide", "none"],
-      "default": "medium"
+      "enum": ["narrow", "default", "wide", "none"],
+      "default": "default"
     },
     "mobileLayout": {
       "title": "Mobile Layout",
@@ -32,10 +32,17 @@
       "enum": ["top", "center", "bottom"],
       "default": "top"
     },
-    "gutter": {
-      "title": "Gutter",
+    "verticalGutter": {
+      "title": "Vertical Gutter",
+      "description": "Sets the vertical space between the content of the split layout",
+      "type": "string",
+      "enum": ["large", "default", "small", "none"],
+      "default": "default"
+    },
+    "horizontalGutter": {
+      "title": "Horizontal Gutter",
+      "description": "Sets the horizontal space between the content of the split layout",
       "type": "string",
-      "description": "Sets the space between the two halves of the split layout",
       "enum": ["large", "default", "small", "none"],
       "default": "default"
     },

package/dist/components/split-weighted/index.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="react" />
+import { FC } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+import { CtaProps } from "../../CtaProps-babe4ee6.js";
+import { DividerProps } from "../../DividerProps-2ef31901.js";
+import { FaqProps } from "../../FaqProps-ad618cd5.js";
+import { FeaturesProps } from "../../FeaturesProps-a9041d97.js";
+import { GalleryProps } from "../../GalleryProps-76e7de44.js";
+import { HeroProps } from "../../HeroProps-40f6c7f5.js";
+import { HtmlProps } from "../../HtmlProps-9d091769.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
+import { LogosProps } from "../../LogosProps-f9474fe2.js";
+import { MosaicProps } from "../../MosaicProps-d52c7151.js";
+import { SliderProps } from "../../SliderProps-babe4ee6.js";
+import { StatsProps } from "../../StatsProps-bf5ef578.js";
+import { TeaserCardProps } from "../../TeaserCardProps-994cb119.js";
+import { TestimonialsProps } from "../../TestimonialsProps-e344f597.js";
+import { TextProps } from "../../TextProps-a23170d2.js";
+import { VideoCurtainProps } from "../../VideoCurtainProps-a2c0cc7f.js";
+/**
+ * Sets the vertical space between the content of the split layout
+ */
+type VerticalGutter = "large" | "default" | "small" | "none";
+/**
+ * Sets the horizontal space between the content of the split layout
+ */
+type HorizontalGutter = "large" | "default" | "small" | "none";
+/**
+ * Makes the side part sticky on scroll
+ */
+type Sticky = boolean;
+/**
+ * Sets the space between the content of the split layout
+ */
+type ContentGutter = "large" | "default" | "small" | "none";
+/**
+ * Sets the minimum width of the main section
+ */
+type MinimumWidth = "narrow" | "default" | "wide";
+/**
+ * Size of gutter to use
+ */
+type Gutter = "large" | "default" | "small" | "none";
+/**
+ * Sets the minimum width of the main section
+ */
+type MinimumWidth1 = "narrow" | "default" | "wide";
+/**
+ * Determines the order of sections on mobile devices
+ */
+type MobileOrder = "mainFirst" | "contextFirst";
+/**
+ * Determines the order of sections on desktop devices
+ */
+type DesktopOrder = "mainFirst" | "contextFirst";
+/**
+ * Allowed components for the main half of the split layout
+ */
+type Main = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
+/**
+ * Allowed components for the context half of the split layout
+ */
+type Context = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
+interface SplitWeightedProps {
+    verticalGutter?: VerticalGutter;
+    horizontalGutter?: HorizontalGutter;
+    sticky?: Sticky;
+    mainLayout?: MainLayout;
+    contextLayout?: ContextLayout;
+    order?: Order;
+    mainComponents?: Main;
+    contextComponents?: Context;
+}
+interface MainLayout {
+    gutter?: ContentGutter;
+    minWidth?: MinimumWidth;
+}
+interface ContextLayout {
+    gutter?: Gutter;
+    minWidth?: MinimumWidth1;
+}
+/**
+ * Sets the order of the main and context sections in the split layout
+ */
+interface Order {
+    mobile?: MobileOrder;
+    desktop?: DesktopOrder;
+}
+interface ComponentProps {
+    main?: React.ReactNode;
+    context?: React.ReactNode;
+}
+type SplitWeightedComponentProps = SplitWeightedProps & ComponentProps;
+declare const SplitWeighted: FC<SplitWeightedComponentProps>;
+export { ComponentProps, SplitWeightedComponentProps, SplitWeighted };

package/dist/components/split-weighted/index.js

@@ -0,0 +1,13 @@
+import "./split-weighted.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+
+const SplitWeighted = ({ order, mainLayout, contextLayout, horizontalGutter = "default", verticalGutter = "default", main, context, sticky = false, }) => (jsxs("div", { className: classnames("l-split-weighted", order?.desktop === "contextFirst" &&
+        "l-split-weighted--desktop-context-first", order?.mobile === "contextFirst" &&
+        "l-split-weighted--mobile-context-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, sticky && `l-split-weighted--sticky`), children: [jsx("div", { className: classnames("l-split-weighted__main l-split-weighted__content", mainLayout?.gutter &&
+                `l-split-weighted__main--gutter-${mainLayout.gutter}`, mainLayout?.minWidth &&
+                `l-split-weighted__main--width-${mainLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: main })) : (main) }), jsx("div", { className: classnames("l-split-weighted__context l-split-weighted__content", contextLayout?.gutter &&
+                `l-split-weighted__context--gutter-${contextLayout.gutter || "large"}`, contextLayout?.minWidth &&
+                `l-split-weighted__context--width-${contextLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: context })) : (context) })] }));
+
+export { SplitWeighted };

package/dist/components/split-weighted/split-weighted.css

@@ -0,0 +1,109 @@
+.l-split-weighted {
+  --dsa-split-weighted--sticky-margin: var(--ks-spacing-stack-l);
+  --dsa-split-weighted--v-gutter_default: var(--ks-spacing-stack-m);
+  --dsa-split-weighted--v-gutter_small: var(--ks-spacing-stack-l);
+  --dsa-split-weighted--v-gutter_large: var(--dsa-content--vertical-spacing);
+  --dsa-split-weighted--h-gutter_default: var(--ks-spacing-inline-l);
+  --dsa-split-weighted--h-gutter_small: var(--ks-spacing-inline-m);
+  --dsa-split-weighted--h-gutter_large: var(--ks-spacing-xxl);
+  --dsa-split-weighted__main--flex-basis_default: var(--dsa-tile--width_large);
+  --dsa-split-weighted__main--flex-basis_narrow: var(--dsa-tile--width_medium);
+  --dsa-split-weighted__main--flex-basis_wide: var(--dsa-tile--width_largest);
+  --dsa-split-weighted__main--gutter_default: var(--ks-spacing-stack-l);
+  --dsa-split-weighted__main--gutter_small: var(--ks-spacing-stack-s);
+  --dsa-split-weighted__main--gutter_large: var(--dsa-content--vertical-spacing);
+  --dsa-split-weighted__context--flex-basis_default: var(--dsa-tile--width_medium);
+  --dsa-split-weighted__context--flex-basis_narrow: var(--dsa-tile--width_small);
+  --dsa-split-weighted__context--flex-basis_wide: var(--dsa-tile--width_large);
+  --dsa-split-weighted__context--gutter_default: var(--ks-spacing-stack-s);
+  --dsa-split-weighted__context--gutter_small: var(--ks-spacing-stack-xs);
+  --dsa-split-weighted__context--gutter_large: var(--ks-spacing-stack-m);
+}
+
+.l-split-weighted {
+  --dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_default, var(--ks-spacing-stack-m));
+  --dsa-split-weighted--h-gutter: var(--dsa-split-weighted--h-gutter_default, var(--ks-spacing-inline-l));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-split-weighted--v-gutter) var(--dsa-split-weighted--h-gutter);
+}
+.l-split-weighted--sticky {
+  position: relative;
+}
+.l-split-weighted--sticky .l-split-weighted__sticky-container {
+  position: sticky;
+  top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-l));
+  height: fit-content;
+}
+.l-split-weighted--desktop-context-first {
+  flex-direction: row-reverse;
+}
+.l-split-weighted--mobile-context-first {
+  flex-wrap: wrap-reverse;
+}
+.l-split-weighted--v-gutter-small {
+  --dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_small, var(--ks-spacing-stack-l));
+}
+.l-split-weighted--v-gutter-large {
+  --dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_large, var(--dsa-content--vertical-spacing));
+}
+.l-split-weighted--v-gutter-none {
+  --dsa-split-weighted--v-gutter: 0;
+}
+.l-split-weighted--h-gutter-small {
+  --dsa-split-weighted--h-gutter: var(--dsa-split-weighted--h-gutter_small, var(--ks-spacing-inline-m));
+}
+.l-split-weighted--h-gutter-large {
+  --dsa-split-weighted--h-gutter: var(--dsa-split-weighted--h-gutter_large, var(--ks-spacing-xxl));
+}
+.l-split-weighted--h-gutter-none {
+  --dsa-split-weighted--h-gutter: 0;
+}
+.l-split-weighted__content {
+  display: flex;
+  flex-direction: column;
+}
+.l-split-weighted__content .c-button {
+  width: fit-content;
+}
+.l-split-weighted__main {
+  flex-basis: var(--dsa-split-weighted__main--flex-basis_default, calc(var(--dsa-content--width_default) * 1));
+  flex-grow: 1000;
+  flex-shrink: 1;
+  gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
+}
+.l-split-weighted__main--width-narrow {
+  flex-basis: var(--dsa-split-weighted__main--flex-basis_narrow, var(--dsa-tile--width_large));
+}
+.l-split-weighted__main--width-wide {
+  flex-basis: var(--dsa-split-weighted__main--flex-basis_wide, var(--dsa-content--width_default));
+}
+.l-split-weighted__main--gutter-small {
+  gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
+}
+.l-split-weighted__main--gutter-large {
+  gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
+}
+.l-split-weighted__main--gutter-none {
+  gap: 0;
+}
+.l-split-weighted__context {
+  flex-basis: var(--dsa-split-weighted__context--flex-basis_default, var(--dsa-tile--width_medium));
+  flex-grow: 1;
+  gap: var(--dsa-split-weighted__context--gutter_default, var(--ks-spacing-stack-s));
+}
+.l-split-weighted__context--width-narrow {
+  flex-basis: var(--dsa-split-weighted__context--flex-basis_narrow, var(--dsa-tile--width_small));
+}
+.l-split-weighted__context--width-wide {
+  flex-basis: var(--dsa-split-weighted__context--flex-basis_wide, var(--dsa-tile--width_large));
+}
+.l-split-weighted__context--gutter-small {
+  gap: var(--dsa-split-weighted__context--gutter_small, var(--ks-spacing-stack-xs));
+}
+.l-split-weighted__context--gutter-large {
+  gap: var(--dsa-split-weighted__context--gutter_large, var(--ks-spacing-stack-m));
+}
+.l-split-weighted__context--gutter-none {
+  gap: 0;
+}