@charcoal-ui/react-sandbox 3.7.0 → 3.9.0

package/dist/index.esm.js

@@ -11,17 +11,7 @@ var FilterButton = React.forwardRef(function FilterButton2({
   hover,
   reactive = false
 }, ref) {
-  return /* @__PURE__ */ jsx(
-    ButtonLike,
-    {
-      active,
-      reactive,
-      hover,
-      onClick: active && !reactive ? void 0 : onClick,
-      ref,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(ButtonLike, { active, reactive, hover, onClick: active && !reactive ? void 0 : onClick, ref, children });
 });
 var FilterIconButton = React.forwardRef(function FilterIconButton2({
   onClick,
@@ -32,19 +22,7 @@ var FilterIconButton = React.forwardRef(function FilterIconButton2({
   width,
   height
 }, ref) {
-  return /* @__PURE__ */ jsx(
-    StyledButtonLike,
-    {
-      active,
-      reactive,
-      hover,
-      onClick: active && !reactive ? void 0 : onClick,
-      ref,
-      buttonWidth: width,
-      buttonHeight: height,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(StyledButtonLike, { active, reactive, hover, onClick: active && !reactive ? void 0 : onClick, ref, buttonWidth: width, buttonHeight: height, children });
 });
 var FilterLink = React.forwardRef(function FilterLink2({
   onClick,
@@ -54,79 +32,50 @@ var FilterLink = React.forwardRef(function FilterLink2({
   reactive = false,
   ...props
 }, ref) {
-  const { Link } = useComponentAbstraction();
+  const {
+    Link
+  } = useComponentAbstraction();
   if (active && !reactive) {
     return /* @__PURE__ */ jsx(PlainElement, { active: true, hover, ref, children });
   } else {
-    return /* @__PURE__ */ jsx(Link, { ...props, onClick, children: /* @__PURE__ */ jsx(
-      PlainElement,
-      {
-        active,
-        reactive,
-        hover,
-        ref,
-        children
-      }
-    ) });
+    return /* @__PURE__ */ jsx(Link, { ...props, onClick, children: /* @__PURE__ */ jsx(PlainElement, { active, reactive, hover, ref, children }) });
   }
 });
-var buttonCss = css`
-  display: block;
-  outline: none;
-  border: none;
-  padding: 9px 24px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  border-radius: /* absurd radius, but ensures rounded corners */ 2000px;
-  transition: color 0.2s;
-  color: ${({ theme: theme2 }) => theme2.color.text3};
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-
-  &:hover {
-    color: ${({ theme: theme2 }) => theme2.color.text2};
-  }
-
-  ${({ hover = false }) => hover && css`
-      color: ${({ theme: theme2 }) => theme2.color.text2};
-    `}
-
-  ${({ active = false }) => active && css`
-      background-color: ${({ theme: theme2 }) => theme2.color.surface3};
-      color: ${({ theme: theme2 }) => theme2.color.text2};
-    `}
-
-  ${({ active = false, reactive = false }) => active && !reactive && css`
-      cursor: default;
-    `}
-
-  @media ${({ theme: theme2 }) => maxWidth(theme2.breakpoint.screen1)} {
-    padding: 5px 16px;
-  }
-`;
-var padding0Css = css`
-  padding: 0;
-
-  @media ${({ theme: theme2 }) => maxWidth(theme2.breakpoint.screen1)} {
-    padding: 0;
-  }
-`;
-var ButtonLike = styled.button`
-  ${buttonCss}
-`;
-var PlainElement = styled.span`
-  ${buttonCss}
-`;
-var StyledButtonLike = styled(ButtonLike)`
-  ${padding0Css};
-  ${(p) => p.buttonWidth !== void 0 && `width: ${p.buttonWidth}px;`}
-  ${(p) => p.buttonHeight !== void 0 && `height: ${p.buttonHeight}px;`}
-`;
-var Filter = styled.div`
-  display: flex;
-`;
+var buttonCss = css(["display:block;outline:none;border:none;padding:9px 24px;font-size:14px;line-height:22px;font-weight:bold;border-radius:2000px;transition:color 0.2s;color:", ";cursor:pointer;user-select:none;background-color:transparent;&:hover{color:", ";}", " ", " ", " @media ", "{padding:5px 16px;}"], ({
+  theme: theme2
+}) => theme2.color.text3, ({
+  theme: theme2
+}) => theme2.color.text2, ({
+  hover = false
+}) => hover && css(["color:", ";"], ({
+  theme: theme2
+}) => theme2.color.text2), ({
+  active = false
+}) => active && css(["background-color:", ";color:", ";"], ({
+  theme: theme2
+}) => theme2.color.surface3, ({
+  theme: theme2
+}) => theme2.color.text2), ({
+  active = false,
+  reactive = false
+}) => active && !reactive && css(["cursor:default;"]), ({
+  theme: theme2
+}) => maxWidth(theme2.breakpoint.screen1));
+var padding0Css = css(["padding:0;@media ", "{padding:0;}"], ({
+  theme: theme2
+}) => maxWidth(theme2.breakpoint.screen1));
+var ButtonLike = styled.button.withConfig({
+  componentId: "ccl__sc-g0cfzt-0"
+})(["", ""], buttonCss);
+var PlainElement = styled.span.withConfig({
+  componentId: "ccl__sc-g0cfzt-1"
+})(["", ""], buttonCss);
+var StyledButtonLike = styled(ButtonLike).withConfig({
+  componentId: "ccl__sc-g0cfzt-2"
+})(["", ";", " ", ""], padding0Css, (p) => p.buttonWidth !== void 0 && `width: ${p.buttonWidth}px;`, (p) => p.buttonHeight !== void 0 && `height: ${p.buttonHeight}px;`);
+var Filter = styled.div.withConfig({
+  componentId: "ccl__sc-g0cfzt-3"
+})(["display:flex;"]);
 var Filter_default = Filter;
 
 // src/components/HintText/index.tsx
@@ -152,33 +101,14 @@ function IconBase({
   fillRule,
   clipRule
 }) {
-  return /* @__PURE__ */ jsx2(
-    Icon,
-    {
-      viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
-      size: size3,
-      currentColor,
-      children: /* @__PURE__ */ jsx2(
-        IconBasePath,
-        {
-          path: path2,
-          transform,
-          fillRule,
-          clipRule
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx2(Icon, { viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, size: size3, currentColor, children: /* @__PURE__ */ jsx2(IconBasePath, { path: path2, transform, fillRule, clipRule }) });
 }
-var Icon = styled3.svg`
-  stroke: none;
-  fill: ${({ currentColor = false, theme: theme2 }) => currentColor ? "currentColor" : theme2.color.text2};
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  line-height: 0;
-  font-size: 0;
-  vertical-align: middle;
-`;
+var Icon = styled3.svg.withConfig({
+  componentId: "ccl__sc-ifc22c-0"
+})(["stroke:none;fill:", ";width:", "px;height:", "px;line-height:0;font-size:0;vertical-align:middle;"], ({
+  currentColor = false,
+  theme: theme2
+}) => currentColor ? "currentColor" : theme2.color.text2, (props) => props.size, (props) => props.size);
 var IconBasePath = ({
   path: path2,
   transform,
@@ -186,15 +116,7 @@ var IconBasePath = ({
   clipRule
 }) => {
   if (typeof path2 === "string") {
-    return /* @__PURE__ */ jsx2(
-      "path",
-      {
-        d: path2,
-        transform,
-        fillRule,
-        clipRule
-      }
-    );
+    return /* @__PURE__ */ jsx2("path", { d: path2, transform, fillRule, clipRule });
   } else {
     return /* @__PURE__ */ jsx2(Fragment, { children: path2 });
   }
@@ -205,71 +127,46 @@ import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var size = 16;
 function InfoIcon() {
   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"
-      }
-    )
+    /* @__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};
-  fill-rule: evenodd;
-`;
+var Path = styled4.path.withConfig({
+  componentId: "ccl__sc-1yb63qx-0"
+})(["fill:", ";fill-rule:evenodd;"], ({
+  theme: theme2
+}) => theme2.color.surface1);
 
 // 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 }) {
+function HintText({
+  children,
+  context,
+  className
+}) {
   return /* @__PURE__ */ jsxs2(Container, { className, context, children: [
     /* @__PURE__ */ jsx4(IconWrap, { children: /* @__PURE__ */ jsx4(InfoIcon, {}) }),
     /* @__PURE__ */ jsx4(Text, { children })
   ] });
 }
-var Container = styled5.div.attrs(
-  styledProps
-)`
-  ${(p) => theme((o) => [
-  o.bg.surface3,
-  o.borderRadius(8),
-  o.padding.vertical(p.default.vertical),
-  o.padding.horizontal(p.default.horizontal)
-])}
-
-  @media ${({ theme: t }) => maxWidth2(t.breakpoint.screen1)} {
-    ${(p) => theme((o) => [
-  o.padding.vertical(p.screen1.vertical),
-  o.padding.horizontal(p.screen1.horizontal)
-])}
-  }
-
-  display: flex;
-  align-items: flex-start;
-  ${(p) => p.context === "page" && css2`
-      justify-content: center;
-    `}
-`;
-var IconWrap = styled5.div`
-  display: flex;
-  align-items: center;
-  color: ${(p) => p.theme.color.text4};
-  height: 22px;
-  margin: -4px 4px -4px 0;
-`;
-var Text = styled5.p`
-  ${theme((o) => [o.font.text2, o.typography(14)])}
-  margin: 0;
-`;
+var Container = styled5.div.attrs(styledProps).withConfig({
+  componentId: "ccl__sc-nb0aj3-0"
+})(["", " @media ", "{", "}display:flex;align-items:flex-start;", ""], (p) => theme((o) => [o.bg.surface3, o.borderRadius(8), o.padding.vertical(p.default.vertical), o.padding.horizontal(p.default.horizontal)]), ({
+  theme: t
+}) => maxWidth2(t.breakpoint.screen1), (p) => theme((o) => [o.padding.vertical(p.screen1.vertical), o.padding.horizontal(p.screen1.horizontal)]), (p) => p.context === "page" && css2(["justify-content:center;"]));
+var IconWrap = styled5.div.withConfig({
+  componentId: "ccl__sc-nb0aj3-1"
+})(["display:flex;align-items:center;color:", ";height:22px;margin:-4px 4px -4px 0;"], (p) => p.theme.color.text4);
+var Text = styled5.p.withConfig({
+  componentId: "ccl__sc-nb0aj3-2"
+})(["", " margin:0;"], theme((o) => [o.font.text2, o.typography(14)]));
 function styledProps(props) {
-  return { ...props, ...contextToProps(props.context) };
+  return {
+    ...props,
+    ...contextToProps(props.context)
+  };
 }
 function contextToProps(context) {
   switch (context) {
@@ -307,22 +204,10 @@ import styled6, { createGlobalStyle, css as css3 } from "styled-components";
 import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from "@charcoal-ui/foundation";
 var MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
 var RESPONSIVE_LEFT_WIDTH = columnSystem(2, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT;
-var RESPONSIVE_MAIN_MAX_WIDTH = columnSystem(
-  12,
-  COLUMN_UNIT,
-  GUTTER_UNIT
-);
+var RESPONSIVE_MAIN_MAX_WIDTH = columnSystem(12, COLUMN_UNIT, GUTTER_UNIT);
 
 // src/foundation/hooks.ts
-import {
-  useCallback,
-  useDebugValue,
-  useLayoutEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState
-} from "react";
+import { useCallback, useDebugValue, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { useTheme } from "styled-components";
 import { maxWidth as maxWidth3 } from "@charcoal-ui/utils";
@@ -330,16 +215,13 @@ function useMediaScreen1() {
   return useMedia(maxWidth3(useTheme().breakpoint.screen1));
 }
 function useMedia(query) {
-  const matcher = useMemo(
-    () => __TEST__ ? {
-      matches: false,
-      addListener: () => {
-      },
-      removeListener: () => {
-      }
-    } : matchMedia(query),
-    [query]
-  );
+  const matcher = useMemo(() => __TEST__ ? {
+    matches: false,
+    addListener: () => {
+    },
+    removeListener: () => {
+    }
+  } : matchMedia(query), [query]);
   const [matches, setMatches] = useState(matcher.matches);
   if (matcher.matches !== matches) {
     setMatches(matcher.matches);
@@ -367,18 +249,15 @@ function measure(ref) {
   return ref !== null ? ref.getBoundingClientRect() : void 0;
 }
 function useElementSize(ref, deps = []) {
-  const [size3, setSize] = useReducer(
-    (state, next) => {
-      if (state === void 0 || next === void 0) {
-        return next;
-      }
-      if (state.height === next.height && state.width === next.width) {
-        return state;
-      }
+  const [size3, setSize] = useReducer((state, next) => {
+    if (state === void 0 || next === void 0) {
       return next;
-    },
-    void 0
-  );
+    }
+    if (state.height === next.height && state.width === next.width) {
+      return state;
+    }
+    return next;
+  }, void 0);
   const [watch, setWatch] = useState(null);
   useLayoutEffect(() => {
     if (watch === null) {
@@ -462,149 +341,91 @@ function Layout({
     /* @__PURE__ */ jsx5(GlobalStyle, {})
   ] });
 }
-var HeaderTopMenuContainer = styled6.div`
-  margin-bottom: 40px;
-  overflow-x: auto;
-  word-break: keep-all;
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    margin-bottom: 0;
-    padding-left: 16px;
-    padding-bottom: 16px;
-    background-color: ${({ theme: theme2 }) => theme2.color.surface2};
-  }
-`;
-var GlobalStyle = createGlobalStyle`
-  :root {
-    background-color: ${({ theme: theme2 }) => theme2.color.background2};
-
-    @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-      background-color: ${({ theme: theme2 }) => theme2.color.background1};
-    }
-  }
-`;
-var LayoutRoot = styled6.div`
-  display: flex;
-  background-color: ${({ theme: theme2 }) => theme2.color.background2};
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    background-color: ${({ theme: theme2 }) => theme2.color.background1};
-  }
-`;
-var LeftArea = styled6.div`
-  min-width: ${RESPONSIVE_LEFT_WIDTH}px;
-  padding: 40px 0 40px ${GUTTER_UNIT2}px;
-  box-sizing: border-box;
-
-  @media ${({ theme: theme2 }) => theme2.breakpoint.screen3} {
-    display: none;
-  }
-`;
-var MainArea = styled6.div`
-  flex-grow: 1;
-  /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
-  min-width: 0;
-  max-width: ${(p) => p.center ? columnSystem2(6, COLUMN_UNIT2, GUTTER_UNIT2) : RESPONSIVE_MAIN_MAX_WIDTH}px;
-  padding: 40px ${MAIN_COLUMN_HORIZONTAL_MIN_MARGIN}px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    padding: 0;
-  }
-`;
-var Header = styled6.div`
-  font-weight: bold;
-  margin-bottom: 12px;
-  font-size: 20px;
-  line-height: 28px;
-  color: ${({ theme: theme2 }) => theme2.color.text2};
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    margin-bottom: 0;
-    padding: 12px;
-    font-size: 16px;
-    line-height: 24px;
-    display: flex;
-    justify-content: center;
-    background-color: ${({ theme: theme2 }) => theme2.color.surface2};
-  }
-`;
-var Grid = styled6.div`
-  display: grid;
-  gap: ${GUTTER_UNIT2}px;
-  grid-template-columns: 1fr;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: auto;
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    gap: 0;
-    background-color: ${({ theme: theme2 }) => theme2.color.background1};
-    padding-bottom: 60px;
-  }
-`;
-var LayoutItem = React2.forwardRef(
-  function LayoutItem2({ span, children }, ref) {
-    const { withLeft } = useContext(LayoutConfigContext);
-    return /* @__PURE__ */ jsx5(StyledLayoutItem, { span, withLeft, ref, children });
-  }
-);
-var StyledLayoutItem = styled6.div`
-  grid-column-start: auto;
-  grid-column-end: span ${(p) => p.span};
-  border-radius: 24px;
-  color: ${({ theme: theme2 }) => theme2.color.text2};
-  background-color: ${({ theme: theme2 }) => theme2.color.background1};
-  /* https://www.w3.org/TR/css-grid-1/#min-size-auto */
-  min-width: 0;
-
-  @media ${(p) => p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3} {
-    ${(p) => p.span > 2 && css3`
-        grid-column-end: span 2;
-      `}
-  }
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    ${(p) => p.span > 1 && css3`
-        grid-column-end: span 1;
-      `}
-
-    border-radius: 0;
-    padding-bottom: 40px;
-  }
-`;
-function LayoutItemHeader({ children }) {
-  const { wide, center } = useContext(LayoutConfigContext);
+var HeaderTopMenuContainer = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-0"
+})(["margin-bottom:40px;overflow-x:auto;word-break:keep-all;@media ", "{margin-bottom:0;padding-left:16px;padding-bottom:16px;background-color:", ";}"], ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), ({
+  theme: theme2
+}) => theme2.color.surface2);
+var GlobalStyle = createGlobalStyle([":root{background-color:", ";@media ", "{background-color:", ";}}"], ({
+  theme: theme2
+}) => theme2.color.background2, ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), ({
+  theme: theme2
+}) => theme2.color.background1);
+var LayoutRoot = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-1"
+})(["display:flex;background-color:", ";@media ", "{background-color:", ";}"], ({
+  theme: theme2
+}) => theme2.color.background2, ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), ({
+  theme: theme2
+}) => theme2.color.background1);
+var LeftArea = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-2"
+})(["min-width:", "px;padding:40px 0 40px ", "px;box-sizing:border-box;@media ", "{display:none;}"], RESPONSIVE_LEFT_WIDTH, GUTTER_UNIT2, ({
+  theme: theme2
+}) => theme2.breakpoint.screen3);
+var MainArea = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-3"
+})(["flex-grow:1;min-width:0;max-width:", "px;padding:40px ", "px;margin:0 auto;display:flex;flex-direction:column;@media ", "{padding:0;}"], (p) => p.center ? columnSystem2(6, COLUMN_UNIT2, GUTTER_UNIT2) : RESPONSIVE_MAIN_MAX_WIDTH, MAIN_COLUMN_HORIZONTAL_MIN_MARGIN, ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1));
+var Header = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-4"
+})(["font-weight:bold;margin-bottom:12px;font-size:20px;line-height:28px;color:", ";@media ", "{margin-bottom:0;padding:12px;font-size:16px;line-height:24px;display:flex;justify-content:center;background-color:", ";}"], ({
+  theme: theme2
+}) => theme2.color.text2, ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), ({
+  theme: theme2
+}) => theme2.color.surface2);
+var Grid = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-5"
+})(["display:grid;gap:", "px;grid-template-columns:1fr;grid-auto-columns:1fr;grid-auto-rows:auto;@media ", "{gap:0;background-color:", ";padding-bottom:60px;}"], GUTTER_UNIT2, ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), ({
+  theme: theme2
+}) => theme2.color.background1);
+var LayoutItem = React2.forwardRef(function LayoutItem2({
+  span,
+  children
+}, ref) {
+  const {
+    withLeft
+  } = useContext(LayoutConfigContext);
+  return /* @__PURE__ */ jsx5(StyledLayoutItem, { span, withLeft, ref, children });
+});
+var StyledLayoutItem = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-6"
+})(["grid-column-start:auto;grid-column-end:span ", ";border-radius:24px;color:", ";background-color:", ";min-width:0;@media ", "{", "}@media ", "{", " border-radius:0;padding-bottom:40px;}"], (p) => p.span, ({
+  theme: theme2
+}) => theme2.color.text2, ({
+  theme: theme2
+}) => theme2.color.background1, (p) => p.withLeft ? p.theme.breakpoint.screen4 : p.theme.breakpoint.screen3, (p) => p.span > 2 && css3(["grid-column-end:span 2;"]), ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), (p) => p.span > 1 && css3(["grid-column-end:span 1;"]));
+function LayoutItemHeader({
+  children
+}) {
+  const {
+    wide,
+    center
+  } = useContext(LayoutConfigContext);
   return /* @__PURE__ */ jsx5(StyledLayoutItemHeader, { wide, center, children });
 }
-var StyledLayoutItemHeader = styled6.div`
-  padding: 0 ${(p) => p.wide ? 40 : 24}px;
-  height: ${(p) => p.wide ? 64 : 48}px;
-  display: grid;
-  align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  background-color: ${({ theme: theme2 }) => theme2.color.surface2};
-  color: ${({ theme: theme2 }) => theme2.color.text2};
-  border-radius: 24px 24px 0 0;
-  ${(p) => p.center && css3`
-      justify-content: center;
-    `}
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    margin-top: 4px;
-    padding: 0 16px;
-    background: none;
-    overflow-x: auto;
-    border-radius: unset;
-    ${(p) => p.wide && css3`
-        height: 48px;
-        margin-top: 0;
-      `}
-  }
-`;
+var StyledLayoutItemHeader = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-7"
+})(["padding:0 ", "px;height:", "px;display:grid;align-items:center;font-size:16px;line-height:24px;font-weight:bold;background-color:", ";color:", ";border-radius:24px 24px 0 0;", " @media ", "{margin-top:4px;padding:0 16px;background:none;overflow-x:auto;border-radius:unset;", "}"], (p) => p.wide ? 40 : 24, (p) => p.wide ? 64 : 48, ({
+  theme: theme2
+}) => theme2.color.surface2, ({
+  theme: theme2
+}) => theme2.color.text2, (p) => p.center && css3(["justify-content:center;"]), ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), (p) => p.wide && css3(["height:48px;margin-top:0;"]));
 var LAYOUT_ITEM_BODY_PADDING = {
   wide: {
     x: 40,
@@ -634,39 +455,41 @@ function LayoutItemBody({
   horizontal = false,
   narrow = false
 }) {
-  const { wide } = useContext(LayoutConfigContext);
+  const {
+    wide
+  } = useContext(LayoutConfigContext);
   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`};
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    padding: ${(p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrowColumn1.x}px ${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yBottom}px` : `${LAYOUT_ITEM_BODY_PADDING.column1.y}px ${LAYOUT_ITEM_BODY_PADDING.column1.x}px ${0}`};
-  }
-
-  width: 100%;
-  box-sizing: border-box;
-`;
+var StyledLayoutItemBody = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-8"
+})(["padding:", ";@media ", "{padding:", ";}width:100%;box-sizing:border-box;"], (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`, ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), (p) => p.narrow ? `${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yTop}px ${p.horizontal ? 0 : LAYOUT_ITEM_BODY_PADDING.narrowColumn1.x}px ${LAYOUT_ITEM_BODY_PADDING.narrowColumn1.yBottom}px` : `${LAYOUT_ITEM_BODY_PADDING.column1.y}px ${LAYOUT_ITEM_BODY_PADDING.column1.x}px ${0}`);
 function useLayoutItemBodyPadding() {
-  const { wide } = useContext(LayoutConfigContext);
+  const {
+    wide
+  } = 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 } = useContext(LayoutConfigContext);
+  const {
+    wide
+  } = useContext(LayoutConfigContext);
   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;
