@guardian/interactive-component-library 0.1.0-alpha.22 → 0.1.0-alpha.24

package/dist/interactive-component-library.js

@@ -10,7 +10,7 @@ const group = "_group_b5io0_5";
 const rotated = "_rotated_b5io0_10";
 const path$4 = "_path_b5io0_14";
 const active = "_active_b5io0_18";
-const defaultStyles$t = {
+const defaultStyles$v = {
   svg: svg$9,
   group,
   rotated,
@@ -50,13 +50,13 @@ function Chevron({
   styles: styles2
 }) {
   const defaultStylesCopy = {
-    ...defaultStyles$t
+    ...defaultStyles$v
   };
   if (active2) {
-    defaultStylesCopy.path = mergeStyles(defaultStyles$t.path, defaultStyles$t.active);
+    defaultStylesCopy.path = mergeStyles(defaultStyles$v.path, defaultStyles$v.active);
   }
   if (direction === DIRECTION.up) {
-    defaultStylesCopy.group = mergeStyles(defaultStyles$t.group, defaultStyles$t.rotated);
+    defaultStylesCopy.group = mergeStyles(defaultStyles$v.group, defaultStyles$v.rotated);
   }
   styles2 = mergeStyles(defaultStylesCopy, styles2);
   return size === SIZE.small ? jsx(SmallChevron, {
@@ -106,12 +106,12 @@ function LargeChevron({
     })
   });
 }
-const container$5 = "_container_jzalm_1";
+const container$7 = "_container_jzalm_1";
 const dot = "_dot_jzalm_6";
 const circle$2 = "_circle_jzalm_13";
 const text$3 = "_text_jzalm_17";
-const defaultStyles$s = {
-  container: container$5,
+const defaultStyles$u = {
+  container: container$7,
   dot,
   circle: circle$2,
   text: text$3
@@ -127,10 +127,10 @@ const LegendItem = ({
   abbreviation
 }) => {
   const defaultStylesCopy = {
-    ...defaultStyles$s
+    ...defaultStyles$u
   };
   if (dotType === DOT_TYPE.round) {
-    defaultStylesCopy.dot = mergeStyles(defaultStyles$s.dot, defaultStyles$s.circle);
+    defaultStylesCopy.dot = mergeStyles(defaultStyles$u.dot, defaultStyles$u.circle);
   }
   styles2 = mergeStyles(defaultStylesCopy, styles2);
   return jsxs("div", {
@@ -146,7 +146,7 @@ const LegendItem = ({
 const bar$2 = "_bar_bf839_1";
 const label$1 = "_label_bf839_5";
 const backgroundRect = "_backgroundRect_bf839_11";
-const defaultStyles$r = {
+const defaultStyles$t = {
   bar: bar$2,
   label: label$1,
   backgroundRect
@@ -202,7 +202,7 @@ function StackedBar({
   const rectElements = useRef([]);
   const textElements = useRef([]);
   styles2 = mergeStyles({
-    ...defaultStyles$r
+    ...defaultStyles$t
   }, styles2);
   const svgHeight = labelType === LabelType.hanging && !hideLabels ? height + 20 : height;
   const renderLabel = (config, i) => jsx("text", {
@@ -342,7 +342,7 @@ const [useGradients, setGradients, getGradients] = createStore({});
 const svg$8 = "_svg_1cajk_6";
 const previous = "_previous_1cajk_12";
 const next = "_next_1cajk_16";
-const defaultStyles$q = {
+const defaultStyles$s = {
   svg: svg$8,
   previous,
   next
@@ -353,7 +353,7 @@ const GradientIcon = (props) => {
     next: next2,
     styles: styles2
   } = props;
-  styles2 = mergeStyles(defaultStyles$q, styles2);
+  styles2 = mergeStyles(defaultStyles$s, styles2);
   const gradientId = `gv-gradient-def-${previous2}-${next2}`;
   const gradients = useGradients();
   useEffect(() => {
@@ -420,9 +420,123 @@ function GradientDefs({
     })
   });
 }
+const unit = "_unit_mo5d9_1";
+const container$6 = "_container_mo5d9_6";
+const defaultStyles$r = {
+  unit,
+  container: container$6
+};
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(() => {
+    if (typeof window === "undefined")
+      return {
+        width: 0,
+        height: 0
+      };
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  });
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return windowSize;
+}
+function useContainerSize(containerRef) {
+  const windowSize = useWindowSize();
+  const [containerSize, setContainerSize] = useState();
+  useLayoutEffect(() => {
+    const container2 = containerRef.current;
+    if (!container2)
+      return;
+    setContainerSize({
+      width: container2.clientWidth,
+      height: container2.clientHeight
+    });
+  }, [containerRef, windowSize]);
+  return containerSize;
+}
+const WaffleType = {
+  circle: "circle",
+  square: "square"
+};
+const WaffleUnit = ({
+  type,
+  attributes
+}) => type === WaffleType.square ? jsx("rect", {
+  ...attributes
+}) : jsx("circle", {
+  ...attributes
+});
+const Waffle = ({
+  units,
+  numberOfRows,
+  type = WaffleType.circle,
+  idAccessor,
+  onMouseOver,
+  styles: styles2
+}) => {
+  const containerRef = useRef();
+  const containerSize = useContainerSize(containerRef);
+  const width = containerSize ? containerSize.width : 0;
+  const total = units.length;
+  const columns = Math.ceil(total / numberOfRows);
+  const unitWidth = width / columns;
+  const unitHeight = unitWidth;
+  const height = numberOfRows * unitHeight;
+  styles2 = mergeStyles(defaultStyles$r, styles2);
+  return jsx("div", {
+    ref: containerRef,
+    className: styles2.container,
+    children: containerSize && jsx("svg", {
+      viewBox: `0 0 ${width} ${height}`,
+      class: styles2.svg,
+      children: jsx("g", {
+        children: units.map((unit2, j) => {
+          let attributes;
+          if (type === WaffleType.square) {
+            attributes = {
+              id: unit2[idAccessor] || `w-${j}`,
+              onMouseOver: (e) => onMouseOver(unit2, e),
+              class: `${styles2.unit} ${unit2.class}`,
+              height: unitHeight,
+              width: unitWidth,
+              x: unitWidth * Math.floor(j / numberOfRows),
+              y: unitHeight * (j % numberOfRows)
+            };
+          } else {
+            attributes = {
+              id: unit2[idAccessor] || `w-${j}`,
+              onMouseOver: (e) => onMouseOver(unit2, e),
+              class: `${styles2.unit} ${unit2.class}`,
+              r: unitWidth / 2,
+              transform: `translate(${unitWidth * Math.floor(j / numberOfRows) + unitWidth / 2}, ${unitHeight * (j % numberOfRows) + unitHeight / 2})`
+            };
+          }
+          return jsx(WaffleUnit, {
+            type,
+            attributes
+          }, `wu-${j}`);
+        })
+      })
+    })
+  });
+};
 const button$5 = "_button_oqopj_1";
 const svg$7 = "_svg_oqopj_15";
-const defaultStyles$p = {
+const defaultStyles$q = {
   button: button$5,
   svg: svg$7
 };
@@ -431,7 +545,7 @@ const InfoButton = forwardRef(({
   styles: styles2
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$p
+    ...defaultStyles$q
   }, styles2);
   return jsx("button", {
     ref,
@@ -450,7 +564,7 @@ const InfoButton = forwardRef(({
 const svg$6 = "_svg_1v49v_1";
 const circle$1 = "_circle_1v49v_5";
 const pulse = "_pulse_1v49v_9";
-const defaultStyles$o = {
+const defaultStyles$p = {
   svg: svg$6,
   circle: circle$1,
   pulse
@@ -460,7 +574,7 @@ const CircleIcon = ({
   pulse: pulse2 = false,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$o, styles2);
+  styles2 = mergeStyles(defaultStyles$p, styles2);
   return jsx("svg", {
     style: styles2.svg,
     fill: "none",
@@ -480,7 +594,7 @@ const CircleIcon = ({
   });
 };
 const text$2 = "_text_1okyv_1";
-const defaultStyles$n = {
+const defaultStyles$o = {
   text: text$2
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -830,7 +944,7 @@ const RelativeTimeSentence = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$n
+    ...defaultStyles$o
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
@@ -840,7 +954,7 @@ const RelativeTimeSentence = ({
 };
 const pageContainer = "_pageContainer_1s0yq_9";
 const sideBorders = "_sideBorders_1s0yq_42";
-const defaultStyles$m = {
+const defaultStyles$n = {
   pageContainer,
   sideBorders
 };
@@ -852,17 +966,17 @@ function Container({
   const {
     pageContainer: pageContainer2,
     sideBorders: sideBordersStyle
-  } = mergeStyles(defaultStyles$m, styles2);
+  } = mergeStyles(defaultStyles$n, styles2);
   return jsx("div", {
     className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
     children
   });
 }
-const wrapper = "_wrapper_5oj1x_9";
+const wrapper$1 = "_wrapper_5oj1x_9";
 const bar$1 = "_bar_5oj1x_14";
 const zero = "_zero_5oj1x_19";
-const defaultStyles$l = {
-  wrapper,
+const defaultStyles$m = {
+  wrapper: wrapper$1,
   bar: bar$1,
   zero
 };
@@ -882,7 +996,7 @@ function ChangeBar({
   let thisColor = ` bg-color--${party}`;
   let zeroStyles = ` height: ${height};`;
   styles2 = mergeStyles({
-    ...defaultStyles$l
+    ...defaultStyles$m
   }, styles2);
   return jsxs("div", {
     className: styles2.wrapper,
@@ -900,7 +1014,7 @@ const svg$5 = "_svg_886i1_9";
 const dividingLineColor = "_dividingLineColor_886i1_16";
 const square = "_square_886i1_20";
 const corner = "_corner_886i1_24";
-const defaultStyles$k = {
+const defaultStyles$l = {
   svg: svg$5,
   dividingLineColor,
   square,
@@ -913,7 +1027,7 @@ const SquareCutCornerIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$k
+    ...defaultStyles$l
   }, styles2);
   let cornerSize = squareSize * 0.625;
   let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -951,7 +1065,7 @@ const stackedGridRotateItems0 = "_stackedGridRotateItems0_6whof_11";
 const stackedGridRotateItems90 = "_stackedGridRotateItems90_6whof_17";
 const stackedGridRotateItems180 = "_stackedGridRotateItems180_6whof_23";
 const stackedGridRotateItems270 = "_stackedGridRotateItems270_6whof_29";
-const defaultStyles$j = {
+const defaultStyles$k = {
   stackedGridContainer,
   stackedGridRotateItems0,
   stackedGridRotateItems90,
@@ -982,7 +1096,7 @@ const StackedGrid = ({
 }) => {
   let containerFlip = getContainerFlip(fromBottom, fromLeft);
   let itemRotateClass = getItemRotate(fromBottom, fromLeft);
-  styles2 = mergeStyles(defaultStyles$j, styles2);
+  styles2 = mergeStyles(defaultStyles$k, styles2);
   return jsx("div", {
     style: {
       transform: containerFlip
@@ -993,7 +1107,7 @@ const StackedGrid = ({
 };
 const svg$4 = "_svg_l2fsl_9";
 const squareFill = "_squareFill_l2fsl_16";
-const defaultStyles$i = {
+const defaultStyles$j = {
   svg: svg$4,
   squareFill
 };
@@ -1003,7 +1117,7 @@ const SquareIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$i
+    ...defaultStyles$j
   }, styles2);
   return jsx("svg", {
     width: size,
@@ -1019,9 +1133,9 @@ const SquareIcon = ({
     })
   });
 };
-const button$4 = "_button_1fees_1";
-const icon$2 = "_icon_1fees_6";
-const defaultStyles$h = {
+const button$4 = "_button_1kqfn_1";
+const icon$2 = "_icon_1kqfn_6";
+const defaultStyles$i = {
   button: button$4,
   icon: icon$2
 };
@@ -1031,7 +1145,7 @@ function ArrowButton({
   styles: styles2,
   onClick
 }) {
-  styles2 = mergeStyles(defaultStyles$h, styles2);
+  styles2 = mergeStyles(defaultStyles$i, styles2);
   return jsx("button", {
     className: styles2.button,
     disabled,
@@ -1055,9 +1169,9 @@ function ArrowButton({
     })
   });
 }
-const button$3 = "_button_3521c_1";
-const buttonInner$1 = "_buttonInner_3521c_6";
-const defaultStyles$g = {
+const button$3 = "_button_s6ell_1";
+const buttonInner$1 = "_buttonInner_s6ell_6";
+const defaultStyles$h = {
   button: button$3,
   buttonInner: buttonInner$1
 };
@@ -1067,7 +1181,7 @@ function Button({
   styles: styles2,
   children
 }) {
-  styles2 = mergeStyles(defaultStyles$g, styles2);
+  styles2 = mergeStyles(defaultStyles$h, styles2);
   return jsx("button", {
     className: styles2.button,
     "data-type": type,
@@ -1078,11 +1192,11 @@ function Button({
     })
   });
 }
-const button$2 = "_button_125im_1";
-const buttonBorder = "_buttonBorder_125im_11";
-const svg$3 = "_svg_125im_19";
-const path$3 = "_path_125im_25";
-const defaultStyles$f = {
+const button$2 = "_button_nr8bh_1";
+const buttonBorder = "_buttonBorder_nr8bh_11";
+const svg$3 = "_svg_nr8bh_19";
+const path$3 = "_path_nr8bh_25";
+const defaultStyles$g = {
   button: button$2,
   buttonBorder,
   svg: svg$3,
@@ -1093,7 +1207,7 @@ function CloseButton({
   onClick,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$f, styles2);
+  styles2 = mergeStyles(defaultStyles$g, styles2);
   return jsx("button", {
     className: [styles2.button, border && styles2.buttonBorder].join(" "),
     onClick,
@@ -1111,10 +1225,10 @@ function CloseButton({
     })
   });
 }
-const container$4 = "_container_tq3ke_1";
+const container$5 = "_container_tq3ke_1";
 const slot = "_slot_tq3ke_5";
-const defaultStyles$e = {
-  container: container$4,
+const defaultStyles$f = {
+  container: container$5,
   slot
 };
 function AdSlot({
@@ -1124,7 +1238,7 @@ function AdSlot({
 }) {
   var _a, _b, _c;
   const slotId = `dfp-ad--${name2}`;
-  styles2 = mergeStyles(defaultStyles$e, styles2);
+  styles2 = mergeStyles(defaultStyles$f, styles2);
   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("|");
@@ -1269,7 +1383,7 @@ const headerCell = "_headerCell_1dg64_32";
 const headerCellButton = "_headerCellButton_1dg64_40";
 const bodyRow = "_bodyRow_1dg64_49";
 const bodyCell = "_bodyCell_1dg64_54";
-const defaultStyles$d = {
+const defaultStyles$e = {
   table,
   hideHeader,
   hideHeaderNoBorder,
@@ -1310,7 +1424,7 @@ function Table({
       };
     });
   };
-  styles2 = mergeStyles(defaultStyles$d, styles2);
+  styles2 = mergeStyles(defaultStyles$e, styles2);
   return jsxs("table", {
     className: styles2.table,
     cellSpacing: 0,
@@ -1372,47 +1486,19 @@ function HeaderCell({
     })]
   });
 }
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState(() => {
-    if (typeof window === "undefined")
-      return {
-        width: 0,
-        height: 0
-      };
-    return {
-      width: window.innerWidth,
-      height: window.innerHeight
-    };
-  });
-  useEffect(() => {
-    if (typeof window === "undefined")
-      return;
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    }
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return windowSize;
-}
 const slopeChartContainer = "_slopeChartContainer_gj7pr_1";
 const svg$2 = "_svg_gj7pr_5";
-const line = "_line_gj7pr_9";
+const line$1 = "_line_gj7pr_9";
 const circle = "_circle_gj7pr_14";
 const label = "_label_gj7pr_18";
 const y1Label = "_y1Label_gj7pr_24";
 const y2Label = "_y2Label_gj7pr_28";
 const axis$1 = "_axis_gj7pr_32";
 const axisLabel = "_axisLabel_gj7pr_37";
-const defaultStyles$c = {
+const defaultStyles$d = {
   slopeChartContainer,
   svg: svg$2,
-  line,
+  line: line$1,
   circle,
   label,
   y1Label,
@@ -1461,7 +1547,7 @@ const SlopeChart = ({
     return positionLabels(labels);
   }, [lines, y2Label2, yScale]);
   styles2 = mergeStyles({
-    ...defaultStyles$c
+    ...defaultStyles$d
   }, styles2);
   const chart = jsx("svg", {
     class: styles2.svg,
@@ -1554,7 +1640,7 @@ function pointInsideRect(point, rect) {
   return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
 }
 const tooltip = "_tooltip_11t5d_1";
-const defaultStyles$b = {
+const defaultStyles$c = {
   tooltip
 };
 function Tooltip({
@@ -1573,7 +1659,7 @@ function Tooltip({
   });
   const [displayElement, setDisplayElement] = useState(null);
   const tooltipRef = useRef();
-  styles2 = mergeStyles(defaultStyles$b, styles2);
+  styles2 = mergeStyles(defaultStyles$c, styles2);
   useEffect(() => {
     setDisplayElement(document.querySelector("body"));
     return () => {
@@ -1682,10 +1768,10 @@ function tooltipPositionForRect({
   return newPosition;
 }
 const text$1 = "_text_1b8t2_1";
-const container$3 = "_container_1b8t2_10";
-const defaultStyles$a = {
+const container$4 = "_container_1b8t2_10";
+const defaultStyles$b = {
   text: text$1,
-  container: container$3
+  container: container$4
 };
 const ControlChange = ({
   previous: previous2,
@@ -1694,7 +1780,7 @@ const ControlChange = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$a
+    ...defaultStyles$b
   }, styles2);
   let hasChanged = next2 !== previous2;
   return jsx("div", {
@@ -1718,6 +1804,34 @@ const ControlChange = ({
     })
   });
 };
+const wrapper = "_wrapper_8vo05_1";
+const line = "_line_8vo05_5";
+const halfLineText = "_halfLineText_8vo05_15";
+const defaultStyles$a = {
+  wrapper,
+  line,
+  halfLineText
+};
+const FirstPastThePostWaffle = ({
+  styles: styles2,
+  children,
+  lineOverHang
+}) => {
+  styles2 = mergeStyles(defaultStyles$a, styles2);
+  return jsxs("div", {
+    class: styles2.wrapper,
+    children: [jsx("p", {
+      style: {
+        height: lineOverHang + 20
+      },
+      class: styles2.halfLineText,
+      children: children.halfLineText
+    }), jsx("div", {
+      class: styles2.line,
+      children: " "
+    }), children.waffle]
+  });
+};
 const toplineResult = "_toplineResult_49z3u_9";
 const primaryname = "_primaryname_49z3u_14";
 const secondaryname = "_secondaryname_49z3u_29";
@@ -1844,14 +1958,22 @@ const PageSection = forwardRef(({
   styles2 = mergeStyles({
     ...defaultStyles$8
   }, styles2);
+  const [minHeight, setMinHeight] = useState("auto");
+  const headerRef = useRef();
+  useLayoutEffect(() => {
+    const headerElement = headerRef.current;
+    setMinHeight(headerElement.offsetHeight);
+  }, [children]);
   return jsxs("section", {
     ref,
     className: [styles2.section, borderTop2 && styles2.borderTop].join(" "),
     style: {
-      "--background-color": backgroundColor
+      "--background-color": backgroundColor,
+      minHeight
     },
     children: [jsx("div", {
       className: styles2.header,
+      ref: headerRef,
       children: children.header
     }), jsx("div", {
       className: styles2.content,
@@ -1913,7 +2035,7 @@ const ColumnChart = ({
     })]
   });
 };
-const container$2 = "_container_1snyq_1";
+const container$3 = "_container_1snyq_1";
 const img = "_img_1snyq_7";
 const title$2 = "_title_1snyq_15";
 const subtitle = "_subtitle_1snyq_31";
@@ -1921,7 +2043,7 @@ const small = "_small_1snyq_41";
 const blurb = "_blurb_1snyq_51";
 const footnote = "_footnote_1snyq_59";
 const defaultStyles$6 = {
-  container: container$2,
+  container: container$3,
   img,
   title: title$2,
   subtitle,
@@ -2361,24 +2483,10 @@ function SVGRenderer({
     })
   });
 }
-function useContainerSize(containerRef) {
-  const windowSize = useWindowSize();
-  const [containerSize, setContainerSize] = useState();
-  useLayoutEffect(() => {
-    const container2 = containerRef.current;
-    if (!container2)
-      return;
-    setContainerSize({
-      width: container2.clientWidth,
-      height: container2.clientHeight
-    });
-  }, [containerRef, windowSize]);
-  return containerSize;
-}
-const container$1 = "_container_cyrny_1";
+const container$2 = "_container_cyrny_1";
 const svg$1 = "_svg_cyrny_6";
 const styles$5 = {
-  container: container$1,
+  container: container$2,
   svg: svg$1
 };
 function dynamicPropValue(prop, d2, index2) {
@@ -2644,10 +2752,10 @@ const Map$1 = forwardRef(({
     })
   });
 });
-const container = "_container_azu4a_1";
+const container$1 = "_container_azu4a_1";
 const paragraph = "_paragraph_azu4a_12";
 const defaultStyles$4 = {
-  container,
+  container: container$1,
   paragraph
 };
 function ResultSummary({
@@ -2983,6 +3091,18 @@ function Modal({
         onClickOutside(event);
     }
   }, [onClickOutside, visible]);
+  useEffect(() => {
+    if (visible) {
+      window.addEventListener("scroll", onClick, {
+        once: true
+      });
+    }
+    return () => {
+      if (visible) {
+        window.removeEventListener("scroll", onClick);
+      }
+    };
+  }, [onClick, visible]);
   return createPortal(jsx(d, {
     in: visible,
     duration: 300,
@@ -3001,18 +3121,20 @@ function Modal({
     })
   }), document.body);
 }
-const button$1 = "_button_xeyqm_1";
-const icon = "_icon_xeyqm_17";
-const title$1 = "_title_xeyqm_22";
-const popout = "_popout_xeyqm_29";
-const hint = "_hint_xeyqm_44";
-const option = "_option_xeyqm_51";
-const optionIcon = "_optionIcon_xeyqm_71";
-const optionTitle = "_optionTitle_xeyqm_76";
-const optionDescription = "_optionDescription_xeyqm_84";
-const checkmark = "_checkmark_xeyqm_91";
-const checkmarkPath = "_checkmarkPath_xeyqm_97";
+const container = "_container_iozsb_1";
+const button$1 = "_button_iozsb_6";
+const icon = "_icon_iozsb_22";
+const title$1 = "_title_iozsb_27";
+const popout = "_popout_iozsb_34";
+const hint = "_hint_iozsb_51";
+const option = "_option_iozsb_58";
+const optionIcon = "_optionIcon_iozsb_79";
+const optionTitle = "_optionTitle_iozsb_84";
+const optionDescription = "_optionDescription_iozsb_92";
+const checkmark = "_checkmark_iozsb_99";
+const checkmarkPath = "_checkmarkPath_iozsb_105";
 const styles$2 = {
+  container,
   button: button$1,
   icon,
   title: title$1,
@@ -3029,20 +3151,25 @@ function Dropdown({
   title: title2,
   hint: hint2,
   options,
-  onSelect
+  onSelect,
+  collapseOnSelect = false,
+  expandByDefault = true
 }) {
-  const [expanded, setExpanded] = useState(true);
+  const [expanded, setExpanded] = useState(expandByDefault);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const onOptionClick = useCallback((option2, index2) => {
     setSelectedIndex(index2);
     if (onSelect)
       onSelect(option2, index2);
+    if (collapseOnSelect)
+      setExpanded(false);
   }, [onSelect]);
   const iconForSelectedOption = useMemo(() => {
     const selectedOption = options[selectedIndex];
     return selectedOption.icon;
   }, [options, selectedIndex]);
   return jsxs("div", {
+    className: styles$2.container,
     children: [jsxs("button", {
       className: styles$2.button,
       onClick: () => setExpanded((current) => !current),
@@ -3514,6 +3641,7 @@ export {
   Container,
   ControlChange,
   Dropdown,
+  FirstPastThePostWaffle,
   GradientIcon,
   GridType,
   InfoButton,
@@ -3540,6 +3668,8 @@ export {
   Ticker,
   Tooltip,
   ToplineResult,
+  Waffle,
+  WaffleType,
   useContainerSize,
   useTouchOrHover,
   useWindowSize