@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

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

@@ -0,0 +1,212 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/split-even.schema.json",
+  "title": "Split Even",
+  "type": "object",
+  "properties": {
+    "contentMinWidth": {
+      "title": "Content Minimum Width",
+      "description": "Sets the minimum width for each half of the split layout",
+      "type": "string",
+      "enum": ["narrow", "medium", "wide"],
+      "default": "medium"
+    },
+    "contentGutter": {
+      "title": "Content Gutter",
+      "description": "Sets the space between the content inside the two halves of the split layout",
+      "type": "string",
+      "enum": ["small", "default", "large", "none"],
+      "default": "default"
+    },
+    "mobileReverse": {
+      "title": "Mobile Reverse",
+      "description": "Reverses the order of the sections on mobile devices",
+      "type": "boolean",
+      "default": false
+    },
+    "verticalAlign": {
+      "title": "Vertical Alignment",
+      "type": "string",
+      "description": "Aligns the content vertically within the sections",
+      "enum": ["top", "center", "bottom", "sticky"],
+      "default": "top"
+    },
+    "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",
+      "enum": ["large", "default", "small", "none"],
+      "default": "default"
+    },
+    "firstComponents": {
+      "type": "array",
+      "title": "First",
+      "description": "Allowed components for the first half of the split layout",
+      "items": {
+        "anyOf": [
+          {
+            "$ref": "http://schema.mydesignsystem.com/blog-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/business-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/contact.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/content-nav.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/divider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/downloads.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-list-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/faq.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/features.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/gallery.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/hero.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/html.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-story.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/logos.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/mosaic.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/slider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/stats.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/teaser-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/testimonials.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/video-curtain.schema.json"
+          }
+        ]
+      }
+    },
+    "secondComponents": {
+      "type": "array",
+      "title": "Second",
+      "description": "Allowed components for the second half of the split layout",
+      "items": {
+        "anyOf": [
+          {
+            "$ref": "http://schema.mydesignsystem.com/blog-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/business-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/contact.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/content-nav.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/divider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/downloads.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/event-list-teaser.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/faq.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/features.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/gallery.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/hero.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/html.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-story.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/logos.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/mosaic.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/slider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/stats.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/teaser-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/testimonials.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/video-curtain.schema.json"
+          }
+        ]
+      }
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+import { SplitWeightedProps as SplitWeightedComponentProps } from "../../SplitWeightedProps-789f8508.js";
+interface ComponentProps {
+    main?: React.ReactNode;
+    aside?: React.ReactNode;
+}
+type SplitWeightedProps = Omit<SplitWeightedComponentProps, "main" | "aside"> & ComponentProps;
+declare const SplitWeightedContextDefault: import("react").ForwardRefExoticComponent<Omit<SplitWeightedComponentProps, "main" | "aside"> & ComponentProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const SplitWeightedContext: import("react").Context<import("react").ForwardRefExoticComponent<Omit<SplitWeightedComponentProps, "main" | "aside"> & ComponentProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const SplitWeighted: import("react").ForwardRefExoticComponent<Omit<SplitWeightedComponentProps, "main" | "aside"> & ComponentProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { ComponentProps, SplitWeightedProps, SplitWeightedContextDefault, SplitWeightedContext, SplitWeighted };

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

@@ -0,0 +1,42 @@
+import "./split-weighted.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "verticalGutter": "default",
+    "horizontalGutter": "default",
+    "verticalAlign": "top",
+    "mainLayout": {
+        "gutter": "default",
+        "minWidth": "wide"
+    },
+    "asideLayout": {
+        "gutter": "default",
+        "minWidth": "default"
+    },
+    "order": {
+        "mobile": "mainFirst",
+        "desktop": "mainFirst"
+    },
+    "mainComponents": [],
+    "asideComponents": []
+};
+
+const SplitWeightedContextDefault = forwardRef(({ order, mainLayout, asideLayout, horizontalGutter = "default", verticalGutter = "default", main, aside, verticalAlign = "top", }, ref) => (jsxs("div", { ref: ref, className: classnames("l-split-weighted", order?.desktop === "asideFirst" &&
+        "l-split-weighted--desktop-aside-first", order?.mobile === "asideFirst" &&
+        "l-split-weighted--mobile-aside-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, verticalAlign && `l-split-weighted--align-${verticalAlign}`), 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: jsx("div", { className: classnames("l-split-weighted__content-container", mainLayout?.gutter &&
+                    `l-split-weighted__content-container--gutter-${mainLayout.gutter}`), children: main }) }), jsx("div", { className: classnames("l-split-weighted__aside l-split-weighted__content", asideLayout?.minWidth &&
+                `l-split-weighted__aside--width-${asideLayout.minWidth}`), children: jsx("div", { className: classnames("l-split-weighted__content-container", asideLayout?.gutter &&
+                    `l-split-weighted__content-container--gutter-${asideLayout.gutter}`), children: aside }) })] })));
+const SplitWeightedContext = createContext(SplitWeightedContextDefault);
+const SplitWeighted = forwardRef((props, ref) => {
+    const Component = useContext(SplitWeightedContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+SplitWeighted.displayName = "SplitWeighted";
+
+export { SplitWeighted, SplitWeightedContext, SplitWeightedContextDefault };

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

@@ -0,0 +1,133 @@
+.l-split-weighted {
+  --dsa-split-weighted--sticky-margin: var(--ks-spacing-stack-xl);
+  --dsa-split-weighted--v-gutter_default: var(--ks-spacing-stack-l);
+  --dsa-split-weighted--v-gutter_small: var(--ks-spacing-stack-s);
+  --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_largest);
+  --dsa-split-weighted__main--flex-basis_narrow: var(--dsa-tile--width_large);
+  --dsa-split-weighted__main--flex-basis_wide: calc(var(--dsa-tile--width_largest) * 1.25);
+  --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__aside--flex-basis_default: var(--dsa-tile--width_medium);
+  --dsa-split-weighted__aside--flex-basis_narrow: var(--dsa-tile--width_small);
+  --dsa-split-weighted__aside--flex-basis_wide: var(--dsa-tile--width_large);
+  --dsa-split-weighted__aside--gutter_default: var(--ks-spacing-stack-s);
+  --dsa-split-weighted__aside--gutter_small: var(--ks-spacing-stack-xs);
+  --dsa-split-weighted__aside--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--align-top {
+  align-items: flex-start;
+}
+.l-split-weighted--align-center {
+  align-items: center;
+}
+.l-split-weighted--align-bottom {
+  align-items: flex-end;
+}
+.l-split-weighted--align-sticky {
+  position: relative;
+}
+.l-split-weighted--align-sticky .l-split-weighted__content-container {
+  position: sticky;
+  top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-xl));
+  height: fit-content;
+}
+.l-split-weighted--desktop-aside-first {
+  flex-direction: row-reverse;
+}
+.l-split-weighted--mobile-aside-first {
+  flex-wrap: wrap-reverse;
+}
+.l-split-weighted--mobile-aside-first.l-split-weighted--align-top {
+  align-items: flex-end;
+}
+.l-split-weighted--mobile-aside-first.l-split-weighted--align-bottom {
+  align-items: flex-start;
+}
+.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 .l-split-weighted__content-container {
+  display: flex;
+  flex-direction: column;
+}
+.l-split-weighted__content .l-split-weighted__content-container--gutter-none {
+  gap: 0;
+}
+.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;
+}
+.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 .l-split-weighted__content-container {
+  gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
+}
+.l-split-weighted__main .l-split-weighted__content-container--gutter-none {
+  gap: 0;
+}
+.l-split-weighted__main .l-split-weighted__content-container--gutter-small {
+  gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
+}
+.l-split-weighted__main .l-split-weighted__content-container--gutter-large {
+  gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
+}
+.l-split-weighted__aside {
+  flex-basis: var(--dsa-split-weighted__aside--flex-basis_default, var(--dsa-tile--width_medium));
+  flex-grow: 1;
+  gap: var(--dsa-split-weighted__aside--gutter_default, var(--ks-spacing-stack-s));
+}
+.l-split-weighted__aside--width-narrow {
+  flex-basis: var(--dsa-split-weighted__aside--flex-basis_narrow, var(--dsa-tile--width_small));
+}
+.l-split-weighted__aside--width-wide {
+  flex-basis: var(--dsa-split-weighted__aside--flex-basis_wide, var(--dsa-tile--width_large));
+}
+.l-split-weighted__aside .l-split-weighted__content-container {
+  gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
+}
+.l-split-weighted__aside .l-split-weighted__content-container--gutter-none {
+  gap: 0;
+}
+.l-split-weighted__aside .l-split-weighted__content-container--gutter-small {
+  gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
+}
+.l-split-weighted__aside .l-split-weighted__content-container--gutter-large {
+  gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
+}