-  margin-top: -${({ cancelTop = false, wide }) => !cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING.default.y}px;
-
-  @media ${({ theme: theme2 }) => maxWidth4(theme2.breakpoint.screen1)} {
-    margin: 0 -${LAYOUT_ITEM_BODY_PADDING.column1.x}px;
-    margin-top: -${({ cancelTop = false }) => !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x}px;
-  }
-`;
+var StyledCancelLayoutItemBodyPadding = styled6.div.withConfig({
+  componentId: "ccl__sc-j6bt5m-9"
+})(["margin:0 -", "px;margin-top:-", "px;@media ", "{margin:0 -", "px;margin-top:-", "px;}"], (p) => p.wide ? LAYOUT_ITEM_BODY_PADDING.wide.x : LAYOUT_ITEM_BODY_PADDING.default.x, ({
+  cancelTop = false,
+  wide
+}) => !cancelTop ? 0 : wide ? LAYOUT_ITEM_BODY_PADDING.wide.y : LAYOUT_ITEM_BODY_PADDING.default.y, ({
+  theme: theme2
+}) => maxWidth4(theme2.breakpoint.screen1), LAYOUT_ITEM_BODY_PADDING.column1.x, ({
+  cancelTop = false
+}) => !cancelTop ? 0 : LAYOUT_ITEM_BODY_PADDING.column1.x);
 
 // src/components/LeftMenu/index.tsx
 import styled9 from "styled-components";
@@ -680,10 +503,7 @@ import styled8, { css as css5 } from "styled-components";
 import styled7, { css as css4 } from "styled-components";
 
 // src/components/TextEllipsis/helper.ts
-import {
-  Children,
-  isValidElement
-} from "react";
+import { Children, isValidElement } from "react";
 var hasChildren = (element) => isValidElement(element) && Boolean(element.props.children);
 var childToString = (child) => {
   if (typeof child === "undefined" || child === null || typeof child === "boolean") {
@@ -698,50 +518,39 @@ var onlyText = (children) => {
   if (!Array.isArray(children) && !isValidElement(children)) {
     return childToString(children);
   }
-  return Children.toArray(children).reduce(
-    (text, child) => {
-      let newText = "";
-      if (isValidElement(child) && hasChildren(child)) {
-        newText = onlyText(child.props.children);
-      } else if (isValidElement(child) && !hasChildren(child)) {
-        newText = "";
-      } else {
-        newText = childToString(child);
-      }
-      return text.concat(newText);
-    },
-    ""
-  );
+  return Children.toArray(children).reduce((text, child) => {
+    let newText = "";
+    if (isValidElement(child) && hasChildren(child)) {
+      newText = onlyText(child.props.children);
+    } else if (isValidElement(child) && !hasChildren(child)) {
+      newText = "";
+    } else {
+      newText = childToString(child);
+    }
+    return text.concat(newText);
+  }, "");
 };
 
 // src/components/TextEllipsis/index.tsx
-var TextEllipsis = styled7.div.attrs(
-  ({ children, title = onlyText(children) }) => ({
-    title: title !== "" ? title : void 0
-  })
-)`
-  overflow: hidden;
-  line-height: ${(props) => props.lineHeight}px;
-  /* For english */
-  overflow-wrap: break-word;
-
-  ${({ lineLimit = 1, lineHeight }) => lineLimit === 1 ? css4`
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        ` : css4`
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: ${lineLimit};
-          /* Fallback for -webkit-line-clamp */
-          max-height: ${lineHeight * lineLimit}px;
-        `}
-`;
+var TextEllipsis = styled7.div.attrs(({
+  children,
+  title = onlyText(children)
+}) => ({
+  title: title !== "" ? title : void 0
+})).withConfig({
+  componentId: "ccl__sc-1pyqrbe-0"
+})(["overflow:hidden;line-height:", "px;overflow-wrap:break-word;", ""], (props) => props.lineHeight, ({
+  lineLimit = 1,
+  lineHeight
+}) => lineLimit === 1 ? css4(["text-overflow:ellipsis;white-space:nowrap;"]) : css4(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";max-height:", "px;"], lineLimit, lineHeight * lineLimit));
 
 // src/components/MenuListItem/index.tsx
 import { useComponentAbstraction as useComponentAbstraction2 } from "@charcoal-ui/react";
 import { disabledSelector } from "@charcoal-ui/utils";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var MenuListItemContext = React3.createContext({ padding: 24 });
+var MenuListItemContext = React3.createContext({
+  padding: 24
+});
 function MenuListItem({
   primary,
   secondary,
@@ -751,70 +560,31 @@ function MenuListItem({
   gtmClass,
   children
 }) {
-  const { padding } = useContext2(MenuListItemContext);
-  return /* @__PURE__ */ jsxs4(
-    Item,
-    {
-      hasSubLabel: secondary !== void 0,
-      onClick: (e) => !disabled && onClick && onClick(e),
-      sidePadding: padding,
-      noHover,
-      noClick: onClick === void 0,
-      "aria-disabled": disabled,
-      role: onClick !== void 0 ? "button" : void 0,
-      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
-      ]
-    }
-  );
+  const {
+    padding
+  } = useContext2(MenuListItemContext);
+  return /* @__PURE__ */ jsxs4(Item, { hasSubLabel: secondary !== void 0, onClick: (e) => !disabled && onClick && onClick(e), sidePadding: padding, noHover, noClick: onClick === void 0, "aria-disabled": disabled, role: onClick !== void 0 ? "button" : void 0, 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`
-  display: flex;
-  height: ${(p) => p.hasSubLabel ? 56 : 40}px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 ${(p) => p.sidePadding}px;
-  user-select: none;
-  cursor: ${(p) => p.noClick ? "default" : "pointer"};
-  transition: 0.2s background-color;
-
-  &:hover {
-    ${(p) => !p.noHover && css5`
-        background-color: ${({ theme: theme2 }) => theme2.color.surface3};
-      `}
-  }
-
-  ${theme((o) => o.disabled)}
-
-  ${disabledSelector} {
-    cursor: default;
-    pointer-events: none;
-
-    &:hover {
-      background-color: unset;
-    }
-  }
-`;
-var Labels = styled8.div`
-  display: flex;
-  flex-direction: column;
-`;
-var PrimaryText = styled8.div`
-  color: ${(p) => p.theme.color.text2};
-  line-height: 22px;
-  font-size: 14px;
-  display: grid;
-`;
-var SecondaryText = styled8.div`
-  color: ${(p) => p.theme.color.text3};
-  line-height: 18px;
-  font-size: 10px;
-`;
+var Item = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-0"
+})(["display:flex;height:", "px;align-items:center;justify-content:space-between;padding:0 ", "px;user-select:none;cursor:", ";transition:0.2s background-color;&:hover{", "}", " ", "{cursor:default;pointer-events:none;&:hover{background-color:unset;}}"], (p) => p.hasSubLabel ? 56 : 40, (p) => p.sidePadding, (p) => p.noClick ? "default" : "pointer", (p) => !p.noHover && css5(["background-color:", ";"], ({
+  theme: theme2
+}) => theme2.color.surface3), theme((o) => o.disabled), disabledSelector);
+var Labels = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-1"
+})(["display:flex;flex-direction:column;"]);
+var PrimaryText = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-2"
+})(["color:", ";line-height:22px;font-size:14px;display:grid;"], (p) => p.theme.color.text2);
+var SecondaryText = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-3"
+})(["color:", ";line-height:18px;font-size:10px;"], (p) => p.theme.color.text3);
 function MenuListLinkItem({
   link,
   onClick,
@@ -826,7 +596,9 @@ function MenuListLinkItem({
   children,
   ...linkProps
 }) {
-  const { Link } = useComponentAbstraction2();
+  const {
+    Link
+  } = useComponentAbstraction2();
   const props = {
     disabled,
     primary,
@@ -837,9 +609,9 @@ function MenuListLinkItem({
   };
   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;
-`;
+var A = styled8.a.withConfig({
+  componentId: "ccl__sc-1sufjh-4"
+})(["display:block;"]);
 function MenuListLinkItemWithIcon({
   icon,
   primary: text,
@@ -862,27 +634,22 @@ function MenuListItemWithIcon({
   ] });
   return /* @__PURE__ */ jsx6(MenuListItem, { primary, ...props });
 }
