@charcoal-ui/react 6.0.0-rc.8 → 6.0.0

package/dist/components/DropdownSelector/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["React","ReactNode","useState","useRef","useMemo","useCallback","Icon","FieldLabel","DropdownPopover","findPreviewRecursive","MenuList","MenuListChildren","getValuesRecursive","AssistiveText","useClassNames","PopoverProps","useVisuallyHidden","useId","DropdownSelectorProps","label","value","disabled","placeholder","showLabel","invalid","assistiveText","required","requiredText","subLabel","name","children","onChange","className","selectRef","Ref","HTMLSelectElement","Pick","DropdownSelector","props","triggerRef","HTMLButtonElement","isOpen","setIsOpen","preview","isPlaceholder","undefined","propsArray","hasMatchedValue","some","itemProps","visuallyHiddenProps","handleChange","e","ChangeEvent","target","labelId","describedbyId","classNames","map","inertWorkaround","v"],"sources":["../../../src/components/DropdownSelector/index.tsx"],"sourcesContent":["import './index.css'\n\nimport React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { getValuesRecursive } from './MenuList/internals/getValuesRecursive'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { PopoverProps } from './Popover'\n\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  /**\n   * the name of hidden `<select />`\n   */\n  name?: string\n  children: MenuListChildren\n  onChange: (value: string) => void\n  className?: string\n  selectRef?: React.Ref<HTMLSelectElement>\n} & Pick<PopoverProps, 'inertWorkaround'>\n\nexport default function DropdownSelector({\n  onChange,\n  showLabel = false,\n  selectRef,\n  ...props\n}: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  const isPlaceholder = useMemo(\n    () => props.placeholder !== undefined && preview === undefined,\n    [preview, props.placeholder],\n  )\n\n  const propsArray = getValuesRecursive(props.children)\n  const hasMatchedValue = useMemo(\n    () => propsArray.some((itemProps) => itemProps.value === props.value),\n    [propsArray, props.value],\n  )\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  const labelId = useId()\n  const describedbyId = useId()\n\n  const classNames = useClassNames(\n    'charcoal-dropdown-selector-root',\n    props.className,\n  )\n\n  return (\n    <div className={classNames} aria-disabled={props.disabled}>\n      <FieldLabel\n        id={labelId}\n        label={props.label}\n        required={props.required}\n        requiredText={props.requiredText}\n        subLabel={props.subLabel}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <div {...visuallyHiddenProps} aria-hidden=\"true\">\n        <select\n          name={props.name}\n          value={props.value}\n          onChange={handleChange}\n          tabIndex={-1}\n          ref={selectRef}\n        >\n          {!hasMatchedValue && (\n            <option value={props.value}>{props.value}</option>\n          )}\n          {propsArray.map((itemProps) => {\n            return (\n              <option\n                key={itemProps.value}\n                value={itemProps.value}\n                disabled={itemProps.disabled}\n              >\n                {itemProps.value}\n              </option>\n            )\n          })}\n        </select>\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n      <button\n        className=\"charcoal-dropdown-selector-button\"\n        aria-labelledby={labelId}\n        aria-invalid={props.invalid}\n        aria-describedby={\n          props.assistiveText !== undefined ? describedbyId : undefined\n        }\n        disabled={props.disabled}\n        onClick={() => {\n          if (props.disabled === true) return\n          setIsOpen(true)\n        }}\n        ref={triggerRef}\n        type=\"button\"\n        data-active={isOpen}\n      >\n        <span\n          className=\"charcoal-ui-dropdown-selector-text\"\n          data-placeholder={isPlaceholder}\n        >\n          {isPlaceholder ? props.placeholder : preview}\n        </span>\n        <Icon className=\"charcoal-ui-dropdown-selector-icon\" name=\"16/Menu\" />\n      </button>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          triggerRef={triggerRef}\n          value={props.value}\n          inertWorkaround={props.inertWorkaround}\n        >\n          <MenuList\n            value={props.value}\n            onChange={(v) => {\n              onChange(v)\n              setIsOpen(false)\n            }}\n          >\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>\n          {props.assistiveText}\n        </AssistiveText>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,SAAwBqC,iBAAiB,EACvCN,UACAR,YAAY,OACZU,WACA,GAAGK,SACqB;CACxB,MAAMC,+BAAuC,KAAK;CAClD,MAAM,CAACE,QAAQC,iCAAsB,MAAM;CAC3C,MAAMC,UAAUlC,kDAAqB6B,MAAMR,UAAUQ,MAAMlB,MAAM;CAEjE,MAAMwB,yCACEN,MAAMhB,gBAAgBuB,UAAaF,YAAYE,QACrD,CAACF,SAASL,MAAMhB,YAClB,CAAC;CAED,MAAMwB,aAAalC,8CAAmB0B,MAAMR,SAAS;CACrD,MAAMiB,2CACED,WAAWE,MAAMC,cAAcA,UAAU7B,UAAUkB,MAAMlB,MAAM,EACrE,CAAC0B,YAAYR,MAAMlB,MACrB,CAAC;CAED,MAAM,EAAE8B,0EAA2C;CAEnD,MAAMC,uCACHC,MAA4C;EAC3CrB,SAASqB,EAAEE,OAAOlC,MAAM;IAE1B,CAACW,SACH,CAAC;CAED,MAAMwB,uCAAiB;CACvB,MAAMC,6CAAuB;CAO7B,OACE,4CAAC,OAAD;EAAK,WANY1C,oCACjB,mCACAwB,MAAMN,UAIoB;EAAE,iBAAeM,MAAMjB;YAAjD;GACE,2CAAC,yBAAD;IACE,IAAIkC;IACJ,OAAOjB,MAAMnB;IACb,UAAUmB,MAAMZ;IAChB,cAAcY,MAAMX;IACpB,UAAUW,MAAMV;IAChB,GAAK,CAACL,YAAY2B,sBAAsB,EAAG;IAAC;GAE9C,2CAAC,OAAD;IAAK,GAAIA;IAAqB,eAAY;cACxC,4CAAC,UAAD;KACE,MAAMZ,MAAMT;KACZ,OAAOS,MAAMlB;KACb,UAAU+B;KACV,UAAU;KACV,KAAKlB;eALP,CAOG,CAACc,mBACA,2CAAC,UAAD;MAAQ,OAAOT,MAAMlB;gBAAQkB,MAAMlB;MACpC,GACA0B,WAAWY,KAAKT,cAAc;MAC7B,OACE,2CAAC,UAAD;OAEE,OAAOA,UAAU7B;OACjB,UAAU6B,UAAU5B;iBAEnB4B,UAAU7B;OACJ,EALF6B,UAAU7B,MAKR;OAEX,CACI;;IACL;GAEL,4CAAC,UAAD;IACE,WAAU;IACV,mBAAiBmC;IACjB,gBAAcjB,MAAMd;IACpB,oBACEc,MAAMb,kBAAkBoB,SAAYW,gBAAgBX;IAEtD,UAAUP,MAAMjB;IAChB,eAAe;KACb,IAAIiB,MAAMjB,aAAa,MAAM;KAC7BqB,UAAU,KAAK;;IAEjB,KAAKH;IACL,MAAK;IACL,eAAaE;cAdf,CAgBE,2CAAC,QAAD;KACE,WAAU;KACV,oBAAkBG;eAEjBA,gBAAgBN,MAAMhB,cAAcqB;KACjC,GACN,2CAAC,uBAAD;KAAM,WAAU;KAAqC,MAAK;KAAS,EAC7D;;GACPF,UACC,2CAAC,yCAAD;IACUA;IACR,eAAeC,UAAU,MAAM;IACnBH;IACZ,OAAOD,MAAMlB;IACb,iBAAiBkB,MAAMqB;cAEvB,2CAAC,yBAAD;KACE,OAAOrB,MAAMlB;KACb,WAAWwC,MAAM;MACf7B,SAAS6B,EAAE;MACXlB,UAAU,MAAM;;eAGjBJ,MAAMR;KACC;IAEb;GACAQ,MAAMb,kBAAkBoB,UACvB,2CAAC,+BAAD;IAAe,gBAAcP,MAAMd,YAAY;IAAM,IAAIgC;cACtDlB,MAAMb;IAEV;GACG"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/DropdownSelector/index.tsx"],"sourcesContent":["import './index.css'\n\nimport React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { getValuesRecursive } from './MenuList/internals/getValuesRecursive'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { PopoverProps } from './Popover'\n\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  /**\n   * the name of hidden `<select />`\n   */\n  name?: string\n  children: MenuListChildren\n  onChange: (value: string) => void\n  className?: string\n  selectRef?: React.Ref<HTMLSelectElement>\n} & Pick<PopoverProps, 'inertWorkaround'>\n\nexport default function DropdownSelector({\n  onChange,\n  showLabel = false,\n  selectRef,\n  ...props\n}: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const penHandledRef = useRef(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  const isPlaceholder = useMemo(\n    () => props.placeholder !== undefined && preview === undefined,\n    [preview, props.placeholder],\n  )\n\n  const propsArray = getValuesRecursive(props.children)\n  const hasMatchedValue = useMemo(\n    () => propsArray.some((itemProps) => itemProps.value === props.value),\n    [propsArray, props.value],\n  )\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  // Popover が document listener の登録に使うため、識別子を安定させる\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleSelect = useCallback(\n    (v: string) => {\n      onChange(v)\n      setIsOpen(false)\n    },\n    [onChange],\n  )\n\n  const handleTriggerPointerUp = useCallback(\n    (e: React.PointerEvent<HTMLButtonElement>) => {\n      if (e.pointerType !== 'pen') return\n      if (props.disabled === true) return\n      penHandledRef.current = true\n      setIsOpen(true)\n    },\n    [props.disabled],\n  )\n\n  const handleTriggerClick = useCallback(() => {\n    if (penHandledRef.current) {\n      penHandledRef.current = false\n      return\n    }\n    if (props.disabled === true) return\n    setIsOpen(true)\n  }, [props.disabled])\n\n  const labelId = useId()\n  const describedbyId = useId()\n\n  const classNames = useClassNames(\n    'charcoal-dropdown-selector-root',\n    props.className,\n  )\n\n  return (\n    <div className={classNames} aria-disabled={props.disabled}>\n      <FieldLabel\n        id={labelId}\n        label={props.label}\n        required={props.required}\n        requiredText={props.requiredText}\n        subLabel={props.subLabel}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <div {...visuallyHiddenProps} aria-hidden=\"true\">\n        <select\n          name={props.name}\n          value={props.value}\n          onChange={handleChange}\n          tabIndex={-1}\n          ref={selectRef}\n        >\n          {!hasMatchedValue && (\n            <option value={props.value}>{props.value}</option>\n          )}\n          {propsArray.map((itemProps) => {\n            return (\n              <option\n                key={itemProps.value}\n                value={itemProps.value}\n                disabled={itemProps.disabled}\n              >\n                {itemProps.value}\n              </option>\n            )\n          })}\n        </select>\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n      <button\n        className=\"charcoal-dropdown-selector-button\"\n        aria-labelledby={labelId}\n        aria-invalid={props.invalid}\n        aria-describedby={\n          props.assistiveText !== undefined ? describedbyId : undefined\n        }\n        disabled={props.disabled}\n        onPointerUp={handleTriggerPointerUp}\n        onClick={handleTriggerClick}\n        ref={triggerRef}\n        type=\"button\"\n        data-active={isOpen}\n      >\n        <span\n          className=\"charcoal-ui-dropdown-selector-text\"\n          data-placeholder={isPlaceholder}\n        >\n          {isPlaceholder ? props.placeholder : preview}\n        </span>\n        <Icon className=\"charcoal-ui-dropdown-selector-icon\" name=\"16/Menu\" />\n      </button>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={handleClose}\n          triggerRef={triggerRef}\n          value={props.value}\n          inertWorkaround={props.inertWorkaround}\n        >\n          <MenuList value={props.value} onChange={handleSelect}>\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>\n          {props.assistiveText}\n        </AssistiveText>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,SAAwB,iBAAiB,EACvC,UACA,YAAY,OACZ,WACA,GAAG,SACqB;CACxB,MAAM,+BAAuC,IAAI;CACjD,MAAM,kCAAuB,KAAK;CAClC,MAAM,CAAC,QAAQ,iCAAsB,KAAK;CAC1C,MAAM,UAAU,kDAAqB,MAAM,UAAU,MAAM,KAAK;CAEhE,MAAM,yCACE,MAAM,gBAAgB,UAAa,YAAY,QACrD,CAAC,SAAS,MAAM,WAAW,CAC7B;CAEA,MAAM,aAAa,8CAAmB,MAAM,QAAQ;CACpD,MAAM,2CACE,WAAW,MAAM,cAAc,UAAU,UAAU,MAAM,KAAK,GACpE,CAAC,YAAY,MAAM,KAAK,CAC1B;CAEA,MAAM,EAAE,yEAA0C;CAElD,MAAM,uCACH,MAA4C;EAC3C,SAAS,EAAE,OAAO,KAAK;CACzB,GACA,CAAC,QAAQ,CACX;CAGA,MAAM,2CAAgC;EACpC,UAAU,KAAK;CACjB,GAAG,CAAA,CAAE;CAEL,MAAM,uCACH,MAAc;EACb,SAAS,CAAC;EACV,UAAU,KAAK;CACjB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,iDACH,MAA6C;EAC5C,IAAI,EAAE,gBAAgB,OAAO;EAC7B,IAAI,MAAM,aAAa,MAAM;EAC7B,cAAc,UAAU;EACxB,UAAU,IAAI;CAChB,GACA,CAAC,MAAM,QAAQ,CACjB;CAEA,MAAM,kDAAuC;EAC3C,IAAI,cAAc,SAAS;GACzB,cAAc,UAAU;GACxB;EACF;EACA,IAAI,MAAM,aAAa,MAAM;EAC7B,UAAU,IAAI;CAChB,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,sCAAgB;CACtB,MAAM,4CAAsB;CAO5B,OACE,4CAAC,OAAD;EAAK,WANY,oCACjB,mCACA,MAAM,SAIU;EAAY,iBAAe,MAAM;YAAjD;GACE,2CAAC,yBAAD;IACE,IAAI;IACJ,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,cAAc,MAAM;IACpB,UAAU,MAAM;IAChB,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,2CAAC,OAAD;IAAK,GAAI;IAAqB,eAAY;cACxC,4CAAC,UAAD;KACE,MAAM,MAAM;KACZ,OAAO,MAAM;KACb,UAAU;KACV,UAAU;KACV,KAAK;eALP,CAOG,CAAC,mBACA,2CAAC,UAAD;MAAQ,OAAO,MAAM;gBAAQ,MAAM;KAAc,IAElD,WAAW,KAAK,cAAc;MAC7B,OACE,2CAAC,UAAD;OAEE,OAAO,UAAU;OACjB,UAAU,UAAU;iBAEnB,UAAU;MACL,GALD,UAAU,KAKT;KAEZ,CAAC,CACK;;GACL;GAEL,4CAAC,UAAD;IACE,WAAU;IACV,mBAAiB;IACjB,gBAAc,MAAM;IACpB,oBACE,MAAM,kBAAkB,SAAY,gBAAgB;IAEtD,UAAU,MAAM;IAChB,aAAa;IACb,SAAS;IACT,KAAK;IACL,MAAK;IACL,eAAa;cAZf,CAcE,2CAAC,QAAD;KACE,WAAU;KACV,oBAAkB;eAEjB,gBAAgB,MAAM,cAAc;IACjC,IACN,2CAAC,uBAAD;KAAM,WAAU;KAAqC,MAAK;IAAS,EAC7D;;GACP,UACC,2CAAC,yCAAD;IACU;IACR,SAAS;IACG;IACZ,OAAO,MAAM;IACb,iBAAiB,MAAM;cAEvB,2CAAC,yBAAD;KAAU,OAAO,MAAM;KAAO,UAAU;eACrC,MAAM;IACC;GACK;GAElB,MAAM,kBAAkB,UACvB,2CAAC,+BAAD;IAAe,gBAAc,MAAM,YAAY;IAAM,IAAI;cACtD,MAAM;GACM;EAEd;;AAET"}

package/dist/components/DropdownSelector/index2.js

@@ -16,6 +16,7 @@ import { useVisuallyHidden } from "react-aria/VisuallyHidden";
 //#region src/components/DropdownSelector/index.tsx
 function DropdownSelector({ onChange, showLabel = false, selectRef, ...props }) {
 	const triggerRef = useRef(null);
+	const penHandledRef = useRef(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const preview = findPreviewRecursive(props.children, props.value);
 	const isPlaceholder = useMemo(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
@@ -25,6 +26,27 @@ function DropdownSelector({ onChange, showLabel = false, selectRef, ...props })
 	const handleChange = useCallback((e) => {
 		onChange(e.target.value);
 	}, [onChange]);
+	const handleClose = useCallback(() => {
+		setIsOpen(false);
+	}, []);
+	const handleSelect = useCallback((v) => {
+		onChange(v);
+		setIsOpen(false);
+	}, [onChange]);
+	const handleTriggerPointerUp = useCallback((e) => {
+		if (e.pointerType !== "pen") return;
+		if (props.disabled === true) return;
+		penHandledRef.current = true;
+		setIsOpen(true);
+	}, [props.disabled]);
+	const handleTriggerClick = useCallback(() => {
+		if (penHandledRef.current) {
+			penHandledRef.current = false;
+			return;
+		}
+		if (props.disabled === true) return;
+		setIsOpen(true);
+	}, [props.disabled]);
 	const labelId = useId();
 	const describedbyId = useId();
 	return /* @__PURE__ */ jsxs("div", {
@@ -66,10 +88,8 @@ function DropdownSelector({ onChange, showLabel = false, selectRef, ...props })
 				"aria-invalid": props.invalid,
 				"aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0,
 				disabled: props.disabled,
-				onClick: () => {
-					if (props.disabled === true) return;
-					setIsOpen(true);
-				},
+				onPointerUp: handleTriggerPointerUp,
+				onClick: handleTriggerClick,
 				ref: triggerRef,
 				type: "button",
 				"data-active": isOpen,
@@ -84,16 +104,13 @@ function DropdownSelector({ onChange, showLabel = false, selectRef, ...props })
 			}),
 			isOpen && /* @__PURE__ */ jsx(DropdownPopover, {
 				isOpen,
-				onClose: () => setIsOpen(false),
+				onClose: handleClose,
 				triggerRef,
 				value: props.value,
 				inertWorkaround: props.inertWorkaround,
 				children: /* @__PURE__ */ jsx(MenuList, {
 					value: props.value,
-					onChange: (v) => {
-						onChange(v);
-						setIsOpen(false);
-					},
+					onChange: handleSelect,
 					children: props.children
 				})
 			}),

package/dist/components/DropdownSelector/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["React","ReactNode","useState","useRef","useMemo","useCallback","Icon","FieldLabel","DropdownPopover","findPreviewRecursive","MenuList","MenuListChildren","getValuesRecursive","AssistiveText","useClassNames","PopoverProps","useVisuallyHidden","useId","DropdownSelectorProps","label","value","disabled","placeholder","showLabel","invalid","assistiveText","required","requiredText","subLabel","name","children","onChange","className","selectRef","Ref","HTMLSelectElement","Pick","DropdownSelector","props","triggerRef","HTMLButtonElement","isOpen","setIsOpen","preview","isPlaceholder","undefined","propsArray","hasMatchedValue","some","itemProps","visuallyHiddenProps","handleChange","e","ChangeEvent","target","labelId","describedbyId","classNames","map","inertWorkaround","v"],"sources":["../../../src/components/DropdownSelector/index.tsx"],"sourcesContent":["import './index.css'\n\nimport React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { getValuesRecursive } from './MenuList/internals/getValuesRecursive'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { PopoverProps } from './Popover'\n\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  /**\n   * the name of hidden `<select />`\n   */\n  name?: string\n  children: MenuListChildren\n  onChange: (value: string) => void\n  className?: string\n  selectRef?: React.Ref<HTMLSelectElement>\n} & Pick<PopoverProps, 'inertWorkaround'>\n\nexport default function DropdownSelector({\n  onChange,\n  showLabel = false,\n  selectRef,\n  ...props\n}: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  const isPlaceholder = useMemo(\n    () => props.placeholder !== undefined && preview === undefined,\n    [preview, props.placeholder],\n  )\n\n  const propsArray = getValuesRecursive(props.children)\n  const hasMatchedValue = useMemo(\n    () => propsArray.some((itemProps) => itemProps.value === props.value),\n    [propsArray, props.value],\n  )\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  const labelId = useId()\n  const describedbyId = useId()\n\n  const classNames = useClassNames(\n    'charcoal-dropdown-selector-root',\n    props.className,\n  )\n\n  return (\n    <div className={classNames} aria-disabled={props.disabled}>\n      <FieldLabel\n        id={labelId}\n        label={props.label}\n        required={props.required}\n        requiredText={props.requiredText}\n        subLabel={props.subLabel}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <div {...visuallyHiddenProps} aria-hidden=\"true\">\n        <select\n          name={props.name}\n          value={props.value}\n          onChange={handleChange}\n          tabIndex={-1}\n          ref={selectRef}\n        >\n          {!hasMatchedValue && (\n            <option value={props.value}>{props.value}</option>\n          )}\n          {propsArray.map((itemProps) => {\n            return (\n              <option\n                key={itemProps.value}\n                value={itemProps.value}\n                disabled={itemProps.disabled}\n              >\n                {itemProps.value}\n              </option>\n            )\n          })}\n        </select>\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n      <button\n        className=\"charcoal-dropdown-selector-button\"\n        aria-labelledby={labelId}\n        aria-invalid={props.invalid}\n        aria-describedby={\n          props.assistiveText !== undefined ? describedbyId : undefined\n        }\n        disabled={props.disabled}\n        onClick={() => {\n          if (props.disabled === true) return\n          setIsOpen(true)\n        }}\n        ref={triggerRef}\n        type=\"button\"\n        data-active={isOpen}\n      >\n        <span\n          className=\"charcoal-ui-dropdown-selector-text\"\n          data-placeholder={isPlaceholder}\n        >\n          {isPlaceholder ? props.placeholder : preview}\n        </span>\n        <Icon className=\"charcoal-ui-dropdown-selector-icon\" name=\"16/Menu\" />\n      </button>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          triggerRef={triggerRef}\n          value={props.value}\n          inertWorkaround={props.inertWorkaround}\n        >\n          <MenuList\n            value={props.value}\n            onChange={(v) => {\n              onChange(v)\n              setIsOpen(false)\n            }}\n          >\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>\n          {props.assistiveText}\n        </AssistiveText>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqCA,SAAwBqC,iBAAiB,EACvCN,UACAR,YAAY,OACZU,WACA,GAAGK,SACqB;CACxB,MAAMC,aAAapC,OAA0B,KAAK;CAClD,MAAM,CAACsC,QAAQC,aAAaxC,SAAS,MAAM;CAC3C,MAAMyC,UAAUlC,qBAAqB6B,MAAMR,UAAUQ,MAAMlB,MAAM;CAEjE,MAAMwB,gBAAgBxC,cACdkC,MAAMhB,gBAAgBuB,UAAaF,YAAYE,QACrD,CAACF,SAASL,MAAMhB,YAClB,CAAC;CAED,MAAMwB,aAAalC,mBAAmB0B,MAAMR,SAAS;CACrD,MAAMiB,kBAAkB3C,cAChB0C,WAAWE,MAAMC,cAAcA,UAAU7B,UAAUkB,MAAMlB,MAAM,EACrE,CAAC0B,YAAYR,MAAMlB,MACrB,CAAC;CAED,MAAM,EAAE8B,wBAAwBlC,mBAAmB;CAEnD,MAAMmC,eAAe9C,aAClB+C,MAA4C;EAC3CrB,SAASqB,EAAEE,OAAOlC,MAAM;IAE1B,CAACW,SACH,CAAC;CAED,MAAMwB,UAAUtC,OAAO;CACvB,MAAMuC,gBAAgBvC,OAAO;CAO7B,OACE,qBAAC,OAAD;EAAK,WANYH,cACjB,mCACAwB,MAAMN,UAIoB;EAAE,iBAAeM,MAAMjB;YAAjD;GACE,oBAAC,YAAD;IACE,IAAIkC;IACJ,OAAOjB,MAAMnB;IACb,UAAUmB,MAAMZ;IAChB,cAAcY,MAAMX;IACpB,UAAUW,MAAMV;IAChB,GAAK,CAACL,YAAY2B,sBAAsB,EAAG;IAAC;GAE9C,oBAAC,OAAD;IAAK,GAAIA;IAAqB,eAAY;cACxC,qBAAC,UAAD;KACE,MAAMZ,MAAMT;KACZ,OAAOS,MAAMlB;KACb,UAAU+B;KACV,UAAU;KACV,KAAKlB;eALP,CAOG,CAACc,mBACA,oBAAC,UAAD;MAAQ,OAAOT,MAAMlB;gBAAQkB,MAAMlB;MACpC,GACA0B,WAAWY,KAAKT,cAAc;MAC7B,OACE,oBAAC,UAAD;OAEE,OAAOA,UAAU7B;OACjB,UAAU6B,UAAU5B;iBAEnB4B,UAAU7B;OACJ,EALF6B,UAAU7B,MAKR;OAEX,CACI;;IACL;GAEL,qBAAC,UAAD;IACE,WAAU;IACV,mBAAiBmC;IACjB,gBAAcjB,MAAMd;IACpB,oBACEc,MAAMb,kBAAkBoB,SAAYW,gBAAgBX;IAEtD,UAAUP,MAAMjB;IAChB,eAAe;KACb,IAAIiB,MAAMjB,aAAa,MAAM;KAC7BqB,UAAU,KAAK;;IAEjB,KAAKH;IACL,MAAK;IACL,eAAaE;cAdf,CAgBE,oBAAC,QAAD;KACE,WAAU;KACV,oBAAkBG;eAEjBA,gBAAgBN,MAAMhB,cAAcqB;KACjC,GACN,oBAAC,MAAD;KAAM,WAAU;KAAqC,MAAK;KAAS,EAC7D;;GACPF,UACC,oBAAC,iBAAD;IACUA;IACR,eAAeC,UAAU,MAAM;IACnBH;IACZ,OAAOD,MAAMlB;IACb,iBAAiBkB,MAAMqB;cAEvB,oBAAC,UAAD;KACE,OAAOrB,MAAMlB;KACb,WAAWwC,MAAM;MACf7B,SAAS6B,EAAE;MACXlB,UAAU,MAAM;;eAGjBJ,MAAMR;KACC;IAEb;GACAQ,MAAMb,kBAAkBoB,UACvB,oBAAC,eAAD;IAAe,gBAAcP,MAAMd,YAAY;IAAM,IAAIgC;cACtDlB,MAAMb;IAEV;GACG"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/DropdownSelector/index.tsx"],"sourcesContent":["import './index.css'\n\nimport React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { getValuesRecursive } from './MenuList/internals/getValuesRecursive'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { PopoverProps } from './Popover'\n\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  /**\n   * the name of hidden `<select />`\n   */\n  name?: string\n  children: MenuListChildren\n  onChange: (value: string) => void\n  className?: string\n  selectRef?: React.Ref<HTMLSelectElement>\n} & Pick<PopoverProps, 'inertWorkaround'>\n\nexport default function DropdownSelector({\n  onChange,\n  showLabel = false,\n  selectRef,\n  ...props\n}: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const penHandledRef = useRef(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  const isPlaceholder = useMemo(\n    () => props.placeholder !== undefined && preview === undefined,\n    [preview, props.placeholder],\n  )\n\n  const propsArray = getValuesRecursive(props.children)\n  const hasMatchedValue = useMemo(\n    () => propsArray.some((itemProps) => itemProps.value === props.value),\n    [propsArray, props.value],\n  )\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  // Popover が document listener の登録に使うため、識別子を安定させる\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleSelect = useCallback(\n    (v: string) => {\n      onChange(v)\n      setIsOpen(false)\n    },\n    [onChange],\n  )\n\n  const handleTriggerPointerUp = useCallback(\n    (e: React.PointerEvent<HTMLButtonElement>) => {\n      if (e.pointerType !== 'pen') return\n      if (props.disabled === true) return\n      penHandledRef.current = true\n      setIsOpen(true)\n    },\n    [props.disabled],\n  )\n\n  const handleTriggerClick = useCallback(() => {\n    if (penHandledRef.current) {\n      penHandledRef.current = false\n      return\n    }\n    if (props.disabled === true) return\n    setIsOpen(true)\n  }, [props.disabled])\n\n  const labelId = useId()\n  const describedbyId = useId()\n\n  const classNames = useClassNames(\n    'charcoal-dropdown-selector-root',\n    props.className,\n  )\n\n  return (\n    <div className={classNames} aria-disabled={props.disabled}>\n      <FieldLabel\n        id={labelId}\n        label={props.label}\n        required={props.required}\n        requiredText={props.requiredText}\n        subLabel={props.subLabel}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <div {...visuallyHiddenProps} aria-hidden=\"true\">\n        <select\n          name={props.name}\n          value={props.value}\n          onChange={handleChange}\n          tabIndex={-1}\n          ref={selectRef}\n        >\n          {!hasMatchedValue && (\n            <option value={props.value}>{props.value}</option>\n          )}\n          {propsArray.map((itemProps) => {\n            return (\n              <option\n                key={itemProps.value}\n                value={itemProps.value}\n                disabled={itemProps.disabled}\n              >\n                {itemProps.value}\n              </option>\n            )\n          })}\n        </select>\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n      <button\n        className=\"charcoal-dropdown-selector-button\"\n        aria-labelledby={labelId}\n        aria-invalid={props.invalid}\n        aria-describedby={\n          props.assistiveText !== undefined ? describedbyId : undefined\n        }\n        disabled={props.disabled}\n        onPointerUp={handleTriggerPointerUp}\n        onClick={handleTriggerClick}\n        ref={triggerRef}\n        type=\"button\"\n        data-active={isOpen}\n      >\n        <span\n          className=\"charcoal-ui-dropdown-selector-text\"\n          data-placeholder={isPlaceholder}\n        >\n          {isPlaceholder ? props.placeholder : preview}\n        </span>\n        <Icon className=\"charcoal-ui-dropdown-selector-icon\" name=\"16/Menu\" />\n      </button>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={handleClose}\n          triggerRef={triggerRef}\n          value={props.value}\n          inertWorkaround={props.inertWorkaround}\n        >\n          <MenuList value={props.value} onChange={handleSelect}>\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>\n          {props.assistiveText}\n        </AssistiveText>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqCA,SAAwB,iBAAiB,EACvC,UACA,YAAY,OACZ,WACA,GAAG,SACqB;CACxB,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,UAAU,qBAAqB,MAAM,UAAU,MAAM,KAAK;CAEhE,MAAM,gBAAgB,cACd,MAAM,gBAAgB,UAAa,YAAY,QACrD,CAAC,SAAS,MAAM,WAAW,CAC7B;CAEA,MAAM,aAAa,mBAAmB,MAAM,QAAQ;CACpD,MAAM,kBAAkB,cAChB,WAAW,MAAM,cAAc,UAAU,UAAU,MAAM,KAAK,GACpE,CAAC,YAAY,MAAM,KAAK,CAC1B;CAEA,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,eAAe,aAClB,MAA4C;EAC3C,SAAS,EAAE,OAAO,KAAK;CACzB,GACA,CAAC,QAAQ,CACX;CAGA,MAAM,cAAc,kBAAkB;EACpC,UAAU,KAAK;CACjB,GAAG,CAAA,CAAE;CAEL,MAAM,eAAe,aAClB,MAAc;EACb,SAAS,CAAC;EACV,UAAU,KAAK;CACjB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,yBAAyB,aAC5B,MAA6C;EAC5C,IAAI,EAAE,gBAAgB,OAAO;EAC7B,IAAI,MAAM,aAAa,MAAM;EAC7B,cAAc,UAAU;EACxB,UAAU,IAAI;CAChB,GACA,CAAC,MAAM,QAAQ,CACjB;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,IAAI,cAAc,SAAS;GACzB,cAAc,UAAU;GACxB;EACF;EACA,IAAI,MAAM,aAAa,MAAM;EAC7B,UAAU,IAAI;CAChB,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAO5B,OACE,qBAAC,OAAD;EAAK,WANY,cACjB,mCACA,MAAM,SAIU;EAAY,iBAAe,MAAM;YAAjD;GACE,oBAAC,YAAD;IACE,IAAI;IACJ,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,cAAc,MAAM;IACpB,UAAU,MAAM;IAChB,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,oBAAC,OAAD;IAAK,GAAI;IAAqB,eAAY;cACxC,qBAAC,UAAD;KACE,MAAM,MAAM;KACZ,OAAO,MAAM;KACb,UAAU;KACV,UAAU;KACV,KAAK;eALP,CAOG,CAAC,mBACA,oBAAC,UAAD;MAAQ,OAAO,MAAM;gBAAQ,MAAM;KAAc,IAElD,WAAW,KAAK,cAAc;MAC7B,OACE,oBAAC,UAAD;OAEE,OAAO,UAAU;OACjB,UAAU,UAAU;iBAEnB,UAAU;MACL,GALD,UAAU,KAKT;KAEZ,CAAC,CACK;;GACL;GAEL,qBAAC,UAAD;IACE,WAAU;IACV,mBAAiB;IACjB,gBAAc,MAAM;IACpB,oBACE,MAAM,kBAAkB,SAAY,gBAAgB;IAEtD,UAAU,MAAM;IAChB,aAAa;IACb,SAAS;IACT,KAAK;IACL,MAAK;IACL,eAAa;cAZf,CAcE,oBAAC,QAAD;KACE,WAAU;KACV,oBAAkB;eAEjB,gBAAgB,MAAM,cAAc;IACjC,IACN,oBAAC,MAAD;KAAM,WAAU;KAAqC,MAAK;IAAS,EAC7D;;GACP,UACC,oBAAC,iBAAD;IACU;IACR,SAAS;IACG;IACZ,OAAO,MAAM;IACb,iBAAiB,MAAM;cAEvB,oBAAC,UAAD;KAAU,OAAO,MAAM;KAAO,UAAU;eACrC,MAAM;IACC;GACK;GAElB,MAAM,kBAAkB,UACvB,oBAAC,eAAD;IAAe,gBAAc,MAAM,YAAY;IAAM,IAAI;cACtD,MAAM;GACM;EAEd;;AAET"}

package/dist/components/DropdownSelector/utils/findPreviewRecursive.cjs

@@ -1,7 +1,7 @@
 "use client";
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 
 //#region src/components/DropdownSelector/utils/findPreviewRecursive.tsx
 /**

package/dist/components/DropdownSelector/utils/findPreviewRecursive.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"findPreviewRecursive.cjs","names":["ReactNode","React","findPreviewRecursive","children","value","childArray","Children","toArray","i","length","child","isValidElement","props","childValue","undefined"],"sources":["../../../../src/components/DropdownSelector/utils/findPreviewRecursive.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport * as React from 'react'\n\n/**\n * DropdownSelectorの選択中の要素をレンダリングするため、\n * 選択中のMenuItemを再帰的に探索しReactNodeを返す。\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function findPreviewRecursive(\n  children: ReactNode,\n  value: string,\n): ReactNode | undefined {\n  const childArray = React.Children.toArray(children)\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      if ('value' in child.props) {\n        const childValue = (child.props as { value: string }).value\n        if (childValue === value && 'children' in child.props) {\n          const children = (child.props as { children: ReactNode }).children\n          return children\n        }\n      }\n      if ('children' in child.props) {\n        const children = findPreviewRecursive(\n          (child.props as { children: ReactNode }).children,\n          value,\n        )\n        if (children !== undefined) {\n          return children\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAYA,SAAgBE,qBACdC,UACAC,OACuB;CACvB,MAAMC,aAAaJ,MAAMK,SAASC,QAAQJ,SAAS;CACnD,KAAK,IAAIK,IAAI,GAAGA,IAAIH,WAAWI,QAAQD,KAAK;EAC1C,MAAME,QAAQL,WAAWG;EACzB,IAAIP,MAAMU,eAAeD,MAAM,EAAE;GAC/B,IAAI,WAAWA,MAAME,OAEnB;QADoBF,MAAME,MAA4BR,UACnCA,SAAS,cAAcM,MAAME,OAE9C,OADkBF,MAAME,MAAkCT;;GAI9D,IAAI,cAAcO,MAAME,OAAO;IAC7B,MAAMT,WAAWD,qBACdQ,MAAME,MAAkCT,UACzCC,MACD;IACD,IAAID,aAAaW,QACf,OAAOX"}
+{"version":3,"file":"findPreviewRecursive.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/utils/findPreviewRecursive.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport * as React from 'react'\n\n/**\n * DropdownSelectorの選択中の要素をレンダリングするため、\n * 選択中のMenuItemを再帰的に探索しReactNodeを返す。\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function findPreviewRecursive(\n  children: ReactNode,\n  value: string,\n): ReactNode | undefined {\n  const childArray = React.Children.toArray(children)\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      if ('value' in child.props) {\n        const childValue = (child.props as { value: string }).value\n        if (childValue === value && 'children' in child.props) {\n          const children = (child.props as { children: ReactNode }).children\n          return children\n        }\n      }\n      if ('children' in child.props) {\n        const children = findPreviewRecursive(\n          (child.props as { children: ReactNode }).children,\n          value,\n        )\n        if (children !== undefined) {\n          return children\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAYA,SAAgB,qBACd,UACA,OACuB;CACvB,MAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;CAClD,KAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;EAC1C,MAAM,QAAQ,WAAW;EACzB,IAAI,MAAM,eAAe,KAAK,GAAG;GAC/B,IAAI,WAAW,MAAM,OAEnB;QADoB,MAAM,MAA4B,UACnC,SAAS,cAAc,MAAM,OAE9C,OADkB,MAAM,MAAkC;GAE5D;GAEF,IAAI,cAAc,MAAM,OAAO;IAC7B,MAAM,WAAW,qBACd,MAAM,MAAkC,UACzC,KACF;IACA,IAAI,aAAa,QACf,OAAO;GAEX;EACF;CACF;AACF"}

package/dist/components/DropdownSelector/utils/findPreviewRecursive.js.map

@@ -1 +1 @@
-{"version":3,"file":"findPreviewRecursive.js","names":["ReactNode","React","findPreviewRecursive","children","value","childArray","Children","toArray","i","length","child","isValidElement","props","childValue","undefined"],"sources":["../../../../src/components/DropdownSelector/utils/findPreviewRecursive.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport * as React from 'react'\n\n/**\n * DropdownSelectorの選択中の要素をレンダリングするため、\n * 選択中のMenuItemを再帰的に探索しReactNodeを返す。\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function findPreviewRecursive(\n  children: ReactNode,\n  value: string,\n): ReactNode | undefined {\n  const childArray = React.Children.toArray(children)\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      if ('value' in child.props) {\n        const childValue = (child.props as { value: string }).value\n        if (childValue === value && 'children' in child.props) {\n          const children = (child.props as { children: ReactNode }).children\n          return children\n        }\n      }\n      if ('children' in child.props) {\n        const children = findPreviewRecursive(\n          (child.props as { children: ReactNode }).children,\n          value,\n        )\n        if (children !== undefined) {\n          return children\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,SAAgBE,qBACdC,UACAC,OACuB;CACvB,MAAMC,aAAaJ,QAAMK,SAASC,QAAQJ,SAAS;CACnD,KAAK,IAAIK,IAAI,GAAGA,IAAIH,WAAWI,QAAQD,KAAK;EAC1C,MAAME,QAAQL,WAAWG;EACzB,IAAIP,QAAMU,eAAeD,MAAM,EAAE;GAC/B,IAAI,WAAWA,MAAME,OAEnB;QADoBF,MAAME,MAA4BR,UACnCA,SAAS,cAAcM,MAAME,OAE9C,OADkBF,MAAME,MAAkCT;;GAI9D,IAAI,cAAcO,MAAME,OAAO;IAC7B,MAAMT,WAAWD,qBACdQ,MAAME,MAAkCT,UACzCC,MACD;IACD,IAAID,aAAaW,QACf,OAAOX"}
+{"version":3,"file":"findPreviewRecursive.js","names":[],"sources":["../../../../src/components/DropdownSelector/utils/findPreviewRecursive.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport * as React from 'react'\n\n/**\n * DropdownSelectorの選択中の要素をレンダリングするため、\n * 選択中のMenuItemを再帰的に探索しReactNodeを返す。\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function findPreviewRecursive(\n  children: ReactNode,\n  value: string,\n): ReactNode | undefined {\n  const childArray = React.Children.toArray(children)\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      if ('value' in child.props) {\n        const childValue = (child.props as { value: string }).value\n        if (childValue === value && 'children' in child.props) {\n          const children = (child.props as { children: ReactNode }).children\n          return children\n        }\n      }\n      if ('children' in child.props) {\n        const children = findPreviewRecursive(\n          (child.props as { children: ReactNode }).children,\n          value,\n        )\n        if (children !== undefined) {\n          return children\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,SAAgB,qBACd,UACA,OACuB;CACvB,MAAM,aAAa,QAAM,SAAS,QAAQ,QAAQ;CAClD,KAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;EAC1C,MAAM,QAAQ,WAAW;EACzB,IAAI,QAAM,eAAe,KAAK,GAAG;GAC/B,IAAI,WAAW,MAAM,OAEnB;QADoB,MAAM,MAA4B,UACnC,SAAS,cAAc,MAAM,OAE9C,OADkB,MAAM,MAAkC;GAE5D;GAEF,IAAI,cAAc,MAAM,OAAO;IAC7B,MAAM,WAAW,qBACd,MAAM,MAAkC,UACzC,KACF;IACA,IAAI,aAAa,QACf,OAAO;GAEX;EACF;CACF;AACF"}

package/dist/components/FieldLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACnD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,UAAU,0FA8Bf,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAClF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,UAAU,0FA8Bf,CAAA;eAEc,UAAU"}

package/dist/components/FieldLabel/index2.cjs

@@ -3,7 +3,7 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_useClassNames = require('../../_lib/useClassNames.cjs');
 require('./index.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FieldLabel/index.tsx

package/dist/components/FieldLabel/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["React","useClassNames","FieldLabelProps","LabelHTMLAttributes","HTMLLabelElement","className","label","subLabel","ReactNode","required","requiredText","FieldLabel","forwardRef","style","labelProps","ref","classNames"],"sources":["../../../src/components/FieldLabel/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref,\n  ) {\n    const classNames = useClassNames('charcoal-field-label-root', className)\n    return (\n      <div style={style} className={classNames}>\n        <label ref={ref} className=\"charcoal-field-label\" {...labelProps}>\n          {label}\n        </label>\n        {required && (\n          <div className=\"charcoal-field-label-required-text\">\n            {requiredText}\n          </div>\n        )}\n        <div className=\"charcoal-field-label-sub-label\">\n          <span>{subLabel}</span>\n        </div>\n      </div>\n    )\n  },\n)\n\nexport default FieldLabel\n"],"mappings":";;;;;;;;;AAeA,MAAMW,aAAaX,MAAMY,WACvB,SAASD,WACP,EACEE,OACAR,WACAC,OACAG,WAAW,OACXC,cACAH,UACA,GAAGO,cAELC,KACA;CAEA,OACE,4CAAC,OAAD;EAAYF;EAAO,WAFFZ,oCAAc,6BAA6BI,UAEpB;YAAxC;GACE,2CAAC,SAAD;IAAYU;IAAK,WAAU;IAAuB,GAAID;cACnDR;IACI;GACNG,YACC,2CAAC,OAAD;IAAK,WAAU;cACZC;IAEJ;GACD,2CAAC,OAAD;IAAK,WAAU;cACb,2CAAC,QAAD,YAAOH,UAAe;IACnB;GACD;;EAGX"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/FieldLabel/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref,\n  ) {\n    const classNames = useClassNames('charcoal-field-label-root', className)\n    return (\n      <div style={style} className={classNames}>\n        <label ref={ref} className=\"charcoal-field-label\" {...labelProps}>\n          {label}\n        </label>\n        {required && (\n          <div className=\"charcoal-field-label-required-text\">\n            {requiredText}\n          </div>\n        )}\n        <div className=\"charcoal-field-label-sub-label\">\n          <span>{subLabel}</span>\n        </div>\n      </div>\n    )\n  },\n)\n\nexport default FieldLabel\n"],"mappings":";;;;;;;;;AAcA,MAAM,aAAa,MAAM,WACvB,SAAS,WACP,EACE,OACA,WACA,OACA,WAAW,OACX,cACA,UACA,GAAG,cAEL,KACA;CAEA,OACE,4CAAC,OAAD;EAAY;EAAO,WAFF,oCAAc,6BAA6B,SAE9B;YAA9B;GACE,2CAAC,SAAD;IAAY;IAAK,WAAU;IAAuB,GAAI;cACnD;GACI;GACN,YACC,2CAAC,OAAD;IAAK,WAAU;cACZ;GACE;GAEP,2CAAC,OAAD;IAAK,WAAU;cACb,2CAAC,QAAD,YAAO,SAAe;GACnB;EACF;;AAET,CACF"}

package/dist/components/FieldLabel/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["React","useClassNames","FieldLabelProps","LabelHTMLAttributes","HTMLLabelElement","className","label","subLabel","ReactNode","required","requiredText","FieldLabel","forwardRef","style","labelProps","ref","classNames"],"sources":["../../../src/components/FieldLabel/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref,\n  ) {\n    const classNames = useClassNames('charcoal-field-label-root', className)\n    return (\n      <div style={style} className={classNames}>\n        <label ref={ref} className=\"charcoal-field-label\" {...labelProps}>\n          {label}\n        </label>\n        {required && (\n          <div className=\"charcoal-field-label-required-text\">\n            {requiredText}\n          </div>\n        )}\n        <div className=\"charcoal-field-label-sub-label\">\n          <span>{subLabel}</span>\n        </div>\n      </div>\n    )\n  },\n)\n\nexport default FieldLabel\n"],"mappings":";;;;;;;AAeA,MAAMW,aAAaX,QAAMY,WACvB,SAASD,WACP,EACEE,OACAR,WACAC,OACAG,WAAW,OACXC,cACAH,UACA,GAAGO,cAELC,KACA;CAEA,OACE,qBAAC,OAAD;EAAYF;EAAO,WAFFZ,cAAc,6BAA6BI,UAEpB;YAAxC;GACE,oBAAC,SAAD;IAAYU;IAAK,WAAU;IAAuB,GAAID;cACnDR;IACI;GACNG,YACC,oBAAC,OAAD;IAAK,WAAU;cACZC;IAEJ;GACD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD,YAAOH,UAAe;IACnB;GACD;;EAGX"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/FieldLabel/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref,\n  ) {\n    const classNames = useClassNames('charcoal-field-label-root', className)\n    return (\n      <div style={style} className={classNames}>\n        <label ref={ref} className=\"charcoal-field-label\" {...labelProps}>\n          {label}\n        </label>\n        {required && (\n          <div className=\"charcoal-field-label-required-text\">\n            {requiredText}\n          </div>\n        )}\n        <div className=\"charcoal-field-label-sub-label\">\n          <span>{subLabel}</span>\n        </div>\n      </div>\n    )\n  },\n)\n\nexport default FieldLabel\n"],"mappings":";;;;;;;AAcA,MAAM,aAAa,QAAM,WACvB,SAAS,WACP,EACE,OACA,WACA,OACA,WAAW,OACX,cACA,UACA,GAAG,cAEL,KACA;CAEA,OACE,qBAAC,OAAD;EAAY;EAAO,WAFF,cAAc,6BAA6B,SAE9B;YAA9B;GACE,oBAAC,SAAD;IAAY;IAAK,WAAU;IAAuB,GAAI;cACnD;GACI;GACN,YACC,oBAAC,OAAD;IAAK,WAAU;cACZ;GACE;GAEP,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD,YAAO,SAAe;GACnB;EACF;;AAET,CACF"}

package/dist/components/HintText/index2.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_useClassNames = require('../../_lib/useClassNames.cjs');
 const require_index = require('../Icon/index.cjs');
 require('./index.cjs');

package/dist/components/HintText/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["ReactNode","Icon","useClassNames","HintTextContext","HintTextProps","children","context","className","HintText","classNames"],"sources":["../../../src/components/HintText/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport Icon from '../Icon'\n\nimport './index.css'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport type HintTextContext = 'page' | 'section'\nexport interface HintTextProps {\n  children: ReactNode\n  context?: HintTextContext\n  className?: string\n}\n\nexport default function HintText({\n  children,\n  context = 'section',\n  className,\n}: HintTextProps) {\n  const classNames = useClassNames('charcoal-hint-text', className)\n\n  return (\n    <div className={classNames} data-context={context}>\n      <div className=\"charcoal-hint-text-icon\">\n        <Icon name=\"16/Info\" />\n      </div>\n      <p className=\"charcoal-hint-text-message\">{children}</p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,SAAwBQ,SAAS,EAC/BH,UACAC,UAAU,WACVC,aACgB;CAGhB,OACE,4CAAC,OAAD;EAAK,WAHYL,oCAAc,sBAAsBK,UAG3B;EAAE,gBAAcD;YAA1C,CACE,2CAAC,OAAD;GAAK,WAAU;aACb,2CAAC,uBAAD,EAAM,MAAK,WAAS;GACjB,GACL,2CAAC,KAAD;GAAG,WAAU;GAA8BD;GAAY,EACnD"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/HintText/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport Icon from '../Icon'\n\nimport './index.css'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport type HintTextContext = 'page' | 'section'\nexport interface HintTextProps {\n  children: ReactNode\n  context?: HintTextContext\n  className?: string\n}\n\nexport default function HintText({\n  children,\n  context = 'section',\n  className,\n}: HintTextProps) {\n  const classNames = useClassNames('charcoal-hint-text', className)\n\n  return (\n    <div className={classNames} data-context={context}>\n      <div className=\"charcoal-hint-text-icon\">\n        <Icon name=\"16/Info\" />\n      </div>\n      <p className=\"charcoal-hint-text-message\">{children}</p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAwB,SAAS,EAC/B,UACA,UAAU,WACV,aACgB;CAGhB,OACE,4CAAC,OAAD;EAAK,WAHY,oCAAc,sBAAsB,SAGrC;EAAY,gBAAc;YAA1C,CACE,2CAAC,OAAD;GAAK,WAAU;aACb,2CAAC,uBAAD,EAAM,MAAK,UAAS;EACjB,IACL,2CAAC,KAAD;GAAG,WAAU;GAA8B;EAAY,EACpD;;AAET"}

package/dist/components/HintText/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["ReactNode","Icon","useClassNames","HintTextContext","HintTextProps","children","context","className","HintText","classNames"],"sources":["../../../src/components/HintText/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport Icon from '../Icon'\n\nimport './index.css'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport type HintTextContext = 'page' | 'section'\nexport interface HintTextProps {\n  children: ReactNode\n  context?: HintTextContext\n  className?: string\n}\n\nexport default function HintText({\n  children,\n  context = 'section',\n  className,\n}: HintTextProps) {\n  const classNames = useClassNames('charcoal-hint-text', className)\n\n  return (\n    <div className={classNames} data-context={context}>\n      <div className=\"charcoal-hint-text-icon\">\n        <Icon name=\"16/Info\" />\n      </div>\n      <p className=\"charcoal-hint-text-message\">{children}</p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAwBQ,SAAS,EAC/BH,UACAC,UAAU,WACVC,aACgB;CAGhB,OACE,qBAAC,OAAD;EAAK,WAHYL,cAAc,sBAAsBK,UAG3B;EAAE,gBAAcD;YAA1C,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,MAAD,EAAM,MAAK,WAAS;GACjB,GACL,oBAAC,KAAD;GAAG,WAAU;GAA8BD;GAAY,EACnD"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/HintText/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport Icon from '../Icon'\n\nimport './index.css'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport type HintTextContext = 'page' | 'section'\nexport interface HintTextProps {\n  children: ReactNode\n  context?: HintTextContext\n  className?: string\n}\n\nexport default function HintText({\n  children,\n  context = 'section',\n  className,\n}: HintTextProps) {\n  const classNames = useClassNames('charcoal-hint-text', className)\n\n  return (\n    <div className={classNames} data-context={context}>\n      <div className=\"charcoal-hint-text-icon\">\n        <Icon name=\"16/Info\" />\n      </div>\n      <p className=\"charcoal-hint-text-message\">{children}</p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAwB,SAAS,EAC/B,UACA,UAAU,WACV,aACgB;CAGhB,OACE,qBAAC,OAAD;EAAK,WAHY,cAAc,sBAAsB,SAGrC;EAAY,gBAAc;YAA1C,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,MAAD,EAAM,MAAK,UAAS;EACjB,IACL,oBAAC,KAAD;GAAG,WAAU;GAA8B;EAAY,EACpD;;AAET"}

package/dist/components/Icon/index.cjs

@@ -2,7 +2,7 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 require('../../icons/css/icon.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _charcoal_ui_icons = require("@charcoal-ui/icons");
 

package/dist/components/Icon/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","calcActualSize","IconSizing","PixivIcon","Props","OwnProps","unsafeNonGuidelineScale","fixedSize","className","IconProps","PropsWithoutRef","Omit","Icon","forwardRef","IconInner","name","scale","style","userStyle","rest","ref","actualSize","useMemo","CSSProperties","trim"],"sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport '@charcoal-ui/icons'\n// tmp fix for https://github.com/rolldown/tsdown/pull/981\nimport '../../../../icons/css/icon.css'\nimport { calcActualSize } from '@charcoal-ui/icons'\nimport type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'\n\nexport interface OwnProps {\n  /**\n   * @deprecated `fixedSize` を利用してください。\n   * `attr()` の数値解釈サポートが限定的なため、リセット CSS だけではレイアウトシフトが防げません。\n   */\n  unsafeNonGuidelineScale?: number\n  /**\n   * 固定 px サイズで描画します。ガイドライン外のサイズを利用する場合に推奨される指定方法で、\n   * 他のサイズ指定 (`scale` / `unsafeNonGuidelineScale`) よりも常に優先されます。\n   *\n   * `<Icon>` は同じ値を `--charcoal-icon-size` インライン CSS 変数として自動付与するため、\n   * Web Component の hydrate 前後でレイアウトシフトは発生しません。\n   */\n  fixedSize?: number\n  className?: string\n}\n\nexport interface IconProps\n  extends OwnProps,\n    React.PropsWithoutRef<\n      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>\n    > {}\n\nconst Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(\n  {\n    name,\n    scale,\n    unsafeNonGuidelineScale,\n    fixedSize,\n    className,\n    style: userStyle,\n    ...rest\n  },\n  ref,\n) {\n  const actualSize = React.useMemo(\n    // IconSizing の排他制約は IconProps の型レベルで保証されるため、内部では緩和する\n    () =>\n      calcActualSize({\n        name,\n        scale,\n        unsafeNonGuidelineScale,\n        fixedSize,\n      } as { name: string } & IconSizing),\n    [name, scale, unsafeNonGuidelineScale, fixedSize],\n  )\n\n  const style = React.useMemo(\n    () =>\n      ({\n        ...userStyle,\n        '--charcoal-icon-size': `${actualSize}px`,\n      }) as React.CSSProperties,\n    [actualSize, userStyle],\n  )\n\n  return (\n    <pixiv-icon\n      ref={ref}\n      name={name}\n      scale={scale}\n      unsafe-non-guideline-scale={unsafeNonGuidelineScale}\n      fixed-size={fixedSize}\n      style={style}\n      class={`charcoal-icon ${className || ''}`.trim()}\n      {...rest}\n    />\n  )\n})\n\nexport default Icon\n"],"mappings":";;;;;;;;;AA+BA,MAAMY,OAAOZ,MAAMa,WAAiC,SAASC,UAC3D,EACEC,MACAC,OACAV,yBACAC,WACAC,WACAS,OAAOC,WACP,GAAGC,QAELC,KACA;CACA,MAAMC,aAAarB,MAAMsB,qDAGN;EACbP;EACAC;EACAV;EACAC;EACD,CAAkC,EACrC;EAACQ;EAAMC;EAAOV;EAAyBC;EACzC,CAAC;CAWD,OACE,2CAAC,cAAD;EACOa;EACCL;EACCC;EACP,8BAA4BV;EAC5B,cAAYC;EACZ,OAhBUP,MAAMsB,eAEf;GACC,GAAGJ;GACH,wBAAwB,GAAGG,WAAU;GACtC,GACH,CAACA,YAAYH,UACf,CASgB;EACZ,OAAO,iBAAiBV,aAAa,KAAKgB,MAAM;EAChD,GAAIL;EACJ;EAEJ"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport '@charcoal-ui/icons'\n// tmp fix for https://github.com/rolldown/tsdown/pull/981\nimport '../../../../icons/css/icon.css'\nimport { calcActualSize } from '@charcoal-ui/icons'\nimport type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'\n\nexport interface OwnProps {\n  /**\n   * @deprecated `fixedSize` を利用してください。\n   * `attr()` の数値解釈サポートが限定的なため、リセット CSS だけではレイアウトシフトが防げません。\n   */\n  unsafeNonGuidelineScale?: number\n  /**\n   * 固定 px サイズで描画します。ガイドライン外のサイズを利用する場合に推奨される指定方法で、\n   * 他のサイズ指定 (`scale` / `unsafeNonGuidelineScale`) よりも常に優先されます。\n   *\n   * `<Icon>` は同じ値を `--charcoal-icon-size` インライン CSS 変数として自動付与するため、\n   * Web Component の hydrate 前後でレイアウトシフトは発生しません。\n   */\n  fixedSize?: number\n  className?: string\n}\n\nexport interface IconProps\n  extends\n    OwnProps,\n    React.PropsWithoutRef<\n      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>\n    > {}\n\nconst Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(\n  {\n    name,\n    scale,\n    unsafeNonGuidelineScale,\n    fixedSize,\n    className,\n    style: userStyle,\n    ...rest\n  },\n  ref,\n) {\n  const actualSize = React.useMemo(\n    // IconSizing の排他制約は IconProps の型レベルで保証されるため、内部では緩和する\n    () =>\n      calcActualSize({\n        name,\n        scale,\n        unsafeNonGuidelineScale,\n        fixedSize,\n      } as { name: string } & IconSizing),\n    [name, scale, unsafeNonGuidelineScale, fixedSize],\n  )\n\n  const style = React.useMemo(\n    () =>\n      ({\n        ...userStyle,\n        '--charcoal-icon-size': `${actualSize}px`,\n      }) as React.CSSProperties,\n    [actualSize, userStyle],\n  )\n\n  return (\n    <pixiv-icon\n      ref={ref}\n      name={name}\n      scale={scale}\n      unsafe-non-guideline-scale={unsafeNonGuidelineScale}\n      fixed-size={fixedSize}\n      style={style}\n      class={`charcoal-icon ${className || ''}`.trim()}\n      {...rest}\n    />\n  )\n})\n\nexport default Icon\n"],"mappings":";;;;;;;;;AAgCA,MAAM,OAAO,MAAM,WAAiC,SAAS,UAC3D,EACE,MACA,OACA,yBACA,WACA,WACA,OAAO,WACP,GAAG,QAEL,KACA;CACA,MAAM,aAAa,MAAM,qDAGN;EACb;EACA;EACA;EACA;CACF,CAAkC,GACpC;EAAC;EAAM;EAAO;EAAyB;CAAS,CAClD;CAWA,OACE,2CAAC,cAAD;EACO;EACC;EACC;EACP,8BAA4B;EAC5B,cAAY;EACZ,OAhBU,MAAM,eAEf;GACC,GAAG;GACH,wBAAwB,GAAG,WAAU;EACvC,IACF,CAAC,YAAY,SAAS,CAUb;EACP,OAAO,iBAAiB,aAAa,KAAK,KAAK;EAC/C,GAAI;CAAK;AAGf,CAAC"}

package/dist/components/Icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,gCAAgC,CAAA;AAEvC,OAAO,KAAK,EAAc,SAAS,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAEtE,MAAM,WAAW,QAAQ;IACvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,SACf,SAAQ,QAAQ,EACd,KAAK,CAAC,eAAe,CACnB,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,4BAA4B,GAAG,YAAY,GAAG,KAAK,CAAC,CAC3E;CAAG;AAER,QAAA,MAAM,IAAI,6EA6CR,CAAA;AAEF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,gCAAgC,CAAA;AAEvC,OAAO,KAAK,EAAc,SAAS,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAEtE,MAAM,WAAW,QAAQ;IACvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,SACf,SACE,QAAQ,EACR,KAAK,CAAC,eAAe,CACnB,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,4BAA4B,GAAG,YAAY,GAAG,KAAK,CAAC,CAC3E;CAAG;AAER,QAAA,MAAM,IAAI,6EA6CR,CAAA;eAEa,IAAI"}

package/dist/components/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","calcActualSize","IconSizing","PixivIcon","Props","OwnProps","unsafeNonGuidelineScale","fixedSize","className","IconProps","PropsWithoutRef","Omit","Icon","forwardRef","IconInner","name","scale","style","userStyle","rest","ref","actualSize","useMemo","CSSProperties","trim"],"sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport '@charcoal-ui/icons'\n// tmp fix for https://github.com/rolldown/tsdown/pull/981\nimport '../../../../icons/css/icon.css'\nimport { calcActualSize } from '@charcoal-ui/icons'\nimport type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'\n\nexport interface OwnProps {\n  /**\n   * @deprecated `fixedSize` を利用してください。\n   * `attr()` の数値解釈サポートが限定的なため、リセット CSS だけではレイアウトシフトが防げません。\n   */\n  unsafeNonGuidelineScale?: number\n  /**\n   * 固定 px サイズで描画します。ガイドライン外のサイズを利用する場合に推奨される指定方法で、\n   * 他のサイズ指定 (`scale` / `unsafeNonGuidelineScale`) よりも常に優先されます。\n   *\n   * `<Icon>` は同じ値を `--charcoal-icon-size` インライン CSS 変数として自動付与するため、\n   * Web Component の hydrate 前後でレイアウトシフトは発生しません。\n   */\n  fixedSize?: number\n  className?: string\n}\n\nexport interface IconProps\n  extends OwnProps,\n    React.PropsWithoutRef<\n      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>\n    > {}\n\nconst Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(\n  {\n    name,\n    scale,\n    unsafeNonGuidelineScale,\n    fixedSize,\n    className,\n    style: userStyle,\n    ...rest\n  },\n  ref,\n) {\n  const actualSize = React.useMemo(\n    // IconSizing の排他制約は IconProps の型レベルで保証されるため、内部では緩和する\n    () =>\n      calcActualSize({\n        name,\n        scale,\n        unsafeNonGuidelineScale,\n        fixedSize,\n      } as { name: string } & IconSizing),\n    [name, scale, unsafeNonGuidelineScale, fixedSize],\n  )\n\n  const style = React.useMemo(\n    () =>\n      ({\n        ...userStyle,\n        '--charcoal-icon-size': `${actualSize}px`,\n      }) as React.CSSProperties,\n    [actualSize, userStyle],\n  )\n\n  return (\n    <pixiv-icon\n      ref={ref}\n      name={name}\n      scale={scale}\n      unsafe-non-guideline-scale={unsafeNonGuidelineScale}\n      fixed-size={fixedSize}\n      style={style}\n      class={`charcoal-icon ${className || ''}`.trim()}\n      {...rest}\n    />\n  )\n})\n\nexport default Icon\n"],"mappings":";;;;;;;AA+BA,MAAMY,OAAOZ,QAAMa,WAAiC,SAASC,UAC3D,EACEC,MACAC,OACAV,yBACAC,WACAC,WACAS,OAAOC,WACP,GAAGC,QAELC,KACA;CACA,MAAMC,aAAarB,QAAMsB,cAGrBrB,eAAe;EACbc;EACAC;EACAV;EACAC;EACD,CAAkC,EACrC;EAACQ;EAAMC;EAAOV;EAAyBC;EACzC,CAAC;CAWD,OACE,oBAAC,cAAD;EACOa;EACCL;EACCC;EACP,8BAA4BV;EAC5B,cAAYC;EACZ,OAhBUP,QAAMsB,eAEf;GACC,GAAGJ;GACH,wBAAwB,GAAGG,WAAU;GACtC,GACH,CAACA,YAAYH,UACf,CASgB;EACZ,OAAO,iBAAiBV,aAAa,KAAKgB,MAAM;EAChD,GAAIL;EACJ;EAEJ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport '@charcoal-ui/icons'\n// tmp fix for https://github.com/rolldown/tsdown/pull/981\nimport '../../../../icons/css/icon.css'\nimport { calcActualSize } from '@charcoal-ui/icons'\nimport type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'\n\nexport interface OwnProps {\n  /**\n   * @deprecated `fixedSize` を利用してください。\n   * `attr()` の数値解釈サポートが限定的なため、リセット CSS だけではレイアウトシフトが防げません。\n   */\n  unsafeNonGuidelineScale?: number\n  /**\n   * 固定 px サイズで描画します。ガイドライン外のサイズを利用する場合に推奨される指定方法で、\n   * 他のサイズ指定 (`scale` / `unsafeNonGuidelineScale`) よりも常に優先されます。\n   *\n   * `<Icon>` は同じ値を `--charcoal-icon-size` インライン CSS 変数として自動付与するため、\n   * Web Component の hydrate 前後でレイアウトシフトは発生しません。\n   */\n  fixedSize?: number\n  className?: string\n}\n\nexport interface IconProps\n  extends\n    OwnProps,\n    React.PropsWithoutRef<\n      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>\n    > {}\n\nconst Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(\n  {\n    name,\n    scale,\n    unsafeNonGuidelineScale,\n    fixedSize,\n    className,\n    style: userStyle,\n    ...rest\n  },\n  ref,\n) {\n  const actualSize = React.useMemo(\n    // IconSizing の排他制約は IconProps の型レベルで保証されるため、内部では緩和する\n    () =>\n      calcActualSize({\n        name,\n        scale,\n        unsafeNonGuidelineScale,\n        fixedSize,\n      } as { name: string } & IconSizing),\n    [name, scale, unsafeNonGuidelineScale, fixedSize],\n  )\n\n  const style = React.useMemo(\n    () =>\n      ({\n        ...userStyle,\n        '--charcoal-icon-size': `${actualSize}px`,\n      }) as React.CSSProperties,\n    [actualSize, userStyle],\n  )\n\n  return (\n    <pixiv-icon\n      ref={ref}\n      name={name}\n      scale={scale}\n      unsafe-non-guideline-scale={unsafeNonGuidelineScale}\n      fixed-size={fixedSize}\n      style={style}\n      class={`charcoal-icon ${className || ''}`.trim()}\n      {...rest}\n    />\n  )\n})\n\nexport default Icon\n"],"mappings":";;;;;;;AAgCA,MAAM,OAAO,QAAM,WAAiC,SAAS,UAC3D,EACE,MACA,OACA,yBACA,WACA,WACA,OAAO,WACP,GAAG,QAEL,KACA;CACA,MAAM,aAAa,QAAM,cAGrB,eAAe;EACb;EACA;EACA;EACA;CACF,CAAkC,GACpC;EAAC;EAAM;EAAO;EAAyB;CAAS,CAClD;CAWA,OACE,oBAAC,cAAD;EACO;EACC;EACC;EACP,8BAA4B;EAC5B,cAAY;EACZ,OAhBU,QAAM,eAEf;GACC,GAAG;GACH,wBAAwB,GAAG,WAAU;EACvC,IACF,CAAC,YAAY,SAAS,CAUb;EACP,OAAO,iBAAiB,aAAa,KAAK,KAAK;EAC/C,GAAI;CAAK;AAGf,CAAC"}

package/dist/components/IconButton/index.d.ts

@@ -10,6 +10,6 @@ export type IconButtonProps<T extends React.ElementType = 'button'> = {
     readonly isActive?: boolean;
     component?: T;
 } & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>;
-declare const IconButton: <T extends React.ElementType = "button">(p: IconButtonProps<T>) => JSX.Element;
+declare const IconButton: <T extends React.ElementType = 'button'>(p: IconButtonProps<T>) => JSX.Element;
 export default IconButton;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/IconButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,OAAO,aAAa,CAAA;AAEpB,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AACpC,KAAK,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAE5B,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACpE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,aAAa,CAAA;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,CAAA;AAE3D,QAAA,MAAM,UAAU,EA6BX,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC1C,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAAO,CAAA;AAEhB,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,OAAO,aAAa,CAAA;AAEpB,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AACpC,KAAK,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAE5B,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACpE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,aAAa,CAAA;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,CAAA;AAE3D,QAAA,MAAM,UAAU,EA6BX,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC1C,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAAO,CAAA;eAED,UAAU"}

package/dist/components/IconButton/index2.cjs

@@ -3,7 +3,7 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_useClassNames = require('../../_lib/useClassNames.cjs');
 require('./index.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/IconButton/index.tsx

package/dist/components/IconButton/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["React","ForwardedRef","forwardRef","useMemo","JSX","useClassNames","KnownIconType","Variant","Size","IconButtonProps","ElementType","variant","size","icon","isActive","component","T","Omit","ComponentPropsWithRef","IconButton","HTMLButtonElement","IconButtonInner","rest","ref","validateIconSize","Component","classNames","className","p","Element","requiredIconSize","result","exec","Error","iconSize","console","warn"],"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\nimport './index.css'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\nexport type IconButtonProps<T extends React.ElementType = 'button'> = {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButtonInner<T extends React.ElementType>(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      component,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ) {\n    validateIconSize(size, icon)\n    const Component = useMemo(() => component ?? 'button', [component])\n    const classNames = useClassNames('charcoal-icon-button', rest.className)\n\n    return (\n      <Component\n        {...rest}\n        ref={ref}\n        className={classNames}\n        data-size={size}\n        data-active={isActive}\n        data-variant={variant}\n      >\n        <pixiv-icon name={icon} />\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'button'>(\n  p: IconButtonProps<T>,\n) => JSX.Element\n\nexport default IconButton\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAMmB,mCACJ,SAASE,gBACP,EACEV,UAAU,WACVC,OAAO,KACPC,MACAC,WAAW,OACXC,WACA,GAAGO,QAELC,KACA;CACAC,iBAAiBZ,MAAMC,KAAK;CAC5B,MAAMY,qCAA0BV,aAAa,UAAU,CAACA,UAAU,CAAC;CACnE,MAAMW,aAAarB,oCAAc,wBAAwBiB,KAAKK,UAAU;CAExE,OACE,2CAAC,WAAD;EACE,GAAIL;EACCC;EACL,WAAWG;EACX,aAAWd;EACX,eAAaE;EACb,gBAAcH;YAEd,2CAAC,cAAD,EAAY,MAAME,MAAK;EACb;EAGjB;;;;AASD,SAASW,iBAAiBZ,MAAYC,MAA2B;CAC/D,IAAIiB;CACJ,QAAQlB,MAAR;EACE,KAAK;GACHkB,mBAAmB;GACnB;EACF,KAAK;EACL,KAAK;GACHA,mBAAmB;GACnB;;CAGJ,MAAMC,SAAS,QAAQC,KAAKnB,KAAK;CACjC,IAAIkB,UAAU,MACZ,MAAM,IAAIE,MAAM,oBAAoB;CAEtC,MAAM,CAACC,YAAYH;CACnB,IAAIG,aAAaJ,kBAEfK,QAAQC,KACN,yBAAyBxB,KAAI,sBAAuBkB,iBAAgB,aAAcI,SAAQ,GAC3F"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\nimport './index.css'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\nexport type IconButtonProps<T extends React.ElementType = 'button'> = {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButtonInner<T extends React.ElementType>(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      component,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ) {\n    validateIconSize(size, icon)\n    const Component = useMemo(() => component ?? 'button', [component])\n    const classNames = useClassNames('charcoal-icon-button', rest.className)\n\n    return (\n      <Component\n        {...rest}\n        ref={ref}\n        className={classNames}\n        data-size={size}\n        data-active={isActive}\n        data-variant={variant}\n      >\n        <pixiv-icon name={icon} />\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'button'>(\n  p: IconButtonProps<T>,\n) => JSX.Element\n\nexport default IconButton\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAM,mCACJ,SAAS,gBACP,EACE,UAAU,WACV,OAAO,KACP,MACA,WAAW,OACX,WACA,GAAG,QAEL,KACA;CACA,iBAAiB,MAAM,IAAI;CAC3B,MAAM,qCAA0B,aAAa,UAAU,CAAC,SAAS,CAAC;CAClE,MAAM,aAAa,oCAAc,wBAAwB,KAAK,SAAS;CAEvE,OACE,2CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,aAAW;EACX,eAAa;EACb,gBAAc;YAEd,2CAAC,cAAD,EAAY,MAAM,KAAK;CACd;AAEf,CACF;;;;AASA,SAAS,iBAAiB,MAAY,MAA2B;CAC/D,IAAI;CACJ,QAAQ,MAAR;EACE,KAAK;GACH,mBAAmB;GACnB;EACF,KAAK;EACL,KAAK;GACH,mBAAmB;GACnB;CACJ;CAEA,MAAM,SAAS,QAAQ,KAAK,IAAI;CAChC,IAAI,UAAU,MACZ,MAAM,IAAI,MAAM,mBAAmB;CAErC,MAAM,CAAC,YAAY;CACnB,IAAI,aAAa,kBAEf,QAAQ,KACN,yBAAyB,KAAI,sBAAuB,iBAAgB,aAAc,SAAQ,EAC5F;AAEJ"}

package/dist/components/IconButton/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["React","ForwardedRef","forwardRef","useMemo","JSX","useClassNames","KnownIconType","Variant","Size","IconButtonProps","ElementType","variant","size","icon","isActive","component","T","Omit","ComponentPropsWithRef","IconButton","HTMLButtonElement","IconButtonInner","rest","ref","validateIconSize","Component","classNames","className","p","Element","requiredIconSize","result","exec","Error","iconSize","console","warn"],"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\nimport './index.css'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\nexport type IconButtonProps<T extends React.ElementType = 'button'> = {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButtonInner<T extends React.ElementType>(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      component,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ) {\n    validateIconSize(size, icon)\n    const Component = useMemo(() => component ?? 'button', [component])\n    const classNames = useClassNames('charcoal-icon-button', rest.className)\n\n    return (\n      <Component\n        {...rest}\n        ref={ref}\n        className={classNames}\n        data-size={size}\n        data-active={isActive}\n        data-variant={variant}\n      >\n        <pixiv-icon name={icon} />\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'button'>(\n  p: IconButtonProps<T>,\n) => JSX.Element\n\nexport default IconButton\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`,\n    )\n  }\n}\n"],"mappings":";;;;;;;AAiBA,MAAMmB,aAAajB,WACjB,SAASmB,gBACP,EACEV,UAAU,WACVC,OAAO,KACPC,MACAC,WAAW,OACXC,WACA,GAAGO,QAELC,KACA;CACAC,iBAAiBZ,MAAMC,KAAK;CAC5B,MAAMY,YAAYtB,cAAcY,aAAa,UAAU,CAACA,UAAU,CAAC;CACnE,MAAMW,aAAarB,cAAc,wBAAwBiB,KAAKK,UAAU;CAExE,OACE,oBAAC,WAAD;EACE,GAAIL;EACCC;EACL,WAAWG;EACX,aAAWd;EACX,eAAaE;EACb,gBAAcH;YAEd,oBAAC,cAAD,EAAY,MAAME,MAAK;EACb;EAGjB;;;;AASD,SAASW,iBAAiBZ,MAAYC,MAA2B;CAC/D,IAAIiB;CACJ,QAAQlB,MAAR;EACE,KAAK;GACHkB,mBAAmB;GACnB;EACF,KAAK;EACL,KAAK;GACHA,mBAAmB;GACnB;;CAGJ,MAAMC,SAAS,QAAQC,KAAKnB,KAAK;CACjC,IAAIkB,UAAU,MACZ,MAAM,IAAIE,MAAM,oBAAoB;CAEtC,MAAM,CAACC,YAAYH;CACnB,IAAIG,aAAaJ,kBAEfK,QAAQC,KACN,yBAAyBxB,KAAI,sBAAuBkB,iBAAgB,aAAcI,SAAQ,GAC3F"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\nimport './index.css'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\nexport type IconButtonProps<T extends React.ElementType = 'button'> = {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButtonInner<T extends React.ElementType>(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      component,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ) {\n    validateIconSize(size, icon)\n    const Component = useMemo(() => component ?? 'button', [component])\n    const classNames = useClassNames('charcoal-icon-button', rest.className)\n\n    return (\n      <Component\n        {...rest}\n        ref={ref}\n        className={classNames}\n        data-size={size}\n        data-active={isActive}\n        data-variant={variant}\n      >\n        <pixiv-icon name={icon} />\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'button'>(\n  p: IconButtonProps<T>,\n) => JSX.Element\n\nexport default IconButton\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`,\n    )\n  }\n}\n"],"mappings":";;;;;;;AAiBA,MAAM,aAAa,WACjB,SAAS,gBACP,EACE,UAAU,WACV,OAAO,KACP,MACA,WAAW,OACX,WACA,GAAG,QAEL,KACA;CACA,iBAAiB,MAAM,IAAI;CAC3B,MAAM,YAAY,cAAc,aAAa,UAAU,CAAC,SAAS,CAAC;CAClE,MAAM,aAAa,cAAc,wBAAwB,KAAK,SAAS;CAEvE,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,aAAW;EACX,eAAa;EACb,gBAAc;YAEd,oBAAC,cAAD,EAAY,MAAM,KAAK;CACd;AAEf,CACF;;;;AASA,SAAS,iBAAiB,MAAY,MAA2B;CAC/D,IAAI;CACJ,QAAQ,MAAR;EACE,KAAK;GACH,mBAAmB;GACnB;EACF,KAAK;EACL,KAAK;GACH,mBAAmB;GACnB;CACJ;CAEA,MAAM,SAAS,QAAQ,KAAK,IAAI;CAChC,IAAI,UAAU,MACZ,MAAM,IAAI,MAAM,mBAAmB;CAErC,MAAM,CAAC,YAAY;CACnB,IAAI,aAAa,kBAEf,QAAQ,KACN,yBAAyB,KAAI,sBAAuB,iBAAgB,aAAc,SAAQ,EAC5F;AAEJ"}

package/dist/components/LoadingSpinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;;AA6BD,wBAAmC;AAEnC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,6GAyB9B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;;;AA+BD,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,6GAyB9B,CAAA"}

package/dist/components/LoadingSpinner/index2.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_useClassNames = require('../../_lib/useClassNames.cjs');
 require('./index.cjs');
 let react = require("react");

package/dist/components/LoadingSpinner/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["forwardRef","useImperativeHandle","useRef","memo","useClassNames","LoadingSpinnerProps","size","padding","transparent","className","LoadingSpinner","HTMLDivElement","LoadingSpinnerInner","props","ref","classNames","Props","once","LoadingSpinnerIconHandler","restart","LoadingSpinnerIcon","iconRef","current","dataset","resetAnimation","offsetWidth"],"sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef, memo } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport type LoadingSpinnerProps = {\n  readonly size?: number\n  readonly padding?: number\n  readonly transparent?: boolean\n  readonly className?: string\n}\n\nconst LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(\n  function LoadingSpinnerInner(\n    { size = 48, padding = 16, transparent = false, ...props },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-loading-spinner',\n      props.className,\n    )\n\n    return (\n      <div\n        role=\"progressbar\"\n        style={{\n          '--charcoal-loading-spinner-size': `${size}px`,\n          '--charcoal-loading-spinner-padding': `${padding}px`,\n        }}\n        data-transparent={transparent}\n        className={classNames}\n        ref={ref}\n      >\n        <LoadingSpinnerIcon />\n      </div>\n    )\n  },\n)\n\nexport default memo(LoadingSpinner)\n\ntype Props = {\n  once?: boolean\n}\n\nexport interface LoadingSpinnerIconHandler {\n  restart(): void\n}\n\nexport const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(\n  function LoadingSpinnerIcon({ once = false }, ref) {\n    const iconRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => ({\n      restart: () => {\n        if (!iconRef.current) {\n          return\n        }\n        iconRef.current.dataset.resetAnimation = 'true'\n        // Force reflow hack!\n        void iconRef.current.offsetWidth\n        delete iconRef.current.dataset.resetAnimation\n      },\n    }))\n\n    return (\n      <div\n        role=\"presentation\"\n        ref={iconRef}\n        data-once={once}\n        className=\"charcoal-loading-spinner-icon\"\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;;AAYA,MAAMU,uCACJ,SAASE,oBACP,EAAEN,OAAO,IAAIC,UAAU,IAAIC,cAAc,OAAO,GAAGK,SACnDC,KACA;CACA,MAAMC,aAAaX,oCACjB,4BACAS,MAAMJ,UACP;CAED,OACE,2CAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,mCAAmC,GAAGH,KAAI;GAC1C,sCAAsC,GAAGC,QAAO;GACjD;EACD,oBAAkBC;EAClB,WAAWO;EACND;YAEL,2CAAC,oBAAD,EAAmB;EACf;EAGX;AAED,6CAAoBJ,eAAe;AAUnC,MAAaU,2CACX,SAASA,mBAAmB,EAAEH,OAAO,SAASH,KAAK;CACjD,MAAMO,4BAAiC,KAAK;CAE5CpB,+BAAoBa,YAAY,EAC9BK,eAAe;EACb,IAAI,CAACE,QAAQC,SACX;EAEFD,QAAQC,QAAQC,QAAQC,iBAAiB;EAEzC,AAAKH,QAAQC,QAAQG;EACrB,OAAOJ,QAAQC,QAAQC,QAAQC;IAElC,EAAE;CAEH,OACE,2CAAC,OAAD;EACE,MAAK;EACL,KAAKH;EACL,aAAWJ;EACX,WAAU;EACV;EAGP"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef, memo } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport type LoadingSpinnerProps = {\n  readonly size?: number\n  readonly padding?: number\n  readonly transparent?: boolean\n  readonly className?: string\n}\n\nconst LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(\n  function LoadingSpinnerInner(\n    { size = 48, padding = 16, transparent = false, ...props },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-loading-spinner',\n      props.className,\n    )\n\n    return (\n      <div\n        role=\"progressbar\"\n        style={{\n          '--charcoal-loading-spinner-size': `${size}px`,\n          '--charcoal-loading-spinner-padding': `${padding}px`,\n        }}\n        data-transparent={transparent}\n        className={classNames}\n        ref={ref}\n      >\n        <LoadingSpinnerIcon />\n      </div>\n    )\n  },\n)\n\nexport default memo(LoadingSpinner)\n\ntype Props = {\n  once?: boolean\n}\n\nexport interface LoadingSpinnerIconHandler {\n  restart(): void\n}\n\nexport const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(\n  function LoadingSpinnerIcon({ once = false }, ref) {\n    const iconRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => ({\n      restart: () => {\n        if (!iconRef.current) {\n          return\n        }\n        iconRef.current.dataset.resetAnimation = 'true'\n        // Force reflow hack!\n        void iconRef.current.offsetWidth\n        delete iconRef.current.dataset.resetAnimation\n      },\n    }))\n\n    return (\n      <div\n        role=\"presentation\"\n        ref={iconRef}\n        data-once={once}\n        className=\"charcoal-loading-spinner-icon\"\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAYA,MAAM,uCACJ,SAAS,oBACP,EAAE,OAAO,IAAI,UAAU,IAAI,cAAc,OAAO,GAAG,SACnD,KACA;CACA,MAAM,aAAa,oCACjB,4BACA,MAAM,SACR;CAEA,OACE,2CAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,mCAAmC,GAAG,KAAI;GAC1C,sCAAsC,GAAG,QAAO;EAClD;EACA,oBAAkB;EAClB,WAAW;EACN;YAEL,2CAAC,oBAAD,CAAmB;CAChB;AAET,CACF;AAEA,6CAAoB,cAAc;AAUlC,MAAa,2CACX,SAAS,mBAAmB,EAAE,OAAO,SAAS,KAAK;CACjD,MAAM,4BAAiC,IAAI;CAE3C,+BAAoB,YAAY,EAC9B,eAAe;EACb,IAAI,CAAC,QAAQ,SACX;EAEF,QAAQ,QAAQ,QAAQ,iBAAiB;EAEzC,AAAK,QAAQ,QAAQ;EACrB,OAAO,QAAQ,QAAQ,QAAQ;CACjC,EACF,EAAE;CAEF,OACE,2CAAC,OAAD;EACE,MAAK;EACL,KAAK;EACL,aAAW;EACX,WAAU;CAA+B;AAG/C,CACF"}

package/dist/components/LoadingSpinner/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["forwardRef","useImperativeHandle","useRef","memo","useClassNames","LoadingSpinnerProps","size","padding","transparent","className","LoadingSpinner","HTMLDivElement","LoadingSpinnerInner","props","ref","classNames","Props","once","LoadingSpinnerIconHandler","restart","LoadingSpinnerIcon","iconRef","current","dataset","resetAnimation","offsetWidth"],"sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef, memo } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport type LoadingSpinnerProps = {\n  readonly size?: number\n  readonly padding?: number\n  readonly transparent?: boolean\n  readonly className?: string\n}\n\nconst LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(\n  function LoadingSpinnerInner(\n    { size = 48, padding = 16, transparent = false, ...props },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-loading-spinner',\n      props.className,\n    )\n\n    return (\n      <div\n        role=\"progressbar\"\n        style={{\n          '--charcoal-loading-spinner-size': `${size}px`,\n          '--charcoal-loading-spinner-padding': `${padding}px`,\n        }}\n        data-transparent={transparent}\n        className={classNames}\n        ref={ref}\n      >\n        <LoadingSpinnerIcon />\n      </div>\n    )\n  },\n)\n\nexport default memo(LoadingSpinner)\n\ntype Props = {\n  once?: boolean\n}\n\nexport interface LoadingSpinnerIconHandler {\n  restart(): void\n}\n\nexport const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(\n  function LoadingSpinnerIcon({ once = false }, ref) {\n    const iconRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => ({\n      restart: () => {\n        if (!iconRef.current) {\n          return\n        }\n        iconRef.current.dataset.resetAnimation = 'true'\n        // Force reflow hack!\n        void iconRef.current.offsetWidth\n        delete iconRef.current.dataset.resetAnimation\n      },\n    }))\n\n    return (\n      <div\n        role=\"presentation\"\n        ref={iconRef}\n        data-once={once}\n        className=\"charcoal-loading-spinner-icon\"\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAYA,MAAMU,iBAAiBV,WACrB,SAASY,oBACP,EAAEN,OAAO,IAAIC,UAAU,IAAIC,cAAc,OAAO,GAAGK,SACnDC,KACA;CACA,MAAMC,aAAaX,cACjB,4BACAS,MAAMJ,UACP;CAED,OACE,oBAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,mCAAmC,GAAGH,KAAI;GAC1C,sCAAsC,GAAGC,QAAO;GACjD;EACD,oBAAkBC;EAClB,WAAWO;EACND;YAEL,oBAAC,oBAAD,EAAmB;EACf;EAGX;AAED,6BAAeX,KAAKO,eAAe;AAUnC,MAAaU,qBAAqBpB,WAChC,SAASoB,mBAAmB,EAAEH,OAAO,SAASH,KAAK;CACjD,MAAMO,UAAUnB,OAAuB,KAAK;CAE5CD,oBAAoBa,YAAY,EAC9BK,eAAe;EACb,IAAI,CAACE,QAAQC,SACX;EAEFD,QAAQC,QAAQC,QAAQC,iBAAiB;EAEzC,AAAKH,QAAQC,QAAQG;EACrB,OAAOJ,QAAQC,QAAQC,QAAQC;IAElC,EAAE;CAEH,OACE,oBAAC,OAAD;EACE,MAAK;EACL,KAAKH;EACL,aAAWJ;EACX,WAAU;EACV;EAGP"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef, memo } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport type LoadingSpinnerProps = {\n  readonly size?: number\n  readonly padding?: number\n  readonly transparent?: boolean\n  readonly className?: string\n}\n\nconst LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(\n  function LoadingSpinnerInner(\n    { size = 48, padding = 16, transparent = false, ...props },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-loading-spinner',\n      props.className,\n    )\n\n    return (\n      <div\n        role=\"progressbar\"\n        style={{\n          '--charcoal-loading-spinner-size': `${size}px`,\n          '--charcoal-loading-spinner-padding': `${padding}px`,\n        }}\n        data-transparent={transparent}\n        className={classNames}\n        ref={ref}\n      >\n        <LoadingSpinnerIcon />\n      </div>\n    )\n  },\n)\n\nexport default memo(LoadingSpinner)\n\ntype Props = {\n  once?: boolean\n}\n\nexport interface LoadingSpinnerIconHandler {\n  restart(): void\n}\n\nexport const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(\n  function LoadingSpinnerIcon({ once = false }, ref) {\n    const iconRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => ({\n      restart: () => {\n        if (!iconRef.current) {\n          return\n        }\n        iconRef.current.dataset.resetAnimation = 'true'\n        // Force reflow hack!\n        void iconRef.current.offsetWidth\n        delete iconRef.current.dataset.resetAnimation\n      },\n    }))\n\n    return (\n      <div\n        role=\"presentation\"\n        ref={iconRef}\n        data-once={once}\n        className=\"charcoal-loading-spinner-icon\"\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAYA,MAAM,iBAAiB,WACrB,SAAS,oBACP,EAAE,OAAO,IAAI,UAAU,IAAI,cAAc,OAAO,GAAG,SACnD,KACA;CACA,MAAM,aAAa,cACjB,4BACA,MAAM,SACR;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,mCAAmC,GAAG,KAAI;GAC1C,sCAAsC,GAAG,QAAO;EAClD;EACA,oBAAkB;EAClB,WAAW;EACN;YAEL,oBAAC,oBAAD,CAAmB;CAChB;AAET,CACF;AAEA,6BAAe,KAAK,cAAc;AAUlC,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,OAAO,SAAS,KAAK;CACjD,MAAM,UAAU,OAAuB,IAAI;CAE3C,oBAAoB,YAAY,EAC9B,eAAe;EACb,IAAI,CAAC,QAAQ,SACX;EAEF,QAAQ,QAAQ,QAAQ,iBAAiB;EAEzC,AAAK,QAAQ,QAAQ;EACrB,OAAO,QAAQ,QAAQ,QAAQ;CACjC,EACF,EAAE;CAEF,OACE,oBAAC,OAAD;EACE,MAAK;EACL,KAAK;EACL,aAAW;EACX,WAAU;CAA+B;AAG/C,CACF"}

package/dist/components/Modal/Dialog/index2.cjs

@@ -4,7 +4,7 @@ const require_useClassNames = require('../../../_lib/useClassNames.cjs');
 const require_useForwardedRef = require('../../../_lib/useForwardedRef.cjs');
 require('./index.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_aria_useDialog = require("react-aria/useDialog");
 

package/dist/components/Modal/Dialog/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["forwardRef","React","useDialog","useForwardedRef","Size","BottomSheet","useClassNames","Dialog","HTMLDivElement","ComponentPropsWithoutRef","size","bottomSheet","className","props","ref","dialogProps","role","classNames","tabIndex","onBlur"],"sources":["../../../../src/components/Modal/Dialog/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as React from 'react'\nimport { useDialog } from 'react-aria/useDialog'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nimport './index.css'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'> & {\n    size: Size\n    bottomSheet: BottomSheet\n  }\n>(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref,\n  )\n\n  const classNames = useClassNames('charcoal-modal-dialog', className)\n  return (\n    <div\n      className={classNames}\n      role={dialogProps.role}\n      data-bottom-sheet={bottomSheet}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      data-size={size}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;;AASA,MAAaO,+BAMX,SAASA,OAAO,EAAEG,MAAMC,aAAaC,WAAW,GAAGC,SAASb,YAAY;CACxE,MAAMc,MAAMX,wCAAgBH,WAAW;CACvC,MAAM,EAAEe,oDACN,EACEC,MAAM,UACP,EACDF,IACD;CAGD,OACE,2CAAC,OAAD;EACE,WAHeR,oCAAc,yBAAyBM,UAGjC;EACrB,MAAMG,YAAYC;EAClB,qBAAmBL;EACnB,UAAUI,YAAYG;EACtB,mBAAiBH,YAAY;EAC7B,QAAQA,YAAYI;EACpB,aAAWT;EACNI;EACL,GAAID;EACJ;EAEJ"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/Modal/Dialog/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as React from 'react'\nimport { useDialog } from 'react-aria/useDialog'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nimport './index.css'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'> & {\n    size: Size\n    bottomSheet: BottomSheet\n  }\n>(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref,\n  )\n\n  const classNames = useClassNames('charcoal-modal-dialog', className)\n  return (\n    <div\n      className={classNames}\n      role={dialogProps.role}\n      data-bottom-sheet={bottomSheet}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      data-size={size}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;;AASA,MAAa,+BAMX,SAAS,OAAO,EAAE,MAAM,aAAa,WAAW,GAAG,SAAS,YAAY;CACxE,MAAM,MAAM,wCAAgB,UAAU;CACtC,MAAM,EAAE,oDACN,EACE,MAAM,SACR,GACA,GACF;CAGA,OACE,2CAAC,OAAD;EACE,WAHe,oCAAc,yBAAyB,SAG3C;EACX,MAAM,YAAY;EAClB,qBAAmB;EACnB,UAAU,YAAY;EACtB,mBAAiB,YAAY;EAC7B,QAAQ,YAAY;EACpB,aAAW;EACN;EACL,GAAI;CAAM;AAGhB,CAAC"}

package/dist/components/Modal/Dialog/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["forwardRef","React","useDialog","useForwardedRef","Size","BottomSheet","useClassNames","Dialog","HTMLDivElement","ComponentPropsWithoutRef","size","bottomSheet","className","props","ref","dialogProps","role","classNames","tabIndex","onBlur"],"sources":["../../../../src/components/Modal/Dialog/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as React from 'react'\nimport { useDialog } from 'react-aria/useDialog'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nimport './index.css'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'> & {\n    size: Size\n    bottomSheet: BottomSheet\n  }\n>(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref,\n  )\n\n  const classNames = useClassNames('charcoal-modal-dialog', className)\n  return (\n    <div\n      className={classNames}\n      role={dialogProps.role}\n      data-bottom-sheet={bottomSheet}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      data-size={size}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;AASA,MAAaO,SAASP,WAMpB,SAASO,OAAO,EAAEG,MAAMC,aAAaC,WAAW,GAAGC,SAASb,YAAY;CACxE,MAAMc,MAAMX,gBAAgBH,WAAW;CACvC,MAAM,EAAEe,gBAAgBb,UACtB,EACEc,MAAM,UACP,EACDF,IACD;CAGD,OACE,oBAAC,OAAD;EACE,WAHeR,cAAc,yBAAyBM,UAGjC;EACrB,MAAMG,YAAYC;EAClB,qBAAmBL;EACnB,UAAUI,YAAYG;EACtB,mBAAiBH,YAAY;EAC7B,QAAQA,YAAYI;EACpB,aAAWT;EACNI;EACL,GAAID;EACJ;EAEJ"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/Modal/Dialog/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as React from 'react'\nimport { useDialog } from 'react-aria/useDialog'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nimport './index.css'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'> & {\n    size: Size\n    bottomSheet: BottomSheet\n  }\n>(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref,\n  )\n\n  const classNames = useClassNames('charcoal-modal-dialog', className)\n  return (\n    <div\n      className={classNames}\n      role={dialogProps.role}\n      data-bottom-sheet={bottomSheet}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      data-size={size}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;AASA,MAAa,SAAS,WAMpB,SAAS,OAAO,EAAE,MAAM,aAAa,WAAW,GAAG,SAAS,YAAY;CACxE,MAAM,MAAM,gBAAgB,UAAU;CACtC,MAAM,EAAE,gBAAgB,UACtB,EACE,MAAM,SACR,GACA,GACF;CAGA,OACE,oBAAC,OAAD;EACE,WAHe,cAAc,yBAAyB,SAG3C;EACX,MAAM,YAAY;EAClB,qBAAmB;EACnB,UAAU,YAAY;EACtB,mBAAiB,YAAY;EAC7B,QAAQ,YAAY;EACpB,aAAW;EACN;EACL,GAAI;CAAM;AAGhB,CAAC"}

package/dist/components/Modal/ModalBackgroundContext.cjs

@@ -1,7 +1,7 @@
 "use client";
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 
 //#region src/components/Modal/ModalBackgroundContext.tsx
 /**

package/dist/components/Modal/ModalBackgroundContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBackgroundContext.cjs","names":["React","ModalBackgroundContext","createContext","HTMLElement"],"sources":["../../../src/components/Modal/ModalBackgroundContext.tsx"],"sourcesContent":["import * as React from 'react'\n\n/**\n * ModalBackgroundのElementが入ったコンテキスト\n */\nexport const ModalBackgroundContext = React.createContext<HTMLElement | null>(\n  null,\n)\n"],"mappings":";;;;;;;;;AAKA,MAAaC,yBAAyBD,MAAME,cAC1C,KACD"}
+{"version":3,"file":"ModalBackgroundContext.cjs","names":[],"sources":["../../../src/components/Modal/ModalBackgroundContext.tsx"],"sourcesContent":["import * as React from 'react'\n\n/**\n * ModalBackgroundのElementが入ったコンテキスト\n */\nexport const ModalBackgroundContext = React.createContext<HTMLElement | null>(\n  null,\n)\n"],"mappings":";;;;;;;;;AAKA,MAAa,yBAAyB,MAAM,cAC1C,IACF"}

package/dist/components/Modal/ModalBackgroundContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBackgroundContext.js","names":["React","ModalBackgroundContext","createContext","HTMLElement"],"sources":["../../../src/components/Modal/ModalBackgroundContext.tsx"],"sourcesContent":["import * as React from 'react'\n\n/**\n * ModalBackgroundのElementが入ったコンテキスト\n */\nexport const ModalBackgroundContext = React.createContext<HTMLElement | null>(\n  null,\n)\n"],"mappings":";;;;;;;AAKA,MAAaC,yBAAyBD,QAAME,cAC1C,KACD"}
+{"version":3,"file":"ModalBackgroundContext.js","names":[],"sources":["../../../src/components/Modal/ModalBackgroundContext.tsx"],"sourcesContent":["import * as React from 'react'\n\n/**\n * ModalBackgroundのElementが入ったコンテキスト\n */\nexport const ModalBackgroundContext = React.createContext<HTMLElement | null>(\n  null,\n)\n"],"mappings":";;;;;;;AAKA,MAAa,yBAAyB,QAAM,cAC1C,IACF"}

package/dist/components/Modal/ModalPlumbing.d.ts

@@ -1,12 +1,12 @@
 import './ModalPlumbing.css';
 export declare function ModalHeader(): import("react/jsx-runtime").JSX.Element;
 export declare const ModalAlign: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ModalBody: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ModalButtons: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ModalPlumbing.d.ts.map

package/dist/components/Modal/ModalPlumbing2.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_createDivComponent = require('../../_lib/createDivComponent.cjs');
 const require_index = require('./index2.cjs');
 require('./ModalPlumbing.cjs');

package/dist/components/Modal/ModalPlumbing2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPlumbing2.cjs","names":["ModalContext","useContext","createDivComponent","ModalHeader","modalCtx","bottomSheet","title","ModalAlign","ModalBody","ModalButtons"],"sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"sourcesContent":["import { ModalContext } from '.'\nimport { useContext } from 'react'\n\nimport './ModalPlumbing.css'\nimport { createDivComponent } from '../../_lib/createDivComponent'\n\nexport function ModalHeader() {\n  const modalCtx = useContext(ModalContext)\n  return (\n    <div\n      className=\"charcoal-modal-header-root\"\n      data-bottom-sheet={modalCtx.bottomSheet}\n    >\n      <div className=\"charcoal-modal-header-title\">{modalCtx.title}</div>\n    </div>\n  )\n}\n\nexport const ModalAlign = createDivComponent('charcoal-modal-align')\n\nexport const ModalBody = createDivComponent('charcoal-modal-body')\n\nexport const ModalButtons = createDivComponent('charcoal-modal-buttons')\n"],"mappings":";;;;;;;;;AAMA,SAAgBG,cAAc;CAC5B,MAAMC,iCAAsBJ,2BAAa;CACzC,OACE,2CAAC,OAAD;EACE,WAAU;EACV,qBAAmBI,SAASC;YAE5B,2CAAC,OAAD;GAAK,WAAU;aAA+BD,SAASE;GAAW;EAC9D;;AAIV,MAAaC,aAAaL,8CAAmB,uBAAuB;AAEpE,MAAaM,YAAYN,8CAAmB,sBAAsB;AAElE,MAAaO,eAAeP,8CAAmB,yBAAyB"}
+{"version":3,"file":"ModalPlumbing2.cjs","names":[],"sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"sourcesContent":["import { ModalContext } from '.'\nimport { useContext } from 'react'\n\nimport './ModalPlumbing.css'\nimport { createDivComponent } from '../../_lib/createDivComponent'\n\nexport function ModalHeader() {\n  const modalCtx = useContext(ModalContext)\n  return (\n    <div\n      className=\"charcoal-modal-header-root\"\n      data-bottom-sheet={modalCtx.bottomSheet}\n    >\n      <div className=\"charcoal-modal-header-title\">{modalCtx.title}</div>\n    </div>\n  )\n}\n\nexport const ModalAlign = createDivComponent('charcoal-modal-align')\n\nexport const ModalBody = createDivComponent('charcoal-modal-body')\n\nexport const ModalButtons = createDivComponent('charcoal-modal-buttons')\n"],"mappings":";;;;;;;;AAMA,SAAgB,cAAc;CAC5B,MAAM,iCAAsB,0BAAY;CACxC,OACE,2CAAC,OAAD;EACE,WAAU;EACV,qBAAmB,SAAS;YAE5B,2CAAC,OAAD;GAAK,WAAU;aAA+B,SAAS;EAAW;CAC/D;AAET;AAEA,MAAa,aAAa,8CAAmB,sBAAsB;AAEnE,MAAa,YAAY,8CAAmB,qBAAqB;AAEjE,MAAa,eAAe,8CAAmB,wBAAwB"}