@guardian/interactive-component-library 0.3.1 → 0.3.2

package/dist/components/molecules/canvas-map/lib/util/simplify.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
+ * @param {number} squaredTolerance Squared tolerance.
+ * @param {boolean} highQuality Highest quality.
+ * @param {Array<number>} [simplifiedFlatCoordinates] Simplified flat
+ *     coordinates.
+ * @return {Array<number>} Simplified line string.
+ */
+export function simplifyLineString(flatCoordinates: Array<number>, offset: number, end: number, stride: number, squaredTolerance: number, highQuality: boolean, simplifiedFlatCoordinates?: Array<number>): Array<number>;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
+ * @param {number} squaredTolerance Squared tolerance.
+ * @param {Array<number>} simplifiedFlatCoordinates Simplified flat
+ *     coordinates.
+ * @param {number} simplifiedOffset Simplified offset.
+ * @return {number} Simplified offset.
+ */
+export function douglasPeucker(flatCoordinates: Array<number>, offset: number, end: number, stride: number, squaredTolerance: number, simplifiedFlatCoordinates: Array<number>, simplifiedOffset: number): number;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array<number>} ends Ends.
+ * @param {number} stride Stride.
+ * @param {number} squaredTolerance Squared tolerance.
+ * @param {Array<number>} simplifiedFlatCoordinates Simplified flat
+ *     coordinates.
+ * @param {number} simplifiedOffset Simplified offset.
+ * @param {Array<number>} simplifiedEnds Simplified ends.
+ * @return {number} Simplified offset.
+ */
+export function douglasPeuckerArray(flatCoordinates: Array<number>, offset: number, ends: Array<number>, stride: number, squaredTolerance: number, simplifiedFlatCoordinates: Array<number>, simplifiedOffset: number, simplifiedEnds: Array<number>): number;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array<Array<number>>} endss Endss.
+ * @param {number} stride Stride.
+ * @param {number} squaredTolerance Squared tolerance.
+ * @param {Array<number>} simplifiedFlatCoordinates Simplified flat
+ *     coordinates.
+ * @param {number} simplifiedOffset Simplified offset.
+ * @param {Array<Array<number>>} simplifiedEndss Simplified endss.
+ * @return {number} Simplified offset.
+ */
+export function douglasPeuckerMultiArray(flatCoordinates: Array<number>, offset: number, endss: Array<Array<number>>, stride: number, squaredTolerance: number, simplifiedFlatCoordinates: Array<number>, simplifiedOffset: number, simplifiedEndss: Array<Array<number>>): number;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
+ * @param {number} squaredTolerance Squared tolerance.
+ * @param {Array<number>} simplifiedFlatCoordinates Simplified flat
+ *     coordinates.
+ * @param {number} simplifiedOffset Simplified offset.
+ * @return {number} Simplified offset.
+ */
+export function radialDistance(flatCoordinates: Array<number>, offset: number, end: number, stride: number, squaredTolerance: number, simplifiedFlatCoordinates: Array<number>, simplifiedOffset: number): number;
+/**
+ * @param {number} value Value.
+ * @param {number} tolerance Tolerance.
+ * @return {number} Rounded value.
+ */
+export function snap(value: number, tolerance: number): number;
+/**
+ * Simplifies a line string using an algorithm designed by Tim Schaub.
+ * Coordinates are snapped to the nearest value in a virtual grid and
+ * consecutive duplicate coordinates are discarded.  This effectively preserves
+ * topology as the simplification of any subsection of a line string is
+ * independent of the rest of the line string.  This means that, for example,
+ * the common edge between two polygons will be simplified to the same line
+ * string independently in both polygons.  This implementation uses a single
+ * pass over the coordinates and eliminates intermediate collinear points.
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
+ * @param {number} tolerance Tolerance.
+ * @param {Array<number>} simplifiedFlatCoordinates Simplified flat
+ *     coordinates.
+ * @param {number} simplifiedOffset Simplified offset.
+ * @return {number} Simplified offset.
+ */
+export function quantize(flatCoordinates: Array<number>, offset: number, end: number, stride: number, tolerance: number, simplifiedFlatCoordinates: Array<number>, simplifiedOffset: number): number;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array<number>} ends Ends.
+ * @param {number} stride Stride.
+ * @param {number} tolerance Tolerance.
+ * @param {Array<number>} simplifiedFlatCoordinates Simplified flat
+ *     coordinates.
+ * @param {number} simplifiedOffset Simplified offset.
+ * @param {Array<number>} simplifiedEnds Simplified ends.
+ * @return {number} Simplified offset.
+ */
+export function quantizeArray(flatCoordinates: Array<number>, offset: number, ends: Array<number>, stride: number, tolerance: number, simplifiedFlatCoordinates: Array<number>, simplifiedOffset: number, simplifiedEnds: Array<number>): number;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array<Array<number>>} endss Endss.
+ * @param {number} stride Stride.
+ * @param {number} tolerance Tolerance.
+ * @param {Array<number>} simplifiedFlatCoordinates Simplified flat
+ *     coordinates.
+ * @param {number} simplifiedOffset Simplified offset.
+ * @param {Array<Array<number>>} simplifiedEndss Simplified endss.
+ * @return {number} Simplified offset.
+ */
+export function quantizeMultiArray(flatCoordinates: Array<number>, offset: number, endss: Array<Array<number>>, stride: number, tolerance: number, simplifiedFlatCoordinates: Array<number>, simplifiedOffset: number, simplifiedEndss: Array<Array<number>>): number;

