@guardian/interactive-component-library 0.2.0-rc1 → 0.2.0-rc2

package/dist/components/molecules/topline-result/index.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "preact/hooks";
+import { InfoButton } from "../../particles/info-button/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import { forwardRef } from "preact/compat";
+import defaultStyles from "./style.module.scss.js";
+const ToplineResult = forwardRef(
+  ({
+    name,
+    secondaryName,
+    mainNumber,
+    mainNumberSuffix,
+    secondaryNumber,
+    styles,
+    displayRow = false,
+    abbreviation,
+    onMouseOver,
+    onClick,
+    onMouseOut,
+    onInfoPress,
+    showInfoButton = false,
+    infoButtonRef
+  }, ref) => {
+    styles = mergeStyles({ ...defaultStyles }, styles);
+    const displayStyle = displayRow ? styles.displayRow : styles.displayColumn;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.toplineResult,
+        onMouseOver,
+        onClick,
+        onMouseOut,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.topRow, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${styles.primaryname} before-color--${abbreviation}`,
+                children: name
+              }
+            ),
+            showInfoButton && /* @__PURE__ */ jsx("span", { className: styles.infoButton, children: /* @__PURE__ */ jsx(InfoButton, { onClick: onInfoPress, ref: infoButtonRef }) })
+          ] }),
+          secondaryName && /* @__PURE__ */ jsx("div", { className: styles.subhead, children: /* @__PURE__ */ jsx("span", { className: styles.secondaryname, children: secondaryName }) }),
+          /* @__PURE__ */ jsxs("div", { className: `${styles.displayNumbers} ${displayStyle}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.mainNumber, children: [
+              mainNumber,
+              mainNumberSuffix && /* @__PURE__ */ jsx("span", { className: styles.mainNumberSuffix, children: mainNumberSuffix })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.secondaryNumber, children: secondaryNumber })
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  ToplineResult
+};

package/dist/components/molecules/topline-result/style.module.scss.js

@@ -0,0 +1,38 @@
+const toplineResult = "_toplineResult_1su0d_9";
+const primaryname = "_primaryname_1su0d_15";
+const secondaryname = "_secondaryname_1su0d_31";
+const name = "_name_1su0d_39";
+const displayNumbers = "_displayNumbers_1su0d_54";
+const mainNumber = "_mainNumber_1su0d_69";
+const mainNumberSuffix = "_mainNumberSuffix_1su0d_75";
+const secondaryNumber = "_secondaryNumber_1su0d_79";
+const displayRow = "_displayRow_1su0d_84";
+const displayColumn = "_displayColumn_1su0d_91";
+const topRow = "_topRow_1su0d_95";
+const defaultStyles = {
+  toplineResult,
+  primaryname,
+  secondaryname,
+  name,
+  displayNumbers,
+  mainNumber,
+  mainNumberSuffix,
+  secondaryNumber,
+  displayRow,
+  displayColumn,
+  topRow
+};
+export {
+  defaultStyles as default,
+  displayColumn,
+  displayNumbers,
+  displayRow,
+  mainNumber,
+  mainNumberSuffix,
+  name,
+  primaryname,
+  secondaryNumber,
+  secondaryname,
+  topRow,
+  toplineResult
+};

package/dist/components/organisms/coalitions-tracker/index.d.ts

@@ -0,0 +1,16 @@
+export function CoalitionsTracker({ coalitions, threshold, barChartHeight, listMembersAccessor, listMemberTotalAccessor, listDescriptionAccessor, abbreviationAccessor, thresholdTextBold, thresholdText, styles, labelOverlapConfig, }: {
+    coalitions: any;
+    threshold: any;
+    barChartHeight?: number;
+    listMembersAccessor?: string;
+    listMemberTotalAccessor?: string;
+    listDescriptionAccessor?: string;
+    abbreviationAccessor?: string;
+    thresholdTextBold: any;
+    thresholdText: any;
+    styles: any;
+    labelOverlapConfig?: {
+        labelSize: number;
+        moveBothLabels: boolean;
+    };
+}): import("preact").JSX.Element;