-var IconContainer = styled8.div`
-  display: grid;
-  gap: 8px;
-  grid-auto-flow: column;
-  align-items: center;
-`;
-var Icon2 = styled8.div`
-  color: ${({ theme: theme2 }) => theme2.color.text3};
-  display: flex;
-`;
-var MenuListSpacer = styled8.div`
-  height: 24px;
-`;
-var MenuListLabel = styled8.div`
-  padding: 0 16px;
-  font-size: 12px;
-  line-height: 16px;
-  color: ${({ theme: theme2 }) => theme2.color.text3};
-  margin-top: -2px;
-  margin-bottom: 6px;
-`;
+var IconContainer = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-5"
+})(["display:grid;gap:8px;grid-auto-flow:column;align-items:center;"]);
+var Icon2 = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-6"
+})(["color:", ";display:flex;"], ({
+  theme: theme2
+}) => theme2.color.text3);
+var MenuListSpacer = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-7"
+})(["height:24px;"]);
+var MenuListLabel = styled8.div.withConfig({
+  componentId: "ccl__sc-1sufjh-8"
+})(["padding:0 16px;font-size:12px;line-height:16px;color:", ";margin-top:-2px;margin-bottom:6px;"], ({
+  theme: theme2
+}) => theme2.color.text3);
 
 // src/components/LeftMenu/index.tsx
 import { useComponentAbstraction as useComponentAbstraction3 } from "@charcoal-ui/react";