package/dist/components/molecules/canvas-map/lib/util/size.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Determines if a size has a positive area.
+ */
+export function hasArea(size: any): boolean;
+/**
+ * Calculate size minus padding
+ *
+ * @function sizeMinusPadding
+ * @param {[number, number]} size
+ * @param {{top: number, right: number, bottom: number, left: number}} padding
+ * @returns {[number, number]} size after subtracting padding
+ */
+export function sizeMinusPadding(size: [number, number], padding: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}): [number, number];
+/**
+ * Returns a size scaled by a ratio. The result will be an array of integers.
+ */
+export function scaleSize(size: any, ratio: any, dest: any): any;
+/**
+ * Returns padding object scaled by a ratio
+ */
+export function scalePadding(padding: any, ratio: any): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export function sizeForElement(element: any): number[];

package/dist/components/molecules/canvas-map/lib/util/size.js

@@ -0,0 +1,53 @@
+function hasArea(size) {
+  return size[0] > 0 && size[1] > 0;
+}
+function sizeMinusPadding(size, padding) {
+  let newSize = [...size];
+  if (padding) {
+    newSize = [
+      size[0] - padding.left - padding.right,
+      size[1] - padding.top - padding.bottom
+    ];
+  }
+  return newSize;
+}
+function scaleSize(size, ratio, dest) {
+  if (dest === void 0) {
+    dest = [0, 0];
+  }
+  dest[0] = size[0] * ratio + 0.5 | 0;
+  dest[1] = size[1] * ratio + 0.5 | 0;
+  return dest;
+}
+function scalePadding(padding, ratio) {
+  const scaled = {
+    top: Math.round(padding.top * ratio),
+    right: Math.round(padding.right * ratio),
+    bottom: Math.round(padding.bottom * ratio),
+    left: Math.round(padding.left * ratio)
+  };
+  return scaled;
+}
+function sizeForElement(element) {
+  const computedStyle = getComputedStyle(element);
+  if (!computedStyle) return null;
+  let size;
+  const width = element.offsetWidth - parseFloat(computedStyle["borderLeftWidth"]) - parseFloat(computedStyle["paddingLeft"]) - parseFloat(computedStyle["paddingRight"]) - parseFloat(computedStyle["borderRightWidth"]);
+  const height = element.offsetHeight - parseFloat(computedStyle["borderTopWidth"]) - parseFloat(computedStyle["paddingTop"]) - parseFloat(computedStyle["paddingBottom"]) - parseFloat(computedStyle["borderBottomWidth"]);
+  if (!isNaN(width) && !isNaN(height)) {
+    size = [width, height];
+    if (!hasArea(size) && !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)) {
+      console.warn(
+        "No map visible because the map container's width or height are 0."
+      );
+    }
+  }
+  return size;
+}
+export {
+  hasArea,
+  scalePadding,
+  scaleSize,
+  sizeForElement,
+  sizeMinusPadding
+};

package/dist/components/molecules/canvas-map/lib/util/toRgba.d.ts

@@ -0,0 +1 @@
+export function toRgba(color: any, opacity?: number): string;

package/dist/components/molecules/canvas-map/lib/util/toRgba.js

