@charcoal-ui/react-sandbox 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/index.esm.js

@@ -1,8 +1,9 @@
 // src/components/Filter/index.tsx
-import React from "react";
+import * as React from "react";
 import styled, { css } from "styled-components";
 import { useComponentAbstraction } from "@charcoal-ui/react";
 import { maxWidth } from "@charcoal-ui/utils";
+import { jsx } from "react/jsx-runtime";
 var FilterButton = React.forwardRef(function FilterButton2({
   onClick,
   children,
@@ -10,16 +11,16 @@ var FilterButton = React.forwardRef(function FilterButton2({
   hover,
   reactive = false
 }, ref) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ButtonLike,
     {
       active,
       reactive,
       hover,
       onClick: active && !reactive ? void 0 : onClick,
-      ref
-    },
-    children
+      ref,
+      children
+    }
   );
 });
 var FilterIconButton = React.forwardRef(function FilterIconButton2({
@@ -31,7 +32,7 @@ var FilterIconButton = React.forwardRef(function FilterIconButton2({
   width,
   height
 }, ref) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     StyledButtonLike,
     {
       active,
@@ -40,9 +41,9 @@ var FilterIconButton = React.forwardRef(function FilterIconButton2({
       onClick: active && !reactive ? void 0 : onClick,
       ref,
       buttonWidth: width,
-      buttonHeight: height
-    },
-    children
+      buttonHeight: height,
+      children
+    }
   );
 });
 var FilterLink = React.forwardRef(function FilterLink2({
@@ -55,18 +56,18 @@ var FilterLink = React.forwardRef(function FilterLink2({
 }, ref) {
   const { Link } = useComponentAbstraction();
   if (active && !reactive) {
-    return /* @__PURE__ */ React.createElement(PlainElement, { active: true, hover, ref }, children);
+    return /* @__PURE__ */ jsx(PlainElement, { active: true, hover, ref, children });
   } else {
-    return /* @__PURE__ */ React.createElement(Link, { ...props, onClick }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(Link, { ...props, onClick, children: /* @__PURE__ */ jsx(
       PlainElement,
       {
         active,
         reactive,
         hover,
-        ref
-      },
-      children
-    ));
+        ref,
+        children
+      }
+    ) });
   }
 });
 var buttonCss = css`
@@ -129,7 +130,6 @@ var Filter = styled.div`
 var Filter_default = Filter;
 
 // src/components/HintText/index.tsx
-import React4 from "react";
 import styled5, { css as css2 } from "styled-components";
 
 // src/styled.ts
@@ -138,12 +138,11 @@ import { createTheme } from "@charcoal-ui/styled";
 var theme = createTheme(styled2);
 
 // src/components/icons/InfoIcon.tsx
-import React3 from "react";
 import styled4 from "styled-components";
 
 // src/components/icons/Base.tsx
-import React2 from "react";
 import styled3 from "styled-components";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 function IconBase({
   size: size3 = 24,
   viewBoxSize,
@@ -153,22 +152,22 @@ function IconBase({
   fillRule,
   clipRule
 }) {
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ jsx2(
     Icon,
     {
       viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
       size: size3,
-      currentColor
-    },
-    /* @__PURE__ */ React2.createElement(
-      IconBasePath,
-      {
-        path: path2,
-        transform,
-        fillRule,
-        clipRule
-      }
-    )
+      currentColor,
+      children: /* @__PURE__ */ jsx2(
+        IconBasePath,
+        {
+          path: path2,
+          transform,
+          fillRule,
+          clipRule
+        }
+      )
+    }
   );
 }
 var Icon = styled3.svg`
@@ -187,7 +186,7 @@ var IconBasePath = ({
   clipRule
 }) => {
   if (typeof path2 === "string") {
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ jsx2(
       "path",
       {
         d: path2,
@@ -197,25 +196,29 @@ var IconBasePath = ({
       }
     );
   } else {
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, path2);
+    return /* @__PURE__ */ jsx2(Fragment, { children: path2 });
   }
 };
 
 // src/components/icons/InfoIcon.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var size = 16;
 function InfoIcon() {
-  const path2 = /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    "path",
-    {
-      d: "M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183\n           0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
-    }
-  ), /* @__PURE__ */ React3.createElement(
-    Path,
-    {
-      d: "M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629\n           4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036\n           9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75\n           5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25\n           8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8\n           6.75C7.44772 6.75 7 7.19772 7 7.75Z"
-    }
-  ));
-  return /* @__PURE__ */ React3.createElement(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
+  const path2 = /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(
+      "path",
+      {
+        d: "M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183\n           0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Path,
+      {
+        d: "M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629\n           4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036\n           9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75\n           5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25\n           8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8\n           6.75C7.44772 6.75 7 7.19772 7 7.75Z"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx3(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
 }
 var Path = styled4.path`
   fill: ${({ theme: theme2 }) => theme2.color.surface1};
@@ -224,8 +227,12 @@ var Path = styled4.path`
 
 // src/components/HintText/index.tsx
 import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function HintText({ children, context, className }) {
-  return /* @__PURE__ */ React4.createElement(Container, { className, context }, /* @__PURE__ */ React4.createElement(IconWrap, null, /* @__PURE__ */ React4.createElement(InfoIcon, null)), /* @__PURE__ */ React4.createElement(Text, null, children));
+  return /* @__PURE__ */ jsxs2(Container, { className, context, children: [
+    /* @__PURE__ */ jsx4(IconWrap, { children: /* @__PURE__ */ jsx4(InfoIcon, {}) }),
+    /* @__PURE__ */ jsx4(Text, { children })
+  ] });
 }
 var Container = styled5.div.attrs(
   styledProps
@@ -292,7 +299,8 @@ function contextToProps(context) {
 }
 
 // src/components/Layout/index.tsx
-import React5, { useContext } from "react";
+import { useContext } from "react";
+import * as React2 from "react";
 import styled6, { createGlobalStyle, css as css3 } from "styled-components";
 
 // src/foundation/contants.ts
@@ -423,7 +431,8 @@ function useDebounceAnimationState(defaultValue) {
 // src/components/Layout/index.tsx
 import { columnSystem as columnSystem2, COLUMN_UNIT as COLUMN_UNIT2, GUTTER_UNIT as GUTTER_UNIT2 } from "@charcoal-ui/foundation";
 import { maxWidth as maxWidth4 } from "@charcoal-ui/utils";
-var LayoutConfigContext = React5.createContext({
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var LayoutConfigContext = React2.createContext({
   wide: false,
   center: false,
   withLeft: false
@@ -441,7 +450,17 @@ function Layout({
     wide: center ? true : wide ?? false,
     withLeft: menu != null && !isHeaderTopMenu
   };
-  return /* @__PURE__ */ React5.createElement(LayoutRoot, null, /* @__PURE__ */ React5.createElement(LayoutConfigContext.Provider, { value: config }, config.withLeft && /* @__PURE__ */ React5.createElement(LeftArea, null, menu), /* @__PURE__ */ React5.createElement(MainArea, { center }, header != null && /* @__PURE__ */ React5.createElement(Header, null, header), isHeaderTopMenu && /* @__PURE__ */ React5.createElement(HeaderTopMenuContainer, null, menu), /* @__PURE__ */ React5.createElement(Grid, null, children))), /* @__PURE__ */ React5.createElement(GlobalStyle, null));
+  return /* @__PURE__ */ jsxs3(LayoutRoot, { children: [
+    /* @__PURE__ */ jsxs3(LayoutConfigContext.Provider, { value: config, children: [
+      config.withLeft && /* @__PURE__ */ jsx5(LeftArea, { children: menu }),
+      /* @__PURE__ */ jsxs3(MainArea, { center, children: [
+        header != null && /* @__PURE__ */ jsx5(Header, { children: header }),
+        isHeaderTopMenu && /* @__PURE__ */ jsx5(HeaderTopMenuContainer, { children: menu }),
+        /* @__PURE__ */ jsx5(Grid, { children })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5(GlobalStyle, {})
+  ] });
 }
 var HeaderTopMenuContainer = styled6.div`
   margin-bottom: 40px;
@@ -525,10 +544,10 @@ var Grid = styled6.div`
     padding-bottom: 60px;
   }
 `;
-var LayoutItem = React5.forwardRef(
+var LayoutItem = React2.forwardRef(
   function LayoutItem2({ span, children }, ref) {
     const { withLeft } = useContext(LayoutConfigContext);
-    return /* @__PURE__ */ React5.createElement(StyledLayoutItem, { span, withLeft, ref }, children);
+    return /* @__PURE__ */ jsx5(StyledLayoutItem, { span, withLeft, ref, children });
   }
 );
 var StyledLayoutItem = styled6.div`
@@ -557,7 +576,7 @@ var StyledLayoutItem = styled6.div`
 `;
 function LayoutItemHeader({ children }) {
   const { wide, center } = useContext(LayoutConfigContext);
-  return /* @__PURE__ */ React5.createElement(StyledLayoutItemHeader, { wide, center }, children);
+  return /* @__PURE__ */ jsx5(StyledLayoutItemHeader, { wide, center, children });
 }
 var StyledLayoutItemHeader = styled6.div`
   padding: 0 ${(p) => p.wide ? 40 : 24}px;
@@ -616,7 +635,7 @@ function LayoutItemBody({
   narrow = false
 }) {
   const { wide } = useContext(LayoutConfigContext);
-  return /* @__PURE__ */ React5.createElement(StyledLayoutItemBody, { wide, horizontal, narrow }, children);
+  return /* @__PURE__ */ jsx5(StyledLayoutItemBody, { wide, horizontal, narrow, children });
 }
 var StyledLayoutItemBody = styled6.div`
   padding: ${(p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrow.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrow.x}px ${LAYOUT_ITEM_BODY_PADDING.narrow.yBottom}px` : p.wide ? `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.wide.y}px ${LAYOUT_ITEM_BODY_PADDING.wide.x}px` : `${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.default.y}px ${LAYOUT_ITEM_BODY_PADDING.default.x}px`};
@@ -637,7 +656,7 @@ function CancelLayoutItemBodyPadding({
   cancelTop
 }) {
   const { wide } = useContext(LayoutConfigContext);
-  return /* @__PURE__ */ React5.createElement(StyledCancelLayoutItemBodyPadding, { wide, cancelTop }, children);
+  return /* @__PURE__ */ jsx5(StyledCancelLayoutItemBodyPadding, { wide, cancelTop, children });
 }
 var StyledCancelLayoutItemBodyPadding = styled6.div`
   margin: 0 -${(p) => p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING.default.x}px;
@@ -650,11 +669,11 @@ var StyledCancelLayoutItemBodyPadding = styled6.div`
 `;
 
 // src/components/LeftMenu/index.tsx
-import React7 from "react";
 import styled9 from "styled-components";
 
 // src/components/MenuListItem/index.tsx
-import React6, { useContext as useContext2 } from "react";
+import { useContext as useContext2 } from "react";
+import * as React3 from "react";
 import styled8, { css as css5 } from "styled-components";
 
 // src/components/TextEllipsis/index.tsx
@@ -721,7 +740,8 @@ var TextEllipsis = styled7.div.attrs(
 // src/components/MenuListItem/index.tsx
 import { useComponentAbstraction as useComponentAbstraction2 } from "@charcoal-ui/react";
 import { disabledSelector } from "@charcoal-ui/utils";
-var MenuListItemContext = React6.createContext({ padding: 24 });
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var MenuListItemContext = React3.createContext({ padding: 24 });
 function MenuListItem({
   primary,
   secondary,
@@ -732,7 +752,7 @@ function MenuListItem({
   children
 }) {
   const { padding } = useContext2(MenuListItemContext);
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ jsxs4(
     Item,
     {
       hasSubLabel: secondary !== void 0,
@@ -742,10 +762,15 @@ function MenuListItem({
       noClick: onClick === void 0,
       "aria-disabled": disabled,
       role: onClick !== void 0 ? "button" : void 0,
-      className: gtmClass !== void 0 ? `gtm-${gtmClass}` : void 0
-    },
-    /* @__PURE__ */ React6.createElement(Labels, null, /* @__PURE__ */ React6.createElement(PrimaryText, null, /* @__PURE__ */ React6.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, primary)), secondary !== void 0 && /* @__PURE__ */ React6.createElement(SecondaryText, null, /* @__PURE__ */ React6.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, secondary))),
-    children
+      className: gtmClass !== void 0 ? `gtm-${gtmClass}` : void 0,
+      children: [
+        /* @__PURE__ */ jsxs4(Labels, { children: [
+          /* @__PURE__ */ jsx6(PrimaryText, { children: /* @__PURE__ */ jsx6(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: primary }) }),
+          secondary !== void 0 && /* @__PURE__ */ jsx6(SecondaryText, { children: /* @__PURE__ */ jsx6(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: secondary }) })
+        ] }),
+        children
+      ]
+    }
   );
 }
 var Item = styled8.div`
@@ -810,7 +835,7 @@ function MenuListLinkItem({
     noHover,
     children
   };
-  return disabled ? /* @__PURE__ */ React6.createElement("span", { onClick }, /* @__PURE__ */ React6.createElement(MenuListItem, { ...props })) : /* @__PURE__ */ React6.createElement(A, { as: Link, to: link, onClick, ...linkProps }, /* @__PURE__ */ React6.createElement(MenuListItem, { onClick: () => void 0, ...props }));
+  return disabled ? /* @__PURE__ */ jsx6("span", { onClick, children: /* @__PURE__ */ jsx6(MenuListItem, { ...props }) }) : /* @__PURE__ */ jsx6(A, { as: Link, to: link, onClick, ...linkProps, children: /* @__PURE__ */ jsx6(MenuListItem, { onClick: () => void 0, ...props }) });
 }
 var A = styled8.a`
   display: block;
@@ -820,16 +845,22 @@ function MenuListLinkItemWithIcon({
   primary: text,
   ...props
 }) {
-  const primary = /* @__PURE__ */ React6.createElement(IconContainer, null, /* @__PURE__ */ React6.createElement(Icon2, null, icon), text);
-  return /* @__PURE__ */ React6.createElement(MenuListLinkItem, { primary, ...props });
+  const primary = /* @__PURE__ */ jsxs4(IconContainer, { children: [
+    /* @__PURE__ */ jsx6(Icon2, { children: icon }),
+    text
+  ] });
+  return /* @__PURE__ */ jsx6(MenuListLinkItem, { primary, ...props });
 }
 function MenuListItemWithIcon({
   icon,
   primary: text,
   ...props
 }) {
-  const primary = /* @__PURE__ */ React6.createElement(IconContainer, null, /* @__PURE__ */ React6.createElement(Icon2, null, icon), text);
-  return /* @__PURE__ */ React6.createElement(MenuListItem, { primary, ...props });
+  const primary = /* @__PURE__ */ jsxs4(IconContainer, { children: [
+    /* @__PURE__ */ jsx6(Icon2, { children: icon }),
+    text
+  ] });
+  return /* @__PURE__ */ jsx6(MenuListItem, { primary, ...props });
 }
 var IconContainer = styled8.div`
   display: grid;
@@ -855,15 +886,16 @@ var MenuListLabel = styled8.div`
 
 // src/components/LeftMenu/index.tsx
 import { useComponentAbstraction as useComponentAbstraction3 } from "@charcoal-ui/react";
+import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
 function LeftMenu({
   links,
   active
 }) {
   const { Link } = useComponentAbstraction3();
-  return /* @__PURE__ */ React7.createElement(Container2, null, links.map((link, index) => /* @__PURE__ */ React7.createElement(Link, { to: link.to, key: index }, /* @__PURE__ */ React7.createElement(LinkItem, { "aria-current": link.id === active || void 0 }, link.text))));
+  return /* @__PURE__ */ jsx7(Container2, { children: links.map((link, index) => /* @__PURE__ */ jsx7(Link, { to: link.to, children: /* @__PURE__ */ jsx7(LinkItem, { "aria-current": link.id === active || void 0, children: link.text }) }, index)) });
 }
 function LeftMenuContent({ links }) {
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, links.map((link, index) => /* @__PURE__ */ React7.createElement(MenuListLinkItem, { link: link.to, key: index, primary: link.text })));
+  return /* @__PURE__ */ jsx7(Fragment3, { children: links.map((link, index) => /* @__PURE__ */ jsx7(MenuListLinkItem, { link: link.to, primary: link.text }, index)) });
 }
 var Container2 = styled9.div`
   display: flex;
@@ -892,10 +924,11 @@ var LinkItem = styled9.div`
 `;
 
 // src/components/SwitchCheckbox/index.tsx
-import React8 from "react";
+import * as React4 from "react";
 import styled10, { css as css6 } from "styled-components";
 import { applyEffect } from "@charcoal-ui/utils";
-var SwitchCheckbox_default = React8.forwardRef(function SwitchCheckbox({
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var SwitchCheckbox_default = React4.forwardRef(function SwitchCheckbox({
   gtmClass,
   flex = false,
   rowReverse = false,
@@ -903,16 +936,21 @@ var SwitchCheckbox_default = React8.forwardRef(function SwitchCheckbox({
   disabled,
   ...props
 }, ref) {
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ jsxs5(
     Label,
     {
       className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "",
       flex,
       rowReverse,
-      "aria-disabled": disabled
-    },
-    /* @__PURE__ */ React8.createElement(SwitchOuter, null, /* @__PURE__ */ React8.createElement(SwitchInput, { ...props, disabled, ref }), /* @__PURE__ */ React8.createElement(SwitchInner, null, /* @__PURE__ */ React8.createElement(SwitchInnerKnob, null))),
-    children != null && /* @__PURE__ */ React8.createElement(Children2, { rowReverse }, children)
+      "aria-disabled": disabled,
+      children: [
+        /* @__PURE__ */ jsxs5(SwitchOuter, { children: [
+          /* @__PURE__ */ jsx8(SwitchInput, { ...props, disabled, ref }),
+          /* @__PURE__ */ jsx8(SwitchInner, { children: /* @__PURE__ */ jsx8(SwitchInnerKnob, {}) })
+        ] }),
+        children != null && /* @__PURE__ */ jsx8(Children2, { rowReverse, children })
+      ]
+    }
   );
 });
 var Children2 = styled10.span`
@@ -1010,9 +1048,11 @@ var SwitchInput = styled10.input.attrs({
 `;
 
 // src/components/WithIcon/index.tsx
-import React9, { useRef as useRef2 } from "react";
+import { useRef as useRef2 } from "react";
+import * as React5 from "react";
 import styled11, { css as css7 } from "styled-components";
-var WithIcon_default = React9.memo(function WithIcon({
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var WithIcon_default = React5.memo(function WithIcon({
   children,
   icon,
   show = true,
@@ -1021,8 +1061,12 @@ var WithIcon_default = React9.memo(function WithIcon({
   fit = false,
   fixed = false
 }) {
-  const node = fit ? width === void 0 ? /* @__PURE__ */ React9.createElement(AutoWidthIconAnchor, { show, pre }, icon) : /* @__PURE__ */ React9.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ React9.createElement(Icon3, null, icon)) : /* @__PURE__ */ React9.createElement(IconAnchorNaive, { show, pre }, /* @__PURE__ */ React9.createElement(IconNaive, null, icon));
-  return /* @__PURE__ */ React9.createElement(Root, null, pre && node, /* @__PURE__ */ React9.createElement(Text2, { fixed }, children), !pre && node);
+  const node = fit ? width === void 0 ? /* @__PURE__ */ jsx9(AutoWidthIconAnchor, { show, pre, children: icon }) : /* @__PURE__ */ jsx9(IconAnchor, { width, show, pre, children: /* @__PURE__ */ jsx9(Icon3, { children: icon }) }) : /* @__PURE__ */ jsx9(IconAnchorNaive, { show, pre, children: /* @__PURE__ */ jsx9(IconNaive, { children: icon }) });
+  return /* @__PURE__ */ jsxs6(Root, { children: [
+    pre && node,
+    /* @__PURE__ */ jsx9(Text2, { fixed, children }),
+    !pre && node
+  ] });
 });
 var Root = styled11.div`
   display: flex;
@@ -1043,7 +1087,7 @@ function AutoWidthIconAnchor({
 }) {
   const ref = useRef2(null);
   const width = useElementSize(ref, [null])?.width ?? 0;
-  return /* @__PURE__ */ React9.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ React9.createElement(Icon3, { ref }, children));
+  return /* @__PURE__ */ jsx9(IconAnchor, { width, show, pre, children: /* @__PURE__ */ jsx9(Icon3, { ref, children }) });
 }
 var forceCenteringCss = css7`
   > svg {
@@ -1098,7 +1142,7 @@ import {
 } from "@charcoal-ui/react";
 
 // src/components/Carousel/index.tsx
-import React12, { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useRef as useRef3 } from "react";
+import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useRef as useRef3 } from "react";
 import { animated, useSpring } from "react-spring";
 import styled13, { css as css9 } from "styled-components";
 
@@ -1130,7 +1174,6 @@ import { useLayoutEffect as useLayoutEffect2, useEffect } from "react";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect2 : useEffect;
 
 // src/components/CarouselButton/index.tsx
-import React11 from "react";
 import styled12, { css as css8 } from "styled-components";
 
 // src/foundation/utils.ts
@@ -1141,12 +1184,12 @@ function unreachable(value) {
 }
 
 // src/components/icons/NextIcon.tsx
-import React10 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var path = `M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z`;
 var size2 = 24;
 function NextIcon({ direction }) {
   const transform = directionToTransform(direction);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ jsx10(
     IconBase,
     {
       viewBoxSize: size2,
@@ -1174,6 +1217,7 @@ function directionToTransform(direction) {
 
 // src/components/CarouselButton/index.tsx
 import { applyEffect as applyEffect2 } from "@charcoal-ui/utils";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function CarouselButton({
   direction,
   show,
@@ -1192,21 +1236,21 @@ function CarouselButton({
     paddingRight: Math.max(padding, 0),
     paddingBottom: bottom
   };
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ jsx11(
     Button,
     {
       type: "button",
       onClick,
       hide: !show,
       style: offsetStyle,
-      css: onlyNonTouchDevice
-    },
-    /* @__PURE__ */ React11.createElement(CarouselButtonIcon, null, /* @__PURE__ */ React11.createElement(
-      NextIcon,
-      {
-        direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
-      }
-    ))
+      css: onlyNonTouchDevice,
+      children: /* @__PURE__ */ jsx11(CarouselButtonIcon, { children: /* @__PURE__ */ jsx11(
+        NextIcon,
+        {
+          direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
+        }
+      ) })
+    }
   );
 }
 var CAROUSEL_BUTTON_SIZE = 40;
@@ -1274,6 +1318,7 @@ var onlyNonTouchDevice = css8`
 `;
 
 // src/components/Carousel/index.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var GRADIENT_WIDTH = 72;
 var SCROLL_AMOUNT_COEF = 0.75;
 function Carousel({
@@ -1413,67 +1458,79 @@ function Carousel({
   if (!disableGradient && options.hasGradient === true) {
     const fadeInGradient = options.fadeInGradient ?? false;
     const overflowGradient = !fadeInGradient;
-    return /* @__PURE__ */ React12.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ React12.createElement(GradientContainer, { fadeInGradient }, /* @__PURE__ */ React12.createElement(RightGradient, null, /* @__PURE__ */ React12.createElement(LeftGradient, { show: overflowGradient || scrollLeft > 0 }, /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ jsxs7(Container3, { ref: visibleAreaRef, children: [
+      /* @__PURE__ */ jsx12(GradientContainer, { fadeInGradient, children: /* @__PURE__ */ jsx12(RightGradient, { children: /* @__PURE__ */ jsx12(LeftGradient, { show: overflowGradient || scrollLeft > 0, children: /* @__PURE__ */ jsx12(
+        ScrollArea,
+        {
+          ref,
+          scrollLeft: styles.scroll,
+          onScroll: handleScrollMove,
+          children: /* @__PURE__ */ jsx12(CarouselContainer, { ref: innerRef, centerItems, children })
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsxs7(ButtonsContainer, { children: [
+        /* @__PURE__ */ jsx12(
+          CarouselButton,
+          {
+            direction: "left" /* Left */,
+            show: leftShow,
+            offset: buttonOffset,
+            bottomOffset,
+            padding: buttonPadding,
+            gradient: overflowGradient,
+            onClick: handleLeft
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          CarouselButton,
+          {
+            direction: "right" /* Right */,
+            show: rightShow,
+            offset: buttonOffset,
+            bottomOffset,
+            padding: buttonPadding,
+            gradient: true,
+            onClick: handleRight
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(Container3, { ref: visibleAreaRef, children: [
+    /* @__PURE__ */ jsx12(
       ScrollArea,
       {
         ref,
         scrollLeft: styles.scroll,
-        onScroll: handleScrollMove
-      },
-      /* @__PURE__ */ React12.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
-    )))), /* @__PURE__ */ React12.createElement(ButtonsContainer, null, /* @__PURE__ */ React12.createElement(
-      CarouselButton,
-      {
-        direction: "left" /* Left */,
-        show: leftShow,
-        offset: buttonOffset,
-        bottomOffset,
-        padding: buttonPadding,
-        gradient: overflowGradient,
-        onClick: handleLeft
-      }
-    ), /* @__PURE__ */ React12.createElement(
-      CarouselButton,
-      {
-        direction: "right" /* Right */,
-        show: rightShow,
-        offset: buttonOffset,
-        bottomOffset,
-        padding: buttonPadding,
-        gradient: true,
-        onClick: handleRight
+        onScroll: handleScrollMove,
+        children: /* @__PURE__ */ jsx12(CarouselContainer, { ref: innerRef, centerItems, children })
       }
-    )));
-  }
-  return /* @__PURE__ */ React12.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ React12.createElement(
-    ScrollArea,
-    {
-      ref,
-      scrollLeft: styles.scroll,
-      onScroll: handleScrollMove
-    },
-    /* @__PURE__ */ React12.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
-  ), /* @__PURE__ */ React12.createElement(ButtonsContainer, null, /* @__PURE__ */ React12.createElement(
-    CarouselButton,
-    {
-      direction: "left" /* Left */,
-      show: leftShow,
-      offset: buttonOffset,
-      bottomOffset,
-      padding: buttonPadding,
-      onClick: handleLeft
-    }
-  ), /* @__PURE__ */ React12.createElement(
-    CarouselButton,
-    {
-      direction: "right" /* Right */,
-      show: rightShow,
-      offset: buttonOffset,
-      bottomOffset,
-      padding: buttonPadding,
-      onClick: handleRight
-    }
-  )));
+    ),
+    /* @__PURE__ */ jsxs7(ButtonsContainer, { children: [
+      /* @__PURE__ */ jsx12(
+        CarouselButton,
+        {
+          direction: "left" /* Left */,
+          show: leftShow,
+          offset: buttonOffset,
+          bottomOffset,
+          padding: buttonPadding,
+          onClick: handleLeft
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        CarouselButton,
+        {
+          direction: "right" /* Right */,
+          show: rightShow,
+          offset: buttonOffset,
+          bottomOffset,
+          padding: buttonPadding,
+          onClick: handleRight
+        }
+      )
+    ] })
+  ] });
 }
 var CarouselContainer = styled13.ul`
   vertical-align: top;
@@ -1552,15 +1609,15 @@ var LeftGradient = styled13.div`
 `;
 
 // src/components/Pager/index.tsx
-import React15, { useCallback as useCallback3, useDebugValue as useDebugValue2, useMemo as useMemo2 } from "react";
+import { memo as memo2, useCallback as useCallback3, useDebugValue as useDebugValue2, useMemo as useMemo2 } from "react";
 import styled16, { css as css10 } from "styled-components";
 import warning from "warning";
 
 // src/components/icons/DotsIcon.tsx
-import React13 from "react";
 import styled14 from "styled-components";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function DotsIcon({ size: size3 }) {
-  return /* @__PURE__ */ React13.createElement(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3 }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ jsx13(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ jsx13(
     "path",
     {
       fillRule: "evenodd",
@@ -1572,7 +1629,7 @@ function DotsIcon({ size: size3 }) {
           C20.3807119,9.5 21.5,10.6192881 21.5,12 C21.5,13.3807119 20.3807119,14.5 19,14.5 Z`,
       transform: "translate(-2 -9)"
     }
-  ));
+  ) });
 }
 DotsIcon.defaultProps = {
   size: 16
@@ -1582,17 +1639,17 @@ var StyledSVG = styled14.svg`
 `;
 
 // src/components/icons/WedgeIcon.tsx
-import React14 from "react";
 import styled15 from "styled-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function WedgeIcon({ size: size3, direction }) {
-  return /* @__PURE__ */ React14.createElement("svg", { viewBox: "0 0 10 8", width: size3, height: size3 }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ jsx14(
     StyledPolyline,
     {
       strokeWidth: "2",
       points: "1,2 5,6 9,2",
       transform: directionToTransform2(direction)
     }
-  ));
+  ) });
 }
 WedgeIcon.defaultProps = {
   size: 16,
@@ -1622,6 +1679,7 @@ var StyledPolyline = styled15.polyline`
 
 // src/components/Pager/index.tsx
 import { useComponentAbstraction as useComponentAbstraction4 } from "@charcoal-ui/react";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function usePagerWindow(page, pageCount, windowSize = 7) {
   if (process.env.NODE_ENV !== "production") {
     warning((page | 0) === page, `\`page\` must be interger (${page})`);
@@ -1656,11 +1714,7 @@ function usePagerWindow(page, pageCount, windowSize = 7) {
   useDebugValue2(window2);
   return window2;
 }
-var Pager_default = React15.memo(function Pager({
-  page,
-  pageCount,
-  onChange
-}) {
+var Pager_default = memo2(function Pager({ page, pageCount, onChange }) {
   const window2 = usePagerWindow(page, pageCount);
   const makeClickHandler = useCallback3(
     (value) => () => {
@@ -1670,38 +1724,46 @@ var Pager_default = React15.memo(function Pager({
   );
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
-  return /* @__PURE__ */ React15.createElement(PagerContainer, null, /* @__PURE__ */ React15.createElement(
-    CircleButton,
-    {
-      type: "button",
-      hidden: !hasPrev,
-      disabled: !hasPrev,
-      onClick: makeClickHandler(Math.max(1, page - 1)),
-      noBackground: true
-    },
-    /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ })
-  ), window2.map(
-    (p) => p === "..." ? /* @__PURE__ */ React15.createElement(Spacer, { key: p }, /* @__PURE__ */ React15.createElement(DotsIcon, { size: 20 })) : p === page ? /* @__PURE__ */ React15.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ React15.createElement(Text3, null, p)) : /* @__PURE__ */ React15.createElement(CircleButton, { key: p, type: "button", onClick: makeClickHandler(p) }, /* @__PURE__ */ React15.createElement(Text3, null, p))
-  ), /* @__PURE__ */ React15.createElement(
-    CircleButton,
-    {
-      type: "button",
-      hidden: !hasNext,
-      disabled: !hasNext,
-      onClick: makeClickHandler(Math.min(pageCount, page + 1)),
-      noBackground: true
-    },
-    /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ })
-  ));
+  return /* @__PURE__ */ jsxs8(PagerContainer, { children: [
+    /* @__PURE__ */ jsx15(
+      CircleButton,
+      {
+        type: "button",
+        hidden: !hasPrev,
+        disabled: !hasPrev,
+        onClick: makeClickHandler(Math.max(1, page - 1)),
+        noBackground: true,
+        children: /* @__PURE__ */ jsx15(WedgeIcon, { size: 16, direction: "left" /* Left */ })
+      }
+    ),
+    window2.map(
+      (p) => p === "..." ? /* @__PURE__ */ jsx15(Spacer, { children: /* @__PURE__ */ jsx15(DotsIcon, { size: 20 }) }, p) : p === page ? /* @__PURE__ */ jsx15(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ jsx15(Text3, { children: p }) }, p) : /* @__PURE__ */ jsx15(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ jsx15(Text3, { children: p }) }, p)
+    ),
+    /* @__PURE__ */ jsx15(
+      CircleButton,
+      {
+        type: "button",
+        hidden: !hasNext,
+        disabled: !hasNext,
+        onClick: makeClickHandler(Math.min(pageCount, page + 1)),
+        noBackground: true,
+        children: /* @__PURE__ */ jsx15(WedgeIcon, { size: 16, direction: "right" /* Right */ })
+      }
+    )
+  ] });
 });
 function LinkPager({ page, pageCount, makeUrl }) {
   const { Link } = useComponentAbstraction4();
   const window2 = usePagerWindow(page, pageCount);
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
-  return /* @__PURE__ */ React15.createElement(PagerContainer, null, /* @__PURE__ */ React15.createElement(Link, { to: makeUrl(Math.max(1, page - 1)) }, /* @__PURE__ */ React15.createElement(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true }, /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ }))), window2.map(
-    (p) => p === "..." ? /* @__PURE__ */ React15.createElement(Spacer, { key: p }, /* @__PURE__ */ React15.createElement(DotsIcon, { size: 20, subLink: true })) : p === page ? /* @__PURE__ */ React15.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ React15.createElement(Text3, null, p)) : /* @__PURE__ */ React15.createElement(Link, { key: p, to: makeUrl(p) }, /* @__PURE__ */ React15.createElement(CircleButton, { type: "button" }, /* @__PURE__ */ React15.createElement(Text3, null, p)))
-  ), /* @__PURE__ */ React15.createElement(Link, { to: makeUrl(Math.min(pageCount, page + 1)) }, /* @__PURE__ */ React15.createElement(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true }, /* @__PURE__ */ React15.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ }))));
+  return /* @__PURE__ */ jsxs8(PagerContainer, { children: [
+    /* @__PURE__ */ jsx15(Link, { to: makeUrl(Math.max(1, page - 1)), children: /* @__PURE__ */ jsx15(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true, children: /* @__PURE__ */ jsx15(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }) }),
+    window2.map(
+      (p) => p === "..." ? /* @__PURE__ */ jsx15(Spacer, { children: /* @__PURE__ */ jsx15(DotsIcon, { size: 20, subLink: true }) }, p) : p === page ? /* @__PURE__ */ jsx15(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ jsx15(Text3, { children: p }) }, p) : /* @__PURE__ */ jsx15(Link, { to: makeUrl(p), children: /* @__PURE__ */ jsx15(CircleButton, { type: "button", children: /* @__PURE__ */ jsx15(Text3, { children: p }) }) }, p)
+    ),
+    /* @__PURE__ */ jsx15(Link, { to: makeUrl(Math.min(pageCount, page + 1)), children: /* @__PURE__ */ jsx15(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true, children: /* @__PURE__ */ jsx15(WedgeIcon, { size: 16, direction: "right" /* Right */ }) }) })
+  ] });
 }
 var PagerContainer = styled16.nav`
   display: flex;