@@ -891,37 +658,30 @@ function LeftMenu({
   links,
   active
 }) {
-  const { Link } = useComponentAbstraction3();
+  const {
+    Link
+  } = useComponentAbstraction3();
   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 }) {
+function LeftMenuContent({
+  links
+}) {
   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;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-var LinkItem = styled9.div`
-  display: flex;
-  align-items: center;
-  color: ${({ theme: theme2 }) => theme2.color.text3};
-  border-radius: 24px;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 22px;
-  padding: 0 16px;
-  height: 40px;
-  transition: 0.2s color;
-  &:hover {
-    transition: 0.2s color;
-    color: ${({ theme: theme2 }) => theme2.color.text2};
-  }
-  &[aria-current] {
-    color: ${({ theme: theme2 }) => theme2.color.text2};
-    background-color: ${({ theme: theme2 }) => theme2.color.surface3};
-  }
-`;
+var Container2 = styled9.div.withConfig({
+  componentId: "ccl__sc-t7vwxn-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;"]);
+var LinkItem = styled9.div.withConfig({
+  componentId: "ccl__sc-t7vwxn-1"
+})(["display:flex;align-items:center;color:", ";border-radius:24px;font-weight:bold;font-size:14px;line-height:22px;padding:0 16px;height:40px;transition:0.2s color;&:hover{transition:0.2s color;color:", ";}&[aria-current]{color:", ";background-color:", ";}"], ({
+  theme: theme2
+}) => theme2.color.text3, ({
+  theme: theme2
+}) => theme2.color.text2, ({
+  theme: theme2
+}) => theme2.color.text2, ({
+  theme: theme2
+}) => theme2.color.surface3);
 
 // src/components/SwitchCheckbox/index.tsx
 import * as React4 from "react";
@@ -936,116 +696,48 @@ var SwitchCheckbox_default = React4.forwardRef(function SwitchCheckbox({
   disabled,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsxs5(
-    Label,
-    {
-      className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "",
-      flex,
-      rowReverse,
-      "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 })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs5(Label, { className: gtmClass !== void 0 ? `gtm-${gtmClass}` : "", flex, rowReverse, "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`
-  ${(p) => p.rowReverse ? css6`
-          margin-right: 8px;
-        ` : css6`
-          margin-left: 8px;
-        `}
-`;
-var Label = styled10.label`
-  display: inline-flex;
-  align-items: center;
-  ${({ flex }) => flex && css6`
-      display: flex;
-      justify-content: space-between;
-    `}
-  ${({ rowReverse }) => css6`
-      flex-direction: ${rowReverse ? "row-reverse" : "row"};
-    `}
-  cursor: pointer;
-  outline: 0;
-
-  &[aria-disabled='true'] {
-    cursor: auto;
-  }
-`;
-var SwitchOuter = styled10.span`
-  display: inline-flex;
-  position: relative;
-  z-index: 0;
-`;
-var SwitchInner = styled10.div`
-  position: relative;
-  box-sizing: border-box;
-  width: 28px;
-  height: 16px;
-  border-radius: 16px;
-  border: 2px solid transparent;
-  background: ${({ theme: theme2 }) => theme2.color.text4};
-  transition: box-shadow 0.2s, background-color 0.2s;
-`;
-var SwitchInnerKnob = styled10.div`
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  width: 12px;
-  height: 12px;
-  background-color: ${({ theme: theme2 }) => theme2.color.text5};
-  border-radius: 50%;
-  transform: translateX(0);
-  transition: transform 0.2s;
-`;
+var Children2 = styled10.span.withConfig({
+  componentId: "ccl__sc-vg0z5k-0"
+})(["", ""], (p) => p.rowReverse ? css6(["margin-right:8px;"]) : css6(["margin-left:8px;"]));
+var Label = styled10.label.withConfig({
+  componentId: "ccl__sc-vg0z5k-1"
+})(["display:inline-flex;align-items:center;", " ", " cursor:pointer;outline:0;&[aria-disabled='true']{cursor:auto;}"], ({
+  flex
+}) => flex && css6(["display:flex;justify-content:space-between;"]), ({
+  rowReverse
+}) => css6(["flex-direction:", ";"], rowReverse ? "row-reverse" : "row"));
+var SwitchOuter = styled10.span.withConfig({
+  componentId: "ccl__sc-vg0z5k-2"
+})(["display:inline-flex;position:relative;z-index:0;"]);
+var SwitchInner = styled10.div.withConfig({
+  componentId: "ccl__sc-vg0z5k-3"
+})(["position:relative;box-sizing:border-box;width:28px;height:16px;border-radius:16px;border:2px solid transparent;background:", ";transition:box-shadow 0.2s,background-color 0.2s;"], ({
+  theme: theme2
+}) => theme2.color.text4);
+var SwitchInnerKnob = styled10.div.withConfig({
+  componentId: "ccl__sc-vg0z5k-4"
+})(["position:absolute;display:block;top:0;left:0;width:12px;height:12px;background-color:", ";border-radius:50%;transform:translateX(0);transition:transform 0.2s;"], ({
+  theme: theme2
+}) => theme2.color.text5);
 var SwitchInput = styled10.input.attrs({
   type: "checkbox"
-})`
-  position: absolute;
-  /* NOTE: this is contained by the GraphicCheckboxOuter */
-  z-index: 1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  /* just to control the clickable area if used standalone */
-  border-radius: 16px;
-  opacity: 0;
-  appearance: none;
-  outline: none;
-  cursor: pointer;
-
-  &:checked {
-    ~ ${SwitchInner} {
-      background-color: ${({ theme: theme2 }) => theme2.color.brand};
-
-      ${SwitchInnerKnob} {
-        transform: translateX(12px);
-      }
-    }
-  }
-
-  &:disabled {
-    cursor: auto;
-
-    ~ ${SwitchInner} {
-      opacity: ${({ theme: theme2 }) => theme2.elementEffect.disabled.opacity};
-    }
-  }
-
-  &:not(:disabled):focus {
-    ~ ${SwitchInner} {
-      box-shadow: 0 0 0 4px
-        ${({ theme: theme2 }) => applyEffect(theme2.color.brand, theme2.elementEffect.disabled)};
-    }
-  }
-`;
+}).withConfig({
+  componentId: "ccl__sc-vg0z5k-5"
+})(["position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:16px;opacity:0;appearance:none;outline:none;cursor:pointer;&:checked{~ ", "{background-color:", ";", "{transform:translateX(12px);}}}&:disabled{cursor:auto;~ ", "{opacity:", ";}}&:not(:disabled):focus{~ ", "{box-shadow:0 0 0 4px ", ";}}"], SwitchInner, ({
+  theme: theme2
+}) => theme2.color.brand, SwitchInnerKnob, SwitchInner, ({
+  theme: theme2
+}) => theme2.elementEffect.disabled.opacity, SwitchInner, ({
+  theme: theme2
+}) => applyEffect(theme2.color.brand, theme2.elementEffect.disabled));
 
 // src/components/WithIcon/index.tsx
 import { useRef as useRef2 } from "react";
@@ -1068,18 +760,12 @@ var WithIcon_default = React5.memo(function WithIcon({
     !pre && node
   ] });
 });
-var Root = styled11.div`
-  display: flex;
-  align-items: center;
-`;
-var Text2 = styled11.div`
-  ${(p) => !p.fixed && css7`
-      min-width: 0;
-      overflow: hidden;
-    `}
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
+var Root = styled11.div.withConfig({
+  componentId: "ccl__sc-12w6fz6-0"
+})(["display:flex;align-items:center;"]);
+var Text2 = styled11.div.withConfig({
+  componentId: "ccl__sc-12w6fz6-1"
+})(["", " white-space:nowrap;text-overflow:ellipsis;"], (p) => !p.fixed && css7(["min-width:0;overflow:hidden;"]));
 function AutoWidthIconAnchor({
   children,
   show,
@@ -1089,57 +775,23 @@ function AutoWidthIconAnchor({
   const width = useElementSize(ref, [null])?.width ?? 0;
   return /* @__PURE__ */ jsx9(IconAnchor, { width, show, pre, children: /* @__PURE__ */ jsx9(Icon3, { ref, children }) });
 }
-var forceCenteringCss = css7`
-  > svg {
-    display: block;
-  }
-`;
-var iconAnchorCss = css7`
-  ${(p) => p.show === "collapse" ? css7`
-          display: none;
-        ` : css7`
-          visibility: ${p.show ? "visible" : "hidden"};
-        `};
-  ${(p) => p.pre ? css7`
-          margin-right: 4px;
-        ` : css7`
-          margin-left: 4px;
-        `}
-`;
-var IconAnchorNaive = styled11.div`
-  display: flex;
-  align-items: center;
-
-  ${iconAnchorCss}
-`;
-var IconNaive = styled11.div`
-  display: inline-flex;
-
-  ${forceCenteringCss}
-`;
-var IconAnchor = styled11.div`
-  display: flex;
-  position: relative;
-  /* Iconをline-heightに関与させない */
-  height: 0;
-  /* 横方向の領域は確保する */
-  width: ${(p) => p.width}px;
-
-  ${iconAnchorCss}
-`;
-var Icon3 = styled11.div`
-  display: inline-flex;
-  position: absolute;
-  transform: translateY(-50%);
-
-  ${forceCenteringCss}
-`;
+var forceCenteringCss = css7(["> svg{display:block;}"]);
+var iconAnchorCss = css7(["", ";", ""], (p) => p.show === "collapse" ? css7(["display:none;"]) : css7(["visibility:", ";"], p.show ? "visible" : "hidden"), (p) => p.pre ? css7(["margin-right:4px;"]) : css7(["margin-left:4px;"]));
+var IconAnchorNaive = styled11.div.withConfig({
+  componentId: "ccl__sc-12w6fz6-2"
+})(["display:flex;align-items:center;", ""], iconAnchorCss);
+var IconNaive = styled11.div.withConfig({
+  componentId: "ccl__sc-12w6fz6-3"
+})(["display:inline-flex;", ""], forceCenteringCss);
+var IconAnchor = styled11.div.withConfig({
+  componentId: "ccl__sc-12w6fz6-4"
+})(["display:flex;position:relative;height:0;width:", "px;", ""], (p) => p.width, iconAnchorCss);
+var Icon3 = styled11.div.withConfig({
+  componentId: "ccl__sc-12w6fz6-5"
+})(["display:inline-flex;position:absolute;transform:translateY(-50%);", ""], forceCenteringCss);
 
 // src/index.ts
-import {
-  ComponentAbstraction,
-  useComponentAbstraction as useComponentAbstraction5
-} from "@charcoal-ui/react";
+import { ComponentAbstraction, useComponentAbstraction as useComponentAbstraction5 } from "@charcoal-ui/react";
 
 // src/components/Carousel/index.tsx
 import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useRef as useRef3 } from "react";
@@ -1178,27 +830,18 @@ import styled12, { css as css8 } from "styled-components";
 
 // src/foundation/utils.ts
 function unreachable(value) {
-  throw new Error(
-    arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`
-  );
+  throw new Error(arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`);
 }
 
 // src/components/icons/NextIcon.tsx
 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 }) {
+function NextIcon({
+  direction
+}) {
   const transform = directionToTransform(direction);
-  return /* @__PURE__ */ jsx10(
-    IconBase,
-    {
-      viewBoxSize: size2,
-      size: size2,
-      currentColor: true,
-      path,
-      transform
-    }
-  );
+  return /* @__PURE__ */ jsx10(IconBase, { viewBoxSize: size2, size: size2, currentColor: true, path, transform });
 }
 function directionToTransform(direction) {
   switch (direction) {
@@ -1236,86 +879,42 @@ function CarouselButton({
     paddingRight: Math.max(padding, 0),
     paddingBottom: bottom
   };
-  return /* @__PURE__ */ jsx11(
-    Button,
-    {
-      type: "button",
-      onClick,
-      hide: !show,
-      style: offsetStyle,
-      css: onlyNonTouchDevice,
-      children: /* @__PURE__ */ jsx11(CarouselButtonIcon, { children: /* @__PURE__ */ jsx11(
-        NextIcon,
-        {
-          direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
-        }
-      ) })
-    }
-  );
+  return /* @__PURE__ */ jsx11(_StyledButton, { type: "button", onClick, hide: !show, style: offsetStyle, 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;
-var CarouselButtonIcon = styled12.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${CAROUSEL_BUTTON_SIZE}px;
-  height: ${CAROUSEL_BUTTON_SIZE}px;
-  border-radius: 50%;
-  background-color: ${({ theme: theme2 }) => theme2.color.surface4};
-  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;
-  color: ${({ theme: theme2 }) => theme2.color.text5};
-`;
-var Button = styled12.button`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  min-width: 40px;
-  border: none;
-  outline: 0;
-  background: transparent;
-  cursor: pointer;
-  transition: 0.4s visibility, 0.4s opacity;
-  /* つらい */
-  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */
-  z-index: 1;
-
-  &:hover ${CarouselButtonIcon} {
-    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.hover)};
-    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.hover)};
-  }
-
-  &:active ${CarouselButtonIcon} {
-    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.press)};
-    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.press)};
-  }
-
-  ${(p) => p.hide && css8`
-      visibility: hidden;
-      opacity: 0;
-      pointer-events: none;
-    `}
-`;
-var ScrollHintIcon = styled12(CarouselButtonIcon)`
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.hover)};
-    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.hover)};
-  }
-
-  &:active {
-    background-color: ${({ theme: theme2 }) => applyEffect2(theme2.color.surface4, theme2.effect.press)};
-    color: ${({ theme: theme2 }) => applyEffect2(theme2.color.text5, theme2.effect.press)};
-  }
-`;
-var onlyNonTouchDevice = css8`
-  @media (hover: none) and (pointer: coarse) {
-    display: none;
-  }
-`;
+var CarouselButtonIcon = styled12.div.withConfig({
+  componentId: "ccl__sc-gjlnt0-0"
+})(["display:flex;align-items:center;justify-content:center;width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;color:", ";"], CAROUSEL_BUTTON_SIZE, CAROUSEL_BUTTON_SIZE, ({
+  theme: theme2
+}) => theme2.color.surface4, ({
+  theme: theme2
+}) => theme2.color.text5);
+var Button = styled12.button.withConfig({
+  componentId: "ccl__sc-gjlnt0-1"
+})(["position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0;min-width:40px;border:none;outline:0;background:transparent;cursor:pointer;transition:0.4s visibility,0.4s opacity;z-index:1;&:hover ", "{background-color:", ";color:", ";}&:active ", "{background-color:", ";color:", ";}", ""], CarouselButtonIcon, ({
+  theme: theme2
+}) => applyEffect2(theme2.color.surface4, theme2.effect.hover), ({
+  theme: theme2
+}) => applyEffect2(theme2.color.text5, theme2.effect.hover), CarouselButtonIcon, ({
+  theme: theme2
+}) => applyEffect2(theme2.color.surface4, theme2.effect.press), ({
+  theme: theme2
+}) => applyEffect2(theme2.color.text5, theme2.effect.press), (p) => p.hide && css8(["visibility:hidden;opacity:0;pointer-events:none;"]));
+var _StyledButton = styled12(Button).withConfig({
+  componentId: "ccl__sc-gjlnt0-2"
+})(["", ""], onlyNonTouchDevice);
+var ScrollHintIcon = styled12(CarouselButtonIcon).withConfig({
+  componentId: "ccl__sc-gjlnt0-3"
+})(["cursor:pointer;&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}"], ({
+  theme: theme2
+}) => applyEffect2(theme2.color.surface4, theme2.effect.hover), ({
+  theme: theme2
+}) => applyEffect2(theme2.color.text5, theme2.effect.hover), ({
+  theme: theme2
+}) => applyEffect2(theme2.color.surface4, theme2.effect.press), ({
+  theme: theme2
+}) => applyEffect2(theme2.color.text5, theme2.effect.press));
+var onlyNonTouchDevice = css8(["@media (hover:none) and (pointer:coarse){display:none;}"]);
 
 // src/components/Carousel/index.tsx
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -1325,7 +924,10 @@ function Carousel({
   buttonOffset = 0,
   buttonPadding = 16,
   bottomOffset = 0,
-  defaultScroll: { align = "left", offset: scrollOffset = 0 } = {},
+  defaultScroll: {
+    align = "left",
+    offset: scrollOffset = 0
+  } = {},
   onScroll,
   onResize,
   children,
@@ -1339,7 +941,9 @@ function Carousel({
   const [maxScrollLeft, setMaxScrollLeft] = useState2(0);
   const [leftShow, setLeftShow] = useState2(false);
   const [rightShow, setRightShow] = useState2(false);
-  const [styles, set] = useSpring(() => ({ scroll: 0 }));
+  const [styles, set] = useSpring(() => ({
+    scroll: 0
+  }));
   const ref = useRef3(null);
   const visibleAreaRef = useRef3(null);
   const innerRef = useRef3(null);
@@ -1347,30 +951,36 @@ function Carousel({
     if (visibleAreaRef.current === null) {
       return;
     }
-    const { clientWidth } = visibleAreaRef.current;
-    const scroll = Math.min(
-      scrollLeft + clientWidth * scrollAmountCoef,
-      maxScrollLeft
-    );
+    const {
+      clientWidth
+    } = visibleAreaRef.current;
+    const scroll = Math.min(scrollLeft + clientWidth * scrollAmountCoef, maxScrollLeft);
     setScrollLeft(scroll, true);
-    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current });
+    set({
+      scroll,
+      from: {
+        scroll: scrollLeft
+      },
+      reset: !animation.current
+    });
     animation.current = true;
-  }, [
-    animation,
-    maxScrollLeft,
-    scrollLeft,
-    set,
-    scrollAmountCoef,
-    setScrollLeft
-  ]);
+  }, [animation, maxScrollLeft, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
   const handleLeft = useCallback2(() => {
     if (visibleAreaRef.current === null) {
       return;
     }
-    const { clientWidth } = visibleAreaRef.current;
+    const {
+      clientWidth
+    } = visibleAreaRef.current;
     const scroll = Math.max(scrollLeft - clientWidth * scrollAmountCoef, 0);
     setScrollLeft(scroll, true);
-    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current });
+    set({
+      scroll,
+      from: {
+        scroll: scrollLeft
+      },
+      reset: !animation.current
+    });
     animation.current = true;
   }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
   useEffect2(() => {
@@ -1397,7 +1007,10 @@ function Carousel({
     if (ref.current === null) {
       return;
     }
-    const { clientWidth, scrollWidth } = ref.current;
+    const {
+      clientWidth,
+      scrollWidth
+    } = ref.current;
     const newMaxScrollLeft = scrollWidth - clientWidth;
     setMaxScrollLeft(newMaxScrollLeft);
     if (onResize) {
@@ -1410,11 +1023,9 @@ function Carousel({
     if (elm === null || innerElm === null) {
       return;
     }
-    elm.addEventListener(
-      "wheel",
-      handleScroll,
-      passiveEvents() && { passive: true }
-    );
+    elm.addEventListener("wheel", handleScroll, passiveEvents() && {
+      passive: true
+    });
     const resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(elm);
     const resizeObserverInner = new ResizeObserver(handleResize);
@@ -1429,13 +1040,7 @@ function Carousel({
     if (align !== "left" || scrollOffset !== 0) {
       const scroll = ref.current;
       if (scroll !== null) {
-        const scrollLength = Math.max(
-          0,
-          Math.min(
-            align === "left" && scrollOffset > 0 ? scrollOffset : align === "center" ? maxScrollLeft / 2 + scrollOffset : align === "right" && scrollOffset <= maxScrollLeft ? maxScrollLeft - scrollOffset / 2 : 0,
-            maxScrollLeft
-          )
-        );
+        const scrollLength = Math.max(0, Math.min(align === "left" && scrollOffset > 0 ? scrollOffset : align === "center" ? maxScrollLeft / 2 + scrollOffset : align === "right" && scrollOffset <= maxScrollLeft ? maxScrollLeft - scrollOffset / 2 : 0, maxScrollLeft));
         scroll.scrollLeft = scrollLength;
         setScrollLeft(scrollLength, true);
       }
@@ -1459,40 +1064,10 @@ function Carousel({
     const fadeInGradient = options.fadeInGradient ?? false;
     const overflowGradient = !fadeInGradient;
     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__ */ 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
-          }
-        )
+        /* @__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 })
       ] })
     ] });
   }
@@ -1507,106 +1082,34 @@ function Carousel({
       }
     ),
     /* @__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
-        }
-      )
+      /* @__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;
-  overflow: hidden;
-  list-style: none;
-  padding: 0;
-
-  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */
-  min-width: 100%;
-  box-sizing: border-box;
-
-  ${({ centerItems = false }) => centerItems ? css9`
-          display: flex;
-          width: max-content;
-          margin: 0 auto;
-        ` : css9`
-          display: inline-flex;
-          margin: 0;
-        `}
-`;
-var ButtonsContainer = styled13.div`
-  opacity: 0;
-  transition: 0.4s opacity;
-`;
-var Container3 = styled13.div`
-  &:hover ${ButtonsContainer} {
-    opacity: 1;
-  }
-
-  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
-  position: relative;
-  z-index: 0;
-`;
-var ScrollArea = styled13(animated.div)`
-  overflow-x: auto;
-  padding: 0;
-  margin: 0;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  scrollbar-width: none;
-`;
-var GradientContainer = styled13.div`
-  /* NOTE: LeftGradientがはみ出るためhidden */
-  overflow: hidden;
-  ${(p) => !p.fadeInGradient && css9`
-      margin-left: ${-GRADIENT_WIDTH}px;
-      ${CarouselContainer} {
-        padding-left: ${GRADIENT_WIDTH}px;
-      }
-    `}
-
-  margin-right: ${-GRADIENT_WIDTH}px;
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  ${CarouselContainer} {
-    padding-right: ${GRADIENT_WIDTH}px;
-  }
-`;
-var RightGradient = styled13.div`
-  mask-image: linear-gradient(
-    to right,
-    #000 calc(100% - ${GRADIENT_WIDTH}px),
-    transparent
-  );
-`;
-var LeftGradient = styled13.div`
-  /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
-  margin-right: ${-GRADIENT_WIDTH}px;
-  padding-right: ${GRADIENT_WIDTH}px;
-  /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */
-  transition: 0.2s all ease-in;
-  mask: linear-gradient(to right, transparent, #000 ${GRADIENT_WIDTH}px)
-    ${(p) => p.show ? 0 : -GRADIENT_WIDTH}px 0;
-`;
+var CarouselContainer = styled13.ul.withConfig({
+  componentId: "ccl__sc-1qkjnfo-0"
+})(["vertical-align:top;overflow:hidden;list-style:none;padding:0;min-width:100%;box-sizing:border-box;", ""], ({
+  centerItems = false
+}) => centerItems ? css9(["display:flex;width:max-content;margin:0 auto;"]) : css9(["display:inline-flex;margin:0;"]));
+var ButtonsContainer = styled13.div.withConfig({
+  componentId: "ccl__sc-1qkjnfo-1"
+})(["opacity:0;transition:0.4s opacity;"]);
+var Container3 = styled13.div.withConfig({
+  componentId: "ccl__sc-1qkjnfo-2"
+})(["&:hover ", "{opacity:1;}position:relative;z-index:0;"], ButtonsContainer);
+var ScrollArea = styled13(animated.div).withConfig({
+  componentId: "ccl__sc-1qkjnfo-3"
+})(["overflow-x:auto;padding:0;margin:0;&::-webkit-scrollbar{display:none;}scrollbar-width:none;"]);
+var GradientContainer = styled13.div.withConfig({
+  componentId: "ccl__sc-1qkjnfo-4"
+})(["overflow:hidden;", " margin-right:", "px;", "{padding-right:", "px;}"], (p) => !p.fadeInGradient && css9(["margin-left:", "px;", "{padding-left:", "px;}"], -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH), -GRADIENT_WIDTH, CarouselContainer, GRADIENT_WIDTH);
+var RightGradient = styled13.div.withConfig({
+  componentId: "ccl__sc-1qkjnfo-5"
+})(["mask-image:linear-gradient( to right,#000 calc(100% - ", "px),transparent );"], GRADIENT_WIDTH);
+var LeftGradient = styled13.div.withConfig({
+  componentId: "ccl__sc-1qkjnfo-6"
+})(["margin-right:", "px;padding-right:", "px;transition:0.2s all ease-in;mask:linear-gradient(to right,transparent,#000 ", "px) ", "px 0;"], -GRADIENT_WIDTH, GRADIENT_WIDTH, GRADIENT_WIDTH, (p) => p.show ? 0 : -GRADIENT_WIDTH);
 
 // src/components/Pager/index.tsx
 import { memo as memo2, useCallback as useCallback3, useDebugValue as useDebugValue2, useMemo as useMemo2 } from "react";
@@ -1616,40 +1119,31 @@ import warning from "warning";
 // src/components/icons/DotsIcon.tsx
 import styled14 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
-function DotsIcon({ size: size3 }) {
-  return /* @__PURE__ */ jsx13(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ jsx13(
-    "path",
-    {
-      fillRule: "evenodd",
-      d: `M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5
+function DotsIcon({
+  size: size3
+}) {
+  return /* @__PURE__ */ jsx13(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ jsx13("path", { fillRule: "evenodd", d: `M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5
           C6.38071187,9.5 7.5,10.6192881 7.5,12 C7.5,13.3807119 6.38071187,14.5 5,14.5 Z M12,14.5
           C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5
           C13.3807119,9.5 14.5,10.6192881 14.5,12 C14.5,13.3807119 13.3807119,14.5 12,14.5 Z M19,14.5
           C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5
-          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)"
-    }
-  ) });
+          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
 };
-var StyledSVG = styled14.svg`
-  fill: currentColor;
-`;
+var StyledSVG = styled14.svg.withConfig({
+  componentId: "ccl__sc-1ma336a-0"
+})(["fill:currentColor;"]);
 
 // src/components/icons/WedgeIcon.tsx
 import styled15 from "styled-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
-function WedgeIcon({ size: size3, direction }) {
-  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)
-    }
-  ) });
+function WedgeIcon({
+  size: size3,
+  direction
+}) {
+  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,
@@ -1670,12 +1164,9 @@ function directionToTransform2(direction) {
       return unreachable(direction);
   }
 }
-var StyledPolyline = styled15.polyline`
-  fill: none;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  stroke: currentColor;
-`;
+var StyledPolyline = styled15.polyline.withConfig({
+  componentId: "ccl__sc-617sjj-0"
+})(["fill:none;stroke-linejoin:round;stroke-linecap:round;stroke:currentColor;"]);
 
 // src/components/Pager/index.tsx
 import { useComponentAbstraction as useComponentAbstraction4 } from "@charcoal-ui/react";
@@ -1683,36 +1174,25 @@ import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function usePagerWindow(page, pageCount, pageRangeDisplayed = 7) {
   if (process.env.NODE_ENV !== "production") {
     warning((page | 0) === page, `\`page\` must be integer (${page})`);
-    warning(
-      (pageCount | 0) === pageCount,
-      `\`pageCount\` must be integer (${pageCount})`
-    );
-    warning(
-      (pageRangeDisplayed | 0) === pageRangeDisplayed,
-      `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`
-    );
+    warning((pageCount | 0) === pageCount, `\`pageCount\` must be integer (${pageCount})`);
+    warning((pageRangeDisplayed | 0) === pageRangeDisplayed, `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`);
     warning(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`);
   }
   const window2 = useMemo2(() => {
     const visibleFirstPage = 1;
-    const visibleLastPage = Math.min(
-      pageCount,
-      Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed)
-    );
+    const visibleLastPage = Math.min(pageCount, Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed));
     if (visibleLastPage <= pageRangeDisplayed) {
-      return Array.from(
-        { length: 1 + visibleLastPage - visibleFirstPage },
-        (_, i) => visibleFirstPage + i
-      );
+      return Array.from({
+        length: 1 + visibleLastPage - visibleFirstPage
+      }, (_, i) => visibleFirstPage + i);
     } else {
       const start = visibleLastPage - (pageRangeDisplayed - 1) + 2;
       return [
         visibleFirstPage,
         "...",
-        ...Array.from(
-          { length: 1 + visibleLastPage - start },
-          (_, i) => start + i
-        )
+        ...Array.from({
+          length: 1 + visibleLastPage - start
+        }, (_, i) => start + i)
       ];
     }
   }, [page, pageCount, pageRangeDisplayed]);
@@ -1726,40 +1206,15 @@ var Pager_default = memo2(function Pager({
   onChange
 }) {
   const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
-  const makeClickHandler = useCallback3(
-    (value) => () => {
-      onChange(value);
-    },
-    [onChange]
-  );
+  const makeClickHandler = useCallback3((value) => () => {
+    onChange(value);
+  }, [onChange]);
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
   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 */ })
-      }
-    )
+    /* @__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({
@@ -1768,88 +1223,48 @@ function LinkPager({
   pageRangeDisplayed,
   makeUrl
 }) {
-  const { Link } = useComponentAbstraction4();
+  const {
+    Link
+  } = useComponentAbstraction4();
   const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
   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)
-    ),
+    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;
-  justify-content: center;
-  align-items: center;
-`;
-var CircleButton = styled16.button`
-  font-size: 1rem;
-  line-height: calc(1em + 8px);
-  text-decoration: none;
-  border: none;
-  outline: none;
-  touch-action: manipulation;
-  user-select: none;
-  transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s,
-    background 0.2s ease 0s, opacity 0.2s ease 0s;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: content-box;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  /* HACK:
-   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
-   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
-   */
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-transform: translateZ(0);
-
-  &[hidden] {
-    visibility: hidden;
-    display: block;
-  }
-
-  border-radius: 48px;
-
-  background: transparent;
-  color: ${({ theme: theme2 }) => theme2.color.text3};
-
-  &:hover {
-    background: ${({ theme: theme2 }) => theme2.color.surface3};
-    color: ${({ theme: theme2 }) => theme2.color.text2};
-  }
-
-  &[aria-current] {
-    background-color: ${({ theme: theme2 }) => theme2.color.surface6};
-    color: ${({ theme: theme2 }) => theme2.color.text5};
-  }
-
-  &[aria-current]:hover {
-    background-color: ${({ theme: theme2 }) => theme2.color.surface6};
-    color: ${({ theme: theme2 }) => theme2.color.text5};
-  }
-
-  ${({ noBackground = false }) => noBackground && css10`
-      /* stylelint-disable-next-line no-duplicate-selectors */
-      &:hover {
-        background: transparent;
-      }
-    `}
-`;
-var Spacer = styled16(CircleButton).attrs({ type: "button", disabled: true })`
-  && {
-    color: ${({ theme: theme2 }) => theme2.color.text3};
-    background: none;
-  }
-`;
+var PagerContainer = styled16.nav.withConfig({
+  componentId: "ccl__sc-1bh6g9v-0"
+})(["display:flex;justify-content:center;align-items:center;"]);
+var CircleButton = styled16.button.withConfig({
+  componentId: "ccl__sc-1bh6g9v-1"
+})(["font-size:1rem;line-height:calc(1em + 8px);text-decoration:none;border:none;outline:none;touch-action:manipulation;user-select:none;transition:box-shadow 0.2s ease 0s,color 0.2s ease 0s,background 0.2s ease 0s,opacity 0.2s ease 0s;display:flex;justify-content:center;align-items:center;box-sizing:content-box;min-width:24px;min-height:24px;padding:8px;cursor:pointer;font-weight:bold;-webkit-transform:translateZ(0);&[hidden]{visibility:hidden;display:block;}border-radius:48px;background:transparent;color:", ";&:hover{background:", ";color:", ";}&[aria-current]{background-color:", ";color:", ";}&[aria-current]:hover{background-color:", ";color:", ";}", ""], ({
+  theme: theme2
+}) => theme2.color.text3, ({
+  theme: theme2
+}) => theme2.color.surface3, ({
+  theme: theme2
+}) => theme2.color.text2, ({
+  theme: theme2
+}) => theme2.color.surface6, ({
+  theme: theme2
+}) => theme2.color.text5, ({
+  theme: theme2
+}) => theme2.color.surface6, ({
+  theme: theme2
+}) => theme2.color.text5, ({
+  noBackground = false
+}) => noBackground && css10(["&:hover{background:transparent;}"]));
+var Spacer = styled16(CircleButton).attrs({
+  type: "button",
+  disabled: true
+}).withConfig({
+  componentId: "ccl__sc-1bh6g9v-2"
+})(["&&{color:", ";background:none;}"], ({
+  theme: theme2
+}) => theme2.color.text3);
 var Text3 = "span";
 export {
   CancelLayoutItemBodyPadding,