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

package/dist/index.cjs.js

@@ -28,7 +28,7 @@ var src_exports = {};
 __export(src_exports, {
   CancelLayoutItemBodyPadding: () => CancelLayoutItemBodyPadding,
   Carousel: () => Carousel,
-  ComponentAbstraction: () => import_react23.ComponentAbstraction,
+  ComponentAbstraction: () => import_react13.ComponentAbstraction,
   Filter: () => Filter_default,
   FilterButton: () => FilterButton,
   FilterIconButton: () => FilterIconButton,
@@ -58,7 +58,7 @@ __export(src_exports, {
   SwitchCheckbox: () => SwitchCheckbox_default,
   TextEllipsis: () => TextEllipsis,
   WithIcon: () => WithIcon_default,
-  useComponentAbstraction: () => import_react23.useComponentAbstraction,
+  useComponentAbstraction: () => import_react13.useComponentAbstraction,
   useElementSize: () => useElementSize,
   useLayoutItemBodyPadding: () => useLayoutItemBodyPadding,
   useMedia: () => useMedia,
@@ -67,30 +67,31 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/Filter/index.tsx
-var import_react = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_react2 = require("@charcoal-ui/react");
+var import_react = require("@charcoal-ui/react");
 var import_utils = require("@charcoal-ui/utils");
-var FilterButton = import_react.default.forwardRef(function FilterButton2({
+var import_jsx_runtime = require("react/jsx-runtime");
+var FilterButton = React.forwardRef(function FilterButton2({
   onClick,
   children,
   active = false,
   hover,
   reactive = false
 }, ref) {
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ButtonLike,
     {
       active,
       reactive,
       hover,
       onClick: active && !reactive ? void 0 : onClick,
-      ref
-    },
-    children
+      ref,
+      children
+    }
   );
 });
-var FilterIconButton = import_react.default.forwardRef(function FilterIconButton2({
+var FilterIconButton = React.forwardRef(function FilterIconButton2({
   onClick,
   children,
   active = false,
@@ -99,7 +100,7 @@ var FilterIconButton = import_react.default.forwardRef(function FilterIconButton
   width,
   height
 }, ref) {
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledButtonLike,
     {
       active,
@@ -108,12 +109,12 @@ var FilterIconButton = import_react.default.forwardRef(function FilterIconButton
       onClick: active && !reactive ? void 0 : onClick,
       ref,
       buttonWidth: width,
-      buttonHeight: height
-    },
-    children
+      buttonHeight: height,
+      children
+    }
   );
 });
-var FilterLink = import_react.default.forwardRef(function FilterLink2({
+var FilterLink = React.forwardRef(function FilterLink2({
   onClick,
   children,
   active = false,
@@ -121,20 +122,20 @@ var FilterLink = import_react.default.forwardRef(function FilterLink2({
   reactive = false,
   ...props
 }, ref) {
-  const { Link } = (0, import_react2.useComponentAbstraction)();
+  const { Link } = (0, import_react.useComponentAbstraction)();
   if (active && !reactive) {
-    return /* @__PURE__ */ import_react.default.createElement(PlainElement, { active: true, hover, ref }, children);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlainElement, { active: true, hover, ref, children });
   } else {
-    return /* @__PURE__ */ import_react.default.createElement(Link, { ...props, onClick }, /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { ...props, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       PlainElement,
       {
         active,
         reactive,
         hover,
-        ref
-      },
-      children
-    ));
+        ref,
+        children
+      }
+    ) });
   }
 });
 var buttonCss = import_styled_components.css`
@@ -197,7 +198,6 @@ var Filter = import_styled_components.default.div`
 var Filter_default = Filter;
 
 // src/components/HintText/index.tsx
-var import_react5 = __toESM(require("react"));
 var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/styled.ts
@@ -206,12 +206,11 @@ var import_styled = require("@charcoal-ui/styled");
 var theme = (0, import_styled.createTheme)(import_styled_components2.default);
 
 // src/components/icons/InfoIcon.tsx
-var import_react4 = __toESM(require("react"));
 var import_styled_components4 = __toESM(require("styled-components"));
 
 // src/components/icons/Base.tsx
-var import_react3 = __toESM(require("react"));
 var import_styled_components3 = __toESM(require("styled-components"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function IconBase({
   size: size3 = 24,
   viewBoxSize,
@@ -221,22 +220,22 @@ function IconBase({
   fillRule,
   clipRule
 }) {
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Icon,
     {
       viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
       size: size3,
-      currentColor
-    },
-    /* @__PURE__ */ import_react3.default.createElement(
-      IconBasePath,
-      {
-        path: path2,
-        transform,
-        fillRule,
-        clipRule
-      }
-    )
+      currentColor,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        IconBasePath,
+        {
+          path: path2,
+          transform,
+          fillRule,
+          clipRule
+        }
+      )
+    }
   );
 }
 var Icon = import_styled_components3.default.svg`
@@ -255,7 +254,7 @@ var IconBasePath = ({
   clipRule
 }) => {
   if (typeof path2 === "string") {
-    return /* @__PURE__ */ import_react3.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "path",
       {
         d: path2,
@@ -265,25 +264,29 @@ var IconBasePath = ({
       }
     );
   } else {
-    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, path2);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: path2 });
   }
 };
 
 // src/components/icons/InfoIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var size = 16;
 function InfoIcon() {
-  const path2 = /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
+  const path2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsx)(
+      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__ */ (0, import_jsx_runtime3.jsx)(IconBase, { viewBoxSize: size, size, currentColor: true, path: path2 });
 }
 var Path = import_styled_components4.default.path`
   fill: ${({ theme: theme2 }) => theme2.color.surface1};
@@ -292,8 +295,12 @@ var Path = import_styled_components4.default.path`
 
 // src/components/HintText/index.tsx
 var import_utils2 = require("@charcoal-ui/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function HintText({ children, context, className }) {
-  return /* @__PURE__ */ import_react5.default.createElement(Container, { className, context }, /* @__PURE__ */ import_react5.default.createElement(IconWrap, null, /* @__PURE__ */ import_react5.default.createElement(InfoIcon, null)), /* @__PURE__ */ import_react5.default.createElement(Text, null, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Container, { className, context, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconWrap, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { children })
+  ] });
 }
 var Container = import_styled_components5.default.div.attrs(
   styledProps
@@ -360,7 +367,8 @@ function contextToProps(context) {
 }
 
 // src/components/Layout/index.tsx
-var import_react7 = __toESM(require("react"));
+var import_react3 = require("react");
+var React2 = __toESM(require("react"));
 var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/foundation/contants.ts
@@ -374,7 +382,7 @@ var RESPONSIVE_MAIN_MAX_WIDTH = (0, import_foundation.columnSystem)(
 );
 
 // src/foundation/hooks.ts
-var import_react6 = require("react");
+var import_react2 = require("react");
 var import_react_dom = __toESM(require("react-dom"));
 var import_styled_components6 = require("styled-components");
 var import_utils3 = require("@charcoal-ui/utils");
@@ -382,7 +390,7 @@ function useMediaScreen1() {
   return useMedia((0, import_utils3.maxWidth)((0, import_styled_components6.useTheme)().breakpoint.screen1));
 }
 function useMedia(query) {
-  const matcher = (0, import_react6.useMemo)(
+  const matcher = (0, import_react2.useMemo)(
     () => __TEST__ ? {
       matches: false,
       addListener: () => {
@@ -392,7 +400,7 @@ function useMedia(query) {
     } : matchMedia(query),
     [query]
   );
-  const [matches, setMatches] = (0, import_react6.useState)(matcher.matches);
+  const [matches, setMatches] = (0, import_react2.useState)(matcher.matches);
   if (matcher.matches !== matches) {
     setMatches(matcher.matches);
   }
@@ -405,21 +413,21 @@ function useMedia(query) {
       setMatches(e.matches);
     }
   };
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     matcher.addListener(callback);
     setMatches(matcher.matches);
     return () => {
       matcher.removeListener(callback);
     };
   }, [matcher]);
-  (0, import_react6.useDebugValue)(`${query}: ${matches.toString()}`);
+  (0, import_react2.useDebugValue)(`${query}: ${matches.toString()}`);
   return matches;
 }
 function measure(ref) {
   return ref !== null ? ref.getBoundingClientRect() : void 0;
 }
 function useElementSize(ref, deps = []) {
-  const [size3, setSize] = (0, import_react6.useReducer)(
+  const [size3, setSize] = (0, import_react2.useReducer)(
     (state, next) => {
       if (state === void 0 || next === void 0) {
         return next;
@@ -431,8 +439,8 @@ function useElementSize(ref, deps = []) {
     },
     void 0
   );
-  const [watch, setWatch] = (0, import_react6.useState)(null);
-  (0, import_react6.useLayoutEffect)(() => {
+  const [watch, setWatch] = (0, import_react2.useState)(null);
+  (0, import_react2.useLayoutEffect)(() => {
     if (watch === null) {
       return;
     }
@@ -446,23 +454,23 @@ function useElementSize(ref, deps = []) {
       setSize(void 0);
     };
   }, [watch]);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     if (ref.current !== watch) {
       setWatch(ref.current);
     }
   });
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     if (deps.length > 0) {
       setSize(measure(ref.current));
     }
   }, deps);
-  (0, import_react6.useDebugValue)(size3);
+  (0, import_react2.useDebugValue)(size3);
   return size3;
 }
 function useDebounceAnimationState(defaultValue) {
-  const [state, setState] = (0, import_react6.useState)(defaultValue);
-  const timer = (0, import_react6.useRef)();
-  const setDebounceState = (0, import_react6.useCallback)((value, force = false) => {
+  const [state, setState] = (0, import_react2.useState)(defaultValue);
+  const timer = (0, import_react2.useRef)();
+  const setDebounceState = (0, import_react2.useCallback)((value, force = false) => {
     if (force) {
       setState(value);
       return;
@@ -483,7 +491,8 @@ function useDebounceAnimationState(defaultValue) {
 // src/components/Layout/index.tsx
 var import_foundation2 = require("@charcoal-ui/foundation");
 var import_utils4 = require("@charcoal-ui/utils");
-var LayoutConfigContext = import_react7.default.createContext({
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var LayoutConfigContext = React2.createContext({
   wide: false,
   center: false,
   withLeft: false
@@ -501,7 +510,17 @@ function Layout({
     wide: center ? true : wide ?? false,
     withLeft: menu != null && !isHeaderTopMenu
   };
-  return /* @__PURE__ */ import_react7.default.createElement(LayoutRoot, null, /* @__PURE__ */ import_react7.default.createElement(LayoutConfigContext.Provider, { value: config }, config.withLeft && /* @__PURE__ */ import_react7.default.createElement(LeftArea, null, menu), /* @__PURE__ */ import_react7.default.createElement(MainArea, { center }, header != null && /* @__PURE__ */ import_react7.default.createElement(Header, null, header), isHeaderTopMenu && /* @__PURE__ */ import_react7.default.createElement(HeaderTopMenuContainer, null, menu), /* @__PURE__ */ import_react7.default.createElement(Grid, null, children))), /* @__PURE__ */ import_react7.default.createElement(GlobalStyle, null));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LayoutRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LayoutConfigContext.Provider, { value: config, children: [
+      config.withLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeftArea, { children: menu }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MainArea, { center, children: [
+        header != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Header, { children: header }),
+        isHeaderTopMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderTopMenuContainer, { children: menu }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Grid, { children })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlobalStyle, {})
+  ] });
 }
 var HeaderTopMenuContainer = import_styled_components7.default.div`
   margin-bottom: 40px;
@@ -585,10 +604,10 @@ var Grid = import_styled_components7.default.div`
     padding-bottom: 60px;
   }
 `;
-var LayoutItem = import_react7.default.forwardRef(
+var LayoutItem = React2.forwardRef(
   function LayoutItem2({ span, children }, ref) {
-    const { withLeft } = (0, import_react7.useContext)(LayoutConfigContext);
-    return /* @__PURE__ */ import_react7.default.createElement(StyledLayoutItem, { span, withLeft, ref }, children);
+    const { withLeft } = (0, import_react3.useContext)(LayoutConfigContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledLayoutItem, { span, withLeft, ref, children });
   }
 );
 var StyledLayoutItem = import_styled_components7.default.div`
@@ -616,8 +635,8 @@ var StyledLayoutItem = import_styled_components7.default.div`
   }
 `;
 function LayoutItemHeader({ children }) {
-  const { wide, center } = (0, import_react7.useContext)(LayoutConfigContext);
-  return /* @__PURE__ */ import_react7.default.createElement(StyledLayoutItemHeader, { wide, center }, children);
+  const { wide, center } = (0, import_react3.useContext)(LayoutConfigContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledLayoutItemHeader, { wide, center, children });
 }
 var StyledLayoutItemHeader = import_styled_components7.default.div`
   padding: 0 ${(p) => p.wide ? 40 : 24}px;
@@ -675,8 +694,8 @@ function LayoutItemBody({
   horizontal = false,
   narrow = false
 }) {
-  const { wide } = (0, import_react7.useContext)(LayoutConfigContext);
-  return /* @__PURE__ */ import_react7.default.createElement(StyledLayoutItemBody, { wide, horizontal, narrow }, children);
+  const { wide } = (0, import_react3.useContext)(LayoutConfigContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledLayoutItemBody, { wide, horizontal, narrow, children });
 }
 var StyledLayoutItemBody = import_styled_components7.default.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`};
@@ -689,15 +708,15 @@ var StyledLayoutItemBody = import_styled_components7.default.div`
   box-sizing: border-box;
 `;
 function useLayoutItemBodyPadding() {
-  const { wide } = (0, import_react7.useContext)(LayoutConfigContext);
+  const { wide } = (0, import_react3.useContext)(LayoutConfigContext);
   return useMediaScreen1() ? LAYOUT_ITEM_BODY_PADDING.column1 : wide ? LAYOUT_ITEM_BODY_PADDING.wide : LAYOUT_ITEM_BODY_PADDING.default;
 }
 function CancelLayoutItemBodyPadding({
   children,
   cancelTop
 }) {
-  const { wide } = (0, import_react7.useContext)(LayoutConfigContext);
-  return /* @__PURE__ */ import_react7.default.createElement(StyledCancelLayoutItemBodyPadding, { wide, cancelTop }, children);
+  const { wide } = (0, import_react3.useContext)(LayoutConfigContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCancelLayoutItemBodyPadding, { wide, cancelTop, children });
 }
 var StyledCancelLayoutItemBodyPadding = import_styled_components7.default.div`
   margin: 0 -${(p) => p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING.default.x}px;
@@ -710,19 +729,19 @@ var StyledCancelLayoutItemBodyPadding = import_styled_components7.default.div`
 `;
 
 // src/components/LeftMenu/index.tsx
-var import_react11 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/components/MenuListItem/index.tsx
-var import_react9 = __toESM(require("react"));
+var import_react5 = require("react");
+var React3 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/TextEllipsis/index.tsx
 var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/components/TextEllipsis/helper.ts
-var import_react8 = require("react");
-var hasChildren = (element) => (0, import_react8.isValidElement)(element) && Boolean(element.props.children);
+var import_react4 = require("react");
+var hasChildren = (element) => (0, import_react4.isValidElement)(element) && Boolean(element.props.children);
 var childToString = (child) => {
   if (typeof child === "undefined" || child === null || typeof child === "boolean") {
     return "";
@@ -733,15 +752,15 @@ var childToString = (child) => {
   return child.toString();
 };
 var onlyText = (children) => {
-  if (!Array.isArray(children) && !(0, import_react8.isValidElement)(children)) {
+  if (!Array.isArray(children) && !(0, import_react4.isValidElement)(children)) {
     return childToString(children);
   }
-  return import_react8.Children.toArray(children).reduce(
+  return import_react4.Children.toArray(children).reduce(
     (text, child) => {
       let newText = "";
-      if ((0, import_react8.isValidElement)(child) && hasChildren(child)) {
+      if ((0, import_react4.isValidElement)(child) && hasChildren(child)) {
         newText = onlyText(child.props.children);
-      } else if ((0, import_react8.isValidElement)(child) && !hasChildren(child)) {
+      } else if ((0, import_react4.isValidElement)(child) && !hasChildren(child)) {
         newText = "";
       } else {
         newText = childToString(child);
@@ -776,9 +795,10 @@ var TextEllipsis = import_styled_components8.default.div.attrs(
 `;
 
 // src/components/MenuListItem/index.tsx
-var import_react10 = require("@charcoal-ui/react");
+var import_react6 = require("@charcoal-ui/react");
 var import_utils5 = require("@charcoal-ui/utils");
-var MenuListItemContext = import_react9.default.createContext({ padding: 24 });
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MenuListItemContext = React3.createContext({ padding: 24 });
 function MenuListItem({
   primary,
   secondary,
@@ -788,8 +808,8 @@ function MenuListItem({
   gtmClass,
   children
 }) {
-  const { padding } = (0, import_react9.useContext)(MenuListItemContext);
-  return /* @__PURE__ */ import_react9.default.createElement(
+  const { padding } = (0, import_react5.useContext)(MenuListItemContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Item,
     {
       hasSubLabel: secondary !== void 0,
@@ -799,10 +819,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__ */ import_react9.default.createElement(Labels, null, /* @__PURE__ */ import_react9.default.createElement(PrimaryText, null, /* @__PURE__ */ import_react9.default.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, primary)), secondary !== void 0 && /* @__PURE__ */ import_react9.default.createElement(SecondaryText, null, /* @__PURE__ */ import_react9.default.createElement(TextEllipsis, { lineHeight: 22, lineLimit: 1 }, secondary))),
-    children
+      className: gtmClass !== void 0 ? `gtm-${gtmClass}` : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Labels, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PrimaryText, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: primary }) }),
+          secondary !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SecondaryText, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextEllipsis, { lineHeight: 22, lineLimit: 1, children: secondary }) })
+        ] }),
+        children
+      ]
+    }
   );
 }
 var Item = import_styled_components9.default.div`
@@ -858,7 +883,7 @@ function MenuListLinkItem({
   children,
   ...linkProps
 }) {
-  const { Link } = (0, import_react10.useComponentAbstraction)();
+  const { Link } = (0, import_react6.useComponentAbstraction)();
   const props = {
     disabled,
     primary,
@@ -867,7 +892,7 @@ function MenuListLinkItem({
     noHover,
     children
   };
-  return disabled ? /* @__PURE__ */ import_react9.default.createElement("span", { onClick }, /* @__PURE__ */ import_react9.default.createElement(MenuListItem, { ...props })) : /* @__PURE__ */ import_react9.default.createElement(A, { as: Link, to: link, onClick, ...linkProps }, /* @__PURE__ */ import_react9.default.createElement(MenuListItem, { onClick: () => void 0, ...props }));
+  return disabled ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuListItem, { ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(A, { as: Link, to: link, onClick, ...linkProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuListItem, { onClick: () => void 0, ...props }) });
 }
 var A = import_styled_components9.default.a`
   display: block;
@@ -877,16 +902,22 @@ function MenuListLinkItemWithIcon({
   primary: text,
   ...props
 }) {
-  const primary = /* @__PURE__ */ import_react9.default.createElement(IconContainer, null, /* @__PURE__ */ import_react9.default.createElement(Icon2, null, icon), text);
-  return /* @__PURE__ */ import_react9.default.createElement(MenuListLinkItem, { primary, ...props });
+  const primary = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(IconContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon2, { children: icon }),
+    text
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuListLinkItem, { primary, ...props });
 }
 function MenuListItemWithIcon({
   icon,
   primary: text,
   ...props
 }) {
-  const primary = /* @__PURE__ */ import_react9.default.createElement(IconContainer, null, /* @__PURE__ */ import_react9.default.createElement(Icon2, null, icon), text);
-  return /* @__PURE__ */ import_react9.default.createElement(MenuListItem, { primary, ...props });
+  const primary = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(IconContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon2, { children: icon }),
+    text
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuListItem, { primary, ...props });
 }
 var IconContainer = import_styled_components9.default.div`
   display: grid;
@@ -911,16 +942,17 @@ var MenuListLabel = import_styled_components9.default.div`
 `;
 
 // src/components/LeftMenu/index.tsx
-var import_react12 = require("@charcoal-ui/react");
+var import_react7 = require("@charcoal-ui/react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function LeftMenu({
   links,
   active
 }) {
-  const { Link } = (0, import_react12.useComponentAbstraction)();
-  return /* @__PURE__ */ import_react11.default.createElement(Container2, null, links.map((link, index) => /* @__PURE__ */ import_react11.default.createElement(Link, { to: link.to, key: index }, /* @__PURE__ */ import_react11.default.createElement(LinkItem, { "aria-current": link.id === active || void 0 }, link.text))));
+  const { Link } = (0, import_react7.useComponentAbstraction)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Container2, { children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Link, { to: link.to, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkItem, { "aria-current": link.id === active || void 0, children: link.text }) }, index)) });
 }
 function LeftMenuContent({ links }) {
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, links.map((link, index) => /* @__PURE__ */ import_react11.default.createElement(MenuListLinkItem, { link: link.to, key: index, primary: link.text })));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuListLinkItem, { link: link.to, primary: link.text }, index)) });
 }
 var Container2 = import_styled_components10.default.div`
   display: flex;
@@ -949,10 +981,11 @@ var LinkItem = import_styled_components10.default.div`
 `;
 
 // src/components/SwitchCheckbox/index.tsx
-var import_react13 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_utils6 = require("@charcoal-ui/utils");
-var SwitchCheckbox_default = import_react13.default.forwardRef(function SwitchCheckbox({
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SwitchCheckbox_default = React4.forwardRef(function SwitchCheckbox({
   gtmClass,
   flex = false,
   rowReverse = false,
@@ -960,16 +993,21 @@ var SwitchCheckbox_default = import_react13.default.forwardRef(function SwitchCh
   disabled,
   ...props
 }, ref) {
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Label,
     {
       className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "",
       flex,
       rowReverse,
-      "aria-disabled": disabled
-    },
-    /* @__PURE__ */ import_react13.default.createElement(SwitchOuter, null, /* @__PURE__ */ import_react13.default.createElement(SwitchInput, { ...props, disabled, ref }), /* @__PURE__ */ import_react13.default.createElement(SwitchInner, null, /* @__PURE__ */ import_react13.default.createElement(SwitchInnerKnob, null))),
-    children != null && /* @__PURE__ */ import_react13.default.createElement(Children2, { rowReverse }, children)
+      "aria-disabled": disabled,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(SwitchOuter, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SwitchInput, { ...props, disabled, ref }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SwitchInner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SwitchInnerKnob, {}) })
+        ] }),
+        children != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Children2, { rowReverse, children })
+      ]
+    }
   );
 });
 var Children2 = import_styled_components11.default.span`
@@ -1067,9 +1105,11 @@ var SwitchInput = import_styled_components11.default.input.attrs({
 `;
 
 // src/components/WithIcon/index.tsx
-var import_react14 = __toESM(require("react"));
+var import_react8 = require("react");
+var React5 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
-var WithIcon_default = import_react14.default.memo(function WithIcon({
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var WithIcon_default = React5.memo(function WithIcon({
   children,
   icon,
   show = true,
@@ -1078,8 +1118,12 @@ var WithIcon_default = import_react14.default.memo(function WithIcon({
   fit = false,
   fixed = false
 }) {
-  const node = fit ? width === void 0 ? /* @__PURE__ */ import_react14.default.createElement(AutoWidthIconAnchor, { show, pre }, icon) : /* @__PURE__ */ import_react14.default.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ import_react14.default.createElement(Icon3, null, icon)) : /* @__PURE__ */ import_react14.default.createElement(IconAnchorNaive, { show, pre }, /* @__PURE__ */ import_react14.default.createElement(IconNaive, null, icon));
-  return /* @__PURE__ */ import_react14.default.createElement(Root, null, pre && node, /* @__PURE__ */ import_react14.default.createElement(Text2, { fixed }, children), !pre && node);
+  const node = fit ? width === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutoWidthIconAnchor, { show, pre, children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconAnchor, { width, show, pre, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon3, { children: icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconAnchorNaive, { show, pre, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconNaive, { children: icon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Root, { children: [
+    pre && node,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text2, { fixed, children }),
+    !pre && node
+  ] });
 });
 var Root = import_styled_components12.default.div`
   display: flex;
@@ -1098,9 +1142,9 @@ function AutoWidthIconAnchor({
   show,
   pre
 }) {
-  const ref = (0, import_react14.useRef)(null);
+  const ref = (0, import_react8.useRef)(null);
   const width = useElementSize(ref, [null])?.width ?? 0;
-  return /* @__PURE__ */ import_react14.default.createElement(IconAnchor, { width, show, pre }, /* @__PURE__ */ import_react14.default.createElement(Icon3, { ref }, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconAnchor, { width, show, pre, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon3, { ref, children }) });
 }
 var forceCenteringCss = import_styled_components12.css`
   > svg {
@@ -1149,10 +1193,10 @@ var Icon3 = import_styled_components12.default.div`
 `;
 
 // src/index.ts
-var import_react23 = require("@charcoal-ui/react");
+var import_react13 = require("@charcoal-ui/react");
 
 // src/components/Carousel/index.tsx
-var import_react18 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_react_spring = require("react-spring");
 var import_styled_components14 = __toESM(require("styled-components"));
 
@@ -1180,11 +1224,10 @@ function passiveEvents() {
 var isEdge = () => navigator.userAgent.includes("Edge/");
 
 // src/hooks/index.ts
-var import_react15 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react15.useLayoutEffect : import_react15.useEffect;
+var import_react9 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react9.useLayoutEffect : import_react9.useEffect;
 
 // src/components/CarouselButton/index.tsx
-var import_react17 = __toESM(require("react"));
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/foundation/utils.ts
@@ -1195,12 +1238,12 @@ function unreachable(value) {
 }
 
 // src/components/icons/NextIcon.tsx
-var import_react16 = __toESM(require("react"));
+var import_jsx_runtime10 = require("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__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     IconBase,
     {
       viewBoxSize: size2,
@@ -1228,6 +1271,7 @@ function directionToTransform(direction) {
 
 // src/components/CarouselButton/index.tsx
 var import_utils9 = require("@charcoal-ui/utils");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function CarouselButton({
   direction,
   show,
@@ -1246,21 +1290,21 @@ function CarouselButton({
     paddingRight: Math.max(padding, 0),
     paddingBottom: bottom
   };
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Button,
     {
       type: "button",
       onClick,
       hide: !show,
       style: offsetStyle,
-      css: onlyNonTouchDevice
-    },
-    /* @__PURE__ */ import_react17.default.createElement(CarouselButtonIcon, null, /* @__PURE__ */ import_react17.default.createElement(
-      NextIcon,
-      {
-        direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
-      }
-    ))
+      css: onlyNonTouchDevice,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CarouselButtonIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        NextIcon,
+        {
+          direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
+        }
+      ) })
+    }
   );
 }
 var CAROUSEL_BUTTON_SIZE = 40;
@@ -1328,6 +1372,7 @@ var onlyNonTouchDevice = import_styled_components13.css`
 `;
 
 // src/components/Carousel/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var GRADIENT_WIDTH = 72;
 var SCROLL_AMOUNT_COEF = 0.75;
 function Carousel({
@@ -1344,15 +1389,15 @@ function Carousel({
   ...options
 }) {
   const [scrollLeft, setScrollLeft] = useDebounceAnimationState(0);
-  const animation = (0, import_react18.useRef)(false);
-  const [maxScrollLeft, setMaxScrollLeft] = (0, import_react18.useState)(0);
-  const [leftShow, setLeftShow] = (0, import_react18.useState)(false);
-  const [rightShow, setRightShow] = (0, import_react18.useState)(false);
+  const animation = (0, import_react10.useRef)(false);
+  const [maxScrollLeft, setMaxScrollLeft] = (0, import_react10.useState)(0);
+  const [leftShow, setLeftShow] = (0, import_react10.useState)(false);
+  const [rightShow, setRightShow] = (0, import_react10.useState)(false);
   const [styles, set] = (0, import_react_spring.useSpring)(() => ({ scroll: 0 }));
-  const ref = (0, import_react18.useRef)(null);
-  const visibleAreaRef = (0, import_react18.useRef)(null);
-  const innerRef = (0, import_react18.useRef)(null);
-  const handleRight = (0, import_react18.useCallback)(() => {
+  const ref = (0, import_react10.useRef)(null);
+  const visibleAreaRef = (0, import_react10.useRef)(null);
+  const innerRef = (0, import_react10.useRef)(null);
+  const handleRight = (0, import_react10.useCallback)(() => {
     if (visibleAreaRef.current === null) {
       return;
     }
@@ -1372,7 +1417,7 @@ function Carousel({
     scrollAmountCoef,
     setScrollLeft
   ]);
-  const handleLeft = (0, import_react18.useCallback)(() => {
+  const handleLeft = (0, import_react10.useCallback)(() => {
     if (visibleAreaRef.current === null) {
       return;
     }
@@ -1382,7 +1427,7 @@ function Carousel({
     set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current });
     animation.current = true;
   }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const newleftShow = scrollLeft > 0;
     const newrightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0;
     if (newleftShow !== leftShow || newrightShow !== rightShow) {
@@ -1391,7 +1436,7 @@ function Carousel({
       onScrollStateChange?.(newleftShow || newrightShow);
     }
   }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft]);
-  const handleScroll = (0, import_react18.useCallback)(() => {
+  const handleScroll = (0, import_react10.useCallback)(() => {
     if (ref.current === null) {
       return;
     }
@@ -1402,7 +1447,7 @@ function Carousel({
     const manualScrollLeft = ref.current.scrollLeft;
     setScrollLeft(manualScrollLeft);
   }, [animation, setScrollLeft, styles]);
-  const handleResize = (0, import_react18.useCallback)(() => {
+  const handleResize = (0, import_react10.useCallback)(() => {
     if (ref.current === null) {
       return;
     }
@@ -1450,7 +1495,7 @@ function Carousel({
       }
     }
   }, [ref.current]);
-  const handleScrollMove = (0, import_react18.useCallback)(() => {
+  const handleScrollMove = (0, import_react10.useCallback)(() => {
     if (ref.current === null) {
       return;
     }
@@ -1458,7 +1503,7 @@ function Carousel({
       onScroll(ref.current.scrollLeft);
     }
   }, [onScroll]);
-  const [disableGradient, setDisableGradient] = (0, import_react18.useState)(false);
+  const [disableGradient, setDisableGradient] = (0, import_react10.useState)(false);
   useIsomorphicLayoutEffect(() => {
     if (isEdge()) {
       setDisableGradient(true);
@@ -1467,67 +1512,79 @@ function Carousel({
   if (!disableGradient && options.hasGradient === true) {
     const fadeInGradient = options.fadeInGradient ?? false;
     const overflowGradient = !fadeInGradient;
-    return /* @__PURE__ */ import_react18.default.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ import_react18.default.createElement(GradientContainer, { fadeInGradient }, /* @__PURE__ */ import_react18.default.createElement(RightGradient, null, /* @__PURE__ */ import_react18.default.createElement(LeftGradient, { show: overflowGradient || scrollLeft > 0 }, /* @__PURE__ */ import_react18.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Container3, { ref: visibleAreaRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GradientContainer, { fadeInGradient, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RightGradient, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LeftGradient, { show: overflowGradient || scrollLeft > 0, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ScrollArea,
+        {
+          ref,
+          scrollLeft: styles.scroll,
+          onScroll: handleScrollMove,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CarouselContainer, { ref: innerRef, centerItems, children })
+        }
+      ) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ButtonsContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          CarouselButton,
+          {
+            direction: "left" /* Left */,
+            show: leftShow,
+            offset: buttonOffset,
+            bottomOffset,
+            padding: buttonPadding,
+            gradient: overflowGradient,
+            onClick: handleLeft
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          CarouselButton,
+          {
+            direction: "right" /* Right */,
+            show: rightShow,
+            offset: buttonOffset,
+            bottomOffset,
+            padding: buttonPadding,
+            gradient: true,
+            onClick: handleRight
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Container3, { ref: visibleAreaRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ScrollArea,
       {
         ref,
         scrollLeft: styles.scroll,
-        onScroll: handleScrollMove
-      },
-      /* @__PURE__ */ import_react18.default.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
-    )))), /* @__PURE__ */ import_react18.default.createElement(ButtonsContainer, null, /* @__PURE__ */ import_react18.default.createElement(
-      CarouselButton,
-      {
-        direction: "left" /* Left */,
-        show: leftShow,
-        offset: buttonOffset,
-        bottomOffset,
-        padding: buttonPadding,
-        gradient: overflowGradient,
-        onClick: handleLeft
-      }
-    ), /* @__PURE__ */ import_react18.default.createElement(
-      CarouselButton,
-      {
-        direction: "right" /* Right */,
-        show: rightShow,
-        offset: buttonOffset,
-        bottomOffset,
-        padding: buttonPadding,
-        gradient: true,
-        onClick: handleRight
+        onScroll: handleScrollMove,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CarouselContainer, { ref: innerRef, centerItems, children })
       }
-    )));
-  }
-  return /* @__PURE__ */ import_react18.default.createElement(Container3, { ref: visibleAreaRef }, /* @__PURE__ */ import_react18.default.createElement(
-    ScrollArea,
-    {
-      ref,
-      scrollLeft: styles.scroll,
-      onScroll: handleScrollMove
-    },
-    /* @__PURE__ */ import_react18.default.createElement(CarouselContainer, { ref: innerRef, centerItems }, children)
-  ), /* @__PURE__ */ import_react18.default.createElement(ButtonsContainer, null, /* @__PURE__ */ import_react18.default.createElement(
-    CarouselButton,
-    {
-      direction: "left" /* Left */,
-      show: leftShow,
-      offset: buttonOffset,
-      bottomOffset,
-      padding: buttonPadding,
-      onClick: handleLeft
-    }
-  ), /* @__PURE__ */ import_react18.default.createElement(
-    CarouselButton,
-    {
-      direction: "right" /* Right */,
-      show: rightShow,
-      offset: buttonOffset,
-      bottomOffset,
-      padding: buttonPadding,
-      onClick: handleRight
-    }
-  )));
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ButtonsContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        CarouselButton,
+        {
+          direction: "left" /* Left */,
+          show: leftShow,
+          offset: buttonOffset,
+          bottomOffset,
+          padding: buttonPadding,
+          onClick: handleLeft
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        CarouselButton,
+        {
+          direction: "right" /* Right */,
+          show: rightShow,
+          offset: buttonOffset,
+          bottomOffset,
+          padding: buttonPadding,
+          onClick: handleRight
+        }
+      )
+    ] })
+  ] });
 }
 var CarouselContainer = import_styled_components14.default.ul`
   vertical-align: top;
@@ -1606,15 +1663,15 @@ var LeftGradient = import_styled_components14.default.div`
 `;
 
 // src/components/Pager/index.tsx
-var import_react21 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
 
 // src/components/icons/DotsIcon.tsx
-var import_react19 = __toESM(require("react"));
 var import_styled_components15 = __toESM(require("styled-components"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function DotsIcon({ size: size3 }) {
-  return /* @__PURE__ */ import_react19.default.createElement(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3 }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "path",
     {
       fillRule: "evenodd",
@@ -1626,7 +1683,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
@@ -1636,17 +1693,17 @@ var StyledSVG = import_styled_components15.default.svg`
 `;
 
 // src/components/icons/WedgeIcon.tsx
-var import_react20 = __toESM(require("react"));
 var import_styled_components16 = __toESM(require("styled-components"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function WedgeIcon({ size: size3, direction }) {
-  return /* @__PURE__ */ import_react20.default.createElement("svg", { viewBox: "0 0 10 8", width: size3, height: size3 }, /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     StyledPolyline,
     {
       strokeWidth: "2",
       points: "1,2 5,6 9,2",
       transform: directionToTransform2(direction)
     }
-  ));
+  ) });
 }
 WedgeIcon.defaultProps = {
   size: 16,
@@ -1675,7 +1732,8 @@ var StyledPolyline = import_styled_components16.default.polyline`
 `;
 
 // src/components/Pager/index.tsx
-var import_react22 = require("@charcoal-ui/react");
+var import_react12 = require("@charcoal-ui/react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function usePagerWindow(page, pageCount, windowSize = 7) {
   if (process.env.NODE_ENV !== "production") {
     (0, import_warning.default)((page | 0) === page, `\`page\` must be interger (${page})`);
@@ -1684,7 +1742,7 @@ function usePagerWindow(page, pageCount, windowSize = 7) {
       `\`pageCount\` must be interger (${pageCount})`
     );
   }
-  const window2 = (0, import_react21.useMemo)(() => {
+  const window2 = (0, import_react11.useMemo)(() => {
     const visibleFirstPage = 1;
     const visibleLastPage = Math.min(
       pageCount,
@@ -1707,16 +1765,12 @@ function usePagerWindow(page, pageCount, windowSize = 7) {
       ];
     }
   }, [page, pageCount, windowSize]);
-  (0, import_react21.useDebugValue)(window2);
+  (0, import_react11.useDebugValue)(window2);
   return window2;
 }
-var Pager_default = import_react21.default.memo(function Pager({
-  page,
-  pageCount,
-  onChange
-}) {
+var Pager_default = (0, import_react11.memo)(function Pager({ page, pageCount, onChange }) {
   const window2 = usePagerWindow(page, pageCount);
-  const makeClickHandler = (0, import_react21.useCallback)(
+  const makeClickHandler = (0, import_react11.useCallback)(
     (value) => () => {
       onChange(value);
     },
@@ -1724,38 +1778,46 @@ var Pager_default = import_react21.default.memo(function Pager({
   );
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
-  return /* @__PURE__ */ import_react21.default.createElement(PagerContainer, null, /* @__PURE__ */ import_react21.default.createElement(
-    CircleButton,
-    {
-      type: "button",
-      hidden: !hasPrev,
-      disabled: !hasPrev,
-      onClick: makeClickHandler(Math.max(1, page - 1)),
-      noBackground: true
-    },
-    /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ })
-  ), window2.map(
-    (p) => p === "..." ? /* @__PURE__ */ import_react21.default.createElement(Spacer, { key: p }, /* @__PURE__ */ import_react21.default.createElement(DotsIcon, { size: 20 })) : p === page ? /* @__PURE__ */ import_react21.default.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p)) : /* @__PURE__ */ import_react21.default.createElement(CircleButton, { key: p, type: "button", onClick: makeClickHandler(p) }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p))
-  ), /* @__PURE__ */ import_react21.default.createElement(
-    CircleButton,
-    {
-      type: "button",
-      hidden: !hasNext,
-      disabled: !hasNext,
-      onClick: makeClickHandler(Math.min(pageCount, page + 1)),
-      noBackground: true
-    },
-    /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ })
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PagerContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      CircleButton,
+      {
+        type: "button",
+        hidden: !hasPrev,
+        disabled: !hasPrev,
+        onClick: makeClickHandler(Math.max(1, page - 1)),
+        noBackground: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WedgeIcon, { size: 16, direction: "left" /* Left */ })
+      }
+    ),
+    window2.map(
+      (p) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Spacer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DotsIcon, { size: 20 }) }, p) : p === page ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text3, { children: p }) }, p) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text3, { children: p }) }, p)
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      CircleButton,
+      {
+        type: "button",
+        hidden: !hasNext,
+        disabled: !hasNext,
+        onClick: makeClickHandler(Math.min(pageCount, page + 1)),
+        noBackground: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WedgeIcon, { size: 16, direction: "right" /* Right */ })
+      }
+    )
+  ] });
 });
 function LinkPager({ page, pageCount, makeUrl }) {
-  const { Link } = (0, import_react22.useComponentAbstraction)();
+  const { Link } = (0, import_react12.useComponentAbstraction)();
   const window2 = usePagerWindow(page, pageCount);
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
-  return /* @__PURE__ */ import_react21.default.createElement(PagerContainer, null, /* @__PURE__ */ import_react21.default.createElement(Link, { to: makeUrl(Math.max(1, page - 1)) }, /* @__PURE__ */ import_react21.default.createElement(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true }, /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "left" /* Left */ }))), window2.map(
-    (p) => p === "..." ? /* @__PURE__ */ import_react21.default.createElement(Spacer, { key: p }, /* @__PURE__ */ import_react21.default.createElement(DotsIcon, { size: 20, subLink: true })) : p === page ? /* @__PURE__ */ import_react21.default.createElement(CircleButton, { key: p, type: "button", "aria-current": true }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p)) : /* @__PURE__ */ import_react21.default.createElement(Link, { key: p, to: makeUrl(p) }, /* @__PURE__ */ import_react21.default.createElement(CircleButton, { type: "button" }, /* @__PURE__ */ import_react21.default.createElement(Text3, null, p)))
-  ), /* @__PURE__ */ import_react21.default.createElement(Link, { to: makeUrl(Math.min(pageCount, page + 1)) }, /* @__PURE__ */ import_react21.default.createElement(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true }, /* @__PURE__ */ import_react21.default.createElement(WedgeIcon, { size: 16, direction: "right" /* Right */ }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PagerContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Link, { to: makeUrl(Math.max(1, page - 1)), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CircleButton, { hidden: !hasPrev, "aria-disabled": !hasPrev, noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }) }),
+    window2.map(
+      (p) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Spacer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DotsIcon, { size: 20, subLink: true }) }, p) : p === page ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text3, { children: p }) }, p) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Link, { to: makeUrl(p), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CircleButton, { type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text3, { children: p }) }) }, p)
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Link, { to: makeUrl(Math.min(pageCount, page + 1)), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CircleButton, { hidden: !hasNext, "aria-disabled": !hasNext, noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WedgeIcon, { size: 16, direction: "right" /* Right */ }) }) })
+  ] });
 }
 var PagerContainer = import_styled_components17.default.nav`
   display: flex;