@@ -0,0 +1,25 @@
+function toRgba(color, opacity = 1) {
+  color = color.replace(/\s+/g, "").toLowerCase();
+  if (color.startsWith("#")) {
+    color = color.replace(/^#/, "");
+    if (color.length === 3) {
+      color = color.split("").map((char) => char + char).join("");
+    }
+    let r = parseInt(color.substring(0, 2), 16);
+    let g = parseInt(color.substring(2, 4), 16);
+    let b = parseInt(color.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  let rgbaMatch = color.match(/^rgba?\((\d+),(\d+),(\d+)(?:,(\d+(\.\d+)?))?\)$/);
+  if (rgbaMatch) {
+    let r = parseInt(rgbaMatch[1], 10);
+    let g = parseInt(rgbaMatch[2], 10);
+    let b = parseInt(rgbaMatch[3], 10);
+    let a = rgbaMatch[4] !== void 0 ? parseFloat(rgbaMatch[4]) : opacity;
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+  }
+  throw new Error("Unsupported color format");
+}
+export {
+  toRgba
+};

package/dist/components/molecules/canvas-map/lib/util/uid.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generates a unique ID for an object. Unique IDs are generated
+ * as a strictly increasing sequence.
+ */
+export function createUid(): string;

package/dist/components/molecules/canvas-map/lib/util/uid.js

@@ -0,0 +1,7 @@
+let _uidCounter = 0;
+function createUid() {
+  return String(++_uidCounter);
+}
+export {
+  createUid
+};

package/dist/components/molecules/canvas-map/lib/util/zoomLevel.d.ts

@@ -0,0 +1,2 @@
+export function zoomLevelToZoomScale(zoomLevel: any, initialResolution: any): number;
+export function zoomLevelForResolution(currentResolution: any): number;

package/dist/components/molecules/canvas-map/lib/util/zoomLevel.js

@@ -0,0 +1,14 @@
+const BASE_RESOLUTION = 156543.03392;
+function zoomLevelToZoomScale(zoomLevel, initialResolution) {
+  const resolution = BASE_RESOLUTION / Math.pow(2, zoomLevel);
+  const zoomScale = initialResolution / resolution;
+  return zoomScale;
+}
+function zoomLevelForResolution(currentResolution) {
+  const zoomLevel = Math.log2(BASE_RESOLUTION / currentResolution);
+  return zoomLevel;
+}
+export {
+  zoomLevelForResolution,
+  zoomLevelToZoomScale
+};

package/dist/components/molecules/canvas-map/style.module.scss.js

@@ -0,0 +1,20 @@
+const mapContainer = "_mapContainer_1ogf3_9";
+const helpTextContainer = "_helpTextContainer_1ogf3_15";
+const helpText = "_helpText_1ogf3_15";
+const desktopHelpText = "_desktopHelpText_1ogf3_40";
+const mobileHelpText = "_mobileHelpText_1ogf3_48";
+const styles = {
+  mapContainer,
+  helpTextContainer,
+  helpText,
+  desktopHelpText,
+  mobileHelpText
+};
+export {
+  styles as default,
+  desktopHelpText,
+  helpText,
+  helpTextContainer,
+  mapContainer,
+  mobileHelpText
+};

package/dist/components/molecules/column-chart/column-chart-example.d.ts

@@ -0,0 +1,35 @@
+export namespace example {
+    namespace sop {
+        let numResults: string;
+        let numCouncils: string;
+        let parties: ({
+            paId: number;
+            name: string;
+            abbreviation: string;
+            totalCouncils: number;
+            changeInControl: number;
+            seatsWon: number;
+            netChangeInSeats: number;
+            heldCouncils: string[];
+            lostCouncils: string[];
+            gainedCouncils: string[];
+            totalGainedCouncils: number;
+            totalLostCouncils: number;
+            totalHeldCouncils: number;
+        } | {
+            name: string;
+            abbreviation: string;
+            totalCouncils: number;
+            changeInControl: number;
+            seatsWon: number;
+            netChangeInSeats: number;
+            heldCouncils: string[];
+            lostCouncils: string[];
+            gainedCouncils: string[];
+            totalGainedCouncils: number;
+            totalLostCouncils: number;
+            totalHeldCouncils: number;
+            paId?: undefined;
+        })[];
+    }
+}

package/dist/components/molecules/column-chart/column-chart-util.d.ts

@@ -0,0 +1 @@
+export function scaleLinear(domain: any, range: any): (x: any) => number;

package/dist/components/molecules/column-chart/index.d.ts

@@ -0,0 +1,11 @@
+export function ColumnChart({ columns, maxValue, minValue, chartHeight, chartWidth, columnWidth, columnPadding, styles, }: {
+    columns: any;
+    maxValue: any;
+    minValue: any;
+    chartHeight: any;
+    chartWidth: any;
+    columnWidth: any;
+    columnPadding: any;
+    styles: any;
+}): import("preact").JSX.Element;
+export default ColumnChart;

package/dist/components/molecules/column-chart/index.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import { scaleLinear } from "d3-scale";
+const ColumnChart = ({
+  columns,
+  maxValue,
+  minValue,
+  chartHeight,
+  chartWidth,
+  columnWidth,
+  columnPadding,
+  styles
+}) => {
+  styles = mergeStyles(defaultStyles, styles);
+  const yScale = scaleLinear([maxValue, minValue], [0, chartHeight]);
+  const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
+  let marginBottom = minValue < 0 ? 0 : 40;
+  return /* @__PURE__ */ jsxs("svg", { width: chartWidth, height: chartHeight + marginBottom, children: [
+    columns.map((column, index) => {
+      const getHeight = (input) => {
+        return yScale(0) - yScale(input);
+      };
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: index * totalColumnWidth,
+            height: getHeight(Math.abs(column.value)),
+            width: columnWidth,
+            y: column.value > 0 ? yScale(column.value) : yScale(0),
+            fill: column.color,
+            className: `${styles.bar} fill-color--${column.id}`,
+            id: column.id
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: styles.text,
+            x: index * totalColumnWidth + 2,
+            y: column.value < 0 ? yScale(0) - 6 : yScale(0) + 20,
+            children: column.label
+          }
+        )
+      ] }, index);
+    }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: styles.axis,
+        x: 0,
+        y: yScale(0),
+        width: chartWidth,
+        height: 1
+      }
+    )
+  ] });
+};
+export {
+  ColumnChart,
+  ColumnChart as default
+};