package/dist/components/organisms/coalitions-tracker/index.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useRef, useState, useLayoutEffect } from "preact/hooks";
+import { useWindowSize } from "../../../shared/hooks/useWindowSize.js";
+import { LabelOverlapConfig, StackedBar, LabelType } from "../../particles/stacked-bar/index.js";
+import defaultStyles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function CoalitionsTracker({
+  coalitions,
+  threshold,
+  barChartHeight = 32,
+  listMembersAccessor = "parties",
+  listMemberTotalAccessor = "totalSeats",
+  listDescriptionAccessor = "description",
+  abbreviationAccessor = "abbreviation",
+  thresholdTextBold,
+  thresholdText,
+  styles,
+  labelOverlapConfig = LabelOverlapConfig
+}) {
+  const wrapperRef = useRef(null);
+  const thresholdTextRef = useRef(null);
+  const [width, setWidth] = useState(0);
+  const biggestListTotal = Math.max(
+    ...coalitions.map(
+      (l) => l[listMembersAccessor].reduce(
+        (acc, cur) => acc + cur[listMemberTotalAccessor],
+        0
+      )
+    )
+  );
+  const windowSize = useWindowSize();
+  const thresholdTextMinWidth = windowSize.width < 740 ? 66 : 150;
+  const thresholdDotWidth = 11;
+  const thresholdTextPaddingLeft = 5;
+  const maxBarWidth = width - thresholdTextMinWidth - (thresholdDotWidth - 1) / 2 - thresholdTextPaddingLeft;
+  const thresholdLeft = threshold / biggestListTotal * maxBarWidth;
+  const parsedLists = coalitions.map((coalition) => {
+    const listTotal = coalition[listMembersAccessor].reduce(
+      (acc, cur) => acc + cur[listMemberTotalAccessor],
+      0
+    );
+    return {
+      title: coalition["name"],
+      description: coalition[listDescriptionAccessor],
+      height: barChartHeight,
+      width: listTotal / biggestListTotal * maxBarWidth,
+      stack: coalition[listMembersAccessor].map((m) => {
+        const listTotal2 = coalition[listMembersAccessor].reduce(
+          (acc, cur) => acc + cur[listMemberTotalAccessor],
+          0
+        );
+        return {
+          label: m[listMemberTotalAccessor],
+          fraction: m[listMemberTotalAccessor] / listTotal2,
+          abbreviation: m[abbreviationAccessor]
+        };
+      }).sort((a, b) => b.fraction - a.fraction)
+    };
+  });
+  styles = mergeStyles(defaultStyles, styles);
+  useLayoutEffect(() => {
+    const newWidth = wrapperRef.current.getBoundingClientRect().width;
+    setWidth(newWidth);
+  }, [windowSize]);
+  const renderCoalition = (list, index) => {
+    if (list.width <= 0) {
+      return;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.coalition,
+        style: { position: "relative", zIndex: 2 },
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: styles.title, children: list.title }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: styles.description,
+              style: { maxWidth: thresholdLeft <= 620 ? thresholdLeft - 8 : 620 },
+              children: list.description
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StackedBar,
+            {
+              labelOverlapConfig,
+              labelType: LabelType.hanging,
+              stack: list.stack,
+              width: list.width,
+              height: barChartHeight,
+              createSVG: true,
+              styles
+            }
+          )
+        ]
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: styles.coalitionsWrapper, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.coalitionsContainer, children: parsedLists.map(renderCoalition) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.thresholdDot,
+        style: {
+          position: "absolute",
+          height: thresholdDotWidth,
+          width: thresholdDotWidth,
+          top: 0,
+          left: 0.5 + thresholdLeft - thresholdDotWidth / 2
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.thresholdLine,
+        style: {
+          position: "absolute",
+          height: "100%",
+          width: 1,
+          top: 0,
+          left: thresholdLeft
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: thresholdTextRef,
+        className: styles.thresholdText,
+        style: {
+          position: "absolute",
+          minWidth: thresholdTextMinWidth,
+          width: "auto",
+          top: -(thresholdDotWidth + 1) / 2,
+          left: thresholdLeft + (thresholdDotWidth - 1) / 2 + thresholdTextPaddingLeft
+        },
+        children: [
+          thresholdTextBold && /* @__PURE__ */ jsx("span", { className: styles.thresholdTextBold, children: thresholdTextBold }),
+          thresholdText && /* @__PURE__ */ jsx("span", { children: thresholdText })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CoalitionsTracker
+};

package/dist/components/organisms/coalitions-tracker/style.module.scss.js

@@ -0,0 +1,32 @@
+const coalitionsWrapper = "_coalitionsWrapper_4egbd_9";
+const coalitionsContainer = "_coalitionsContainer_4egbd_14";
+const coalition = "_coalition_4egbd_9";
+const title = "_title_4egbd_27";
+const description = "_description_4egbd_28";
+const thresholdText = "_thresholdText_4egbd_43";
+const thresholdTextBold = "_thresholdTextBold_4egbd_54";
+const thresholdDot = "_thresholdDot_4egbd_61";
+const thresholdLine = "_thresholdLine_4egbd_62";
+const defaultStyles = {
+  coalitionsWrapper,
+  coalitionsContainer,
+  coalition,
+  title,
+  description,
+  thresholdText,
+  thresholdTextBold,
+  thresholdDot,
+  thresholdLine
+};
+export {
+  coalition,
+  coalitionsContainer,
+  coalitionsWrapper,
+  defaultStyles as default,
+  description,
+  thresholdDot,
+  thresholdLine,
+  thresholdText,
+  thresholdTextBold,
+  title
+};

package/dist/components/organisms/index.d.ts

@@ -0,0 +1,2 @@
+export * from './coalitions-tracker';
+export * from './ticker';

package/dist/components/organisms/ticker/gradient/index.d.ts

@@ -0,0 +1 @@
+export function Gradient(): import("preact").JSX.Element;

package/dist/components/organisms/ticker/gradient/index.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import styles from "./style.module.scss.js";
+function Gradient() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ jsx("g", { className: styles.gradient, children: /* @__PURE__ */ jsx("rect", { fill: "url(#paint0_linear_3798_6653)" }) }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: "paint0_linear_3798_6653",
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            children: [
+              /* @__PURE__ */ jsx("stop", { className: styles.firstStop }),
+              /* @__PURE__ */ jsx("stop", { className: styles.lastStop, offset: "1" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Gradient
+};

package/dist/components/organisms/ticker/gradient/style.module.scss.js

@@ -0,0 +1,14 @@
+const gradient = "_gradient_plpaq_9";
+const firstStop = "_firstStop_plpaq_24";
+const lastStop = "_lastStop_plpaq_29";
+const styles = {
+  gradient,
+  firstStop,
+  lastStop
+};
+export {
+  styles as default,
+  firstStop,
+  gradient,
+  lastStop
+};

package/dist/components/organisms/ticker/index.d.ts

@@ -0,0 +1,5 @@
+export function Ticker({ maxItems, onStateChange, children }: {
+    maxItems?: number;
+    onStateChange: any;
+    children: any;
+}): import("preact").JSX.Element;

package/dist/components/organisms/ticker/index.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { toChildArray } from "preact";
+import { useState, useMemo, useRef, useLayoutEffect } from "preact/hooks";
+import { Gradient } from "./gradient/index.js";
+import "../../particles/info-button/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import { ArrowButton } from "../../particles/arrow-button/index.js";
+import { Button } from "../../particles/button/index.js";
+import styles from "./style.module.scss.js";
+function Ticker({ maxItems = 20, onStateChange, children }) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageWidth, setPageWidth] = useState(0);
+  const [numberOfPages, setNumberOfPages] = useState(0);
+  const offsetWidth = useMemo(() => {
+    return -pageIndex * (pageWidth || 0);
+  }, [pageIndex, pageWidth]);
+  const tickerRef = useRef();
+  const tickerItemsRef = useRef();
+  const tickerScrollRef = useRef();
+  const controlsRef = useRef();
+  const [hideButtons, setHideButtons] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const childArray = toChildArray(children);
+  useLayoutEffect(() => {
+    const tickerItemsContainer = tickerItemsRef.current;
+    const pageWidth2 = tickerItemsContainer.clientWidth * 0.75;
+    setPageWidth(pageWidth2);
+    const numberOfPages2 = Math.ceil(
+      tickerScrollRef.current.scrollWidth / pageWidth2
+    );
+    setNumberOfPages(numberOfPages2);
+  }, [childArray]);
+  useLayoutEffect(() => {
+    const hideButtons2 = childArray.length < 4;
+    setHideButtons(hideButtons2);
+  }, [childArray]);
+  function toggleExpandedState() {
+    if (expanded) {
+      tickerRef.current.scrollIntoView({ behavior: "smooth", alignToTop: true });
+    }
+    setExpanded((expanded2) => {
+      const newState = !expanded2;
+      if (onStateChange) onStateChange({ expanded: newState });
+      return newState;
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tickerRef,
+      className: styles.ticker,
+      style: `--ticker-offset: ${offsetWidth}px;`,
+      "data-expanded": expanded,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: tickerItemsRef, className: styles.tickerItems, children: /* @__PURE__ */ jsx("div", { ref: tickerScrollRef, className: styles.tickerScroll, children: childArray.map((child, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx("div", { className: styles.tickerItem, children: child }, ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.id) ?? index);
+        }) }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: controlsRef,
+            className: styles.controls,
+            style: hideButtons && { display: "none" },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
+              /* @__PURE__ */ jsxs("div", { className: styles.buttons, children: [
+                /* @__PURE__ */ jsx(
+                  ArrowButton,
+                  {
+                    onClick: () => setPageIndex((d) => d + 1),
+                    disabled: pageIndex >= numberOfPages - 2
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ArrowButton,
+                  {
+                    direction: "left",
+                    onClick: () => setPageIndex((d) => d - 1),
+                    disabled: pageIndex <= 0
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.button, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "regular",
+                  styles: { buttonInner: styles.buttonInner },
+                  onClick: toggleExpandedState,
+                  children: expanded ? "Show fewer" : `Show ${maxItems} most recent`
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Ticker
+};

package/dist/components/organisms/ticker/style.module.scss.js

@@ -0,0 +1,32 @@
+const ticker = "_ticker_15ezr_9";
+const tickerItems = "_tickerItems_15ezr_21";
+const tickerScroll = "_tickerScroll_15ezr_26";
+const tickerItem = "_tickerItem_15ezr_21";
+const controls = "_controls_15ezr_48";
+const gradient = "_gradient_15ezr_63";
+const buttons = "_buttons_15ezr_75";
+const button = "_button_15ezr_75";
+const buttonInner = "_buttonInner_15ezr_101";
+const styles = {
+  ticker,
+  tickerItems,
+  tickerScroll,
+  tickerItem,
+  controls,
+  gradient,
+  buttons,
+  button,
+  buttonInner
+};
+export {
+  button,
+  buttonInner,
+  buttons,
+  controls,
+  styles as default,
+  gradient,
+  ticker,
+  tickerItem,
+  tickerItems,
+  tickerScroll
+};

package/dist/components/particles/ad-slot/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Array of available breakpoints.
+ * @typedef {"mobile" | "phablet" | "tablet" | "desktop"} Breakpoint
+ *
+ * Type representing an ad size, defined as a tuple of two numbers in the format [width, height].
+ * @typedef {[number, number]} AdSize
+ *
+ * Type representing a size mapping for different breakpoints,
+ * the breakpoints cascade from the smallest to the largest.
+ * AKA if only mobile and desktop are defined, the mobile size will be used for phablet and tablet.
+ *
+ * @typedef {Partial<Record<Breakpoint, AdSize[]>>} SizeMapping
+ *
+ * @interface AdSlotProps
+ * @property {string} name - The unique name of the ad slot.
+ * @property {SizeMapping} sizeMapping - The size mapping for the ad slot.
+ * @property {Object} styles - The styles for the ad slot.
+ */
+/**
+ * A placeholder for an ad slot, the commercial bundle will fill this slot with an ad,
+ * matching the size mapping.
+ *
+ * @param {AdSlotProps} props
+ * @returns {React.ComponentElement<AdSlotProps, null>}
+ */
+export function AdSlot({ name, sizeMapping, styles }: AdSlotProps): React.ComponentElement<AdSlotProps, null>;
+/**
+ * Type representing an ad size, defined as a tuple of two numbers in the format [width, height].
+ */
+export type Breakpoint = "mobile" | "phablet" | "tablet" | "desktop";
+/**
+ * Type representing a size mapping for different breakpoints,
+ * the breakpoints cascade from the smallest to the largest.
+ * AKA if only mobile and desktop are defined, the mobile size will be used for phablet and tablet.
+ */
+export type AdSize = [number, number];
+/**
+ * Array of available breakpoints.
+ */
+export type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;

package/dist/components/particles/ad-slot/index.js

@@ -0,0 +1,34 @@
+import { jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.css.js";
+function AdSlot({ name, sizeMapping, styles }) {
+  var _a, _b, _c;
+  const slotId = `dfp-ad--${name}`;
+  styles = mergeStyles(defaultStyles, styles);
+  const mobileSizes = (_a = sizeMapping.mobile) == null ? void 0 : _a.map((size) => size.join(",")).join("|");
+  const tabletSizes = (_b = sizeMapping.tablet) == null ? void 0 : _b.map((size) => size.join(",")).join("|");
+  const desktopSizes = (_c = sizeMapping.desktop) == null ? void 0 : _c.map((size) => size.join(",")).join("|");
+  return /* @__PURE__ */ jsx("div", { className: ["ad-slot-container", styles.container].join(" "), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: slotId,
+      className: [
+        "js-ad-slot",
+        "ad-slot",
+        "interactive-ad-slot",
+        styles.slot
+      ].join(" "),
+      "data-link-name": `ad slot ${name}`,
+      "data-name": `${name}`,
+      "data-label-show": "true",
+      "ad-label-text": "Advertisement",
+      "aria-hidden": "true",
+      "data-mobile": mobileSizes,
+      "data-tablet": tabletSizes,
+      "data-desktop": desktopSizes
+    }
+  ) });
+}
+export {
+  AdSlot
+};

package/dist/components/particles/ad-slot/style.module.css.js

@@ -0,0 +1,11 @@
+const container = "_container_tq3ke_1";
+const slot = "_slot_tq3ke_5";
+const defaultStyles = {
+  container,
+  slot
+};
+export {
+  container,
+  defaultStyles as default,
+  slot
+};

package/dist/components/particles/arrow-button/index.d.ts

@@ -0,0 +1,6 @@
+export function ArrowButton({ direction, disabled, styles, onClick, }: {
+    direction?: string;
+    disabled?: boolean;
+    styles: any;
+    onClick: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/arrow-button/index.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function ArrowButton({
+  direction = "right",
+  disabled = false,
+  styles,
+  onClick
+}) {
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx("button", { className: styles.button, disabled, onClick, children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: [styles.icon, direction].join(" "),
+      viewBox: "0 0 28 28",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: 14, cy: 14, r: "13", fillRule: "nonzero" }),
+        /* @__PURE__ */ jsx("g", { transform: "translate(6 7)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0.667319 7.63692L12.8497 7.63692L8.07231 13.3539L8.69338 13.975L15.334 7.31842L15.334 6.68143L8.69338 0.0249018L8.07231 0.645966L12.8497 6.36294L0.667319 6.36294L0.667319 7.63692Z",
+            fill: "#121212"
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+export {
+  ArrowButton
+};

package/dist/components/particles/arrow-button/style.module.css.js

@@ -0,0 +1,11 @@
+const button = "_button_1kqfn_1";
+const icon = "_icon_1kqfn_6";
+const defaultStyles = {
+  button,
+  icon
+};
+export {
+  button,
+  defaultStyles as default,
+  icon
+};

package/dist/components/particles/aspect-ratio-box/index.d.ts

@@ -0,0 +1,4 @@
+export function AspectRatioBox({ heightAsProportionOfWidth, children }: {
+    heightAsProportionOfWidth: any;
+    children: any;
+}): import("preact").JSX.Element;

package/dist/components/particles/aspect-ratio-box/index.js

@@ -0,0 +1,15 @@
+import { jsx } from "preact/jsx-runtime";
+import style from "./style.module.css.js";
+function AspectRatioBox({ heightAsProportionOfWidth, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: style["aspect-ratio-box"],
+      style: { "--aspect-ratio": heightAsProportionOfWidth },
+      children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", width: "100%", height: "100%" }, children })
+    }
+  );
+}
+export {
+  AspectRatioBox
+};

package/dist/components/particles/aspect-ratio-box/style.module.css.js

@@ -0,0 +1,6 @@
+const style = {
+  "aspect-ratio-box": "_aspect-ratio-box_1e5oy_1"
+};
+export {
+  style as default
+};