@charcoal-ui/react 2.2.1 → 2.4.0

package/dist/index.cjs.js

@@ -0,0 +1,2157 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button_default,
+  CharcoalProvider: () => CharcoalProvider,
+  Checkbox: () => Checkbox_default,
+  Clickable: () => Clickable_default,
+  ComponentAbstraction: () => ComponentAbstraction,
+  DropdownSelector: () => DropdownSelector_default,
+  DropdownSelectorItem: () => DropdownSelectorItem,
+  Icon: () => Icon_default,
+  IconButton: () => IconButton_default,
+  LoadingSpinner: () => LoadingSpinner,
+  LoadingSpinnerIcon: () => LoadingSpinnerIcon,
+  Modal: () => Modal,
+  ModalAlign: () => ModalAlign,
+  ModalBody: () => ModalBody,
+  ModalButtons: () => ModalButtons,
+  ModalHeader: () => ModalHeader,
+  MultiSelect: () => MultiSelect,
+  MultiSelectGroup: () => MultiSelectGroup,
+  OverlayProvider: () => import_overlays.OverlayProvider,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  SSRProvider: () => import_ssr.SSRProvider,
+  SegmentedControl: () => SegmentedControl_default,
+  Switch: () => SwitchCheckbox,
+  TagItem: () => TagItem_default,
+  TextField: () => TextField_default,
+  useComponentAbstraction: () => useComponentAbstraction
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/ComponentAbstraction.tsx
+var import_react = __toESM(require("react"));
+var DefaultLink = import_react.default.forwardRef(
+  function DefaultLink2({ to, children, ...rest }, ref) {
+    return /* @__PURE__ */ import_react.default.createElement("a", { href: to, ref, ...rest }, children);
+  }
+);
+var DefaultValue = {
+  Link: DefaultLink
+};
+var ComponentAbstractionContext = import_react.default.createContext(DefaultValue);
+function ComponentAbstraction({ children, components }) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    ComponentAbstractionContext.Provider,
+    {
+      value: { ...DefaultValue, ...components }
+    },
+    children
+  );
+}
+function useComponentAbstraction() {
+  return (0, import_react.useContext)(ComponentAbstractionContext);
+}
+
+// src/core/SSRProvider.tsx
+var import_ssr = require("@react-aria/ssr");
+
+// src/core/OverlayProvider.tsx
+var import_overlays = require("@react-aria/overlays");
+
+// src/core/CharcoalProvider.tsx
+var import_react2 = __toESM(require("react"));
+var import_styled_components = require("styled-components");
+var import_styled = require("@charcoal-ui/styled");
+function CharcoalProvider({
+  themeMap,
+  defaultTheme = themeMap[":root"],
+  components = {},
+  injectTokens = true,
+  children
+}) {
+  return /* @__PURE__ */ import_react2.default.createElement(import_ssr.SSRProvider, null, /* @__PURE__ */ import_react2.default.createElement(import_styled_components.ThemeProvider, { theme: defaultTheme }, injectTokens && /* @__PURE__ */ import_react2.default.createElement(import_styled.TokenInjector, { theme: themeMap }), /* @__PURE__ */ import_react2.default.createElement(ComponentAbstraction, { components }, /* @__PURE__ */ import_react2.default.createElement(import_overlays.OverlayProvider, null, children))));
+}
+
+// src/components/Button/index.tsx
+var import_react4 = __toESM(require("react"));
+var import_styled_components4 = __toESM(require("styled-components"));
+
+// src/_lib/index.ts
+function unreachable(value) {
+  throw new Error(
+    arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`
+  );
+}
+
+// src/styled.ts
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_styled2 = require("@charcoal-ui/styled");
+var theme = (0, import_styled2.createTheme)(import_styled_components2.default);
+
+// src/components/Clickable/index.tsx
+var import_react3 = __toESM(require("react"));
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_utils = require("@charcoal-ui/utils");
+var Clickable = import_react3.default.forwardRef(
+  function Clickable2(props, ref) {
+    const { Link } = useComponentAbstraction();
+    if ("to" in props) {
+      const { onClick, disabled = false, ...rest } = props;
+      return /* @__PURE__ */ import_react3.default.createElement(
+        A,
+        {
+          ...rest,
+          as: disabled ? void 0 : Link,
+          onClick: disabled ? void 0 : onClick,
+          "aria-disabled": disabled,
+          ref
+        }
+      );
+    } else {
+      return /* @__PURE__ */ import_react3.default.createElement(Button, { ...props, ref });
+    }
+  }
+);
+var Clickable_default = Clickable;
+var clickableCss = import_styled_components3.css`
+  /* Clickable style */
+  cursor: pointer;
+
+  ${import_utils.disabledSelector} {
+    cursor: default;
+  }
+`;
+var Button = import_styled_components3.default.button`
+  /* Reset button appearance */
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  /* Change the font styles in all browsers. */
+  font: inherit;
+
+  /* Remove the margin in Firefox and Safari. */
+  margin: 0;
+
+  /* Show the overflow in Edge. */
+  overflow: visible;
+
+  /* Remove the inheritance of text transform in Firefox. */
+  text-transform: none;
+
+  /* Remove the inner border and padding in Firefox. */
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  ${clickableCss}
+`;
+var A = import_styled_components3.default.span`
+  /* Reset a-tag appearance */
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  .text {
+    top: calc(1em + 2em);
+  }
+
+  ${clickableCss}
+`;
+
+// src/components/Button/index.tsx
+var Button2 = import_react4.default.forwardRef(function Button3({
+  children,
+  variant = "Default",
+  size = "M",
+  fixed = false,
+  disabled = false,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ import_react4.default.createElement(
+    StyledButton,
+    {
+      ...rest,
+      disabled,
+      variant,
+      size,
+      fixed,
+      ref
+    },
+    children
+  );
+});
+var Button_default = Button2;
+var StyledButton = (0, import_styled_components4.default)(Clickable_default).withConfig({
+  shouldForwardProp(prop) {
+    return prop !== "fixed";
+  }
+}).attrs(styledProps)`
+  width: ${(p) => p.fixed ? "stretch" : "min-content"};
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+
+  ${(p) => theme((o) => [
+  o.font[p.font].hover.press,
+  o.bg[p.background].hover.press,
+  o.typography(14).bold.preserveHalfLeading,
+  o.padding.horizontal(p.padding),
+  o.disabled,
+  o.borderRadius("oval"),
+  o.outline.default.focus
+])}
+
+  /* よく考えたらheight=32って定義が存在しないな... */
+  height: ${(p) => p.height}px;
+`;
+function styledProps(props) {
+  return {
+    ...props,
+    ...variantToProps(props.variant),
+    ...sizeToProps(props.size)
+  };
+}
+function variantToProps(variant) {
+  switch (variant) {
+    case "Overlay":
+      return { font: "text5", background: "surface4" };
+    case "Default":
+      return { font: "text2", background: "surface3" };
+    case "Primary":
+      return { font: "text5", background: "brand" };
+    case "Navigation":
+      return { font: "text5", background: "surface6" };
+    case "Danger":
+      return { font: "text5", background: "assertive" };
+    default:
+      return unreachable(variant);
+  }
+}
+function sizeToProps(size) {
+  switch (size) {
+    case "S":
+      return {
+        height: 32,
+        padding: 16
+      };
+    case "M":
+      return {
+        height: 40,
+        padding: 24
+      };
+  }
+}
+
+// src/components/IconButton/index.tsx
+var import_react5 = __toESM(require("react"));
+var import_styled_components5 = __toESM(require("styled-components"));
+var IconButton = import_react5.default.forwardRef(
+  function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
+    validateIconSize(size, icon);
+    return /* @__PURE__ */ import_react5.default.createElement(StyledIconButton, { ...rest, ref, variant, size }, /* @__PURE__ */ import_react5.default.createElement("pixiv-icon", { name: icon }));
+  }
+);
+var IconButton_default = IconButton;
+var StyledIconButton = (0, import_styled_components5.default)(Clickable_default).attrs(styledProps2)`
+  user-select: none;
+
+  width: ${(p) => p.width}px;
+  height: ${(p) => p.height}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ font, background }) => theme((o) => [
+  o.font[font],
+  o.bg[background].hover.press,
+  o.disabled,
+  o.borderRadius("oval"),
+  o.outline.default.focus
+])}
+`;
+function styledProps2(props) {
+  return {
+    ...props,
+    ...variantToProps2(props.variant),
+    ...sizeToProps2(props.size)
+  };
+}
+function variantToProps2(variant) {
+  switch (variant) {
+    case "Default":
+      return { font: "text3", background: "transparent" };
+    case "Overlay":
+      return { font: "text5", background: "surface4" };
+  }
+}
+function sizeToProps2(size) {
+  switch (size) {
+    case "XS":
+      return {
+        width: 20,
+        height: 20
+      };
+    case "S":
+      return {
+        width: 32,
+        height: 32
+      };
+    case "M":
+      return {
+        width: 40,
+        height: 40
+      };
+  }
+}
+function validateIconSize(size, icon) {
+  let requiredIconSize;
+  switch (size) {
+    case "XS":
+      requiredIconSize = "16";
+      break;
+    case "S":
+    case "M":
+      requiredIconSize = "24";
+      break;
+  }
+  const result = /^\d*/u.exec(icon);
+  if (result == null) {
+    throw new Error("Invalid icon name");
+  }
+  const [iconSize] = result;
+  if (iconSize !== requiredIconSize) {
+    console.warn(
+      `IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`
+    );
+  }
+}
+
+// src/components/Radio/index.tsx
+var import_react6 = __toESM(require("react"));
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_warning = __toESM(require("warning"));
+var import_utils2 = require("@charcoal-ui/utils");
+function Radio({
+  value,
+  forceChecked = false,
+  disabled = false,
+  children
+}) {
+  const {
+    name,
+    selected,
+    disabled: isParentDisabled,
+    readonly,
+    hasError,
+    onChange
+  } = (0, import_react6.useContext)(RadioGroupContext);
+  (0, import_warning.default)(
+    name !== void 0,
+    `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
+  );
+  const isSelected = value === selected;
+  const isDisabled = disabled || isParentDisabled;
+  const isReadonly = readonly && !isSelected;
+  const handleChange = (0, import_react6.useCallback)(
+    (e) => {
+      onChange(e.currentTarget.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ import_react6.default.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly }, /* @__PURE__ */ import_react6.default.createElement(
+    RadioInput,
+    {
+      name,
+      value,
+      checked: forceChecked || isSelected,
+      hasError,
+      onChange: handleChange,
+      disabled: isDisabled || isReadonly
+    }
+  ), children != null && /* @__PURE__ */ import_react6.default.createElement(RadioLabel, null, children));
+}
+var RadioRoot = import_styled_components6.default.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: ${({ theme: theme4 }) => (0, import_utils2.px)(theme4.spacing[4])};
+  align-items: center;
+  cursor: pointer;
+
+  ${theme((o) => [o.disabled])}
+`;
+var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" })`
+  /** Make prior to browser default style */
+  &[type='radio'] {
+    appearance: none;
+    display: block;
+    box-sizing: border-box;
+
+    margin: 0;
+    padding: 6px;
+
+    width: 20px;
+    height: 20px;
+
+    ${({ hasError = false }) => theme((o) => [
+  o.borderRadius("oval"),
+  o.bg.surface1.hover.press,
+  hasError && o.outline.assertive
+])};
+
+    &:not(:checked) {
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${({ theme: theme4 }) => theme4.color.text3};
+    }
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+
+      &::after {
+        content: '';
+        display: block;
+        width: 8px;
+        height: 8px;
+        pointer-events: none;
+
+        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
+      }
+    }
+
+    ${theme((o) => o.outline.default.focus)}
+  }
+`;
+var RadioLabel = import_styled_components6.default.div`
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+var StyledRadioGroup = import_styled_components6.default.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: ${({ theme: theme4 }) => (0, import_utils2.px)(theme4.spacing[8])};
+`;
+var RadioGroupContext = import_react6.default.createContext({
+  name: void 0,
+  selected: void 0,
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange() {
+    throw new Error(
+      "Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?"
+    );
+  }
+});
+function RadioGroup({
+  className,
+  value,
+  label,
+  name,
+  onChange,
+  disabled,
+  readonly,
+  hasError,
+  children
+}) {
+  const handleChange = (0, import_react6.useCallback)(
+    (next) => {
+      onChange(next);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ import_react6.default.createElement(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        name,
+        selected: value,
+        disabled: disabled ?? false,
+        readonly: readonly ?? false,
+        hasError: hasError ?? false,
+        onChange: handleChange
+      }
+    },
+    /* @__PURE__ */ import_react6.default.createElement(
+      StyledRadioGroup,
+      {
+        role: "radiogroup",
+        "aria-orientation": "vertical",
+        "aria-label": label,
+        "aria-invalid": hasError,
+        className
+      },
+      children
+    )
+  );
+}
+
+// src/components/MultiSelect/index.tsx
+var import_react8 = __toESM(require("react"));
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_warning2 = __toESM(require("warning"));
+var import_utils3 = require("@charcoal-ui/utils");
+
+// src/components/MultiSelect/context.ts
+var import_react7 = require("react");
+var MultiSelectGroupContext = (0, import_react7.createContext)({
+  name: void 0,
+  selected: [],
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange() {
+    throw new Error(
+      "Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?"
+    );
+  }
+});
+
+// src/components/MultiSelect/index.tsx
+function MultiSelect({
+  value,
+  forceChecked = false,
+  disabled = false,
+  onChange,
+  variant = "default",
+  children
+}) {
+  const {
+    name,
+    selected,
+    disabled: parentDisabled,
+    readonly,
+    hasError,
+    onChange: parentOnChange
+  } = (0, import_react8.useContext)(MultiSelectGroupContext);
+  (0, import_warning2.default)(
+    name !== void 0,
+    `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
+  );
+  const isSelected = selected.includes(value) || forceChecked;
+  const isDisabled = disabled || parentDisabled || readonly;
+  const handleChange = (0, import_react8.useCallback)(
+    (event) => {
+      if (!(event.currentTarget instanceof HTMLInputElement)) {
+        return;
+      }
+      if (onChange)
+        onChange({ value, selected: event.currentTarget.checked });
+      parentOnChange({ value, selected: event.currentTarget.checked });
+    },
+    [onChange, parentOnChange, value]
+  );
+  return /* @__PURE__ */ import_react8.default.createElement(MultiSelectRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react8.default.createElement(
+    MultiSelectInput,
+    {
+      ...{
+        name,
+        value,
+        hasError
+      },
+      checked: isSelected,
+      disabled: isDisabled,
+      onChange: handleChange,
+      overlay: variant === "overlay",
+      "aria-invalid": hasError
+    }
+  ), /* @__PURE__ */ import_react8.default.createElement(
+    MultiSelectInputOverlay,
+    {
+      overlay: variant === "overlay",
+      hasError,
+      "aria-hidden": true
+    },
+    /* @__PURE__ */ import_react8.default.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
+  ), Boolean(children) && /* @__PURE__ */ import_react8.default.createElement(MultiSelectLabel, null, children));
+}
+var MultiSelectRoot = import_styled_components7.default.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  ${import_utils3.disabledSelector} {
+    cursor: default;
+  }
+  gap: ${({ theme: theme4 }) => (0, import_utils3.px)(theme4.spacing[4])};
+  ${theme((o) => o.disabled)}
+`;
+var MultiSelectLabel = import_styled_components7.default.div`
+  display: flex;
+  align-items: center;
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+var MultiSelectInput = import_styled_components7.default.input.attrs({ type: "checkbox" })`
+  &[type='checkbox'] {
+    appearance: none;
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin: 0;
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+    }
+
+    ${({ hasError, overlay }) => theme((o) => [
+  o.bg.text3.hover.press,
+  o.borderRadius("oval"),
+  hasError && !overlay && o.outline.assertive,
+  overlay && o.bg.surface4
+])};
+  }
+`;
+var MultiSelectInputOverlay = import_styled_components7.default.div`
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ hasError, overlay }) => theme((o) => [
+  o.width.px(24),
+  o.height.px(24),
+  o.borderRadius("oval"),
+  o.font.text5,
+  hasError && overlay && o.outline.assertive
+])}
+
+  ${({ overlay }) => overlay && import_styled_components7.css`
+      border-color: ${({ theme: theme4 }) => theme4.color.text5};
+      border-width: 2px;
+      border-style: solid;
+    `}
+`;
+function MultiSelectGroup({
+  className,
+  name,
+  ariaLabel,
+  selected,
+  onChange,
+  disabled = false,
+  readonly = false,
+  hasError = false,
+  children
+}) {
+  const handleChange = (0, import_react8.useCallback)(
+    (payload) => {
+      const index = selected.indexOf(payload.value);
+      if (payload.selected) {
+        if (index < 0) {
+          onChange([...selected, payload.value]);
+        }
+      } else {
+        if (index >= 0) {
+          onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
+        }
+      }
+    },
+    [onChange, selected]
+  );
+  return /* @__PURE__ */ import_react8.default.createElement(
+    MultiSelectGroupContext.Provider,
+    {
+      value: {
+        name,
+        selected: Array.from(new Set(selected)),
+        disabled,
+        readonly,
+        hasError,
+        onChange: handleChange
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      "div",
+      {
+        className,
+        "aria-label": ariaLabel,
+        "data-testid": "SelectGroup"
+      },
+      children
+    )
+  );
+}
+
+// src/components/Switch/index.tsx
+var import_switch = require("@react-aria/switch");
+var import_react9 = __toESM(require("react"));
+var import_react_stately = require("react-stately");
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_utils4 = require("@charcoal-ui/utils");
+function SwitchCheckbox(props) {
+  const { disabled, className } = props;
+  const ariaSwitchProps = (0, import_react9.useMemo)(
+    () => ({
+      ...props,
+      "aria-label": "children" in props ? void 0 : props.label,
+      isDisabled: props.disabled,
+      isSelected: props.checked
+    }),
+    [props]
+  );
+  const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
+  const ref = (0, import_react9.useRef)(null);
+  const {
+    inputProps: { className: _className, type: _type, ...rest }
+  } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
+  return /* @__PURE__ */ import_react9.default.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ import_react9.default.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ import_react9.default.createElement(LabelInner, null, props.children) : void 0);
+}
+var Label = import_styled_components8.default.label`
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  cursor: pointer;
+  outline: 0;
+
+  ${theme((o) => o.disabled)}
+
+  ${import_utils4.disabledSelector} {
+    cursor: default;
+  }
+`;
+var LabelInner = import_styled_components8.default.div`
+  ${theme((o) => [
+  o.typography(14).preserveHalfLeading,
+  o.font.text2,
+  o.margin.left(4)
+])}
+`;
+var SwitchInput = import_styled_components8.default.input.attrs({
+  type: "checkbox"
+})`
+  &[type='checkbox'] {
+    appearance: none;
+    display: inline-flex;
+    position: relative;
+    box-sizing: border-box;
+    width: 28px;
+    border: 2px solid transparent;
+    transition: box-shadow 0.2s, background-color 0.2s;
+    cursor: inherit;
+    ${theme((o) => [
+  o.borderRadius(16),
+  o.height.px(16),
+  o.bg.text4.hover.press,
+  o.outline.default.focus,
+  o.margin.all(0)
+])}
+
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 12px;
+      height: 12px;
+      transform: translateX(0);
+      transition: transform 0.2s;
+      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
+    }
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+
+      &::after {
+        transform: translateX(12px);
+      }
+    }
+  }
+`;
+
+// src/components/TextField/index.tsx
+var import_textfield = require("@react-aria/textfield");
+var import_visually_hidden = require("@react-aria/visually-hidden");
+var import_react11 = __toESM(require("react"));
+var import_styled_components10 = __toESM(require("styled-components"));
+
+// src/components/FieldLabel/index.tsx
+var import_react10 = __toESM(require("react"));
+var import_styled_components9 = __toESM(require("styled-components"));
+var import_styled8 = require("@charcoal-ui/styled");
+var FieldLabel = import_react10.default.forwardRef(
+  function FieldLabel2({
+    style,
+    className,
+    label,
+    required = false,
+    requiredText,
+    subLabel,
+    ...labelProps
+  }, ref) {
+    return /* @__PURE__ */ import_react10.default.createElement(FieldLabelWrapper, { style, className }, /* @__PURE__ */ import_react10.default.createElement(Label2, { ref, ...labelProps }, label), required && /* @__PURE__ */ import_react10.default.createElement(RequiredText, null, requiredText), /* @__PURE__ */ import_react10.default.createElement(SubLabelClickable, null, /* @__PURE__ */ import_react10.default.createElement("span", null, subLabel)));
+  }
+);
+var FieldLabel_default = FieldLabel;
+var theme2 = (0, import_styled8.createTheme)(import_styled_components9.default);
+var Label2 = import_styled_components9.default.label`
+  ${theme2((o) => [o.typography(14).bold, o.font.text1])}
+`;
+var RequiredText = import_styled_components9.default.span`
+  ${theme2((o) => [o.typography(14), o.font.text3])}
+`;
+var SubLabelClickable = import_styled_components9.default.div`
+  ${theme2((o) => [
+  o.typography(14),
+  o.font.text3.hover.press,
+  o.outline.default.focus
+])}
+`;
+var FieldLabelWrapper = import_styled_components9.default.div`
+  display: inline-flex;
+  align-items: center;
+
+  > ${RequiredText} {
+    ${theme2((o) => o.margin.left(4))}
+  }
+
+  > ${SubLabelClickable} {
+    ${theme2((o) => o.margin.left("auto"))}
+  }
+`;
+
+// src/components/TextField/index.tsx
+var import_styled9 = require("@charcoal-ui/styled");
+var theme3 = (0, import_styled9.createTheme)(import_styled_components10.default);
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null) {
+        ;
+        ref.current = value;
+      }
+    }
+  };
+}
+function countCodePointsInString(string) {
+  return Array.from(string).length;
+}
+var TextField = import_react11.default.forwardRef(
+  function TextField2(props, ref) {
+    return props.multiline !== void 0 && props.multiline ? /* @__PURE__ */ import_react11.default.createElement(MultiLineTextField, { ref, ...props }) : /* @__PURE__ */ import_react11.default.createElement(SingleLineTextField, { ref, ...props });
+  }
+);
+var TextField_default = TextField;
+var SingleLineTextField = import_react11.default.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+  const {
+    className,
+    showLabel = false,
+    showCount = false,
+    label,
+    requiredText,
+    subLabel,
+    disabled = false,
+    required,
+    invalid = false,
+    assistiveText,
+    maxLength,
+    prefix = null,
+    suffix = null
+  } = props;
+  const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
+  const ariaRef = (0, import_react11.useRef)(null);
+  const prefixRef = (0, import_react11.useRef)(null);
+  const suffixRef = (0, import_react11.useRef)(null);
+  const [count, setCount] = (0, import_react11.useState)(countCodePointsInString(props.value ?? ""));
+  const [prefixWidth, setPrefixWidth] = (0, import_react11.useState)(0);
+  const [suffixWidth, setSuffixWidth] = (0, import_react11.useState)(0);
+  const nonControlled = props.value === void 0;
+  const handleChange = (0, import_react11.useCallback)(
+    (value) => {
+      const count2 = countCodePointsInString(value);
+      if (maxLength !== void 0 && count2 > maxLength) {
+        return;
+      }
+      if (nonControlled) {
+        setCount(count2);
+      }
+      onChange?.(value);
+    },
+    [maxLength, nonControlled, onChange]
+  );
+  (0, import_react11.useEffect)(() => {
+    setCount(countCodePointsInString(props.value ?? ""));
+  }, [props.value]);
+  const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
+    {
+      inputElementType: "input",
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: invalid ? "invalid" : "valid",
+      description: !invalid && assistiveText,
+      errorMessage: invalid && assistiveText,
+      onChange: handleChange,
+      ...props
+    },
+    ariaRef
+  );
+  (0, import_react11.useEffect)(() => {
+    const prefixObserver = new ResizeObserver((entries) => {
+      setPrefixWidth(entries[0].contentRect.width);
+    });
+    const suffixObserver = new ResizeObserver((entries) => {
+      setSuffixWidth(entries[0].contentRect.width);
+    });
+    if (prefixRef.current !== null) {
+      prefixObserver.observe(prefixRef.current);
+    }
+    if (suffixRef.current !== null) {
+      suffixObserver.observe(suffixRef.current);
+    }
+    return () => {
+      suffixObserver.disconnect();
+      prefixObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ import_react11.default.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ import_react11.default.createElement(
+    TextFieldLabel,
+    {
+      label,
+      requiredText,
+      required,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(StyledInputContainer, null, /* @__PURE__ */ import_react11.default.createElement(PrefixContainer, { ref: prefixRef }, /* @__PURE__ */ import_react11.default.createElement(Affix, null, prefix)), /* @__PURE__ */ import_react11.default.createElement(
+    StyledInput,
+    {
+      ref: mergeRefs(forwardRef4, ariaRef),
+      invalid,
+      extraLeftPadding: prefixWidth,
+      extraRightPadding: suffixWidth,
+      ...inputProps
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(SuffixContainer, { ref: suffixRef }, /* @__PURE__ */ import_react11.default.createElement(Affix, null, suffix), showCount && /* @__PURE__ */ import_react11.default.createElement(SingleLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count))), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ import_react11.default.createElement(
+    AssistiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assistiveText
+  ));
+});
+var MultiLineTextField = import_react11.default.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+  const {
+    className,
+    showCount = false,
+    showLabel = false,
+    label,
+    requiredText,
+    subLabel,
+    disabled = false,
+    required,
+    invalid = false,
+    assistiveText,
+    maxLength,
+    autoHeight = false,
+    rows: initialRows = 4
+  } = props;
+  const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
+  const textareaRef = (0, import_react11.useRef)(null);
+  const ariaRef = (0, import_react11.useRef)(null);
+  const [count, setCount] = (0, import_react11.useState)(countCodePointsInString(props.value ?? ""));
+  const [rows, setRows] = (0, import_react11.useState)(initialRows);
+  const syncHeight = (0, import_react11.useCallback)(
+    (textarea) => {
+      const rows2 = (`${textarea.value}
+`.match(/\n/gu)?.length ?? 0) || 1;
+      setRows(initialRows <= rows2 ? rows2 : initialRows);
+    },
+    [initialRows]
+  );
+  const nonControlled = props.value === void 0;
+  const handleChange = (0, import_react11.useCallback)(
+    (value) => {
+      const count2 = countCodePointsInString(value);
+      if (maxLength !== void 0 && count2 > maxLength) {
+        return;
+      }
+      if (nonControlled) {
+        setCount(count2);
+      }
+      if (autoHeight && textareaRef.current !== null) {
+        syncHeight(textareaRef.current);
+      }
+      onChange?.(value);
+    },
+    [autoHeight, maxLength, nonControlled, onChange, syncHeight]
+  );
+  (0, import_react11.useEffect)(() => {
+    setCount(countCodePointsInString(props.value ?? ""));
+  }, [props.value]);
+  const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
+    {
+      inputElementType: "textarea",
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: invalid ? "invalid" : "valid",
+      description: !invalid && assistiveText,
+      errorMessage: invalid && assistiveText,
+      onChange: handleChange,
+      ...props
+    },
+    ariaRef
+  );
+  (0, import_react11.useEffect)(() => {
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+  }, [autoHeight, syncHeight]);
+  return /* @__PURE__ */ import_react11.default.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ import_react11.default.createElement(
+    TextFieldLabel,
+    {
+      label,
+      requiredText,
+      required,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    StyledTextareaContainer,
+    {
+      invalid,
+      rows: showCount ? rows + 1 : rows
+    },
+    /* @__PURE__ */ import_react11.default.createElement(
+      StyledTextarea,
+      {
+        ref: mergeRefs(textareaRef, forwardRef4, ariaRef),
+        rows,
+        noBottomPadding: showCount,
+        ...inputProps
+      }
+    ),
+    showCount && /* @__PURE__ */ import_react11.default.createElement(MultiLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count)
+  ), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ import_react11.default.createElement(
+    AssistiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assistiveText
+  ));
+});
+var TextFieldRoot = import_styled_components10.default.div`
+  display: flex;
+  flex-direction: column;
+
+  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
+`;
+var TextFieldLabel = (0, import_styled_components10.default)(FieldLabel_default)`
+  ${theme3((o) => o.margin.bottom(8))}
+`;
+var StyledInputContainer = import_styled_components10.default.div`
+  height: 40px;
+  display: grid;
+  position: relative;
+`;
+var PrefixContainer = import_styled_components10.default.span`
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+`;
+var SuffixContainer = import_styled_components10.default.span`
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+
+  display: flex;
+  gap: 8px;
+`;
+var Affix = import_styled_components10.default.span`
+  user-select: none;
+
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
+`;
+var StyledInput = import_styled_components10.default.input`
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  font-family: inherit;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  height: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
+  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
+  border-radius: calc(4px / 0.875);
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  ${(p) => theme3((o) => [
+  o.bg.surface3.hover,
+  o.outline.default.focus,
+  p.invalid && o.outline.assertive,
+  o.font.text2
+])}
+
+  &::placeholder {
+    ${theme3((o) => o.font.text3)}
+  }
+`;
+var StyledTextareaContainer = import_styled_components10.default.div`
+  position: relative;
+  overflow: hidden;
+  padding: 0 8px;
+
+  ${(p) => theme3((o) => [
+  o.bg.surface3.hover,
+  p.invalid && o.outline.assertive,
+  o.font.text2,
+  o.borderRadius(4)
+])}
+
+  &:focus-within {
+    ${(p) => theme3((o) => p.invalid ? o.outline.assertive : o.outline.default)}
+  }
+
+  ${({ rows }) => import_styled_components10.css`
+    height: calc(22px * ${rows} + 18px);
+  `};
+`;
+var StyledTextarea = import_styled_components10.default.textarea`
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: inherit;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding: calc(9px / 0.875) 0 ${(p) => p.noBottomPadding ? 0 : ""};
+
+  ${({ rows = 1 }) => import_styled_components10.css`
+    height: calc(22px / 0.875 * ${rows});
+  `};
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  background: none;
+
+  &::placeholder {
+    ${theme3((o) => o.font.text3)}
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;
+var SingleLineCounter = import_styled_components10.default.span`
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`;
+var MultiLineCounter = import_styled_components10.default.span`
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`;
+var AssistiveText = import_styled_components10.default.p`
+  ${(p) => theme3((o) => [
+  o.typography(14),
+  o.margin.top(8),
+  o.margin.bottom(0),
+  o.font[p.invalid ? "assertive" : "text1"]
+])}
+`;
+
+// src/components/Icon/index.tsx
+var import_react12 = __toESM(require("react"));
+var import_icons = require("@charcoal-ui/icons");
+var Icon = import_react12.default.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
+  return /* @__PURE__ */ import_react12.default.createElement(
+    "pixiv-icon",
+    {
+      ref,
+      name,
+      scale,
+      "unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+      class: className,
+      ...rest
+    }
+  );
+});
+var Icon_default = Icon;
+
+// src/components/Modal/index.tsx
+var import_react13 = __toESM(require("react"));
+var import_overlays2 = require("@react-aria/overlays");
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_focus = require("@react-aria/focus");
+var import_dialog = require("@react-aria/dialog");
+
+// ../foundation/src/grid.ts
+var COLUMN_UNIT = 80;
+var GUTTER_UNIT = 24;
+function columnSystem(span, column, gutter) {
+  return span * column + (span - 1) * gutter;
+}
+
+// src/components/Modal/index.tsx
+var import_utils5 = require("@charcoal-ui/utils");
+var import_styled11 = require("@charcoal-ui/styled");
+var import_react_spring = require("react-spring");
+var DEFAULT_Z_INDEX = 10;
+function Modal({
+  children,
+  zIndex = DEFAULT_Z_INDEX,
+  portalContainer,
+  ...props
+}) {
+  const {
+    title,
+    size = "M",
+    bottomSheet = false,
+    isDismissable,
+    onClose,
+    isOpen = false
+  } = props;
+  const ref = (0, import_react13.useRef)(null);
+  const { overlayProps, underlayProps } = (0, import_overlays2.useOverlay)(props, ref);
+  const { modalProps } = (0, import_overlays2.useModalOverlay)(
+    props,
+    {
+      close: onClose,
+      isOpen,
+      open: () => {
+      },
+      setOpen: () => {
+      },
+      toggle: () => {
+      }
+    },
+    ref
+  );
+  const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
+  const theme4 = (0, import_styled_components11.useTheme)();
+  const isMobile = (0, import_styled11.useMedia)((0, import_utils5.maxWidth)(theme4.breakpoint.screen1)) ?? false;
+  const transitionEnabled = isMobile && bottomSheet !== false;
+  const transition = (0, import_react_spring.useTransition)(isOpen, {
+    from: {
+      transform: "translateY(100%)",
+      backgroundColor: "rgba(0, 0, 0, 0)"
+    },
+    enter: {
+      transform: "translateY(0%)",
+      backgroundColor: "rgba(0, 0, 0, 0.4)"
+    },
+    leave: {
+      transform: "translateY(100%)",
+      backgroundColor: "rgba(0, 0, 0, 0)"
+    },
+    config: transitionEnabled ? { duration: 400, easing: import_react_spring.easings.easeOutQuart } : { duration: 0 }
+  });
+  const showDismiss = !isMobile || bottomSheet !== true;
+  return transition(
+    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ import_react13.default.createElement(import_overlays2.Overlay, { portalContainer }, /* @__PURE__ */ import_react13.default.createElement(
+      ModalBackground,
+      {
+        zIndex,
+        ...underlayProps,
+        style: transitionEnabled ? { backgroundColor } : {}
+      },
+      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(
+        ModalDialog,
+        {
+          ref,
+          ...overlayProps,
+          ...modalProps,
+          ...dialogProps,
+          style: transitionEnabled ? { transform } : {},
+          size,
+          bottomSheet
+        },
+        /* @__PURE__ */ import_react13.default.createElement(
+          ModalContext.Provider,
+          {
+            value: { titleProps, title, close: onClose, showDismiss }
+          },
+          children,
+          isDismissable === true && /* @__PURE__ */ import_react13.default.createElement(
+            ModalCrossButton,
+            {
+              size: "S",
+              icon: "24/Close",
+              onClick: onClose
+            }
+          )
+        )
+      ))
+    ))
+  );
+}
+var ModalContext = import_react13.default.createContext({
+  titleProps: {},
+  title: "",
+  close: void 0,
+  showDismiss: true
+});
+var ModalBackground = (0, import_react_spring.animated)(import_styled_components11.default.div`
+  z-index: ${({ zIndex }) => zIndex};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${theme((o) => [o.bg.surface4])}
+`);
+var ModalDialog = (0, import_react_spring.animated)(import_styled_components11.default.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${(p) => p.size === "S" ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "M" ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "L" ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size)}px;
+
+  ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
+
+  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
+    ${(p) => p.bottomSheet === "full" ? import_styled_components11.css`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+            height: 100%;
+          ` : p.bottomSheet ? import_styled_components11.css`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+          ` : import_styled_components11.css`
+            width: calc(100% - 48px);
+          `}
+  }
+`);
+var ModalCrossButton = (0, import_styled_components11.default)(IconButton_default)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  ${theme((o) => [o.font.text3.hover.press])}
+`;
+function ModalTitle(props) {
+  const { titleProps, title } = (0, import_react13.useContext)(ModalContext);
+  return /* @__PURE__ */ import_react13.default.createElement(ModalHeading, { ...titleProps, ...props }, title);
+}
+var ModalHeading = import_styled_components11.default.h3`
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+`;
+
+// src/components/Modal/ModalPlumbing.tsx
+var import_react14 = __toESM(require("react"));
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_utils6 = require("@charcoal-ui/utils");
+function ModalHeader() {
+  return /* @__PURE__ */ import_react14.default.createElement(ModalHeaderRoot, null, /* @__PURE__ */ import_react14.default.createElement(StyledModalTitle, null));
+}
+var ModalHeaderRoot = import_styled_components12.default.div`
+  height: 64px;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+`;
+var StyledModalTitle = (0, import_styled_components12.default)(ModalTitle)`
+  ${theme((o) => [o.font.text1, o.typography(16).bold])}
+`;
+var ModalAlign = import_styled_components12.default.div`
+  ${theme((o) => [o.padding.horizontal(24)])}
+
+  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`;
+var ModalBody = import_styled_components12.default.div`
+  ${theme((o) => [o.padding.bottom(40)])}
+`;
+var ModalButtons = import_styled_components12.default.div`
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 8px;
+  ${theme((o) => [o.padding.horizontal(24).top(16)])}
+
+  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`;
+
+// src/components/LoadingSpinner/index.tsx
+var import_react15 = __toESM(require("react"));
+var import_styled_components13 = __toESM(require("styled-components"));
+function LoadingSpinner({
+  size = 48,
+  padding = 16,
+  transparent = false
+}) {
+  return /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerIcon, null));
+}
+var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({ role: "progressbar" })`
+  margin: auto;
+  padding: ${(props) => props.padding}px;
+  border-radius: 8px;
+  font-size: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  opacity: 0.84;
+  ${({ transparent }) => theme((o) => [
+  o.font.text4,
+  transparent ? o.bg.transparent : o.bg.background1
+])}
+`;
+var scaleout = import_styled_components13.keyframes`
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+`;
+var Icon2 = import_styled_components13.default.div.attrs({ role: "presentation" })`
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: ${scaleout} 1s both ease-out;
+  animation-iteration-count: ${(p) => p.once ? 1 : "infinite"};
+
+  &[data-reset-animation] {
+    animation: none;
+  }
+`;
+var LoadingSpinnerIcon = import_react15.default.forwardRef(function LoadingSpinnerIcon2({ once = false }, ref) {
+  const iconRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useImperativeHandle)(ref, () => ({
+    restart: () => {
+      if (!iconRef.current) {
+        return;
+      }
+      iconRef.current.dataset.resetAnimation = "true";
+      void iconRef.current.offsetWidth;
+      delete iconRef.current.dataset.resetAnimation;
+    }
+  }));
+  return /* @__PURE__ */ import_react15.default.createElement(Icon2, { ref: iconRef, once });
+});
+
+// src/components/DropdownSelector/index.tsx
+var import_react18 = __toESM(require("react"));
+var import_styled_components16 = __toESM(require("styled-components"));
+var import_react_stately2 = require("react-stately");
+var import_utils9 = require("@charcoal-ui/utils");
+var import_visually_hidden2 = require("@react-aria/visually-hidden");
+var import_select = require("@react-aria/select");
+var import_button = require("@react-aria/button");
+
+// src/components/DropdownSelector/Listbox.tsx
+var import_react16 = __toESM(require("react"));
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_listbox = require("@react-aria/listbox");
+var import_utils7 = require("@react-aria/utils");
+var import_focus2 = require("@react-aria/focus");
+var import_utils8 = require("@charcoal-ui/utils");
+var Listbox = ({
+  state,
+  mode = "default",
+  ...props
+}) => {
+  const ref = (0, import_react16.useRef)(null);
+  const { listBoxProps } = (0, import_listbox.useListBox)(props, state, ref);
+  const collection = (0, import_react16.useMemo)(
+    () => [...state.collection].map((node, index, self) => ({
+      node,
+      first: index === 0,
+      last: index === self.length - 1
+    })),
+    [state.collection]
+  );
+  return /* @__PURE__ */ import_react16.default.createElement(ListboxRoot, { ref, ...listBoxProps }, collection.map(({ node, last }) => /* @__PURE__ */ import_react16.default.createElement(import_react16.Fragment, { key: node.key }, /* @__PURE__ */ import_react16.default.createElement(Option, { item: node, state, mode }), !last && mode === "separator" && /* @__PURE__ */ import_react16.default.createElement(Divider, null))));
+};
+var Listbox_default = (0, import_react16.memo)(Listbox);
+var ListboxRoot = import_styled_components14.default.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: auto;
+  max-height: inherit;
+
+  ${theme((o) => [
+  o.bg.background1,
+  o.border.default,
+  o.borderRadius(8),
+  o.outline.default.focus
+])}
+`;
+var Divider = import_styled_components14.default.div.attrs({ role: "separator" })`
+  display: flex;
+  ${theme((o) => [o.padding.horizontal(8)])}
+
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #00000014;
+  }
+`;
+var Option = ({ item, state, mode }) => {
+  const ref = (0, import_react16.useRef)(null);
+  const { optionProps, isSelected } = (0, import_listbox.useOption)(item, state, ref);
+  const { focusProps } = (0, import_focus2.useFocusRing)();
+  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils7.mergeProps)(optionProps, focusProps), ref, mode }, isSelected && /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check" }), /* @__PURE__ */ import_react16.default.createElement(OptionText, { isSelected }, item.rendered));
+};
+var OptionRoot = import_styled_components14.default.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme4 }) => (0, import_utils8.px)(theme4.spacing[4])};
+  height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${({ mode }) => theme((o) => [
+  o.padding.horizontal(8),
+  mode === "separator" && o.padding.vertical(4)
+])}
+
+  &:focus {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`;
+var OptionCheckIcon = (0, import_styled_components14.default)(Icon_default)`
+  ${theme((o) => [o.font.text2])}
+`;
+var OptionText = import_styled_components14.default.span`
+  display: block;
+  ${({ isSelected }) => theme((o) => [
+  o.typography(14),
+  o.font.text2,
+  isSelected ? void 0 : o.margin.left(16),
+  isSelected ? void 0 : o.padding.left(4)
+])}
+`;
+
+// src/components/DropdownSelector/DropdownPopover.tsx
+var import_react17 = __toESM(require("react"));
+var import_overlays3 = require("@react-aria/overlays");
+var import_styled_components15 = __toESM(require("styled-components"));
+var DropdownPopoverDiv = import_styled_components15.default.div`
+  width: 100%;
+  ${theme((o) => o.margin.top(4).bottom(4))}
+`;
+function DropdownPopover({ children, state, ...props }) {
+  const ref = (0, import_react17.useRef)(null);
+  const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
+    {
+      ...props,
+      popoverRef: ref,
+      containerPadding: 0
+    },
+    state
+  );
+  (0, import_react17.useEffect)(() => {
+    if (ref.current && props.triggerRef.current) {
+      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
+    }
+  }, [props.triggerRef]);
+  (0, import_react17.useEffect)(() => {
+    if (state.isOpen && props.value !== void 0) {
+      window.requestAnimationFrame(() => {
+        if (props.value === void 0)
+          return;
+        const windowScrollY = window.scrollY;
+        const windowScrollX = window.scrollX;
+        const selectedElement = document.querySelector(
+          `[data-key="${props.value.toString()}"]`
+        );
+        selectedElement?.scrollIntoView({ block: "center" });
+        window.scrollTo(windowScrollX, windowScrollY);
+      });
+    }
+  }, [props.value, state.isOpen]);
+  return /* @__PURE__ */ import_react17.default.createElement(import_overlays3.Overlay, null, /* @__PURE__ */ import_react17.default.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ import_react17.default.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ import_react17.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ import_react17.default.createElement(import_overlays3.DismissButton, { onDismiss: () => state.close() })));
+}
+
+// src/components/DropdownSelector/index.tsx
+var DropdownSelector = ({
+  open,
+  className,
+  label = "",
+  requiredText = "",
+  subLabel,
+  assertiveText,
+  autoComplete,
+  invalid = false,
+  disabled = false,
+  required = false,
+  showLabel = false,
+  mode = "default",
+  ...props
+}) => {
+  const { visuallyHiddenProps } = (0, import_visually_hidden2.useVisuallyHidden)();
+  const triggerRef = (0, import_react18.useRef)(null);
+  const selectProps = (0, import_react18.useMemo)(
+    () => ({
+      ...props,
+      label,
+      isOpen: open,
+      isDisabled: disabled,
+      isRequired: required,
+      errorMessage: invalid && assertiveText,
+      validationState: invalid ? "invalid" : "valid",
+      onSelectionChange: props.onChange,
+      selectedKey: props.value,
+      defaultSelectedKey: props.defaultValue
+    }),
+    [assertiveText, disabled, invalid, label, open, props, required]
+  );
+  const state = (0, import_react_stately2.useSelectState)(selectProps);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    errorMessageProps,
+    descriptionProps
+  } = (0, import_select.useSelect)(selectProps, state, triggerRef);
+  const { buttonProps } = (0, import_button.useButton)(triggerProps, triggerRef);
+  const hasAssertiveText = assertiveText !== void 0 && assertiveText.length > 0;
+  return /* @__PURE__ */ import_react18.default.createElement(DropdownSelectorRoot, { "aria-disabled": disabled, className }, /* @__PURE__ */ import_react18.default.createElement(
+    DropdownFieldLabel,
+    {
+      label,
+      required,
+      requiredText,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ import_react18.default.createElement(
+    import_select.HiddenSelect,
+    {
+      state,
+      triggerRef,
+      label,
+      name: props.name,
+      isDisabled: disabled,
+      autoComplete
+    }
+  ), /* @__PURE__ */ import_react18.default.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ import_react18.default.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ import_react18.default.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react18.default.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ import_react18.default.createElement(
+    DropdownPopover,
+    {
+      state,
+      triggerRef,
+      value: props.value ?? props.defaultValue
+    },
+    /* @__PURE__ */ import_react18.default.createElement(Listbox_default, { ...menuProps, state, mode })
+  )), hasAssertiveText && /* @__PURE__ */ import_react18.default.createElement(
+    AssertiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assertiveText
+  ));
+};
+var DropdownSelector_default = DropdownSelector;
+var DropdownSelectorItem = import_react_stately2.Item;
+var DropdownSelectorRoot = import_styled_components16.default.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  ${import_utils9.disabledSelector} {
+    cursor: default;
+    ${theme((o) => o.disabled)}
+  }
+`;
+var DropdownFieldLabel = (0, import_styled_components16.default)(FieldLabel_default)`
+  width: 100%;
+
+  ${theme((o) => o.margin.bottom(8))}
+`;
+var DropdownButtonWrapper = import_styled_components16.default.div`
+  position: relative;
+`;
+var DropdownButton = import_styled_components16.default.button`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  ${import_utils9.disabledSelector} {
+    cursor: default;
+  }
+
+  ${({ invalid }) => theme((o) => [
+  o.border.default,
+  o.padding.horizontal(8),
+  o.outline.default.focus,
+  o.bg.surface3,
+  o.borderRadius(4),
+  invalid && o.outline.assertive
+])}
+`;
+var DropdownButtonText = import_styled_components16.default.span`
+  text-align: left;
+
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+var DropdownButtonIcon = (0, import_styled_components16.default)(Icon_default)`
+  ${theme((o) => [o.font.text2])}
+`;
+var AssertiveText = import_styled_components16.default.div`
+  ${({ invalid }) => theme((o) => [
+  o.typography(14),
+  o.margin.top(8),
+  invalid ? o.font.assertive : o.font.text2
+])}
+`;
+
+// src/components/SegmentedControl/index.tsx
+var import_react20 = __toESM(require("react"));
+var import_react_stately3 = require("react-stately");
+var import_radio = require("@react-aria/radio");
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_utils10 = require("@charcoal-ui/utils");
+
+// src/components/SegmentedControl/RadioGroupContext.tsx
+var import_react19 = __toESM(require("react"));
+var RadioContext = (0, import_react19.createContext)(null);
+var RadioProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ import_react19.default.createElement(RadioContext.Provider, { value }, children);
+};
+var useRadioContext = () => {
+  const state = (0, import_react19.useContext)(RadioContext);
+  if (state === null)
+    throw new Error("`<RadioProvider>` is not likely mounted.");
+  return state;
+};
+
+// src/components/SegmentedControl/index.tsx
+var SegmentedControl = (0, import_react20.forwardRef)(
+  function SegmentedControlInner(props, ref) {
+    const ariaRadioGroupProps = (0, import_react20.useMemo)(
+      () => ({
+        ...props,
+        isDisabled: props.disabled,
+        isReadOnly: props.readonly,
+        isRequired: props.required
+      }),
+      [props]
+    );
+    const state = (0, import_react_stately3.useRadioGroupState)(ariaRadioGroupProps);
+    const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
+    const segmentedControlItems = (0, import_react20.useMemo)(() => {
+      return props.data.map(
+        (d) => typeof d === "string" ? { value: d, label: d } : d
+      );
+    }, [props.data]);
+    return /* @__PURE__ */ import_react20.default.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ import_react20.default.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ import_react20.default.createElement(
+      Segmented,
+      {
+        key: item.value,
+        value: item.value,
+        disabled: item.disabled
+      },
+      item.label
+    ))));
+  }
+);
+var SegmentedControl_default = (0, import_react20.memo)(SegmentedControl);
+var Segmented = ({ children, ...props }) => {
+  const state = useRadioContext();
+  const ref = (0, import_react20.useRef)(null);
+  const ariaRadioProps = (0, import_react20.useMemo)(
+    () => ({ ...props, isDisabled: props.disabled }),
+    [props]
+  );
+  const { inputProps, isDisabled, isSelected } = (0, import_radio.useRadio)(
+    ariaRadioProps,
+    state,
+    ref
+  );
+  return /* @__PURE__ */ import_react20.default.createElement(
+    SegmentedRoot,
+    {
+      "aria-disabled": isDisabled || state.isReadOnly,
+      checked: isSelected
+    },
+    /* @__PURE__ */ import_react20.default.createElement(SegmentedInput, { ...inputProps, ref }),
+    /* @__PURE__ */ import_react20.default.createElement(RadioLabel2, null, /* @__PURE__ */ import_react20.default.createElement(SegmentedLabelInner, null, children))
+  );
+};
+var SegmentedControlRoot = import_styled_components17.default.div`
+  display: inline-flex;
+  align-items: center;
+
+  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
+`;
+var SegmentedRoot = import_styled_components17.default.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 32px;
+
+  ${import_utils10.disabledSelector} {
+    cursor: default;
+  }
+
+  ${({ checked }) => theme((o) => [
+  o.padding.horizontal(16),
+  o.borderRadius(16),
+  o.disabled,
+  checked === true && o.bg.brand,
+  checked === true ? o.font.text5 : o.font.text2
+])}
+`;
+var SegmentedInput = import_styled_components17.default.input`
+  position: absolute;
+
+  height: 0px;
+  width: 0px;
+  padding: 0;
+  margin: 0;
+
+  appearance: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+`;
+var RadioLabel2 = import_styled_components17.default.div`
+  background: transparent;
+  display: flex;
+  align-items: center;
+  height: 22px;
+`;
+var SegmentedLabelInner = import_styled_components17.default.div`
+  ${theme((o) => [o.typography(14)])}
+`;
+
+// src/components/Checkbox/index.tsx
+var import_react21 = __toESM(require("react"));
+var import_styled_components18 = __toESM(require("styled-components"));
+var import_checkbox = require("@react-aria/checkbox");
+var import_utils11 = require("@react-aria/utils");
+var import_react_stately4 = require("react-stately");
+var import_utils12 = require("@charcoal-ui/utils");
+var Checkbox = (0, import_react21.forwardRef)(
+  function CheckboxInner(props, ref) {
+    const ariaCheckboxProps = (0, import_react21.useMemo)(
+      () => ({
+        ...props,
+        isSelected: props.checked,
+        defaultSelected: props.defaultChecked,
+        "aria-label": "children" in props ? void 0 : props.label,
+        isDisabled: props.disabled
+      }),
+      [props]
+    );
+    const state = (0, import_react_stately4.useToggleState)(ariaCheckboxProps);
+    const objectRef = (0, import_utils11.useObjectRef)(ref);
+    const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
+    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
+    return /* @__PURE__ */ import_react21.default.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react21.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react21.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react21.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react21.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react21.default.createElement(InputLabel, null, props.children));
+  }
+);
+var Checkbox_default = (0, import_react21.memo)(Checkbox);
+var hiddenCss = import_styled_components18.css`
+  visibility: hidden;
+`;
+var InputRoot = import_styled_components18.default.label`
+  position: relative;
+  display: flex;
+
+  cursor: pointer;
+  ${import_utils12.disabledSelector} {
+    cursor: default;
+  }
+
+  gap: ${({ theme: theme4 }) => (0, import_utils12.px)(theme4.spacing[4])};
+  ${theme((o) => [o.disabled])}
+`;
+var CheckboxRoot = import_styled_components18.default.div`
+  position: relative;
+`;
+var CheckboxInput = import_styled_components18.default.input`
+  &[type='checkbox'] {
+    appearance: none;
+    display: block;
+    cursor: pointer;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+    }
+    &:not(:checked) {
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${({ theme: theme4 }) => theme4.color.text4};
+    }
+    ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+  }
+`;
+var CheckboxInputOverlay = import_styled_components18.default.div`
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${theme((o) => [o.width.px(24), o.height.px(24), o.font.text5])}
+
+  ${({ checked }) => checked !== true && hiddenCss};
+`;
+var InputLabel = import_styled_components18.default.div`
+  ${theme((o) => [o.font.text2])}
+
+  font-size: 14px;
+  /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
+  line-height: 20px;
+`;
+
+// src/components/TagItem/index.tsx
+var import_react22 = __toESM(require("react"));
+var import_utils13 = require("@react-aria/utils");
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_utils14 = require("@charcoal-ui/utils");
+var import_button2 = require("@react-aria/button");
+var sizeMap = {
+  S: 32,
+  M: 40
+};
+var TagItem = (0, import_react22.forwardRef)(
+  function TagItemInner({
+    label,
+    translatedLabel,
+    bgColor = "#7ACCB1",
+    bgImage,
+    size = "M",
+    disabled,
+    status = "default",
+    ...props
+  }, _ref) {
+    const ref = (0, import_utils13.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react22.useMemo)(
+      () => ({
+        elementType: "a",
+        isDisabled: disabled,
+        ...props
+      }),
+      [disabled, props]
+    );
+    const { buttonProps } = (0, import_button2.useButton)(ariaButtonProps, ref);
+    const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
+    return /* @__PURE__ */ import_react22.default.createElement(
+      TagItemRoot,
+      {
+        ref,
+        size: hasTranslatedLabel ? "M" : size,
+        status,
+        ...buttonProps
+      },
+      /* @__PURE__ */ import_react22.default.createElement(Background, { bgColor, bgImage }),
+      /* @__PURE__ */ import_react22.default.createElement(Inner, null, /* @__PURE__ */ import_react22.default.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ import_react22.default.createElement(TranslatedLabel, null, /* @__PURE__ */ import_react22.default.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ import_react22.default.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ import_react22.default.createElement(Icon_default, { name: "16/Remove" }))
+    );
+  }
+);
+var TagItem_default = (0, import_react22.memo)(TagItem);
+var TagItemRoot = import_styled_components19.default.a`
+  isolation: isolate;
+  position: relative;
+  height: ${({ size }) => sizeMap[size]}px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+
+  ${({ size, status }) => theme((o) => [
+  o.outline.default.focus,
+  o.borderRadius(4),
+  status !== "active" && size === "M" && o.padding.horizontal(24),
+  status !== "active" && size === "S" && o.padding.horizontal(16),
+  status === "inactive" && o.bg.surface3,
+  status === "inactive" ? o.font.text2 : o.font.text5,
+  ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
+])}
+
+  ${import_utils14.disabledSelector} {
+    ${theme((o) => [o.disabled])}
+    cursor: default;
+  }
+`;
+var Background = import_styled_components19.default.div`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ bgColor }) => bgColor};
+
+  ${({ bgImage }) => bgImage !== void 0 && import_styled_components19.css`
+      ${theme((o) => [o.bg.surface4])}
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+        background-image: url(${bgImage});
+        mix-blend-mode: overlay;
+      }
+    `}
+`;
+var Inner = import_styled_components19.default.div`
+  display: inline-flex;
+  gap: ${({ theme: theme4 }) => (0, import_utils14.px)(theme4.spacing[8])};
+  align-items: center;
+  z-index: 2;
+`;
+var labelCSS = import_styled_components19.css`
+  ${theme((o) => [o.typography(14).bold])}
+`;
+var translateLabelCSS = import_styled_components19.css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  font-size: 10px;
+`;
+var LabelWrapper = import_styled_components19.default.div`
+  ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
+`;
+var Label3 = import_styled_components19.default.span`
+  max-width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+`;
+var TranslatedLabel = import_styled_components19.default.div`
+  ${theme((o) => [o.typography(12).bold])}
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  CharcoalProvider,
+  Checkbox,
+  Clickable,
+  ComponentAbstraction,
+  DropdownSelector,
+  DropdownSelectorItem,
+  Icon,
+  IconButton,
+  LoadingSpinner,
+  LoadingSpinnerIcon,
+  Modal,
+  ModalAlign,
+  ModalBody,
+  ModalButtons,
+  ModalHeader,
+  MultiSelect,
+  MultiSelectGroup,
+  OverlayProvider,
+  Radio,
+  RadioGroup,
+  SSRProvider,
+  SegmentedControl,
+  Switch,
+  TagItem,
+  TextField,
+  useComponentAbstraction
+});
+//# sourceMappingURL=index.cjs.js.map