package/dist/components/molecules/column-chart/style.module.css.js

@@ -0,0 +1,14 @@
+const text = "_text_1ci1k_1";
+const axis = "_axis_1ci1k_6";
+const bar = "_bar_1ci1k_10";
+const defaultStyles = {
+  text,
+  axis,
+  bar
+};
+export {
+  axis,
+  bar,
+  defaultStyles as default,
+  text
+};

package/dist/components/molecules/control-change/index.d.ts

@@ -0,0 +1,6 @@
+export function ControlChange({ previous, next, text, styles }: {
+    previous: any;
+    next: any;
+    text: any;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/control-change/index.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "preact/hooks";
+import { GradientIcon } from "../../particles/gradient-icon/index.js";
+import "../../particles/info-button/index.js";
+import { CircleIcon } from "../../particles/circle-icon/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import defaultStyles from "./style.module.css.js";
+const ControlChange = ({ previous, next, text, styles }) => {
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  let hasChanged = next !== previous;
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    hasChanged ? /* @__PURE__ */ jsx(
+      GradientIcon,
+      {
+        previous,
+        next,
+        styles: {
+          previous: styles.previous,
+          next: styles.next
+        }
+      }
+    ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
+    /* @__PURE__ */ jsx("strong", { className: styles.text, children: text })
+  ] });
+};
+export {
+  ControlChange
+};

package/dist/components/molecules/control-change/style.module.css.js

@@ -0,0 +1,11 @@
+const text = "_text_1b8t2_1";
+const container = "_container_1b8t2_10";
+const defaultStyles = {
+  text,
+  container
+};
+export {
+  container,
+  defaultStyles as default,
+  text
+};

package/dist/components/molecules/dropdown/index.d.ts

