@charcoal-ui/react 2.2.1 → 2.4.0

package/dist/index.esm.js

@@ -0,0 +1,2118 @@
+// src/core/ComponentAbstraction.tsx
+import React, { useContext } from "react";
+var DefaultLink = React.forwardRef(
+  function DefaultLink2({ to, children, ...rest }, ref) {
+    return /* @__PURE__ */ React.createElement("a", { href: to, ref, ...rest }, children);
+  }
+);
+var DefaultValue = {
+  Link: DefaultLink
+};
+var ComponentAbstractionContext = React.createContext(DefaultValue);
+function ComponentAbstraction({ children, components }) {
+  return /* @__PURE__ */ React.createElement(
+    ComponentAbstractionContext.Provider,
+    {
+      value: { ...DefaultValue, ...components }
+    },
+    children
+  );
+}
+function useComponentAbstraction() {
+  return useContext(ComponentAbstractionContext);
+}
+
+// src/core/SSRProvider.tsx
+import { SSRProvider } from "@react-aria/ssr";
+
+// src/core/OverlayProvider.tsx
+import { OverlayProvider } from "@react-aria/overlays";
+
+// src/core/CharcoalProvider.tsx
+import React2 from "react";
+import { ThemeProvider } from "styled-components";
+import { TokenInjector } from "@charcoal-ui/styled";
+function CharcoalProvider({
+  themeMap,
+  defaultTheme = themeMap[":root"],
+  components = {},
+  injectTokens = true,
+  children
+}) {
+  return /* @__PURE__ */ React2.createElement(SSRProvider, null, /* @__PURE__ */ React2.createElement(ThemeProvider, { theme: defaultTheme }, injectTokens && /* @__PURE__ */ React2.createElement(TokenInjector, { theme: themeMap }), /* @__PURE__ */ React2.createElement(ComponentAbstraction, { components }, /* @__PURE__ */ React2.createElement(OverlayProvider, null, children))));
+}
+
+// src/components/Button/index.tsx
+import React4 from "react";
+import styled3 from "styled-components";
+
+// src/_lib/index.ts
+function unreachable(value) {
+  throw new Error(
+    arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`
+  );
+}
+
+// src/styled.ts
+import styled from "styled-components";
+import { createTheme } from "@charcoal-ui/styled";
+var theme = createTheme(styled);
+
+// src/components/Clickable/index.tsx
+import React3 from "react";
+import styled2, { css } from "styled-components";
+import { disabledSelector } from "@charcoal-ui/utils";
+var Clickable = React3.forwardRef(
+  function Clickable2(props, ref) {
+    const { Link } = useComponentAbstraction();
+    if ("to" in props) {
+      const { onClick, disabled = false, ...rest } = props;
+      return /* @__PURE__ */ React3.createElement(
+        A,
+        {
+          ...rest,
+          as: disabled ? void 0 : Link,
+          onClick: disabled ? void 0 : onClick,
+          "aria-disabled": disabled,
+          ref
+        }
+      );
+    } else {
+      return /* @__PURE__ */ React3.createElement(Button, { ...props, ref });
+    }
+  }
+);
+var Clickable_default = Clickable;
+var clickableCss = css`
+  /* Clickable style */
+  cursor: pointer;
+
+  ${disabledSelector} {
+    cursor: default;
+  }
+`;
+var Button = styled2.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 = styled2.span`
+  /* Reset a-tag appearance */
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  .text {
+    top: calc(1em + 2em);
+  }
+
+  ${clickableCss}
+`;
+
+// src/components/Button/index.tsx
+var Button2 = React4.forwardRef(function Button3({
+  children,
+  variant = "Default",
+  size = "M",
+  fixed = false,
+  disabled = false,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ React4.createElement(
+    StyledButton,
+    {
+      ...rest,
+      disabled,
+      variant,
+      size,
+      fixed,
+      ref
+    },
+    children
+  );
+});
+var Button_default = Button2;
+var StyledButton = styled3(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
+import React5 from "react";
+import styled4 from "styled-components";
+var IconButton = React5.forwardRef(
+  function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
+    validateIconSize(size, icon);
+    return /* @__PURE__ */ React5.createElement(StyledIconButton, { ...rest, ref, variant, size }, /* @__PURE__ */ React5.createElement("pixiv-icon", { name: icon }));
+  }
+);
+var IconButton_default = IconButton;
+var StyledIconButton = styled4(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
+import React6, { useCallback, useContext as useContext2 } from "react";
+import styled5 from "styled-components";
+import warning from "warning";
+import { px } from "@charcoal-ui/utils";
+function Radio({
+  value,
+  forceChecked = false,
+  disabled = false,
+  children
+}) {
+  const {
+    name,
+    selected,
+    disabled: isParentDisabled,
+    readonly,
+    hasError,
+    onChange
+  } = useContext2(RadioGroupContext);
+  warning(
+    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 = useCallback(
+    (e) => {
+      onChange(e.currentTarget.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React6.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly }, /* @__PURE__ */ React6.createElement(
+    RadioInput,
+    {
+      name,
+      value,
+      checked: forceChecked || isSelected,
+      hasError,
+      onChange: handleChange,
+      disabled: isDisabled || isReadonly
+    }
+  ), children != null && /* @__PURE__ */ React6.createElement(RadioLabel, null, children));
+}
+var RadioRoot = styled5.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: ${({ theme: theme4 }) => px(theme4.spacing[4])};
+  align-items: center;
+  cursor: pointer;
+
+  ${theme((o) => [o.disabled])}
+`;
+var RadioInput = styled5.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 = styled5.div`
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+var StyledRadioGroup = styled5.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: ${({ theme: theme4 }) => px(theme4.spacing[8])};
+`;
+var RadioGroupContext = React6.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 = useCallback(
+    (next) => {
+      onChange(next);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React6.createElement(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        name,
+        selected: value,
+        disabled: disabled ?? false,
+        readonly: readonly ?? false,
+        hasError: hasError ?? false,
+        onChange: handleChange
+      }
+    },
+    /* @__PURE__ */ React6.createElement(
+      StyledRadioGroup,
+      {
+        role: "radiogroup",
+        "aria-orientation": "vertical",
+        "aria-label": label,
+        "aria-invalid": hasError,
+        className
+      },
+      children
+    )
+  );
+}
+
+// src/components/MultiSelect/index.tsx
+import React7, { useCallback as useCallback2, useContext as useContext3 } from "react";
+import styled6, { css as css2 } from "styled-components";
+import warning2 from "warning";
+import { disabledSelector as disabledSelector2, px as px2 } from "@charcoal-ui/utils";
+
+// src/components/MultiSelect/context.ts
+import { createContext } from "react";
+var MultiSelectGroupContext = 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
+  } = useContext3(MultiSelectGroupContext);
+  warning2(
+    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 = useCallback2(
+    (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__ */ React7.createElement(MultiSelectRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React7.createElement(
+    MultiSelectInput,
+    {
+      ...{
+        name,
+        value,
+        hasError
+      },
+      checked: isSelected,
+      disabled: isDisabled,
+      onChange: handleChange,
+      overlay: variant === "overlay",
+      "aria-invalid": hasError
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    MultiSelectInputOverlay,
+    {
+      overlay: variant === "overlay",
+      hasError,
+      "aria-hidden": true
+    },
+    /* @__PURE__ */ React7.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
+  ), Boolean(children) && /* @__PURE__ */ React7.createElement(MultiSelectLabel, null, children));
+}
+var MultiSelectRoot = styled6.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  ${disabledSelector2} {
+    cursor: default;
+  }
+  gap: ${({ theme: theme4 }) => px2(theme4.spacing[4])};
+  ${theme((o) => o.disabled)}
+`;
+var MultiSelectLabel = styled6.div`
+  display: flex;
+  align-items: center;
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+var MultiSelectInput = styled6.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 = styled6.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 && css2`
+      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 = useCallback2(
+    (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__ */ React7.createElement(
+    MultiSelectGroupContext.Provider,
+    {
+      value: {
+        name,
+        selected: Array.from(new Set(selected)),
+        disabled,
+        readonly,
+        hasError,
+        onChange: handleChange
+      }
+    },
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className,
+        "aria-label": ariaLabel,
+        "data-testid": "SelectGroup"
+      },
+      children
+    )
+  );
+}
+
+// src/components/Switch/index.tsx
+import { useSwitch } from "@react-aria/switch";
+import React8, { useRef, useMemo } from "react";
+import { useToggleState } from "react-stately";
+import styled7 from "styled-components";
+import { disabledSelector as disabledSelector3 } from "@charcoal-ui/utils";
+function SwitchCheckbox(props) {
+  const { disabled, className } = props;
+  const ariaSwitchProps = useMemo(
+    () => ({
+      ...props,
+      "aria-label": "children" in props ? void 0 : props.label,
+      isDisabled: props.disabled,
+      isSelected: props.checked
+    }),
+    [props]
+  );
+  const state = useToggleState(ariaSwitchProps);
+  const ref = useRef(null);
+  const {
+    inputProps: { className: _className, type: _type, ...rest }
+  } = useSwitch(ariaSwitchProps, state, ref);
+  return /* @__PURE__ */ React8.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ React8.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ React8.createElement(LabelInner, null, props.children) : void 0);
+}
+var Label = styled7.label`
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  cursor: pointer;
+  outline: 0;
+
+  ${theme((o) => o.disabled)}
+
+  ${disabledSelector3} {
+    cursor: default;
+  }
+`;
+var LabelInner = styled7.div`
+  ${theme((o) => [
+  o.typography(14).preserveHalfLeading,
+  o.font.text2,
+  o.margin.left(4)
+])}
+`;
+var SwitchInput = styled7.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
+import { useTextField } from "@react-aria/textfield";
+import { useVisuallyHidden } from "@react-aria/visually-hidden";
+import React10, {
+  useCallback as useCallback3,
+  useEffect,
+  useRef as useRef2,
+  useState
+} from "react";
+import styled9, { css as css3 } from "styled-components";
+
+// src/components/FieldLabel/index.tsx
+import React9 from "react";
+import styled8 from "styled-components";
+import { createTheme as createTheme2 } from "@charcoal-ui/styled";
+var FieldLabel = React9.forwardRef(
+  function FieldLabel2({
+    style,
+    className,
+    label,
+    required = false,
+    requiredText,
+    subLabel,
+    ...labelProps
+  }, ref) {
+    return /* @__PURE__ */ React9.createElement(FieldLabelWrapper, { style, className }, /* @__PURE__ */ React9.createElement(Label2, { ref, ...labelProps }, label), required && /* @__PURE__ */ React9.createElement(RequiredText, null, requiredText), /* @__PURE__ */ React9.createElement(SubLabelClickable, null, /* @__PURE__ */ React9.createElement("span", null, subLabel)));
+  }
+);
+var FieldLabel_default = FieldLabel;
+var theme2 = createTheme2(styled8);
+var Label2 = styled8.label`
+  ${theme2((o) => [o.typography(14).bold, o.font.text1])}
+`;
+var RequiredText = styled8.span`
+  ${theme2((o) => [o.typography(14), o.font.text3])}
+`;
+var SubLabelClickable = styled8.div`
+  ${theme2((o) => [
+  o.typography(14),
+  o.font.text3.hover.press,
+  o.outline.default.focus
+])}
+`;
+var FieldLabelWrapper = styled8.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
+import { createTheme as createTheme3 } from "@charcoal-ui/styled";
+var theme3 = createTheme3(styled9);
+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 = React10.forwardRef(
+  function TextField2(props, ref) {
+    return props.multiline !== void 0 && props.multiline ? /* @__PURE__ */ React10.createElement(MultiLineTextField, { ref, ...props }) : /* @__PURE__ */ React10.createElement(SingleLineTextField, { ref, ...props });
+  }
+);
+var TextField_default = TextField;
+var SingleLineTextField = React10.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 } = useVisuallyHidden();
+  const ariaRef = useRef2(null);
+  const prefixRef = useRef2(null);
+  const suffixRef = useRef2(null);
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const [suffixWidth, setSuffixWidth] = useState(0);
+  const nonControlled = props.value === void 0;
+  const handleChange = useCallback3(
+    (value) => {
+      const count2 = countCodePointsInString(value);
+      if (maxLength !== void 0 && count2 > maxLength) {
+        return;
+      }
+      if (nonControlled) {
+        setCount(count2);
+      }
+      onChange?.(value);
+    },
+    [maxLength, nonControlled, onChange]
+  );
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ""));
+  }, [props.value]);
+  const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
+    {
+      inputElementType: "input",
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: invalid ? "invalid" : "valid",
+      description: !invalid && assistiveText,
+      errorMessage: invalid && assistiveText,
+      onChange: handleChange,
+      ...props
+    },
+    ariaRef
+  );
+  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__ */ React10.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ React10.createElement(
+    TextFieldLabel,
+    {
+      label,
+      requiredText,
+      required,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ React10.createElement(StyledInputContainer, null, /* @__PURE__ */ React10.createElement(PrefixContainer, { ref: prefixRef }, /* @__PURE__ */ React10.createElement(Affix, null, prefix)), /* @__PURE__ */ React10.createElement(
+    StyledInput,
+    {
+      ref: mergeRefs(forwardRef4, ariaRef),
+      invalid,
+      extraLeftPadding: prefixWidth,
+      extraRightPadding: suffixWidth,
+      ...inputProps
+    }
+  ), /* @__PURE__ */ React10.createElement(SuffixContainer, { ref: suffixRef }, /* @__PURE__ */ React10.createElement(Affix, null, suffix), showCount && /* @__PURE__ */ React10.createElement(SingleLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count))), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ React10.createElement(
+    AssistiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assistiveText
+  ));
+});
+var MultiLineTextField = React10.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 } = useVisuallyHidden();
+  const textareaRef = useRef2(null);
+  const ariaRef = useRef2(null);
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
+  const [rows, setRows] = useState(initialRows);
+  const syncHeight = useCallback3(
+    (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 = useCallback3(
+    (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]
+  );
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ""));
+  }, [props.value]);
+  const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
+    {
+      inputElementType: "textarea",
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: invalid ? "invalid" : "valid",
+      description: !invalid && assistiveText,
+      errorMessage: invalid && assistiveText,
+      onChange: handleChange,
+      ...props
+    },
+    ariaRef
+  );
+  useEffect(() => {
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+  }, [autoHeight, syncHeight]);
+  return /* @__PURE__ */ React10.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ React10.createElement(
+    TextFieldLabel,
+    {
+      label,
+      requiredText,
+      required,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    StyledTextareaContainer,
+    {
+      invalid,
+      rows: showCount ? rows + 1 : rows
+    },
+    /* @__PURE__ */ React10.createElement(
+      StyledTextarea,
+      {
+        ref: mergeRefs(textareaRef, forwardRef4, ariaRef),
+        rows,
+        noBottomPadding: showCount,
+        ...inputProps
+      }
+    ),
+    showCount && /* @__PURE__ */ React10.createElement(MultiLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count)
+  ), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ React10.createElement(
+    AssistiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assistiveText
+  ));
+});
+var TextFieldRoot = styled9.div`
+  display: flex;
+  flex-direction: column;
+
+  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
+`;
+var TextFieldLabel = styled9(FieldLabel_default)`
+  ${theme3((o) => o.margin.bottom(8))}
+`;
+var StyledInputContainer = styled9.div`
+  height: 40px;
+  display: grid;
+  position: relative;
+`;
+var PrefixContainer = styled9.span`
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+`;
+var SuffixContainer = styled9.span`
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+
+  display: flex;
+  gap: 8px;
+`;
+var Affix = styled9.span`
+  user-select: none;
+
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
+`;
+var StyledInput = styled9.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 = styled9.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 }) => css3`
+    height: calc(22px * ${rows} + 18px);
+  `};
+`;
+var StyledTextarea = styled9.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 }) => css3`
+    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 = styled9.span`
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`;
+var MultiLineCounter = styled9.span`
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`;
+var AssistiveText = styled9.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
+import React11 from "react";
+import "@charcoal-ui/icons";
+var Icon = React11.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
+  return /* @__PURE__ */ React11.createElement(
+    "pixiv-icon",
+    {
+      ref,
+      name,
+      scale,
+      "unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+      class: className,
+      ...rest
+    }
+  );
+});
+var Icon_default = Icon;
+
+// src/components/Modal/index.tsx
+import React12, { useContext as useContext4, useRef as useRef3 } from "react";
+import {
+  Overlay,
+  useModalOverlay,
+  useOverlay
+} from "@react-aria/overlays";
+import styled10, { css as css4, useTheme } from "styled-components";
+import { FocusScope } from "@react-aria/focus";
+import { useDialog } from "@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
+import { maxWidth } from "@charcoal-ui/utils";
+import { useMedia } from "@charcoal-ui/styled";
+import { animated, useTransition, easings } from "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 = useRef3(null);
+  const { overlayProps, underlayProps } = useOverlay(props, ref);
+  const { modalProps } = useModalOverlay(
+    props,
+    {
+      close: onClose,
+      isOpen,
+      open: () => {
+      },
+      setOpen: () => {
+      },
+      toggle: () => {
+      }
+    },
+    ref
+  );
+  const { dialogProps, titleProps } = useDialog(props, ref);
+  const theme4 = useTheme();
+  const isMobile = useMedia(maxWidth(theme4.breakpoint.screen1)) ?? false;
+  const transitionEnabled = isMobile && bottomSheet !== false;
+  const transition = 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: easings.easeOutQuart } : { duration: 0 }
+  });
+  const showDismiss = !isMobile || bottomSheet !== true;
+  return transition(
+    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ React12.createElement(Overlay, { portalContainer }, /* @__PURE__ */ React12.createElement(
+      ModalBackground,
+      {
+        zIndex,
+        ...underlayProps,
+        style: transitionEnabled ? { backgroundColor } : {}
+      },
+      /* @__PURE__ */ React12.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React12.createElement(
+        ModalDialog,
+        {
+          ref,
+          ...overlayProps,
+          ...modalProps,
+          ...dialogProps,
+          style: transitionEnabled ? { transform } : {},
+          size,
+          bottomSheet
+        },
+        /* @__PURE__ */ React12.createElement(
+          ModalContext.Provider,
+          {
+            value: { titleProps, title, close: onClose, showDismiss }
+          },
+          children,
+          isDismissable === true && /* @__PURE__ */ React12.createElement(
+            ModalCrossButton,
+            {
+              size: "S",
+              icon: "24/Close",
+              onClick: onClose
+            }
+          )
+        )
+      ))
+    ))
+  );
+}
+var ModalContext = React12.createContext({
+  titleProps: {},
+  title: "",
+  close: void 0,
+  showDismiss: true
+});
+var ModalBackground = animated(styled10.div`
+  z-index: ${({ zIndex }) => zIndex};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${theme((o) => [o.bg.surface4])}
+`);
+var ModalDialog = animated(styled10.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 }) => maxWidth(theme4.breakpoint.screen1)} {
+    ${(p) => p.bottomSheet === "full" ? css4`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+            height: 100%;
+          ` : p.bottomSheet ? css4`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+          ` : css4`
+            width: calc(100% - 48px);
+          `}
+  }
+`);
+var ModalCrossButton = styled10(IconButton_default)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  ${theme((o) => [o.font.text3.hover.press])}
+`;
+function ModalTitle(props) {
+  const { titleProps, title } = useContext4(ModalContext);
+  return /* @__PURE__ */ React12.createElement(ModalHeading, { ...titleProps, ...props }, title);
+}
+var ModalHeading = styled10.h3`
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+`;
+
+// src/components/Modal/ModalPlumbing.tsx
+import React13 from "react";
+import styled11 from "styled-components";
+import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
+function ModalHeader() {
+  return /* @__PURE__ */ React13.createElement(ModalHeaderRoot, null, /* @__PURE__ */ React13.createElement(StyledModalTitle, null));
+}
+var ModalHeaderRoot = styled11.div`
+  height: 64px;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+`;
+var StyledModalTitle = styled11(ModalTitle)`
+  ${theme((o) => [o.font.text1, o.typography(16).bold])}
+`;
+var ModalAlign = styled11.div`
+  ${theme((o) => [o.padding.horizontal(24)])}
+
+  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`;
+var ModalBody = styled11.div`
+  ${theme((o) => [o.padding.bottom(40)])}
+`;
+var ModalButtons = styled11.div`
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 8px;
+  ${theme((o) => [o.padding.horizontal(24).top(16)])}
+
+  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`;
+
+// src/components/LoadingSpinner/index.tsx
+import React14, { useImperativeHandle, useRef as useRef4 } from "react";
+import styled12, { keyframes } from "styled-components";
+function LoadingSpinner({
+  size = 48,
+  padding = 16,
+  transparent = false
+}) {
+  return /* @__PURE__ */ React14.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ React14.createElement(LoadingSpinnerIcon, null));
+}
+var LoadingSpinnerRoot = styled12.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 = keyframes`
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+`;
+var Icon2 = styled12.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 = React14.forwardRef(function LoadingSpinnerIcon2({ once = false }, ref) {
+  const iconRef = useRef4(null);
+  useImperativeHandle(ref, () => ({
+    restart: () => {
+      if (!iconRef.current) {
+        return;
+      }
+      iconRef.current.dataset.resetAnimation = "true";
+      void iconRef.current.offsetWidth;
+      delete iconRef.current.dataset.resetAnimation;
+    }
+  }));
+  return /* @__PURE__ */ React14.createElement(Icon2, { ref: iconRef, once });
+});
+
+// src/components/DropdownSelector/index.tsx
+import React17, { useMemo as useMemo3, useRef as useRef7 } from "react";
+import styled15 from "styled-components";
+import { Item, useSelectState } from "react-stately";
+import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
+import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
+import { useSelect, HiddenSelect } from "@react-aria/select";
+import { useButton } from "@react-aria/button";
+
+// src/components/DropdownSelector/Listbox.tsx
+import React15, { memo, useRef as useRef5, Fragment, useMemo as useMemo2 } from "react";
+import styled13 from "styled-components";
+import { useListBox, useOption } from "@react-aria/listbox";
+import { mergeProps } from "@react-aria/utils";
+import { useFocusRing } from "@react-aria/focus";
+import { px as px3 } from "@charcoal-ui/utils";
+var Listbox = ({
+  state,
+  mode = "default",
+  ...props
+}) => {
+  const ref = useRef5(null);
+  const { listBoxProps } = useListBox(props, state, ref);
+  const collection = useMemo2(
+    () => [...state.collection].map((node, index, self) => ({
+      node,
+      first: index === 0,
+      last: index === self.length - 1
+    })),
+    [state.collection]
+  );
+  return /* @__PURE__ */ React15.createElement(ListboxRoot, { ref, ...listBoxProps }, collection.map(({ node, last }) => /* @__PURE__ */ React15.createElement(Fragment, { key: node.key }, /* @__PURE__ */ React15.createElement(Option, { item: node, state, mode }), !last && mode === "separator" && /* @__PURE__ */ React15.createElement(Divider, null))));
+};
+var Listbox_default = memo(Listbox);
+var ListboxRoot = styled13.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 = styled13.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 = useRef5(null);
+  const { optionProps, isSelected } = useOption(item, state, ref);
+  const { focusProps } = useFocusRing();
+  return /* @__PURE__ */ React15.createElement(OptionRoot, { ...mergeProps(optionProps, focusProps), ref, mode }, isSelected && /* @__PURE__ */ React15.createElement(OptionCheckIcon, { name: "16/Check" }), /* @__PURE__ */ React15.createElement(OptionText, { isSelected }, item.rendered));
+};
+var OptionRoot = styled13.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme4 }) => px3(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 = styled13(Icon_default)`
+  ${theme((o) => [o.font.text2])}
+`;
+var OptionText = styled13.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
+import React16, { useEffect as useEffect2, useRef as useRef6 } from "react";
+import {
+  DismissButton,
+  Overlay as Overlay2,
+  usePopover
+} from "@react-aria/overlays";
+import styled14 from "styled-components";
+var DropdownPopoverDiv = styled14.div`
+  width: 100%;
+  ${theme((o) => o.margin.top(4).bottom(4))}
+`;
+function DropdownPopover({ children, state, ...props }) {
+  const ref = useRef6(null);
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef: ref,
+      containerPadding: 0
+    },
+    state
+  );
+  useEffect2(() => {
+    if (ref.current && props.triggerRef.current) {
+      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
+    }
+  }, [props.triggerRef]);
+  useEffect2(() => {
+    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__ */ React16.createElement(Overlay2, null, /* @__PURE__ */ React16.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ React16.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ React16.createElement(DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ React16.createElement(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 } = useVisuallyHidden2();
+  const triggerRef = useRef7(null);
+  const selectProps = useMemo3(
+    () => ({
+      ...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 = useSelectState(selectProps);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    errorMessageProps,
+    descriptionProps
+  } = useSelect(selectProps, state, triggerRef);
+  const { buttonProps } = useButton(triggerProps, triggerRef);
+  const hasAssertiveText = assertiveText !== void 0 && assertiveText.length > 0;
+  return /* @__PURE__ */ React17.createElement(DropdownSelectorRoot, { "aria-disabled": disabled, className }, /* @__PURE__ */ React17.createElement(
+    DropdownFieldLabel,
+    {
+      label,
+      required,
+      requiredText,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ React17.createElement(
+    HiddenSelect,
+    {
+      state,
+      triggerRef,
+      label,
+      name: props.name,
+      isDisabled: disabled,
+      autoComplete
+    }
+  ), /* @__PURE__ */ React17.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React17.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React17.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React17.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React17.createElement(
+    DropdownPopover,
+    {
+      state,
+      triggerRef,
+      value: props.value ?? props.defaultValue
+    },
+    /* @__PURE__ */ React17.createElement(Listbox_default, { ...menuProps, state, mode })
+  )), hasAssertiveText && /* @__PURE__ */ React17.createElement(
+    AssertiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assertiveText
+  ));
+};
+var DropdownSelector_default = DropdownSelector;
+var DropdownSelectorItem = Item;
+var DropdownSelectorRoot = styled15.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  ${disabledSelector4} {
+    cursor: default;
+    ${theme((o) => o.disabled)}
+  }
+`;
+var DropdownFieldLabel = styled15(FieldLabel_default)`
+  width: 100%;
+
+  ${theme((o) => o.margin.bottom(8))}
+`;
+var DropdownButtonWrapper = styled15.div`
+  position: relative;
+`;
+var DropdownButton = styled15.button`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  ${disabledSelector4} {
+    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 = styled15.span`
+  text-align: left;
+
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+var DropdownButtonIcon = styled15(Icon_default)`
+  ${theme((o) => [o.font.text2])}
+`;
+var AssertiveText = styled15.div`
+  ${({ invalid }) => theme((o) => [
+  o.typography(14),
+  o.margin.top(8),
+  invalid ? o.font.assertive : o.font.text2
+])}
+`;
+
+// src/components/SegmentedControl/index.tsx
+import React19, { forwardRef, memo as memo2, useMemo as useMemo4, useRef as useRef8 } from "react";
+import { useRadioGroupState } from "react-stately";
+import {
+  useRadio,
+  useRadioGroup
+} from "@react-aria/radio";
+import styled16 from "styled-components";
+import { disabledSelector as disabledSelector5 } from "@charcoal-ui/utils";
+
+// src/components/SegmentedControl/RadioGroupContext.tsx
+import React18, { createContext as createContext2, useContext as useContext5 } from "react";
+var RadioContext = createContext2(null);
+var RadioProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ React18.createElement(RadioContext.Provider, { value }, children);
+};
+var useRadioContext = () => {
+  const state = useContext5(RadioContext);
+  if (state === null)
+    throw new Error("`<RadioProvider>` is not likely mounted.");
+  return state;
+};
+
+// src/components/SegmentedControl/index.tsx
+var SegmentedControl = forwardRef(
+  function SegmentedControlInner(props, ref) {
+    const ariaRadioGroupProps = useMemo4(
+      () => ({
+        ...props,
+        isDisabled: props.disabled,
+        isReadOnly: props.readonly,
+        isRequired: props.required
+      }),
+      [props]
+    );
+    const state = useRadioGroupState(ariaRadioGroupProps);
+    const { radioGroupProps } = useRadioGroup(ariaRadioGroupProps, state);
+    const segmentedControlItems = useMemo4(() => {
+      return props.data.map(
+        (d) => typeof d === "string" ? { value: d, label: d } : d
+      );
+    }, [props.data]);
+    return /* @__PURE__ */ React19.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ React19.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ React19.createElement(
+      Segmented,
+      {
+        key: item.value,
+        value: item.value,
+        disabled: item.disabled
+      },
+      item.label
+    ))));
+  }
+);
+var SegmentedControl_default = memo2(SegmentedControl);
+var Segmented = ({ children, ...props }) => {
+  const state = useRadioContext();
+  const ref = useRef8(null);
+  const ariaRadioProps = useMemo4(
+    () => ({ ...props, isDisabled: props.disabled }),
+    [props]
+  );
+  const { inputProps, isDisabled, isSelected } = useRadio(
+    ariaRadioProps,
+    state,
+    ref
+  );
+  return /* @__PURE__ */ React19.createElement(
+    SegmentedRoot,
+    {
+      "aria-disabled": isDisabled || state.isReadOnly,
+      checked: isSelected
+    },
+    /* @__PURE__ */ React19.createElement(SegmentedInput, { ...inputProps, ref }),
+    /* @__PURE__ */ React19.createElement(RadioLabel2, null, /* @__PURE__ */ React19.createElement(SegmentedLabelInner, null, children))
+  );
+};
+var SegmentedControlRoot = styled16.div`
+  display: inline-flex;
+  align-items: center;
+
+  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
+`;
+var SegmentedRoot = styled16.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 32px;
+
+  ${disabledSelector5} {
+    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 = styled16.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 = styled16.div`
+  background: transparent;
+  display: flex;
+  align-items: center;
+  height: 22px;
+`;
+var SegmentedLabelInner = styled16.div`
+  ${theme((o) => [o.typography(14)])}
+`;
+
+// src/components/Checkbox/index.tsx
+import React20, { forwardRef as forwardRef2, memo as memo3, useMemo as useMemo5 } from "react";
+import styled17, { css as css5 } from "styled-components";
+import { useCheckbox } from "@react-aria/checkbox";
+import { useObjectRef } from "@react-aria/utils";
+import { useToggleState as useToggleState2 } from "react-stately";
+import { disabledSelector as disabledSelector6, px as px4 } from "@charcoal-ui/utils";
+var Checkbox = forwardRef2(
+  function CheckboxInner(props, ref) {
+    const ariaCheckboxProps = useMemo5(
+      () => ({
+        ...props,
+        isSelected: props.checked,
+        defaultSelected: props.defaultChecked,
+        "aria-label": "children" in props ? void 0 : props.label,
+        isDisabled: props.disabled
+      }),
+      [props]
+    );
+    const state = useToggleState2(ariaCheckboxProps);
+    const objectRef = useObjectRef(ref);
+    const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef);
+    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
+    return /* @__PURE__ */ React20.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React20.createElement(CheckboxRoot, null, /* @__PURE__ */ React20.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React20.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React20.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ React20.createElement(InputLabel, null, props.children));
+  }
+);
+var Checkbox_default = memo3(Checkbox);
+var hiddenCss = css5`
+  visibility: hidden;
+`;
+var InputRoot = styled17.label`
+  position: relative;
+  display: flex;
+
+  cursor: pointer;
+  ${disabledSelector6} {
+    cursor: default;
+  }
+
+  gap: ${({ theme: theme4 }) => px4(theme4.spacing[4])};
+  ${theme((o) => [o.disabled])}
+`;
+var CheckboxRoot = styled17.div`
+  position: relative;
+`;
+var CheckboxInput = styled17.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 = styled17.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 = styled17.div`
+  ${theme((o) => [o.font.text2])}
+
+  font-size: 14px;
+  /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
+  line-height: 20px;
+`;
+
+// src/components/TagItem/index.tsx
+import React21, {
+  forwardRef as forwardRef3,
+  memo as memo4,
+  useMemo as useMemo6
+} from "react";
+import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import styled18, { css as css6 } from "styled-components";
+import { disabledSelector as disabledSelector7, px as px5 } from "@charcoal-ui/utils";
+import { useButton as useButton2 } from "@react-aria/button";
+var sizeMap = {
+  S: 32,
+  M: 40
+};
+var TagItem = forwardRef3(
+  function TagItemInner({
+    label,
+    translatedLabel,
+    bgColor = "#7ACCB1",
+    bgImage,
+    size = "M",
+    disabled,
+    status = "default",
+    ...props
+  }, _ref) {
+    const ref = useObjectRef2(_ref);
+    const ariaButtonProps = useMemo6(
+      () => ({
+        elementType: "a",
+        isDisabled: disabled,
+        ...props
+      }),
+      [disabled, props]
+    );
+    const { buttonProps } = useButton2(ariaButtonProps, ref);
+    const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
+    return /* @__PURE__ */ React21.createElement(
+      TagItemRoot,
+      {
+        ref,
+        size: hasTranslatedLabel ? "M" : size,
+        status,
+        ...buttonProps
+      },
+      /* @__PURE__ */ React21.createElement(Background, { bgColor, bgImage }),
+      /* @__PURE__ */ React21.createElement(Inner, null, /* @__PURE__ */ React21.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ React21.createElement(TranslatedLabel, null, /* @__PURE__ */ React21.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ React21.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ React21.createElement(Icon_default, { name: "16/Remove" }))
+    );
+  }
+);
+var TagItem_default = memo4(TagItem);
+var TagItemRoot = styled18.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)] : []
+])}
+
+  ${disabledSelector7} {
+    ${theme((o) => [o.disabled])}
+    cursor: default;
+  }
+`;
+var Background = styled18.div`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ bgColor }) => bgColor};
+
+  ${({ bgImage }) => bgImage !== void 0 && css6`
+      ${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 = styled18.div`
+  display: inline-flex;
+  gap: ${({ theme: theme4 }) => px5(theme4.spacing[8])};
+  align-items: center;
+  z-index: 2;
+`;
+var labelCSS = css6`
+  ${theme((o) => [o.typography(14).bold])}
+`;
+var translateLabelCSS = css6`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  font-size: 10px;
+`;
+var LabelWrapper = styled18.div`
+  ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
+`;
+var Label3 = styled18.span`
+  max-width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+`;
+var TranslatedLabel = styled18.div`
+  ${theme((o) => [o.typography(12).bold])}
+`;
+export {
+  Button_default as Button,
+  CharcoalProvider,
+  Checkbox_default as Checkbox,
+  Clickable_default as Clickable,
+  ComponentAbstraction,
+  DropdownSelector_default as DropdownSelector,
+  DropdownSelectorItem,
+  Icon_default as Icon,
+  IconButton_default as IconButton,
+  LoadingSpinner,
+  LoadingSpinnerIcon,
+  Modal,
+  ModalAlign,
+  ModalBody,
+  ModalButtons,
+  ModalHeader,
+  MultiSelect,
+  MultiSelectGroup,
+  OverlayProvider,
+  Radio,
+  RadioGroup,
+  SSRProvider,
+  SegmentedControl_default as SegmentedControl,
+  SwitchCheckbox as Switch,
+  TagItem_default as TagItem,
+  TextField_default as TextField,
+  useComponentAbstraction
+};
+//# sourceMappingURL=index.esm.js.map