@@ -0,0 +1,11 @@
+export function Dropdown({ title, hint, options, onSelect, multipleSelect, iconForSelectedIndexPaths, collapseOnSelect, expandByDefault, styles, }: {
+    title: any;
+    hint: any;
+    options: any;
+    onSelect: any;
+    multipleSelect?: boolean;
+    iconForSelectedIndexPaths: any;
+    collapseOnSelect?: boolean;
+    expandByDefault?: boolean;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/dropdown/index.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
+import { useMemo, useState, useCallback } from "preact/hooks";
+import { Chevron } from "../../particles/chevron/index.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import "../../particles/info-button/index.js";
+import "../../particles/relative-time-sentence/index.js";
+import defaultStyles from "./style.module.css.js";
+function Dropdown({
+  title,
+  hint,
+  options,
+  onSelect,
+  multipleSelect = false,
+  iconForSelectedIndexPaths,
+  collapseOnSelect = false,
+  expandByDefault = true,
+  styles
+}) {
+  styles = mergeStyles(defaultStyles, styles);
+  const optionGroups = useMemo(() => {
+    const containsOptionGroups = "options" in options[0];
+    if (!containsOptionGroups) {
+      options.forEach((option, index) => {
+        option.index = index;
+        option.group = 0;
+      });
+      return [{ group: 0, options }];
+    }
+    for (const [groupIndex, group] of options.entries()) {
+      for (const [optionIndex, option] of group.options.entries()) {
+        option.group = groupIndex;
+        option.index = optionIndex;
+      }
+      group.index = groupIndex;
+    }
+    return options;
+  }, [options]);
+  const [expanded, setExpanded] = useState(expandByDefault);
+  const [selectedIndexPaths, setSelectedIndexPaths] = useState(
+    () => createInitialIndexPaths(optionGroups, multipleSelect)
+  );
+  const onOptionClick = useCallback(
+    (option, index) => {
+      const indexPath = [option.group, index];
+      if (multipleSelect) {
+        setSelectedIndexPaths((selectedIndexPaths2) => {
+          selectedIndexPaths2[option.group] = indexPath;
+          return [...selectedIndexPaths2];
+        });
+      } else {
+        setSelectedIndexPaths([indexPath]);
+      }
+      if (onSelect) onSelect(option, indexPath);
+      if (collapseOnSelect) setExpanded(false);
+    },
+    [onSelect, collapseOnSelect, multipleSelect]
+  );
+  const iconForSelectedOption = useMemo(() => {
+    if (multipleSelect && iconForSelectedIndexPaths) {
+      return iconForSelectedIndexPaths(selectedIndexPaths);
+    }
+    const firstSelectedIndexPath = selectedIndexPaths[0];
+    const selectedOption = optionGroups[firstSelectedIndexPath[0]].options[firstSelectedIndexPath[1]];
+    return selectedOption.icon;
+  }, [
+    optionGroups,
+    selectedIndexPaths,
+    iconForSelectedIndexPaths,
+    multipleSelect
+  ]);
+  const selectedIndexForGroup = useCallback(
+    (groupIndex) => {
+      if (multipleSelect) {
+        return selectedIndexPaths[groupIndex][1];
+      } else if (selectedIndexPaths[0][0] === groupIndex) {
+        return selectedIndexPaths[0][1];
+      }
+      return -1;
+    },
+    [selectedIndexPaths, multipleSelect]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: styles.button,
+        onClick: () => setExpanded((current) => !current),
+        children: [
+          /* @__PURE__ */ jsx("img", { src: iconForSelectedOption, className: styles.icon }),
+          /* @__PURE__ */ jsx("span", { className: styles.title, children: title }),
+          /* @__PURE__ */ jsx(
+            Chevron,
+            {
+              active: true,
+              size: "large",
+              direction: expanded ? "up" : "down"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.clearFix }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.popout,
+        style: { visibility: expanded ? "visible" : "hidden" },
+        children: [
+          hint && /* @__PURE__ */ jsx("p", { className: styles.hint, children: hint }),
+          optionGroups.map((group, index) => {
+            return /* @__PURE__ */ jsx(
+              OptionGroup,
+              {
+                ...group,
+                selectedIndex: selectedIndexForGroup(index),
+                onOptionClick,
+                styles
+              },
+              index
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+function OptionGroup({
+  title,
+  className,
+  options,
+  selectedIndex,
+  onOptionClick,
+  styles
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx("span", { className: styles.groupHeader, children: title }),
+    options.map((option) => {
+      const isSelected = option.index === selectedIndex;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: [
+            styles.option,
+            className,
+            isSelected ? styles.selected : ""
+          ].join(" "),
+          onClick: () => onOptionClick(option, option.index),
+          children: [
+            /* @__PURE__ */ jsx("img", { src: option.icon, className: styles.optionIcon }),
+            /* @__PURE__ */ jsxs("div", { className: styles.optionText, children: [
+              /* @__PURE__ */ jsx("h4", { className: styles.optionTitle, children: option.title }),
+              /* @__PURE__ */ jsx("p", { className: styles.optionDescription, children: option.description })
+            ] }),
+            isSelected && /* @__PURE__ */ jsx("div", { className: styles.checkmark, children: /* @__PURE__ */ jsx(Checkmark, {}) })
+          ]
+        },
+        option.title
+      );
+    })
+  ] });
+}
+function Checkmark() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "11",
+      height: "9",
+      viewBox: "0 0 11 9",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M0.631814 4.43687L0.0839844 4.9847L2.82313 8.8195H3.08335L10.9173 0.711624L10.3695 0.17749L3.08335 6.77884L0.631814 4.43687Z",
+          className: defaultStyles.checkmarkPath
+        }
+      )
+    }
+  );
+}
+function createInitialIndexPaths(groups, multipleSelect) {
+  if (multipleSelect) {
+    return groups.map((group) => [group.index, 0]);
+  }
+  return [[0, 0]];
+}
+export {
+  Dropdown
+};