@charcoal-ui/react 6.0.0-rc.9 → 6.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPlumbing2.js","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,WAAWH,WAAWD,aAAa;CACzC,OACE,oBAAC,OAAD;EACE,WAAU;EACV,qBAAmBI,SAASC;YAE5B,oBAAC,OAAD;GAAK,WAAU;aAA+BD,SAASE;GAAW;EAC9D;;AAIV,MAAaC,aAAaL,mBAAmB,uBAAuB;AAEpE,MAAaM,YAAYN,mBAAmB,sBAAsB;AAElE,MAAaO,eAAeP,mBAAmB,yBAAyB"}
+{"version":3,"file":"ModalPlumbing2.js","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,WAAW,WAAW,YAAY;CACxC,OACE,oBAAC,OAAD;EACE,WAAU;EACV,qBAAmB,SAAS;YAE5B,oBAAC,OAAD;GAAK,WAAU;aAA+B,SAAS;EAAW;CAC/D;AAET;AAEA,MAAa,aAAa,mBAAmB,sBAAsB;AAEnE,MAAa,YAAY,mBAAmB,qBAAqB;AAEjE,MAAa,eAAe,mBAAmB,wBAAwB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC/C,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAG3D,OAAO,EACL,yBAAyB,EAG1B,MAAM,yBAAyB,CAAA;AAGhC,OAAO,aAAa,CAAA;AAKpB,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAC1C,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAElC,MAAM,MAAM,UAAU,GAAG,yBAAyB,GAChD,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;;;;cAfW,KAAK,CAAC,SAAS;aAChB,MAAM;WACR,MAAM;WACN,IAAI;kBACG,WAAW;YACjB,OAAO;aACN,MAAM,IAAI;gBACP,MAAM;2BACK,MAAM;IAE7B;;;OAGG;sBACe,WAAW;;AA+HjC,wBAA0B;AAE1B,eAAO,MAAM,YAAY;IACvB;;OAEG;gBACS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;WACtC,MAAM;YACL,MAAM,IAAI;iBACL,OAAO;iBACP,WAAW;EAOxB,CAAA;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,2CAUpE;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,kDAYrE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC/C,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAG3D,OAAO,EACL,yBAAyB,EAG1B,MAAM,yBAAyB,CAAA;AAGhC,OAAO,aAAa,CAAA;AAKpB,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAC1C,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAElC,MAAM,MAAM,UAAU,GAAG,yBAAyB,GAChD,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;;;;cAfW,KAAK,CAAC,SAAS;aAChB,MAAM;WACR,MAAM;WACN,IAAI;kBACG,WAAW;YACjB,OAAO;aACN,MAAM,IAAI;gBACP,MAAM;2BACK,MAAM;IAE7B;;;OAGG;sBACe,WAAW;;;AAiIjC,eAAO,MAAM,YAAY;IACvB;;OAEG;gBACS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;WACtC,MAAM;YACL,MAAM,IAAI;iBACL,OAAO;iBACP,WAAW;EAOxB,CAAA;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,2CAUpE;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,kDAYrE"}

package/dist/components/Modal/index2.cjs

@@ -7,7 +7,7 @@ const require_useCustomModalOverlay = require('./useCustomModalOverlay.cjs');
 const require_useTransitionPresence = require('./useTransitionPresence.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_Overlay = require("react-aria/Overlay");
 let react_aria_useObjectRef = require("react-aria/useObjectRef");

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

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["useContext","forwardRef","memo","React","AriaDialogProps","Button","ButtonProps","IconButton","IconButtonProps","Dialog","ModalBackgroundContext","CharcoalModalOverlayProps","useCharcoalModalOverlay","useWindowWidth","useTransitionPresence","Overlay","useObjectRef","BottomSheet","Size","ModalProps","children","ReactNode","zIndex","title","size","bottomSheet","isOpen","onClose","className","closeButtonAriaLabel","portalContainer","HTMLElement","DEFAULT_Z_INDEX","Modal","HTMLDivElement","ModalInner","props","external","isDismissable","ref","modalProps","underlayProps","isKeyboardDismissDisabled","undefined","isMobile","Infinity","transitionEnabled","showDismiss","bgRef","useRef","isPresent","animationState","handleTransitionEnd","handleClick","useCallback","e","MouseEvent","currentTarget","target","current","titleProps","close","ModalContext","createContext","HTMLAttributes","ModalCloseButton","Omit","ModalDismissButton"],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport type { AriaDialogProps } from 'react-aria/useDialog'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport {\n  CharcoalModalOverlayProps,\n  useCharcoalModalOverlay,\n  useWindowWidth,\n} from './useCustomModalOverlay'\nimport { useTransitionPresence } from './useTransitionPresence'\n\nimport './index.css'\n\nimport { Overlay } from 'react-aria/Overlay'\nimport { useObjectRef } from 'react-aria/useObjectRef'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = CharcoalModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n    closeButtonAriaLabel?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external,\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n    closeButtonAriaLabel = 'Close',\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref,\n  )\n\n  const isMobile = (useWindowWidth() ?? Infinity) < 744\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const bgRef = React.useRef<HTMLDivElement>(null)\n\n  const { isPresent, animationState, handleTransitionEnd } =\n    useTransitionPresence(isOpen, transitionEnabled, bgRef, ref)\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose],\n  )\n\n  if (!isPresent) {\n    return null\n  }\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div\n        className=\"charcoal-modal-background\"\n        ref={bgRef}\n        {...underlayProps}\n        style={{ zIndex }}\n        data-bottom-sheet={bottomSheet}\n        data-animation={transitionEnabled ? animationState : undefined}\n        onClick={handleClick}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <ModalBackgroundContext.Provider value={bgRef.current}>\n          <Dialog\n            ref={ref}\n            {...modalProps}\n            size={size}\n            bottomSheet={bottomSheet}\n            className={className}\n          >\n            <ModalContext.Provider\n              value={{\n                titleProps: {},\n                title,\n                close: onClose,\n                showDismiss,\n                bottomSheet,\n              }}\n            >\n              {children}\n              {isDismissable === true && (\n                <ModalCloseButton\n                  aria-label={closeButtonAriaLabel}\n                  onClick={onClose}\n                />\n              )}\n            </ModalContext.Provider>\n          </Dialog>\n        </ModalBackgroundContext.Provider>\n      </div>\n    </Overlay>\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nexport function ModalCloseButton(props: Omit<IconButtonProps, 'icon'>) {\n  return (\n    <IconButton\n      className=\"charcoal-modal-close-button\"\n      size=\"S\"\n      icon=\"24/Close\"\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyCA,MAAMgC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAMC,8BAA+C,SAASE,WAC5D,EAAEf,UAAUE,SAASU,iBAAiBF,iBAAiB,GAAGM,SAC1DC,UACA;CACA,MAAM,EACJd,OACAC,OAAO,KACPC,cAAc,OACda,eACAX,SACAC,WACAF,SAAS,OACTG,uBAAuB,YACrBO;CAEJ,MAAMG,gDAAmCF,SAAS;CAElD,MAAM,EAAEG,YAAYC,kBAAkB7B,sDACpC;EACE,GAAGwB;EACHM,2BACEJ,kBAAkBK,UAAaL,kBAAkB;EACpD,EACD;EACEX;EACAD;EACD,EACDa,IACD;CAED,MAAMK,YAAY/B,8CAAgB,IAAIgC,YAAY;CAClD,MAAMC,oBAAoBF,YAAYnB,gBAAgB;CACtD,MAAMsB,cAAc,CAACH,YAAYnB,gBAAgB;CAEjD,MAAMuB,QAAQ7C,MAAM8C,OAAuB,KAAK;CAEhD,MAAM,EAAEC,WAAWC,gBAAgBC,wBACjCtC,oDAAsBY,QAAQoB,mBAAmBE,OAAOT,IAAI;CAE9D,MAAMc,cAAclD,MAAMmD,aACvBC,MAAoD;EACnD,IAAIA,EAAEE,kBAAkBF,EAAEG,QACxB/B,SAAS;IAGb,CAACA,QACH,CAAC;CAED,IAAI,CAACuB,WACH,OAAO;CAGT,OACE,2CAAC,4BAAD;EAA0BpB;YACxB,2CAAC,OAAD;GACE,WAAU;GACV,KAAKkB;GACL,GAAIP;GACJ,OAAO,EAAEnB,QAAQ;GACjB,qBAAmBG;GACnB,kBAAgBqB,oBAAoBK,iBAAiBR;GACrD,SAASU;GACT,iBAAiBD;aAEjB,2CAAC,sDAAuB,UAAxB;IAAiC,OAAOJ,MAAMW;cAC5C,2CAAC,wBAAD;KACOpB;KACL,GAAIC;KACEhB;KACOC;KACFG;eAEX,4CAAC,aAAa,UAAd;MACE,OAAO;OACLgC,YAAY,EAAE;OACdrC;OACAsC,OAAOlC;OACPoB;OACAtB;OACD;gBAPH,CASGL,UACAkB,kBAAkB,QACjB,2CAAC,kBAAD;OACE,cAAYT;OACZ,SAASF;OAEZ,EACoB;;KACjB;IACuB;GAC9B;EACG;EAEZ;AAEF,oCAAoBM,MAAM;AAE1B,MAAa6B,eAAe3D,MAAM4D,cAS/B;CACDH,YAAY,EAAE;CACdrC,OAAO;CACPsC,OAAOlB;CACPI,aAAa;CACbtB,aAAa;CACd,CAAC;AAEF,SAAgBwC,iBAAiB7B,OAAsC;CACrE,OACE,2CAAC,uBAAD;EACE,WAAU;EACV,MAAK;EACL,MAAK;EACL,MAAK;EACL,GAAIA;EACJ"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport type { AriaDialogProps } from 'react-aria/useDialog'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport {\n  CharcoalModalOverlayProps,\n  useCharcoalModalOverlay,\n  useWindowWidth,\n} from './useCustomModalOverlay'\nimport { useTransitionPresence } from './useTransitionPresence'\n\nimport './index.css'\n\nimport { Overlay } from 'react-aria/Overlay'\nimport { useObjectRef } from 'react-aria/useObjectRef'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = CharcoalModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n    closeButtonAriaLabel?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external,\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n    closeButtonAriaLabel = 'Close',\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref,\n  )\n\n  const isMobile = (useWindowWidth() ?? Infinity) < 744\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const bgRef = React.useRef<HTMLDivElement>(null)\n\n  const { isPresent, animationState, handleTransitionEnd } =\n    useTransitionPresence(isOpen, transitionEnabled, bgRef, ref)\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose],\n  )\n\n  if (!isPresent) {\n    return null\n  }\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div\n        className=\"charcoal-modal-background\"\n        ref={bgRef}\n        {...underlayProps}\n        style={{ zIndex }}\n        data-bottom-sheet={bottomSheet}\n        data-animation={transitionEnabled ? animationState : undefined}\n        onClick={handleClick}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <ModalBackgroundContext.Provider value={bgRef.current}>\n          <Dialog\n            ref={ref}\n            {...modalProps}\n            size={size}\n            bottomSheet={bottomSheet}\n            className={className}\n          >\n            <ModalContext.Provider\n              value={{\n                titleProps: {},\n                title,\n                close: onClose,\n                showDismiss,\n                bottomSheet,\n              }}\n            >\n              {children}\n              {isDismissable === true && (\n                <ModalCloseButton\n                  aria-label={closeButtonAriaLabel}\n                  onClick={onClose}\n                />\n              )}\n            </ModalContext.Provider>\n          </Dialog>\n        </ModalBackgroundContext.Provider>\n      </div>\n    </Overlay>\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nexport function ModalCloseButton(props: Omit<IconButtonProps, 'icon'>) {\n  return (\n    <IconButton\n      className=\"charcoal-modal-close-button\"\n      size=\"S\"\n      icon=\"24/Close\"\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyCA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAM,8BAA+C,SAAS,WAC5D,EAAE,UAAU,SAAS,iBAAiB,iBAAiB,GAAG,SAC1D,UACA;CACA,MAAM,EACJ,OACA,OAAO,KACP,cAAc,OACd,eACA,SACA,WACA,SAAS,OACT,uBAAuB,YACrB;CAEJ,MAAM,gDAAmC,QAAQ;CAEjD,MAAM,EAAE,YAAY,kBAAkB,sDACpC;EACE,GAAG;EACH,2BACE,kBAAkB,UAAa,kBAAkB;CACrD,GACA;EACE;EACA;CACF,GACA,GACF;CAEA,MAAM,YAAY,6CAAe,KAAK,YAAY;CAClD,MAAM,oBAAoB,YAAY,gBAAgB;CACtD,MAAM,cAAc,CAAC,YAAY,gBAAgB;CAEjD,MAAM,QAAQ,MAAM,OAAuB,IAAI;CAE/C,MAAM,EAAE,WAAW,gBAAgB,wBACjC,oDAAsB,QAAQ,mBAAmB,OAAO,GAAG;CAE7D,MAAM,cAAc,MAAM,aACvB,MAAoD;EACnD,IAAI,EAAE,kBAAkB,EAAE,QACxB,QAAQ;CAEZ,GACA,CAAC,OAAO,CACV;CAEA,IAAI,CAAC,WACH,OAAO;CAGT,OACE,2CAAC,4BAAD;EAA0B;YACxB,2CAAC,OAAD;GACE,WAAU;GACV,KAAK;GACL,GAAI;GACJ,OAAO,EAAE,OAAO;GAChB,qBAAmB;GACnB,kBAAgB,oBAAoB,iBAAiB;GACrD,SAAS;GACT,iBAAiB;aAEjB,2CAAC,sDAAuB,UAAxB;IAAiC,OAAO,MAAM;cAC5C,2CAAC,wBAAD;KACO;KACL,GAAI;KACE;KACO;KACF;eAEX,4CAAC,aAAa,UAAd;MACE,OAAO;OACL,YAAY,CAAC;OACb;OACA,OAAO;OACP;OACA;MACF;gBAPF,CASG,UACA,kBAAkB,QACjB,2CAAC,kBAAD;OACE,cAAY;OACZ,SAAS;MAAQ,EAGA;;IACjB;GACuB;EAC9B;CACE;AAEb,CAAC;AAED,oCAAoB,KAAK;AAEzB,MAAa,eAAe,MAAM,cAS/B;CACD,YAAY,CAAC;CACb,OAAO;CACP,OAAO;CACP,aAAa;CACb,aAAa;AACf,CAAC;AAED,SAAgB,iBAAiB,OAAsC;CACrE,OACE,2CAAC,uBAAD;EACE,WAAU;EACV,MAAK;EACL,MAAK;EACL,MAAK;EACL,GAAI;CAAM;AAGhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["useContext","forwardRef","memo","React","AriaDialogProps","Button","ButtonProps","IconButton","IconButtonProps","Dialog","ModalBackgroundContext","CharcoalModalOverlayProps","useCharcoalModalOverlay","useWindowWidth","useTransitionPresence","Overlay","useObjectRef","BottomSheet","Size","ModalProps","children","ReactNode","zIndex","title","size","bottomSheet","isOpen","onClose","className","closeButtonAriaLabel","portalContainer","HTMLElement","DEFAULT_Z_INDEX","Modal","HTMLDivElement","ModalInner","props","external","isDismissable","ref","modalProps","underlayProps","isKeyboardDismissDisabled","undefined","isMobile","Infinity","transitionEnabled","showDismiss","bgRef","useRef","isPresent","animationState","handleTransitionEnd","handleClick","useCallback","e","MouseEvent","currentTarget","target","current","titleProps","close","ModalContext","createContext","HTMLAttributes","ModalCloseButton","Omit","ModalDismissButton"],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport type { AriaDialogProps } from 'react-aria/useDialog'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport {\n  CharcoalModalOverlayProps,\n  useCharcoalModalOverlay,\n  useWindowWidth,\n} from './useCustomModalOverlay'\nimport { useTransitionPresence } from './useTransitionPresence'\n\nimport './index.css'\n\nimport { Overlay } from 'react-aria/Overlay'\nimport { useObjectRef } from 'react-aria/useObjectRef'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = CharcoalModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n    closeButtonAriaLabel?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external,\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n    closeButtonAriaLabel = 'Close',\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref,\n  )\n\n  const isMobile = (useWindowWidth() ?? Infinity) < 744\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const bgRef = React.useRef<HTMLDivElement>(null)\n\n  const { isPresent, animationState, handleTransitionEnd } =\n    useTransitionPresence(isOpen, transitionEnabled, bgRef, ref)\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose],\n  )\n\n  if (!isPresent) {\n    return null\n  }\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div\n        className=\"charcoal-modal-background\"\n        ref={bgRef}\n        {...underlayProps}\n        style={{ zIndex }}\n        data-bottom-sheet={bottomSheet}\n        data-animation={transitionEnabled ? animationState : undefined}\n        onClick={handleClick}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <ModalBackgroundContext.Provider value={bgRef.current}>\n          <Dialog\n            ref={ref}\n            {...modalProps}\n            size={size}\n            bottomSheet={bottomSheet}\n            className={className}\n          >\n            <ModalContext.Provider\n              value={{\n                titleProps: {},\n                title,\n                close: onClose,\n                showDismiss,\n                bottomSheet,\n              }}\n            >\n              {children}\n              {isDismissable === true && (\n                <ModalCloseButton\n                  aria-label={closeButtonAriaLabel}\n                  onClick={onClose}\n                />\n              )}\n            </ModalContext.Provider>\n          </Dialog>\n        </ModalBackgroundContext.Provider>\n      </div>\n    </Overlay>\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nexport function ModalCloseButton(props: Omit<IconButtonProps, 'icon'>) {\n  return (\n    <IconButton\n      className=\"charcoal-modal-close-button\"\n      size=\"S\"\n      icon=\"24/Close\"\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAyCA,MAAMgC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAMC,QAAQhC,WAAuC,SAASkC,WAC5D,EAAEf,UAAUE,SAASU,iBAAiBF,iBAAiB,GAAGM,SAC1DC,UACA;CACA,MAAM,EACJd,OACAC,OAAO,KACPC,cAAc,OACda,eACAX,SACAC,WACAF,SAAS,OACTG,uBAAuB,YACrBO;CAEJ,MAAMG,MAAMvB,aAA6BqB,SAAS;CAElD,MAAM,EAAEG,YAAYC,kBAAkB7B,wBACpC;EACE,GAAGwB;EACHM,2BACEJ,kBAAkBK,UAAaL,kBAAkB;EACpD,EACD;EACEX;EACAD;EACD,EACDa,IACD;CAED,MAAMK,YAAY/B,gBAAgB,IAAIgC,YAAY;CAClD,MAAMC,oBAAoBF,YAAYnB,gBAAgB;CACtD,MAAMsB,cAAc,CAACH,YAAYnB,gBAAgB;CAEjD,MAAMuB,QAAQ7C,QAAM8C,OAAuB,KAAK;CAEhD,MAAM,EAAEC,WAAWC,gBAAgBC,wBACjCtC,sBAAsBY,QAAQoB,mBAAmBE,OAAOT,IAAI;CAE9D,MAAMc,cAAclD,QAAMmD,aACvBC,MAAoD;EACnD,IAAIA,EAAEE,kBAAkBF,EAAEG,QACxB/B,SAAS;IAGb,CAACA,QACH,CAAC;CAED,IAAI,CAACuB,WACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAA0BpB;YACxB,oBAAC,OAAD;GACE,WAAU;GACV,KAAKkB;GACL,GAAIP;GACJ,OAAO,EAAEnB,QAAQ;GACjB,qBAAmBG;GACnB,kBAAgBqB,oBAAoBK,iBAAiBR;GACrD,SAASU;GACT,iBAAiBD;aAEjB,oBAAC,uBAAuB,UAAxB;IAAiC,OAAOJ,MAAMW;cAC5C,oBAAC,QAAD;KACOpB;KACL,GAAIC;KACEhB;KACOC;KACFG;eAEX,qBAAC,aAAa,UAAd;MACE,OAAO;OACLgC,YAAY,EAAE;OACdrC;OACAsC,OAAOlC;OACPoB;OACAtB;OACD;gBAPH,CASGL,UACAkB,kBAAkB,QACjB,oBAAC,kBAAD;OACE,cAAYT;OACZ,SAASF;OAEZ,EACoB;;KACjB;IACuB;GAC9B;EACG;EAEZ;AAEF,oBAAezB,KAAK+B,MAAM;AAE1B,MAAa6B,eAAe3D,QAAM4D,cAS/B;CACDH,YAAY,EAAE;CACdrC,OAAO;CACPsC,OAAOlB;CACPI,aAAa;CACbtB,aAAa;CACd,CAAC;AAEF,SAAgBwC,iBAAiB7B,OAAsC;CACrE,OACE,oBAAC,YAAD;EACE,WAAU;EACV,MAAK;EACL,MAAK;EACL,MAAK;EACL,GAAIA;EACJ"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport type { AriaDialogProps } from 'react-aria/useDialog'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport {\n  CharcoalModalOverlayProps,\n  useCharcoalModalOverlay,\n  useWindowWidth,\n} from './useCustomModalOverlay'\nimport { useTransitionPresence } from './useTransitionPresence'\n\nimport './index.css'\n\nimport { Overlay } from 'react-aria/Overlay'\nimport { useObjectRef } from 'react-aria/useObjectRef'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = CharcoalModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n    closeButtonAriaLabel?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external,\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n    closeButtonAriaLabel = 'Close',\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref,\n  )\n\n  const isMobile = (useWindowWidth() ?? Infinity) < 744\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const bgRef = React.useRef<HTMLDivElement>(null)\n\n  const { isPresent, animationState, handleTransitionEnd } =\n    useTransitionPresence(isOpen, transitionEnabled, bgRef, ref)\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose],\n  )\n\n  if (!isPresent) {\n    return null\n  }\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div\n        className=\"charcoal-modal-background\"\n        ref={bgRef}\n        {...underlayProps}\n        style={{ zIndex }}\n        data-bottom-sheet={bottomSheet}\n        data-animation={transitionEnabled ? animationState : undefined}\n        onClick={handleClick}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <ModalBackgroundContext.Provider value={bgRef.current}>\n          <Dialog\n            ref={ref}\n            {...modalProps}\n            size={size}\n            bottomSheet={bottomSheet}\n            className={className}\n          >\n            <ModalContext.Provider\n              value={{\n                titleProps: {},\n                title,\n                close: onClose,\n                showDismiss,\n                bottomSheet,\n              }}\n            >\n              {children}\n              {isDismissable === true && (\n                <ModalCloseButton\n                  aria-label={closeButtonAriaLabel}\n                  onClick={onClose}\n                />\n              )}\n            </ModalContext.Provider>\n          </Dialog>\n        </ModalBackgroundContext.Provider>\n      </div>\n    </Overlay>\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nexport function ModalCloseButton(props: Omit<IconButtonProps, 'icon'>) {\n  return (\n    <IconButton\n      className=\"charcoal-modal-close-button\"\n      size=\"S\"\n      icon=\"24/Close\"\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAyCA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAM,QAAQ,WAAuC,SAAS,WAC5D,EAAE,UAAU,SAAS,iBAAiB,iBAAiB,GAAG,SAC1D,UACA;CACA,MAAM,EACJ,OACA,OAAO,KACP,cAAc,OACd,eACA,SACA,WACA,SAAS,OACT,uBAAuB,YACrB;CAEJ,MAAM,MAAM,aAA6B,QAAQ;CAEjD,MAAM,EAAE,YAAY,kBAAkB,wBACpC;EACE,GAAG;EACH,2BACE,kBAAkB,UAAa,kBAAkB;CACrD,GACA;EACE;EACA;CACF,GACA,GACF;CAEA,MAAM,YAAY,eAAe,KAAK,YAAY;CAClD,MAAM,oBAAoB,YAAY,gBAAgB;CACtD,MAAM,cAAc,CAAC,YAAY,gBAAgB;CAEjD,MAAM,QAAQ,QAAM,OAAuB,IAAI;CAE/C,MAAM,EAAE,WAAW,gBAAgB,wBACjC,sBAAsB,QAAQ,mBAAmB,OAAO,GAAG;CAE7D,MAAM,cAAc,QAAM,aACvB,MAAoD;EACnD,IAAI,EAAE,kBAAkB,EAAE,QACxB,QAAQ;CAEZ,GACA,CAAC,OAAO,CACV;CAEA,IAAI,CAAC,WACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAA0B;YACxB,oBAAC,OAAD;GACE,WAAU;GACV,KAAK;GACL,GAAI;GACJ,OAAO,EAAE,OAAO;GAChB,qBAAmB;GACnB,kBAAgB,oBAAoB,iBAAiB;GACrD,SAAS;GACT,iBAAiB;aAEjB,oBAAC,uBAAuB,UAAxB;IAAiC,OAAO,MAAM;cAC5C,oBAAC,QAAD;KACO;KACL,GAAI;KACE;KACO;KACF;eAEX,qBAAC,aAAa,UAAd;MACE,OAAO;OACL,YAAY,CAAC;OACb;OACA,OAAO;OACP;OACA;MACF;gBAPF,CASG,UACA,kBAAkB,QACjB,oBAAC,kBAAD;OACE,cAAY;OACZ,SAAS;MAAQ,EAGA;;IACjB;GACuB;EAC9B;CACE;AAEb,CAAC;AAED,oBAAe,KAAK,KAAK;AAEzB,MAAa,eAAe,QAAM,cAS/B;CACD,YAAY,CAAC;CACb,OAAO;CACP,OAAO;CACP,aAAa;CACb,aAAa;AACf,CAAC;AAED,SAAgB,iBAAiB,OAAsC;CACrE,OACE,oBAAC,YAAD;EACE,WAAU;EACV,MAAK;EACL,MAAK;EACL,MAAK;EACL,GAAI;CAAM;AAGhB"}

package/dist/components/Modal/useCustomModalOverlay.cjs

@@ -2,7 +2,7 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_usePreventScroll = require('../DropdownSelector/Popover/usePreventScroll.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_aria_private_overlays_ariaHideOutside = require("react-aria/private/overlays/ariaHideOutside");
 let react_aria_private_overlays_Overlay = require("react-aria/private/overlays/Overlay");
 let react_aria_useOverlay = require("react-aria/useOverlay");

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

@@ -1 +1 @@
-{"version":3,"file":"useCustomModalOverlay.cjs","names":["React","ariaHideOutside","useOverlayFocusContain","usePreventScroll","AriaModalOverlayProps","ModalOverlayAria","useOverlay","CharcoalModalOverlayProps","overflowClip","useCharcoalModalOverlay","props","state","isOpen","onClose","ref","RefObject","HTMLElement","overlayProps","underlayProps","shouldCloseOnInteractOutside","document","body","useEffect","current","modalProps","isWindowDefined","window","useWindowWidth","width","setWidth","useState","innerWidth","handleResize","addEventListener","removeEventListener"],"sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'\nimport { useOverlayFocusContain } from 'react-aria/private/overlays/Overlay'\nimport { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'\n\nimport {\n  AriaModalOverlayProps,\n  ModalOverlayAria,\n} from 'react-aria/useModalOverlay'\nimport { useOverlay } from 'react-aria/useOverlay'\n\n/**\n * We want to enable scrolling on the modal background,\n * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.\n * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.\n */\nexport type CharcoalModalOverlayProps = AriaModalOverlayProps & {\n  overflowClip?: boolean\n}\nexport function useCharcoalModalOverlay(\n  props: CharcoalModalOverlayProps,\n  state: { isOpen: boolean; onClose: () => void },\n  ref: React.RefObject<HTMLElement | null>,\n): ModalOverlayAria {\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      ...props,\n      isOpen: state.isOpen,\n      onClose: state.onClose,\n      shouldCloseOnInteractOutside: () => false,\n    },\n    ref,\n  )\n\n  usePreventScroll(\n    typeof document !== 'undefined' ? document.body : null,\n    state.isOpen,\n    props.overflowClip,\n  )\n\n  useOverlayFocusContain()\n\n  React.useEffect(() => {\n    if (state.isOpen && ref.current) {\n      return ariaHideOutside([ref.current])\n    }\n  }, [state.isOpen, ref])\n\n  return {\n    modalProps: overlayProps,\n    underlayProps,\n  }\n}\n\nfunction isWindowDefined() {\n  return typeof window !== 'undefined'\n}\n\nexport function useWindowWidth() {\n  const [width, setWidth] = React.useState(\n    isWindowDefined() ? window.innerWidth : null,\n  )\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWidth(window.innerWidth)\n    }\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  })\n  return width\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgBS,wBACdC,OACAC,OACAG,KACkB;CAClB,MAAM,EAAEG,cAAcC,wDACpB;EACE,GAAGR;EACHE,QAAQD,MAAMC;EACdC,SAASF,MAAME;EACfM,oCAAoC;EACrC,EACDL,IACD;CAEDX,0CACE,OAAOiB,aAAa,cAAcA,SAASC,OAAO,MAClDV,MAAMC,QACNF,MAAMF,aACP;CAEDN,iEAAwB;CAExBF,MAAMsB,gBAAgB;EACpB,IAAIX,MAAMC,UAAUE,IAAIS,SACtB,wEAAuB,CAACT,IAAIS,QAAQ,CAAC;IAEtC,CAACZ,MAAMC,QAAQE,IAAI,CAAC;CAEvB,OAAO;EACLU,YAAYP;EACZC;EACD;;AAGH,SAASO,kBAAkB;CACzB,OAAO,OAAOC,WAAW;;AAG3B,SAAgBC,iBAAiB;CAC/B,MAAM,CAACC,OAAOC,YAAY7B,MAAM8B,SAC9BL,iBAAiB,GAAGC,OAAOK,aAAa,KACzC;CACD/B,MAAMsB,gBAAgB;EACpB,MAAMU,qBAAqB;GACzBH,SAASH,OAAOK,WAAW;;EAE7BL,OAAOO,iBAAiB,UAAUD,aAAa;EAC/C,aAAa;GACXN,OAAOQ,oBAAoB,UAAUF,aAAa;;GAEpD;CACF,OAAOJ"}
+{"version":3,"file":"useCustomModalOverlay.cjs","names":[],"sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'\nimport { useOverlayFocusContain } from 'react-aria/private/overlays/Overlay'\nimport { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'\n\nimport {\n  AriaModalOverlayProps,\n  ModalOverlayAria,\n} from 'react-aria/useModalOverlay'\nimport { useOverlay } from 'react-aria/useOverlay'\n\n/**\n * We want to enable scrolling on the modal background,\n * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.\n * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.\n */\nexport type CharcoalModalOverlayProps = AriaModalOverlayProps & {\n  overflowClip?: boolean\n}\nexport function useCharcoalModalOverlay(\n  props: CharcoalModalOverlayProps,\n  state: { isOpen: boolean; onClose: () => void },\n  ref: React.RefObject<HTMLElement | null>,\n): ModalOverlayAria {\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      ...props,\n      isOpen: state.isOpen,\n      onClose: state.onClose,\n      shouldCloseOnInteractOutside: () => false,\n    },\n    ref,\n  )\n\n  usePreventScroll(\n    typeof document !== 'undefined' ? document.body : null,\n    state.isOpen,\n    props.overflowClip,\n  )\n\n  useOverlayFocusContain()\n\n  React.useEffect(() => {\n    if (state.isOpen && ref.current) {\n      return ariaHideOutside([ref.current])\n    }\n  }, [state.isOpen, ref])\n\n  return {\n    modalProps: overlayProps,\n    underlayProps,\n  }\n}\n\nfunction isWindowDefined() {\n  return typeof window !== 'undefined'\n}\n\nexport function useWindowWidth() {\n  const [width, setWidth] = React.useState(\n    isWindowDefined() ? window.innerWidth : null,\n  )\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWidth(window.innerWidth)\n    }\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  })\n  return width\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,wBACd,OACA,OACA,KACkB;CAClB,MAAM,EAAE,cAAc,wDACpB;EACE,GAAG;EACH,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,oCAAoC;CACtC,GACA,GACF;CAEA,0CACE,OAAO,aAAa,cAAc,SAAS,OAAO,MAClD,MAAM,QACN,MAAM,YACR;CAEA,gEAAuB;CAEvB,MAAM,gBAAgB;EACpB,IAAI,MAAM,UAAU,IAAI,SACtB,wEAAuB,CAAC,IAAI,OAAO,CAAC;CAExC,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC;CAEtB,OAAO;EACL,YAAY;EACZ;CACF;AACF;AAEA,SAAS,kBAAkB;CACzB,OAAO,OAAO,WAAW;AAC3B;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,CAAC,OAAO,YAAY,MAAM,SAC9B,gBAAgB,IAAI,OAAO,aAAa,IAC1C;CACA,MAAM,gBAAgB;EACpB,MAAM,qBAAqB;GACzB,SAAS,OAAO,UAAU;EAC5B;EACA,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;EACnD;CACF,CAAC;CACD,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"useCustomModalOverlay.js","names":["React","ariaHideOutside","useOverlayFocusContain","usePreventScroll","AriaModalOverlayProps","ModalOverlayAria","useOverlay","CharcoalModalOverlayProps","overflowClip","useCharcoalModalOverlay","props","state","isOpen","onClose","ref","RefObject","HTMLElement","overlayProps","underlayProps","shouldCloseOnInteractOutside","document","body","useEffect","current","modalProps","isWindowDefined","window","useWindowWidth","width","setWidth","useState","innerWidth","handleResize","addEventListener","removeEventListener"],"sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'\nimport { useOverlayFocusContain } from 'react-aria/private/overlays/Overlay'\nimport { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'\n\nimport {\n  AriaModalOverlayProps,\n  ModalOverlayAria,\n} from 'react-aria/useModalOverlay'\nimport { useOverlay } from 'react-aria/useOverlay'\n\n/**\n * We want to enable scrolling on the modal background,\n * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.\n * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.\n */\nexport type CharcoalModalOverlayProps = AriaModalOverlayProps & {\n  overflowClip?: boolean\n}\nexport function useCharcoalModalOverlay(\n  props: CharcoalModalOverlayProps,\n  state: { isOpen: boolean; onClose: () => void },\n  ref: React.RefObject<HTMLElement | null>,\n): ModalOverlayAria {\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      ...props,\n      isOpen: state.isOpen,\n      onClose: state.onClose,\n      shouldCloseOnInteractOutside: () => false,\n    },\n    ref,\n  )\n\n  usePreventScroll(\n    typeof document !== 'undefined' ? document.body : null,\n    state.isOpen,\n    props.overflowClip,\n  )\n\n  useOverlayFocusContain()\n\n  React.useEffect(() => {\n    if (state.isOpen && ref.current) {\n      return ariaHideOutside([ref.current])\n    }\n  }, [state.isOpen, ref])\n\n  return {\n    modalProps: overlayProps,\n    underlayProps,\n  }\n}\n\nfunction isWindowDefined() {\n  return typeof window !== 'undefined'\n}\n\nexport function useWindowWidth() {\n  const [width, setWidth] = React.useState(\n    isWindowDefined() ? window.innerWidth : null,\n  )\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWidth(window.innerWidth)\n    }\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  })\n  return width\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgBS,wBACdC,OACAC,OACAG,KACkB;CAClB,MAAM,EAAEG,cAAcC,kBAAkBZ,WACtC;EACE,GAAGI;EACHE,QAAQD,MAAMC;EACdC,SAASF,MAAME;EACfM,oCAAoC;EACrC,EACDL,IACD;CAEDX,iBACE,OAAOiB,aAAa,cAAcA,SAASC,OAAO,MAClDV,MAAMC,QACNF,MAAMF,aACP;CAEDN,wBAAwB;CAExBF,QAAMsB,gBAAgB;EACpB,IAAIX,MAAMC,UAAUE,IAAIS,SACtB,OAAOtB,gBAAgB,CAACa,IAAIS,QAAQ,CAAC;IAEtC,CAACZ,MAAMC,QAAQE,IAAI,CAAC;CAEvB,OAAO;EACLU,YAAYP;EACZC;EACD;;AAGH,SAASO,kBAAkB;CACzB,OAAO,OAAOC,WAAW;;AAG3B,SAAgBC,iBAAiB;CAC/B,MAAM,CAACC,OAAOC,YAAY7B,QAAM8B,SAC9BL,iBAAiB,GAAGC,OAAOK,aAAa,KACzC;CACD/B,QAAMsB,gBAAgB;EACpB,MAAMU,qBAAqB;GACzBH,SAASH,OAAOK,WAAW;;EAE7BL,OAAOO,iBAAiB,UAAUD,aAAa;EAC/C,aAAa;GACXN,OAAOQ,oBAAoB,UAAUF,aAAa;;GAEpD;CACF,OAAOJ"}
+{"version":3,"file":"useCustomModalOverlay.js","names":[],"sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'\nimport { useOverlayFocusContain } from 'react-aria/private/overlays/Overlay'\nimport { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'\n\nimport {\n  AriaModalOverlayProps,\n  ModalOverlayAria,\n} from 'react-aria/useModalOverlay'\nimport { useOverlay } from 'react-aria/useOverlay'\n\n/**\n * We want to enable scrolling on the modal background,\n * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.\n * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.\n */\nexport type CharcoalModalOverlayProps = AriaModalOverlayProps & {\n  overflowClip?: boolean\n}\nexport function useCharcoalModalOverlay(\n  props: CharcoalModalOverlayProps,\n  state: { isOpen: boolean; onClose: () => void },\n  ref: React.RefObject<HTMLElement | null>,\n): ModalOverlayAria {\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      ...props,\n      isOpen: state.isOpen,\n      onClose: state.onClose,\n      shouldCloseOnInteractOutside: () => false,\n    },\n    ref,\n  )\n\n  usePreventScroll(\n    typeof document !== 'undefined' ? document.body : null,\n    state.isOpen,\n    props.overflowClip,\n  )\n\n  useOverlayFocusContain()\n\n  React.useEffect(() => {\n    if (state.isOpen && ref.current) {\n      return ariaHideOutside([ref.current])\n    }\n  }, [state.isOpen, ref])\n\n  return {\n    modalProps: overlayProps,\n    underlayProps,\n  }\n}\n\nfunction isWindowDefined() {\n  return typeof window !== 'undefined'\n}\n\nexport function useWindowWidth() {\n  const [width, setWidth] = React.useState(\n    isWindowDefined() ? window.innerWidth : null,\n  )\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWidth(window.innerWidth)\n    }\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  })\n  return width\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,wBACd,OACA,OACA,KACkB;CAClB,MAAM,EAAE,cAAc,kBAAkB,WACtC;EACE,GAAG;EACH,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,oCAAoC;CACtC,GACA,GACF;CAEA,iBACE,OAAO,aAAa,cAAc,SAAS,OAAO,MAClD,MAAM,QACN,MAAM,YACR;CAEA,uBAAuB;CAEvB,QAAM,gBAAgB;EACpB,IAAI,MAAM,UAAU,IAAI,SACtB,OAAO,gBAAgB,CAAC,IAAI,OAAO,CAAC;CAExC,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC;CAEtB,OAAO;EACL,YAAY;EACZ;CACF;AACF;AAEA,SAAS,kBAAkB;CACzB,OAAO,OAAO,WAAW;AAC3B;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,CAAC,OAAO,YAAY,QAAM,SAC9B,gBAAgB,IAAI,OAAO,aAAa,IAC1C;CACA,QAAM,gBAAgB;EACpB,MAAM,qBAAqB;GACzB,SAAS,OAAO,UAAU;EAC5B;EACA,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;EACnD;CACF,CAAC;CACD,OAAO;AACT"}

package/dist/components/Modal/useTransitionPresence.cjs

@@ -1,10 +1,8 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_useIsomorphicLayoutEffect = require('../../_lib/useIsomorphicLayoutEffect.cjs');
 let react = require("react");
 
 //#region src/components/Modal/useTransitionPresence.ts
-const MODAL_TRANSITION_DURATION_MS = 400;
 /**
 * アニメーション終了時の状態遷移。
 * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない
@@ -39,7 +37,7 @@ function useTransitionPresence(isOpen, enabled, backgroundRef, dialogRef) {
 	const isAnimating = state === "entering" || state === "exiting";
 	(0, react.useEffect)(() => {
 		if (!isAnimating) return;
-		const timer = setTimeout(() => setState(settle), 400 + 100);
+		const timer = setTimeout(() => setState(settle), 500);
 		return () => clearTimeout(timer);
 	}, [isAnimating, state]);
 	const handleTransitionEnd = (0, react.useCallback)((e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"useTransitionPresence.cjs","names":["useCallback","useEffect","useState","RefObject","TransitionEvent","useIsomorphicLayoutEffect","MODAL_TRANSITION_DURATION_MS","AnimationState","settle","state","useTransitionPresence","isOpen","enabled","backgroundRef","HTMLElement","dialogRef","setState","current","offsetHeight","s","isAnimating","timer","setTimeout","clearTimeout","handleTransitionEnd","e","isDialogSlide","target","propertyName","isPresent","animationState"],"sources":["../../../src/components/Modal/useTransitionPresence.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  RefObject,\n  TransitionEvent,\n} from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\n\n// index.css の transition-duration と一致させること\nexport const MODAL_TRANSITION_DURATION_MS = 400\n\ntype AnimationState = 'exited' | 'entering' | 'entered' | 'exiting'\n\n/**\n * アニメーション終了時の状態遷移。\n * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない\n */\nfunction settle(state: AnimationState): AnimationState {\n  if (state === 'entering') return 'entered'\n  if (state === 'exiting') return 'exited'\n  return state\n}\n\n/**\n * CSS transition によるモーダルの開閉アニメーションを管理する。\n * exit アニメーションが終わるまで DOM をマウントしたままにする\n *\n * @param isOpen モーダルを開くべきか\n * @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）\n * @param backgroundRef 背景要素。マウント直後の layout flush に使う\n * @param dialogRef transform をアニメーションさせる要素（ダイアログ）\n */\nexport function useTransitionPresence(\n  isOpen: boolean,\n  enabled: boolean,\n  backgroundRef: RefObject<HTMLElement>,\n  dialogRef: RefObject<HTMLElement>,\n) {\n  // 開いた状態で初回マウントされた場合もアニメーションさせるため常に 'exited' から始める。\n  // enabled でない場合は下の layout effect が描画前に 'entered' へ進める\n  const [state, setState] = useState<AnimationState>('exited')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled) {\n      setState(isOpen ? 'entered' : 'exited')\n    } else if (isOpen) {\n      // 閉じた状態のスタイルを確定させ、enter の transition が発火するようにする。\n      // dialogRef は子コンポーネントの passive effect で張られるためこの時点では\n      // まだ古い/null のことがあり、同じ commit で同期的に張られる背景要素を読む\n      if (backgroundRef.current) void backgroundRef.current.offsetHeight\n      setState((s) => (s === 'exited' || s === 'exiting' ? 'entering' : s))\n    } else {\n      setState((s) => (s === 'exited' ? s : 'exiting'))\n    }\n  }, [isOpen, enabled, backgroundRef])\n\n  // safety net: transitionend が来なくても（トランジションのキャンセル、\n  // reduced-motion、バックグラウンドタブ等）モーダルが永遠に残らないようにする\n  const isAnimating = state === 'entering' || state === 'exiting'\n  useEffect(() => {\n    if (!isAnimating) return\n    // transitionend と同時刻に発火して競合しないよう少し遅らせる\n    const timer = setTimeout(\n      () => setState(settle),\n      MODAL_TRANSITION_DURATION_MS + 100,\n    )\n    return () => clearTimeout(timer)\n  }, [isAnimating, state])\n\n  // 背景 div に付ける。ダイアログの transform の transitionend だけが\n  // 開閉アニメーションの終了を意味する（他のトランジションもバブルしてくるため絞り込む）。\n  // propertyName は index.css がアニメーションさせるプロパティと一致させること。\n  // なお enter 完了直後の close では、完了済み enter の transitionend が\n  // 'exiting' へ遷移した後に届いて exit アニメーションが省略される可能性が\n  // 理論上あるが、サブフレーム幅のレースで実害は見た目のみのため許容している\n  const handleTransitionEnd = useCallback(\n    (e: TransitionEvent<HTMLElement>) => {\n      const isDialogSlide =\n        e.target === dialogRef.current && e.propertyName === 'transform'\n      if (isDialogSlide) {\n        setState(settle)\n      }\n    },\n    [dialogRef],\n  )\n\n  return {\n    // enabled でないときは isOpen だけで即座にマウント・アンマウントする\n    // （state 経由にすると close 時に開いたツリーを丸ごと 1 回余計に描画する）\n    isPresent: enabled ? isOpen || state !== 'exited' : isOpen,\n    animationState: state,\n    handleTransitionEnd,\n  }\n}\n"],"mappings":";;;;;;AAUA,MAAaM,+BAA+B;;;;;AAQ5C,SAASE,OAAOC,OAAuC;CACrD,IAAIA,UAAU,YAAY,OAAO;CACjC,IAAIA,UAAU,WAAW,OAAO;CAChC,OAAOA;;;;;;;;;;;AAYT,SAAgBC,sBACdC,QACAC,SACAC,eACAE,WACA;CAGA,MAAM,CAACN,OAAOO,gCAAqC,SAAS;CAE5DX,kEAAgC;EAC9B,IAAI,CAACO,SACHI,SAASL,SAAS,YAAY,SAAS;OAClC,IAAIA,QAAQ;GAIjB,IAAIE,cAAcI,SAAS,AAAKJ,cAAcI,QAAQC;GACtDF,UAAUG,MAAOA,MAAM,YAAYA,MAAM,YAAY,aAAaA,EAAG;SAErEH,UAAUG,MAAOA,MAAM,WAAWA,IAAI,UAAW;IAElD;EAACR;EAAQC;EAASC;EAAc,CAAC;CAIpC,MAAMO,cAAcX,UAAU,cAAcA,UAAU;CACtDR,2BAAgB;EACd,IAAI,CAACmB,aAAa;EAElB,MAAMC,QAAQC,iBACNN,SAASR,OAAO,QACS,IAChC;EACD,aAAae,aAAaF,MAAM;IAC/B,CAACD,aAAaX,MAAM,CAAC;CAQxB,MAAMe,8CACHC,MAAoC;EAGnC,IADEA,EAAEE,WAAWZ,UAAUE,WAAWQ,EAAEG,iBAAiB,aAErDZ,SAASR,OAAO;IAGpB,CAACO,UACH,CAAC;CAED,OAAO;EAGLc,WAAWjB,UAAUD,UAAUF,UAAU,WAAWE;EACpDmB,gBAAgBrB;EAChBe;EACD"}
+{"version":3,"file":"useTransitionPresence.cjs","names":[],"sources":["../../../src/components/Modal/useTransitionPresence.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  RefObject,\n  TransitionEvent,\n} from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\n\n// index.css の transition-duration と一致させること\nexport const MODAL_TRANSITION_DURATION_MS = 400\n\ntype AnimationState = 'exited' | 'entering' | 'entered' | 'exiting'\n\n/**\n * アニメーション終了時の状態遷移。\n * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない\n */\nfunction settle(state: AnimationState): AnimationState {\n  if (state === 'entering') return 'entered'\n  if (state === 'exiting') return 'exited'\n  return state\n}\n\n/**\n * CSS transition によるモーダルの開閉アニメーションを管理する。\n * exit アニメーションが終わるまで DOM をマウントしたままにする\n *\n * @param isOpen モーダルを開くべきか\n * @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）\n * @param backgroundRef 背景要素。マウント直後の layout flush に使う\n * @param dialogRef transform をアニメーションさせる要素（ダイアログ）\n */\nexport function useTransitionPresence(\n  isOpen: boolean,\n  enabled: boolean,\n  backgroundRef: RefObject<HTMLElement>,\n  dialogRef: RefObject<HTMLElement>,\n) {\n  // 開いた状態で初回マウントされた場合もアニメーションさせるため常に 'exited' から始める。\n  // enabled でない場合は下の layout effect が描画前に 'entered' へ進める\n  const [state, setState] = useState<AnimationState>('exited')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled) {\n      setState(isOpen ? 'entered' : 'exited')\n    } else if (isOpen) {\n      // 閉じた状態のスタイルを確定させ、enter の transition が発火するようにする。\n      // dialogRef は子コンポーネントの passive effect で張られるためこの時点では\n      // まだ古い/null のことがあり、同じ commit で同期的に張られる背景要素を読む\n      if (backgroundRef.current) void backgroundRef.current.offsetHeight\n      setState((s) => (s === 'exited' || s === 'exiting' ? 'entering' : s))\n    } else {\n      setState((s) => (s === 'exited' ? s : 'exiting'))\n    }\n  }, [isOpen, enabled, backgroundRef])\n\n  // safety net: transitionend が来なくても（トランジションのキャンセル、\n  // reduced-motion、バックグラウンドタブ等）モーダルが永遠に残らないようにする\n  const isAnimating = state === 'entering' || state === 'exiting'\n  useEffect(() => {\n    if (!isAnimating) return\n    // transitionend と同時刻に発火して競合しないよう少し遅らせる\n    const timer = setTimeout(\n      () => setState(settle),\n      MODAL_TRANSITION_DURATION_MS + 100,\n    )\n    return () => clearTimeout(timer)\n  }, [isAnimating, state])\n\n  // 背景 div に付ける。ダイアログの transform の transitionend だけが\n  // 開閉アニメーションの終了を意味する（他のトランジションもバブルしてくるため絞り込む）。\n  // propertyName は index.css がアニメーションさせるプロパティと一致させること。\n  // なお enter 完了直後の close では、完了済み enter の transitionend が\n  // 'exiting' へ遷移した後に届いて exit アニメーションが省略される可能性が\n  // 理論上あるが、サブフレーム幅のレースで実害は見た目のみのため許容している\n  const handleTransitionEnd = useCallback(\n    (e: TransitionEvent<HTMLElement>) => {\n      const isDialogSlide =\n        e.target === dialogRef.current && e.propertyName === 'transform'\n      if (isDialogSlide) {\n        setState(settle)\n      }\n    },\n    [dialogRef],\n  )\n\n  return {\n    // enabled でないときは isOpen だけで即座にマウント・アンマウントする\n    // （state 経由にすると close 時に開いたツリーを丸ごと 1 回余計に描画する）\n    isPresent: enabled ? isOpen || state !== 'exited' : isOpen,\n    animationState: state,\n    handleTransitionEnd,\n  }\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAS,OAAO,OAAuC;CACrD,IAAI,UAAU,YAAY,OAAO;CACjC,IAAI,UAAU,WAAW,OAAO;CAChC,OAAO;AACT;;;;;;;;;;AAWA,SAAgB,sBACd,QACA,SACA,eACA,WACA;CAGA,MAAM,CAAC,OAAO,gCAAqC,QAAQ;CAE3D,kEAAgC;EAC9B,IAAI,CAAC,SACH,SAAS,SAAS,YAAY,QAAQ;OACjC,IAAI,QAAQ;GAIjB,IAAI,cAAc,SAAS,AAAK,cAAc,QAAQ;GACtD,UAAU,MAAO,MAAM,YAAY,MAAM,YAAY,aAAa,CAAE;EACtE,OACE,UAAU,MAAO,MAAM,WAAW,IAAI,SAAU;CAEpD,GAAG;EAAC;EAAQ;EAAS;CAAa,CAAC;CAInC,MAAM,cAAc,UAAU,cAAc,UAAU;CACtD,2BAAgB;EACd,IAAI,CAAC,aAAa;EAElB,MAAM,QAAQ,iBACN,SAAS,MAAM,GACrB,GACF;EACA,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,aAAa,KAAK,CAAC;CAQvB,MAAM,8CACH,MAAoC;EAGnC,IADE,EAAE,WAAW,UAAU,WAAW,EAAE,iBAAiB,aAErD,SAAS,MAAM;CAEnB,GACA,CAAC,SAAS,CACZ;CAEA,OAAO;EAGL,WAAW,UAAU,UAAU,UAAU,WAAW;EACpD,gBAAgB;EAChB;CACF;AACF"}

package/dist/components/Modal/useTransitionPresence.js

@@ -3,7 +3,6 @@ import { useIsomorphicLayoutEffect } from "../../_lib/useIsomorphicLayoutEffect.
 import { useCallback, useEffect, useState } from "react";
 
 //#region src/components/Modal/useTransitionPresence.ts
-const MODAL_TRANSITION_DURATION_MS = 400;
 /**
 * アニメーション終了時の状態遷移。
 * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない
@@ -38,7 +37,7 @@ function useTransitionPresence(isOpen, enabled, backgroundRef, dialogRef) {
 	const isAnimating = state === "entering" || state === "exiting";
 	useEffect(() => {
 		if (!isAnimating) return;
-		const timer = setTimeout(() => setState(settle), 400 + 100);
+		const timer = setTimeout(() => setState(settle), 500);
 		return () => clearTimeout(timer);
 	}, [isAnimating, state]);
 	const handleTransitionEnd = useCallback((e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"useTransitionPresence.js","names":["useCallback","useEffect","useState","RefObject","TransitionEvent","useIsomorphicLayoutEffect","MODAL_TRANSITION_DURATION_MS","AnimationState","settle","state","useTransitionPresence","isOpen","enabled","backgroundRef","HTMLElement","dialogRef","setState","current","offsetHeight","s","isAnimating","timer","setTimeout","clearTimeout","handleTransitionEnd","e","isDialogSlide","target","propertyName","isPresent","animationState"],"sources":["../../../src/components/Modal/useTransitionPresence.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  RefObject,\n  TransitionEvent,\n} from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\n\n// index.css の transition-duration と一致させること\nexport const MODAL_TRANSITION_DURATION_MS = 400\n\ntype AnimationState = 'exited' | 'entering' | 'entered' | 'exiting'\n\n/**\n * アニメーション終了時の状態遷移。\n * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない\n */\nfunction settle(state: AnimationState): AnimationState {\n  if (state === 'entering') return 'entered'\n  if (state === 'exiting') return 'exited'\n  return state\n}\n\n/**\n * CSS transition によるモーダルの開閉アニメーションを管理する。\n * exit アニメーションが終わるまで DOM をマウントしたままにする\n *\n * @param isOpen モーダルを開くべきか\n * @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）\n * @param backgroundRef 背景要素。マウント直後の layout flush に使う\n * @param dialogRef transform をアニメーションさせる要素（ダイアログ）\n */\nexport function useTransitionPresence(\n  isOpen: boolean,\n  enabled: boolean,\n  backgroundRef: RefObject<HTMLElement>,\n  dialogRef: RefObject<HTMLElement>,\n) {\n  // 開いた状態で初回マウントされた場合もアニメーションさせるため常に 'exited' から始める。\n  // enabled でない場合は下の layout effect が描画前に 'entered' へ進める\n  const [state, setState] = useState<AnimationState>('exited')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled) {\n      setState(isOpen ? 'entered' : 'exited')\n    } else if (isOpen) {\n      // 閉じた状態のスタイルを確定させ、enter の transition が発火するようにする。\n      // dialogRef は子コンポーネントの passive effect で張られるためこの時点では\n      // まだ古い/null のことがあり、同じ commit で同期的に張られる背景要素を読む\n      if (backgroundRef.current) void backgroundRef.current.offsetHeight\n      setState((s) => (s === 'exited' || s === 'exiting' ? 'entering' : s))\n    } else {\n      setState((s) => (s === 'exited' ? s : 'exiting'))\n    }\n  }, [isOpen, enabled, backgroundRef])\n\n  // safety net: transitionend が来なくても（トランジションのキャンセル、\n  // reduced-motion、バックグラウンドタブ等）モーダルが永遠に残らないようにする\n  const isAnimating = state === 'entering' || state === 'exiting'\n  useEffect(() => {\n    if (!isAnimating) return\n    // transitionend と同時刻に発火して競合しないよう少し遅らせる\n    const timer = setTimeout(\n      () => setState(settle),\n      MODAL_TRANSITION_DURATION_MS + 100,\n    )\n    return () => clearTimeout(timer)\n  }, [isAnimating, state])\n\n  // 背景 div に付ける。ダイアログの transform の transitionend だけが\n  // 開閉アニメーションの終了を意味する（他のトランジションもバブルしてくるため絞り込む）。\n  // propertyName は index.css がアニメーションさせるプロパティと一致させること。\n  // なお enter 完了直後の close では、完了済み enter の transitionend が\n  // 'exiting' へ遷移した後に届いて exit アニメーションが省略される可能性が\n  // 理論上あるが、サブフレーム幅のレースで実害は見た目のみのため許容している\n  const handleTransitionEnd = useCallback(\n    (e: TransitionEvent<HTMLElement>) => {\n      const isDialogSlide =\n        e.target === dialogRef.current && e.propertyName === 'transform'\n      if (isDialogSlide) {\n        setState(settle)\n      }\n    },\n    [dialogRef],\n  )\n\n  return {\n    // enabled でないときは isOpen だけで即座にマウント・アンマウントする\n    // （state 経由にすると close 時に開いたツリーを丸ごと 1 回余計に描画する）\n    isPresent: enabled ? isOpen || state !== 'exited' : isOpen,\n    animationState: state,\n    handleTransitionEnd,\n  }\n}\n"],"mappings":";;;;;AAUA,MAAaM,+BAA+B;;;;;AAQ5C,SAASE,OAAOC,OAAuC;CACrD,IAAIA,UAAU,YAAY,OAAO;CACjC,IAAIA,UAAU,WAAW,OAAO;CAChC,OAAOA;;;;;;;;;;;AAYT,SAAgBC,sBACdC,QACAC,SACAC,eACAE,WACA;CAGA,MAAM,CAACN,OAAOO,YAAYd,SAAyB,SAAS;CAE5DG,gCAAgC;EAC9B,IAAI,CAACO,SACHI,SAASL,SAAS,YAAY,SAAS;OAClC,IAAIA,QAAQ;GAIjB,IAAIE,cAAcI,SAAS,AAAKJ,cAAcI,QAAQC;GACtDF,UAAUG,MAAOA,MAAM,YAAYA,MAAM,YAAY,aAAaA,EAAG;SAErEH,UAAUG,MAAOA,MAAM,WAAWA,IAAI,UAAW;IAElD;EAACR;EAAQC;EAASC;EAAc,CAAC;CAIpC,MAAMO,cAAcX,UAAU,cAAcA,UAAU;CACtDR,gBAAgB;EACd,IAAI,CAACmB,aAAa;EAElB,MAAMC,QAAQC,iBACNN,SAASR,OAAO,QACS,IAChC;EACD,aAAae,aAAaF,MAAM;IAC/B,CAACD,aAAaX,MAAM,CAAC;CAQxB,MAAMe,sBAAsBxB,aACzByB,MAAoC;EAGnC,IADEA,EAAEE,WAAWZ,UAAUE,WAAWQ,EAAEG,iBAAiB,aAErDZ,SAASR,OAAO;IAGpB,CAACO,UACH,CAAC;CAED,OAAO;EAGLc,WAAWjB,UAAUD,UAAUF,UAAU,WAAWE;EACpDmB,gBAAgBrB;EAChBe;EACD"}
+{"version":3,"file":"useTransitionPresence.js","names":[],"sources":["../../../src/components/Modal/useTransitionPresence.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  RefObject,\n  TransitionEvent,\n} from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\n\n// index.css の transition-duration と一致させること\nexport const MODAL_TRANSITION_DURATION_MS = 400\n\ntype AnimationState = 'exited' | 'entering' | 'entered' | 'exiting'\n\n/**\n * アニメーション終了時の状態遷移。\n * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない\n */\nfunction settle(state: AnimationState): AnimationState {\n  if (state === 'entering') return 'entered'\n  if (state === 'exiting') return 'exited'\n  return state\n}\n\n/**\n * CSS transition によるモーダルの開閉アニメーションを管理する。\n * exit アニメーションが終わるまで DOM をマウントしたままにする\n *\n * @param isOpen モーダルを開くべきか\n * @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）\n * @param backgroundRef 背景要素。マウント直後の layout flush に使う\n * @param dialogRef transform をアニメーションさせる要素（ダイアログ）\n */\nexport function useTransitionPresence(\n  isOpen: boolean,\n  enabled: boolean,\n  backgroundRef: RefObject<HTMLElement>,\n  dialogRef: RefObject<HTMLElement>,\n) {\n  // 開いた状態で初回マウントされた場合もアニメーションさせるため常に 'exited' から始める。\n  // enabled でない場合は下の layout effect が描画前に 'entered' へ進める\n  const [state, setState] = useState<AnimationState>('exited')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled) {\n      setState(isOpen ? 'entered' : 'exited')\n    } else if (isOpen) {\n      // 閉じた状態のスタイルを確定させ、enter の transition が発火するようにする。\n      // dialogRef は子コンポーネントの passive effect で張られるためこの時点では\n      // まだ古い/null のことがあり、同じ commit で同期的に張られる背景要素を読む\n      if (backgroundRef.current) void backgroundRef.current.offsetHeight\n      setState((s) => (s === 'exited' || s === 'exiting' ? 'entering' : s))\n    } else {\n      setState((s) => (s === 'exited' ? s : 'exiting'))\n    }\n  }, [isOpen, enabled, backgroundRef])\n\n  // safety net: transitionend が来なくても（トランジションのキャンセル、\n  // reduced-motion、バックグラウンドタブ等）モーダルが永遠に残らないようにする\n  const isAnimating = state === 'entering' || state === 'exiting'\n  useEffect(() => {\n    if (!isAnimating) return\n    // transitionend と同時刻に発火して競合しないよう少し遅らせる\n    const timer = setTimeout(\n      () => setState(settle),\n      MODAL_TRANSITION_DURATION_MS + 100,\n    )\n    return () => clearTimeout(timer)\n  }, [isAnimating, state])\n\n  // 背景 div に付ける。ダイアログの transform の transitionend だけが\n  // 開閉アニメーションの終了を意味する（他のトランジションもバブルしてくるため絞り込む）。\n  // propertyName は index.css がアニメーションさせるプロパティと一致させること。\n  // なお enter 完了直後の close では、完了済み enter の transitionend が\n  // 'exiting' へ遷移した後に届いて exit アニメーションが省略される可能性が\n  // 理論上あるが、サブフレーム幅のレースで実害は見た目のみのため許容している\n  const handleTransitionEnd = useCallback(\n    (e: TransitionEvent<HTMLElement>) => {\n      const isDialogSlide =\n        e.target === dialogRef.current && e.propertyName === 'transform'\n      if (isDialogSlide) {\n        setState(settle)\n      }\n    },\n    [dialogRef],\n  )\n\n  return {\n    // enabled でないときは isOpen だけで即座にマウント・アンマウントする\n    // （state 経由にすると close 時に開いたツリーを丸ごと 1 回余計に描画する）\n    isPresent: enabled ? isOpen || state !== 'exited' : isOpen,\n    animationState: state,\n    handleTransitionEnd,\n  }\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAS,OAAO,OAAuC;CACrD,IAAI,UAAU,YAAY,OAAO;CACjC,IAAI,UAAU,WAAW,OAAO;CAChC,OAAO;AACT;;;;;;;;;;AAWA,SAAgB,sBACd,QACA,SACA,eACA,WACA;CAGA,MAAM,CAAC,OAAO,YAAY,SAAyB,QAAQ;CAE3D,gCAAgC;EAC9B,IAAI,CAAC,SACH,SAAS,SAAS,YAAY,QAAQ;OACjC,IAAI,QAAQ;GAIjB,IAAI,cAAc,SAAS,AAAK,cAAc,QAAQ;GACtD,UAAU,MAAO,MAAM,YAAY,MAAM,YAAY,aAAa,CAAE;EACtE,OACE,UAAU,MAAO,MAAM,WAAW,IAAI,SAAU;CAEpD,GAAG;EAAC;EAAQ;EAAS;CAAa,CAAC;CAInC,MAAM,cAAc,UAAU,cAAc,UAAU;CACtD,gBAAgB;EACd,IAAI,CAAC,aAAa;EAElB,MAAM,QAAQ,iBACN,SAAS,MAAM,GACrB,GACF;EACA,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,aAAa,KAAK,CAAC;CAQvB,MAAM,sBAAsB,aACzB,MAAoC;EAGnC,IADE,EAAE,WAAW,UAAU,WAAW,EAAE,iBAAiB,aAErD,SAAS,MAAM;CAEnB,GACA,CAAC,SAAS,CACZ;CAEA,OAAO;EAGL,WAAW,UAAU,UAAU,UAAU,WAAW;EACpD,gBAAgB;EAChB;CACF;AACF"}

package/dist/components/MultiSelect/context.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 
 //#region src/components/MultiSelect/context.ts

package/dist/components/MultiSelect/context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.cjs","names":["createContext","MultiSelectGroupContext","name","selected","disabled","readonly","invalid","onChange","value","undefined","Error"],"sources":["../../../src/components/MultiSelect/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\ntype MultiSelectGroupContext = {\n  name: string\n  selected: string[]\n  disabled: boolean\n  readonly: boolean\n  invalid: boolean\n  onChange: ({ value, selected }: { value: string; selected: boolean }) => void\n}\n\nexport const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({\n  name: undefined as never,\n  selected: [],\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  onChange() {\n    throw new Error(\n      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?',\n    )\n  },\n})\n"],"mappings":";;;;;AAWA,MAAaC,mDAAiE;CAC5EC,MAAMO;CACNN,UAAU,EAAE;CACZC,UAAU;CACVC,UAAU;CACVC,SAAS;CACTC,WAAW;EACT,MAAM,IAAIG,MACR,gGACD;;CAEJ,CAAC"}
+{"version":3,"file":"context.cjs","names":[],"sources":["../../../src/components/MultiSelect/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\ntype MultiSelectGroupContext = {\n  name: string\n  selected: string[]\n  disabled: boolean\n  readonly: boolean\n  invalid: boolean\n  onChange: ({ value, selected }: { value: string; selected: boolean }) => void\n}\n\nexport const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({\n  name: undefined as never,\n  selected: [],\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  onChange() {\n    throw new Error(\n      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?',\n    )\n  },\n})\n"],"mappings":";;;;AAWA,MAAa,mDAAiE;CAC5E,MAAM;CACN,UAAU,CAAA;CACV,UAAU;CACV,UAAU;CACV,SAAS;CACT,WAAW;EACT,MAAM,IAAI,MACR,+FACF;CACF;AACF,CAAC"}

package/dist/components/MultiSelect/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["createContext","MultiSelectGroupContext","name","selected","disabled","readonly","invalid","onChange","value","undefined","Error"],"sources":["../../../src/components/MultiSelect/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\ntype MultiSelectGroupContext = {\n  name: string\n  selected: string[]\n  disabled: boolean\n  readonly: boolean\n  invalid: boolean\n  onChange: ({ value, selected }: { value: string; selected: boolean }) => void\n}\n\nexport const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({\n  name: undefined as never,\n  selected: [],\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  onChange() {\n    throw new Error(\n      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?',\n    )\n  },\n})\n"],"mappings":";;;;AAWA,MAAaC,0BAA0BD,cAAuC;CAC5EE,MAAMO;CACNN,UAAU,EAAE;CACZC,UAAU;CACVC,UAAU;CACVC,SAAS;CACTC,WAAW;EACT,MAAM,IAAIG,MACR,gGACD;;CAEJ,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/MultiSelect/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\ntype MultiSelectGroupContext = {\n  name: string\n  selected: string[]\n  disabled: boolean\n  readonly: boolean\n  invalid: boolean\n  onChange: ({ value, selected }: { value: string; selected: boolean }) => void\n}\n\nexport const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({\n  name: undefined as never,\n  selected: [],\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  onChange() {\n    throw new Error(\n      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?',\n    )\n  },\n})\n"],"mappings":";;;;AAWA,MAAa,0BAA0B,cAAuC;CAC5E,MAAM;CACN,UAAU,CAAA;CACV,UAAU;CACV,UAAU;CACV,SAAS;CACT,WAAW;EACT,MAAM,IAAI,MACR,+FACF;CACF;AACF,CAAC"}

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

@@ -13,7 +13,7 @@ export type MultiSelectProps = React.PropsWithChildren<{
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     value: string;
     disabled?: boolean;
-    variant?: "default" | "overlay";
+    variant?: 'default' | 'overlay';
     className?: string;
     onChange?: (payload: {
         value: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACnE,CAAC,CAAA;;WALO,MAAM;eACF,OAAO;cACR,SAAS,GAAG,SAAS;gBACnB,MAAM;eACP,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;;;;AA0EpE,wBAAgC;AAEhC,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC,CAAA;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAQ,GACT,EAAE,qBAAqB,2CAuCvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACnE,CAAC,CAAA;;WALO,MAAM;eACF,OAAO;cACR,SAAS,GAAG,SAAS;gBACnB,MAAM;eACP,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;;;;;AA4EpE,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC,CAAA;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAQ,GACT,EAAE,qBAAqB,2CAuCvB"}

package/dist/components/MultiSelect/index2.cjs

@@ -5,10 +5,10 @@ const require_context = require('./context.cjs');
 const require_index = require('../Icon/index.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 warning = require("warning");
-warning = require_runtime.__toESM(warning);
+warning = require_runtime.__toESM(warning, 1);
 
 //#region src/components/MultiSelect/index.tsx
 const MultiSelect = (0, react.forwardRef)(function MultiSelectInner({ value, disabled = false, onChange, variant = "default", className, children }, ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["ChangeEvent","useCallback","useContext","forwardRef","memo","React","warning","MultiSelectGroupContext","Icon","useClassNames","MultiSelectProps","PropsWithChildren","value","disabled","variant","className","onChange","payload","selected","MultiSelect","HTMLInputElement","MultiSelectInner","children","ref","name","parentDisabled","readonly","invalid","parentOnChange","undefined","isSelected","includes","isDisabled","handleChange","event","currentTarget","checked","classNames","Boolean","MultiSelectGroupProps","style","CSSProperties","label","MultiSelectGroup","index","indexOf","slice","Array","from","Set"],"sources":["../../../src/components/MultiSelect/index.tsx"],"sourcesContent":["import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport warning from 'warning'\n\nimport { MultiSelectGroupContext } from './context'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type MultiSelectProps = React.PropsWithChildren<{\n  value: string\n  disabled?: boolean\n  variant?: 'default' | 'overlay'\n  className?: string\n  onChange?: (payload: { value: string; selected: boolean }) => void\n}>\n\nconst MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(\n  function MultiSelectInner(\n    {\n      value,\n      disabled = false,\n      onChange,\n      variant = 'default',\n      className,\n      children,\n    },\n    ref,\n  ) {\n    const {\n      name,\n      selected,\n      disabled: parentDisabled,\n      readonly,\n      invalid,\n      onChange: parentOnChange,\n    } = useContext(MultiSelectGroupContext)\n\n    warning(\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      name !== undefined,\n      `\"name\" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`,\n    )\n\n    const isSelected = selected.includes(value)\n    const isDisabled = disabled || parentDisabled || readonly\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (!(event.currentTarget instanceof HTMLInputElement)) {\n          return\n        }\n        if (onChange) onChange({ value, selected: event.currentTarget.checked })\n        parentOnChange({ value, selected: event.currentTarget.checked })\n      },\n      [onChange, parentOnChange, value],\n    )\n    const classNames = useClassNames('charcoal-multi-select', className)\n    return (\n      <label aria-disabled={isDisabled} className={classNames}>\n        <input\n          className=\"charcoal-multi-select-input\"\n          name={name}\n          value={value}\n          type=\"checkbox\"\n          checked={isSelected}\n          disabled={isDisabled}\n          onChange={handleChange}\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          ref={ref}\n        />\n        <div\n          className=\"charcoal-multi-select-overlay\"\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          aria-hidden\n        >\n          <Icon name=\"24/Check\" fixedSize={16} />\n        </div>\n        {Boolean(children) && (\n          <div className=\"charcoal-multi-select-label\">{children}</div>\n        )}\n      </label>\n    )\n  },\n)\n\nexport default memo(MultiSelect)\n\nexport type MultiSelectGroupProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n  name: string\n  label: string\n  selected: string[]\n  onChange: (selected: string[]) => void\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n}>\n\nexport function MultiSelectGroup({\n  className,\n  style,\n  name,\n  label,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  children,\n}: MultiSelectGroupProps) {\n  const handleChange = useCallback(\n    (payload: { value: string; selected: boolean }) => {\n      const index = selected.indexOf(payload.value)\n\n      if (payload.selected) {\n        if (index < 0) {\n          onChange([...selected, payload.value])\n        }\n      } else {\n        if (index >= 0) {\n          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])\n        }\n      }\n    },\n    [onChange, selected],\n  )\n\n  return (\n    <MultiSelectGroupContext.Provider\n      value={{\n        name,\n        selected: Array.from(new Set(selected)),\n        disabled,\n        readonly,\n        invalid,\n        onChange: handleChange,\n      }}\n    >\n      <div\n        className={className}\n        style={style}\n        aria-label={label}\n        data-testid=\"SelectGroup\"\n      >\n        {children}\n      </div>\n    </MultiSelectGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAMmB,oCACJ,SAASE,iBACP,EACET,OACAC,WAAW,OACXG,UACAF,UAAU,WACVC,WACAO,YAEFC,KACA;CACA,MAAM,EACJC,MACAN,UACAL,UAAUY,gBACVC,UACAC,SACAX,UAAUY,yCACGrB,wCAAwB;CAEvCD,qBAEEkB,SAASK,QACT,iGACD;CAED,MAAMC,aAAaZ,SAASa,SAASnB,MAAM;CAC3C,MAAMoB,aAAanB,YAAYY,kBAAkBC;CAEjD,MAAMO,uCACHC,UAAyC;EACxC,IAAI,EAAEA,MAAMC,yBAAyBf,mBACnC;EAEF,IAAIJ,UAAUA,SAAS;GAAEJ;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;EACxER,eAAe;GAAEhB;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;IAElE;EAACpB;EAAUY;EAAgBhB;EAC7B,CAAC;CAED,OACE,4CAAC,SAAD;EAAO,iBAAeoB;EAAY,WAFjBvB,oCAAc,yBAAyBM,UAED;YAAvD;GACE,2CAAC,SAAD;IACE,WAAU;IACJS;IACCZ;IACP,MAAK;IACL,SAASkB;IACT,UAAUE;IACV,UAAUC;IACV,gBAAcnB,YAAY;IAC1B,gBAAca;IACTJ;IAAI;GAEX,2CAAC,OAAD;IACE,WAAU;IACV,gBAAcT,YAAY;IAC1B,gBAAca;IACd;cAEA,2CAAC,uBAAD;KAAM,MAAK;KAAW,WAAW;KAAG;IACjC;GACJW,QAAQhB,SAAS,IAChB,2CAAC,OAAD;IAAK,WAAU;IAA+BA;IAC/C;GACK;;EAGb;AAED,0CAAoBH,YAAY;AAchC,SAAgBwB,iBAAiB,EAC/B5B,WACAyB,OACAhB,MACAkB,OACAxB,UACAF,UACAH,WAAW,OACXa,WAAW,OACXC,UAAU,OACVL,YACwB;CACxB,MAAMW,uCACHhB,YAAkD;EACjD,MAAM2B,QAAQ1B,SAAS2B,QAAQ5B,QAAQL,MAAM;EAE7C,IAAIK,QAAQC,UACV;OAAI0B,QAAQ,GACV5B,SAAS,CAAC,GAAGE,UAAUD,QAAQL,MAAM,CAAC;SAGxC,IAAIgC,SAAS,GACX5B,SAAS,CAAC,GAAGE,SAAS4B,MAAM,GAAGF,MAAM,EAAE,GAAG1B,SAAS4B,MAAMF,QAAQ,EAAE,CAAC,CAAC;IAI3E,CAAC5B,UAAUE,SACb,CAAC;CAED,OACE,2CAAC,wCAAwB,UAAzB;EACE,OAAO;GACLM;GACAN,UAAU6B,MAAMC,KAAK,IAAIC,IAAI/B,SAAS,CAAC;GACvCL;GACAa;GACAC;GACAX,UAAUiB;GACX;YAED,2CAAC,OAAD;GACalB;GACJyB;GACP,cAAYE;GACZ,eAAY;GAEXpB;GACE;EAC4B"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/MultiSelect/index.tsx"],"sourcesContent":["import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport warning from 'warning'\n\nimport { MultiSelectGroupContext } from './context'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type MultiSelectProps = React.PropsWithChildren<{\n  value: string\n  disabled?: boolean\n  variant?: 'default' | 'overlay'\n  className?: string\n  onChange?: (payload: { value: string; selected: boolean }) => void\n}>\n\nconst MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(\n  function MultiSelectInner(\n    {\n      value,\n      disabled = false,\n      onChange,\n      variant = 'default',\n      className,\n      children,\n    },\n    ref,\n  ) {\n    const {\n      name,\n      selected,\n      disabled: parentDisabled,\n      readonly,\n      invalid,\n      onChange: parentOnChange,\n    } = useContext(MultiSelectGroupContext)\n\n    warning(\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      name !== undefined,\n      `\"name\" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`,\n    )\n\n    const isSelected = selected.includes(value)\n    const isDisabled = disabled || parentDisabled || readonly\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (!(event.currentTarget instanceof HTMLInputElement)) {\n          return\n        }\n        if (onChange) onChange({ value, selected: event.currentTarget.checked })\n        parentOnChange({ value, selected: event.currentTarget.checked })\n      },\n      [onChange, parentOnChange, value],\n    )\n    const classNames = useClassNames('charcoal-multi-select', className)\n    return (\n      <label aria-disabled={isDisabled} className={classNames}>\n        <input\n          className=\"charcoal-multi-select-input\"\n          name={name}\n          value={value}\n          type=\"checkbox\"\n          checked={isSelected}\n          disabled={isDisabled}\n          onChange={handleChange}\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          ref={ref}\n        />\n        <div\n          className=\"charcoal-multi-select-overlay\"\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          aria-hidden\n        >\n          <Icon name=\"24/Check\" fixedSize={16} />\n        </div>\n        {Boolean(children) && (\n          <div className=\"charcoal-multi-select-label\">{children}</div>\n        )}\n      </label>\n    )\n  },\n)\n\nexport default memo(MultiSelect)\n\nexport type MultiSelectGroupProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n  name: string\n  label: string\n  selected: string[]\n  onChange: (selected: string[]) => void\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n}>\n\nexport function MultiSelectGroup({\n  className,\n  style,\n  name,\n  label,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  children,\n}: MultiSelectGroupProps) {\n  const handleChange = useCallback(\n    (payload: { value: string; selected: boolean }) => {\n      const index = selected.indexOf(payload.value)\n\n      if (payload.selected) {\n        if (index < 0) {\n          onChange([...selected, payload.value])\n        }\n      } else {\n        if (index >= 0) {\n          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])\n        }\n      }\n    },\n    [onChange, selected],\n  )\n\n  return (\n    <MultiSelectGroupContext.Provider\n      value={{\n        name,\n        selected: Array.from(new Set(selected)),\n        disabled,\n        readonly,\n        invalid,\n        onChange: handleChange,\n      }}\n    >\n      <div\n        className={className}\n        style={style}\n        aria-label={label}\n        data-testid=\"SelectGroup\"\n      >\n        {children}\n      </div>\n    </MultiSelectGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,oCACJ,SAAS,iBACP,EACE,OACA,WAAW,OACX,UACA,UAAU,WACV,WACA,YAEF,KACA;CACA,MAAM,EACJ,MACA,UACA,UAAU,gBACV,UACA,SACA,UAAU,yCACG,uCAAuB;CAEtC,qBAEE,SAAS,QACT,gGACF;CAEA,MAAM,aAAa,SAAS,SAAS,KAAK;CAC1C,MAAM,aAAa,YAAY,kBAAkB;CAEjD,MAAM,uCACH,UAAyC;EACxC,IAAI,EAAE,MAAM,yBAAyB,mBACnC;EAEF,IAAI,UAAU,SAAS;GAAE;GAAO,UAAU,MAAM,cAAc;EAAQ,CAAC;EACvE,eAAe;GAAE;GAAO,UAAU,MAAM,cAAc;EAAQ,CAAC;CACjE,GACA;EAAC;EAAU;EAAgB;CAAK,CAClC;CAEA,OACE,4CAAC,SAAD;EAAO,iBAAe;EAAY,WAFjB,oCAAc,yBAAyB,SAEX;YAA7C;GACE,2CAAC,SAAD;IACE,WAAU;IACJ;IACC;IACP,MAAK;IACL,SAAS;IACT,UAAU;IACV,UAAU;IACV,gBAAc,YAAY;IAC1B,gBAAc;IACT;GAAI;GAEX,2CAAC,OAAD;IACE,WAAU;IACV,gBAAc,YAAY;IAC1B,gBAAc;IACd;cAEA,2CAAC,uBAAD;KAAM,MAAK;KAAW,WAAW;IAAG;GACjC;GACJ,QAAQ,QAAQ,KACf,2CAAC,OAAD;IAAK,WAAU;IAA+B;GAAc;EAEzD;;AAEX,CACF;AAEA,0CAAoB,WAAW;AAc/B,SAAgB,iBAAiB,EAC/B,WACA,OACA,MACA,OACA,UACA,UACA,WAAW,OACX,WAAW,OACX,UAAU,OACV,YACwB;CACxB,MAAM,uCACH,YAAkD;EACjD,MAAM,QAAQ,SAAS,QAAQ,QAAQ,KAAK;EAE5C,IAAI,QAAQ,UACV;OAAI,QAAQ,GACV,SAAS,CAAC,GAAG,UAAU,QAAQ,KAAK,CAAC;EACvC,OAEA,IAAI,SAAS,GACX,SAAS,CAAC,GAAG,SAAS,MAAM,GAAG,KAAK,GAAG,GAAG,SAAS,MAAM,QAAQ,CAAC,CAAC,CAAC;CAG1E,GACA,CAAC,UAAU,QAAQ,CACrB;CAEA,OACE,2CAAC,wCAAwB,UAAzB;EACE,OAAO;GACL;GACA,UAAU,MAAM,KAAK,IAAI,IAAI,QAAQ,CAAC;GACtC;GACA;GACA;GACA,UAAU;EACZ;YAEA,2CAAC,OAAD;GACa;GACJ;GACP,cAAY;GACZ,eAAY;GAEX;EACE;CAC2B;AAEtC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["ChangeEvent","useCallback","useContext","forwardRef","memo","React","warning","MultiSelectGroupContext","Icon","useClassNames","MultiSelectProps","PropsWithChildren","value","disabled","variant","className","onChange","payload","selected","MultiSelect","HTMLInputElement","MultiSelectInner","children","ref","name","parentDisabled","readonly","invalid","parentOnChange","undefined","isSelected","includes","isDisabled","handleChange","event","currentTarget","checked","classNames","Boolean","MultiSelectGroupProps","style","CSSProperties","label","MultiSelectGroup","index","indexOf","slice","Array","from","Set"],"sources":["../../../src/components/MultiSelect/index.tsx"],"sourcesContent":["import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport warning from 'warning'\n\nimport { MultiSelectGroupContext } from './context'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type MultiSelectProps = React.PropsWithChildren<{\n  value: string\n  disabled?: boolean\n  variant?: 'default' | 'overlay'\n  className?: string\n  onChange?: (payload: { value: string; selected: boolean }) => void\n}>\n\nconst MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(\n  function MultiSelectInner(\n    {\n      value,\n      disabled = false,\n      onChange,\n      variant = 'default',\n      className,\n      children,\n    },\n    ref,\n  ) {\n    const {\n      name,\n      selected,\n      disabled: parentDisabled,\n      readonly,\n      invalid,\n      onChange: parentOnChange,\n    } = useContext(MultiSelectGroupContext)\n\n    warning(\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      name !== undefined,\n      `\"name\" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`,\n    )\n\n    const isSelected = selected.includes(value)\n    const isDisabled = disabled || parentDisabled || readonly\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (!(event.currentTarget instanceof HTMLInputElement)) {\n          return\n        }\n        if (onChange) onChange({ value, selected: event.currentTarget.checked })\n        parentOnChange({ value, selected: event.currentTarget.checked })\n      },\n      [onChange, parentOnChange, value],\n    )\n    const classNames = useClassNames('charcoal-multi-select', className)\n    return (\n      <label aria-disabled={isDisabled} className={classNames}>\n        <input\n          className=\"charcoal-multi-select-input\"\n          name={name}\n          value={value}\n          type=\"checkbox\"\n          checked={isSelected}\n          disabled={isDisabled}\n          onChange={handleChange}\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          ref={ref}\n        />\n        <div\n          className=\"charcoal-multi-select-overlay\"\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          aria-hidden\n        >\n          <Icon name=\"24/Check\" fixedSize={16} />\n        </div>\n        {Boolean(children) && (\n          <div className=\"charcoal-multi-select-label\">{children}</div>\n        )}\n      </label>\n    )\n  },\n)\n\nexport default memo(MultiSelect)\n\nexport type MultiSelectGroupProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n  name: string\n  label: string\n  selected: string[]\n  onChange: (selected: string[]) => void\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n}>\n\nexport function MultiSelectGroup({\n  className,\n  style,\n  name,\n  label,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  children,\n}: MultiSelectGroupProps) {\n  const handleChange = useCallback(\n    (payload: { value: string; selected: boolean }) => {\n      const index = selected.indexOf(payload.value)\n\n      if (payload.selected) {\n        if (index < 0) {\n          onChange([...selected, payload.value])\n        }\n      } else {\n        if (index >= 0) {\n          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])\n        }\n      }\n    },\n    [onChange, selected],\n  )\n\n  return (\n    <MultiSelectGroupContext.Provider\n      value={{\n        name,\n        selected: Array.from(new Set(selected)),\n        disabled,\n        readonly,\n        invalid,\n        onChange: handleChange,\n      }}\n    >\n      <div\n        className={className}\n        style={style}\n        aria-label={label}\n        data-testid=\"SelectGroup\"\n      >\n        {children}\n      </div>\n    </MultiSelectGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAMmB,cAAchB,WAClB,SAASkB,iBACP,EACET,OACAC,WAAW,OACXG,UACAF,UAAU,WACVC,WACAO,YAEFC,KACA;CACA,MAAM,EACJC,MACAN,UACAL,UAAUY,gBACVC,UACAC,SACAX,UAAUY,mBACR1B,WAAWK,wBAAwB;CAEvCD,QAEEkB,SAASK,QACT,iGACD;CAED,MAAMC,aAAaZ,SAASa,SAASnB,MAAM;CAC3C,MAAMoB,aAAanB,YAAYY,kBAAkBC;CAEjD,MAAMO,eAAehC,aAClBiC,UAAyC;EACxC,IAAI,EAAEA,MAAMC,yBAAyBf,mBACnC;EAEF,IAAIJ,UAAUA,SAAS;GAAEJ;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;EACxER,eAAe;GAAEhB;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;IAElE;EAACpB;EAAUY;EAAgBhB;EAC7B,CAAC;CAED,OACE,qBAAC,SAAD;EAAO,iBAAeoB;EAAY,WAFjBvB,cAAc,yBAAyBM,UAED;YAAvD;GACE,oBAAC,SAAD;IACE,WAAU;IACJS;IACCZ;IACP,MAAK;IACL,SAASkB;IACT,UAAUE;IACV,UAAUC;IACV,gBAAcnB,YAAY;IAC1B,gBAAca;IACTJ;IAAI;GAEX,oBAAC,OAAD;IACE,WAAU;IACV,gBAAcT,YAAY;IAC1B,gBAAca;IACd;cAEA,oBAAC,MAAD;KAAM,MAAK;KAAW,WAAW;KAAG;IACjC;GACJW,QAAQhB,SAAS,IAChB,oBAAC,OAAD;IAAK,WAAU;IAA+BA;IAC/C;GACK;;EAGb;AAED,0BAAelB,KAAKe,YAAY;AAchC,SAAgBwB,iBAAiB,EAC/B5B,WACAyB,OACAhB,MACAkB,OACAxB,UACAF,UACAH,WAAW,OACXa,WAAW,OACXC,UAAU,OACVL,YACwB;CACxB,MAAMW,eAAehC,aAClBgB,YAAkD;EACjD,MAAM2B,QAAQ1B,SAAS2B,QAAQ5B,QAAQL,MAAM;EAE7C,IAAIK,QAAQC,UACV;OAAI0B,QAAQ,GACV5B,SAAS,CAAC,GAAGE,UAAUD,QAAQL,MAAM,CAAC;SAGxC,IAAIgC,SAAS,GACX5B,SAAS,CAAC,GAAGE,SAAS4B,MAAM,GAAGF,MAAM,EAAE,GAAG1B,SAAS4B,MAAMF,QAAQ,EAAE,CAAC,CAAC;IAI3E,CAAC5B,UAAUE,SACb,CAAC;CAED,OACE,oBAAC,wBAAwB,UAAzB;EACE,OAAO;GACLM;GACAN,UAAU6B,MAAMC,KAAK,IAAIC,IAAI/B,SAAS,CAAC;GACvCL;GACAa;GACAC;GACAX,UAAUiB;GACX;YAED,oBAAC,OAAD;GACalB;GACJyB;GACP,cAAYE;GACZ,eAAY;GAEXpB;GACE;EAC4B"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/MultiSelect/index.tsx"],"sourcesContent":["import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport warning from 'warning'\n\nimport { MultiSelectGroupContext } from './context'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type MultiSelectProps = React.PropsWithChildren<{\n  value: string\n  disabled?: boolean\n  variant?: 'default' | 'overlay'\n  className?: string\n  onChange?: (payload: { value: string; selected: boolean }) => void\n}>\n\nconst MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(\n  function MultiSelectInner(\n    {\n      value,\n      disabled = false,\n      onChange,\n      variant = 'default',\n      className,\n      children,\n    },\n    ref,\n  ) {\n    const {\n      name,\n      selected,\n      disabled: parentDisabled,\n      readonly,\n      invalid,\n      onChange: parentOnChange,\n    } = useContext(MultiSelectGroupContext)\n\n    warning(\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      name !== undefined,\n      `\"name\" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`,\n    )\n\n    const isSelected = selected.includes(value)\n    const isDisabled = disabled || parentDisabled || readonly\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (!(event.currentTarget instanceof HTMLInputElement)) {\n          return\n        }\n        if (onChange) onChange({ value, selected: event.currentTarget.checked })\n        parentOnChange({ value, selected: event.currentTarget.checked })\n      },\n      [onChange, parentOnChange, value],\n    )\n    const classNames = useClassNames('charcoal-multi-select', className)\n    return (\n      <label aria-disabled={isDisabled} className={classNames}>\n        <input\n          className=\"charcoal-multi-select-input\"\n          name={name}\n          value={value}\n          type=\"checkbox\"\n          checked={isSelected}\n          disabled={isDisabled}\n          onChange={handleChange}\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          ref={ref}\n        />\n        <div\n          className=\"charcoal-multi-select-overlay\"\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          aria-hidden\n        >\n          <Icon name=\"24/Check\" fixedSize={16} />\n        </div>\n        {Boolean(children) && (\n          <div className=\"charcoal-multi-select-label\">{children}</div>\n        )}\n      </label>\n    )\n  },\n)\n\nexport default memo(MultiSelect)\n\nexport type MultiSelectGroupProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n  name: string\n  label: string\n  selected: string[]\n  onChange: (selected: string[]) => void\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n}>\n\nexport function MultiSelectGroup({\n  className,\n  style,\n  name,\n  label,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  children,\n}: MultiSelectGroupProps) {\n  const handleChange = useCallback(\n    (payload: { value: string; selected: boolean }) => {\n      const index = selected.indexOf(payload.value)\n\n      if (payload.selected) {\n        if (index < 0) {\n          onChange([...selected, payload.value])\n        }\n      } else {\n        if (index >= 0) {\n          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])\n        }\n      }\n    },\n    [onChange, selected],\n  )\n\n  return (\n    <MultiSelectGroupContext.Provider\n      value={{\n        name,\n        selected: Array.from(new Set(selected)),\n        disabled,\n        readonly,\n        invalid,\n        onChange: handleChange,\n      }}\n    >\n      <div\n        className={className}\n        style={style}\n        aria-label={label}\n        data-testid=\"SelectGroup\"\n      >\n        {children}\n      </div>\n    </MultiSelectGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,cAAc,WAClB,SAAS,iBACP,EACE,OACA,WAAW,OACX,UACA,UAAU,WACV,WACA,YAEF,KACA;CACA,MAAM,EACJ,MACA,UACA,UAAU,gBACV,UACA,SACA,UAAU,mBACR,WAAW,uBAAuB;CAEtC,QAEE,SAAS,QACT,gGACF;CAEA,MAAM,aAAa,SAAS,SAAS,KAAK;CAC1C,MAAM,aAAa,YAAY,kBAAkB;CAEjD,MAAM,eAAe,aAClB,UAAyC;EACxC,IAAI,EAAE,MAAM,yBAAyB,mBACnC;EAEF,IAAI,UAAU,SAAS;GAAE;GAAO,UAAU,MAAM,cAAc;EAAQ,CAAC;EACvE,eAAe;GAAE;GAAO,UAAU,MAAM,cAAc;EAAQ,CAAC;CACjE,GACA;EAAC;EAAU;EAAgB;CAAK,CAClC;CAEA,OACE,qBAAC,SAAD;EAAO,iBAAe;EAAY,WAFjB,cAAc,yBAAyB,SAEX;YAA7C;GACE,oBAAC,SAAD;IACE,WAAU;IACJ;IACC;IACP,MAAK;IACL,SAAS;IACT,UAAU;IACV,UAAU;IACV,gBAAc,YAAY;IAC1B,gBAAc;IACT;GAAI;GAEX,oBAAC,OAAD;IACE,WAAU;IACV,gBAAc,YAAY;IAC1B,gBAAc;IACd;cAEA,oBAAC,MAAD;KAAM,MAAK;KAAW,WAAW;IAAG;GACjC;GACJ,QAAQ,QAAQ,KACf,oBAAC,OAAD;IAAK,WAAU;IAA+B;GAAc;EAEzD;;AAEX,CACF;AAEA,0BAAe,KAAK,WAAW;AAc/B,SAAgB,iBAAiB,EAC/B,WACA,OACA,MACA,OACA,UACA,UACA,WAAW,OACX,WAAW,OACX,UAAU,OACV,YACwB;CACxB,MAAM,eAAe,aAClB,YAAkD;EACjD,MAAM,QAAQ,SAAS,QAAQ,QAAQ,KAAK;EAE5C,IAAI,QAAQ,UACV;OAAI,QAAQ,GACV,SAAS,CAAC,GAAG,UAAU,QAAQ,KAAK,CAAC;EACvC,OAEA,IAAI,SAAS,GACX,SAAS,CAAC,GAAG,SAAS,MAAM,GAAG,KAAK,GAAG,GAAG,SAAS,MAAM,QAAQ,CAAC,CAAC,CAAC;CAG1E,GACA,CAAC,UAAU,QAAQ,CACrB;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EACE,OAAO;GACL;GACA,UAAU,MAAM,KAAK,IAAI,IAAI,QAAQ,CAAC;GACtC;GACA;GACA;GACA,UAAU;EACZ;YAEA,oBAAC,OAAD;GACa;GACJ;GACP,cAAY;GACZ,eAAY;GAEX;EACE;CAC2B;AAEtC"}

package/dist/components/Pagination/PaginationContext.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 
 //#region src/components/Pagination/PaginationContext.ts

package/dist/components/Pagination/PaginationContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContext.cjs","names":["createContext","useContext","Size","PageRangeDisplayed","LinkComponentProps","href","className","children","React","ReactNode","PaginationContextValue","ElementType","page","pageCount","size","isLinkMode","makeUrl","LinkComponent","T","makeClickHandler","value","linkProps","Omit","ComponentPropsWithoutRef","PaginationContext","usePaginationContext","context","Error"],"sources":["../../../src/components/Pagination/PaginationContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport type Size = 'S' | 'M'\n\nexport type PageRangeDisplayed = 5 | 7\n\nexport type LinkComponentProps = {\n  href: string\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type PaginationContextValue<T extends React.ElementType = 'a'> = {\n  page: number\n  pageCount: number\n  size: Size\n  isLinkMode: boolean\n  makeUrl?: (page: number) => string\n  LinkComponent: T\n  makeClickHandler: (value: number) => () => void\n  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>\n}\n\nexport const PaginationContext = createContext<PaginationContextValue<\n  React.ElementType<LinkComponentProps>\n> | null>(null)\n\nexport function usePaginationContext<\n  T extends React.ElementType = 'a',\n>(): PaginationContextValue<T> {\n  const context = useContext(PaginationContext)\n  if (context == null) {\n    throw new Error(\n      'Pagination components must be used within a Pagination component',\n    )\n  }\n  return context as PaginationContextValue<T>\n}\n"],"mappings":";;;;;AAuBA,MAAawB,6CAEH,KAAK;AAEf,SAAgBC,uBAEe;CAC7B,MAAMC,gCAAqBF,kBAAkB;CAC7C,IAAIE,WAAW,MACb,MAAM,IAAIC,MACR,mEACD;CAEH,OAAOD"}
+{"version":3,"file":"PaginationContext.cjs","names":[],"sources":["../../../src/components/Pagination/PaginationContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport type Size = 'S' | 'M'\n\nexport type PageRangeDisplayed = 5 | 7\n\nexport type LinkComponentProps = {\n  href: string\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type PaginationContextValue<T extends React.ElementType = 'a'> = {\n  page: number\n  pageCount: number\n  size: Size\n  isLinkMode: boolean\n  makeUrl?: (page: number) => string\n  LinkComponent: T\n  makeClickHandler: (value: number) => () => void\n  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>\n}\n\nexport const PaginationContext = createContext<PaginationContextValue<\n  React.ElementType<LinkComponentProps>\n> | null>(null)\n\nexport function usePaginationContext<\n  T extends React.ElementType = 'a',\n>(): PaginationContextValue<T> {\n  const context = useContext(PaginationContext)\n  if (context == null) {\n    throw new Error(\n      'Pagination components must be used within a Pagination component',\n    )\n  }\n  return context as PaginationContextValue<T>\n}\n"],"mappings":";;;;AAuBA,MAAa,6CAEH,IAAI;AAEd,SAAgB,uBAEe;CAC7B,MAAM,gCAAqB,iBAAiB;CAC5C,IAAI,WAAW,MACb,MAAM,IAAI,MACR,kEACF;CAEF,OAAO;AACT"}

package/dist/components/Pagination/PaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContext.js","names":["createContext","useContext","Size","PageRangeDisplayed","LinkComponentProps","href","className","children","React","ReactNode","PaginationContextValue","ElementType","page","pageCount","size","isLinkMode","makeUrl","LinkComponent","T","makeClickHandler","value","linkProps","Omit","ComponentPropsWithoutRef","PaginationContext","usePaginationContext","context","Error"],"sources":["../../../src/components/Pagination/PaginationContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport type Size = 'S' | 'M'\n\nexport type PageRangeDisplayed = 5 | 7\n\nexport type LinkComponentProps = {\n  href: string\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type PaginationContextValue<T extends React.ElementType = 'a'> = {\n  page: number\n  pageCount: number\n  size: Size\n  isLinkMode: boolean\n  makeUrl?: (page: number) => string\n  LinkComponent: T\n  makeClickHandler: (value: number) => () => void\n  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>\n}\n\nexport const PaginationContext = createContext<PaginationContextValue<\n  React.ElementType<LinkComponentProps>\n> | null>(null)\n\nexport function usePaginationContext<\n  T extends React.ElementType = 'a',\n>(): PaginationContextValue<T> {\n  const context = useContext(PaginationContext)\n  if (context == null) {\n    throw new Error(\n      'Pagination components must be used within a Pagination component',\n    )\n  }\n  return context as PaginationContextValue<T>\n}\n"],"mappings":";;;;AAuBA,MAAawB,oBAAoBxB,cAEvB,KAAK;AAEf,SAAgByB,uBAEe;CAC7B,MAAMC,UAAUzB,WAAWuB,kBAAkB;CAC7C,IAAIE,WAAW,MACb,MAAM,IAAIC,MACR,mEACD;CAEH,OAAOD"}
+{"version":3,"file":"PaginationContext.js","names":[],"sources":["../../../src/components/Pagination/PaginationContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport type Size = 'S' | 'M'\n\nexport type PageRangeDisplayed = 5 | 7\n\nexport type LinkComponentProps = {\n  href: string\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type PaginationContextValue<T extends React.ElementType = 'a'> = {\n  page: number\n  pageCount: number\n  size: Size\n  isLinkMode: boolean\n  makeUrl?: (page: number) => string\n  LinkComponent: T\n  makeClickHandler: (value: number) => () => void\n  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>\n}\n\nexport const PaginationContext = createContext<PaginationContextValue<\n  React.ElementType<LinkComponentProps>\n> | null>(null)\n\nexport function usePaginationContext<\n  T extends React.ElementType = 'a',\n>(): PaginationContextValue<T> {\n  const context = useContext(PaginationContext)\n  if (context == null) {\n    throw new Error(\n      'Pagination components must be used within a Pagination component',\n    )\n  }\n  return context as PaginationContextValue<T>\n}\n"],"mappings":";;;;AAuBA,MAAa,oBAAoB,cAEvB,IAAI;AAEd,SAAgB,uBAEe;CAC7B,MAAM,UAAU,WAAW,iBAAiB;CAC5C,IAAI,WAAW,MACb,MAAM,IAAI,MACR,kEACF;CAEF,OAAO;AACT"}

package/dist/components/Pagination/helper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"helper.cjs","names":["useDebugValue","warning","PageRangeDisplayed","usePaginationWindow","page","pageCount","t0","$","_c","$i","Symbol","for","pageRangeDisplayed","undefined","process","env","NODE_ENV","visibleLastPage","Math","min","max","floor","t1","t2","Array","from","length","_temp","start","t3","__0","i_0","i","const","window","_"],"sources":["../../../src/components/Pagination/helper.ts"],"sourcesContent":["import { useDebugValue } from 'react'\nimport warning from 'warning'\nimport type { PageRangeDisplayed } from './PaginationContext'\n\nexport function usePaginationWindow(\n  page: number,\n  pageCount: number,\n  pageRangeDisplayed: PageRangeDisplayed = 7,\n) {\n  'use memo'\n  // ページャーのリンク生成例:\n  //\n  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]\n  //\n  //       [*1*] [ 2 ] >\n  //\n  // デザインの意図: 前後移動時のカーソル移動を最小限にする。\n\n  if (process.env.NODE_ENV !== 'production') {\n    warning((page | 0) === page, `\\`page\\` must be integer (${page})`)\n    warning(\n      (pageCount | 0) === pageCount,\n      `\\`pageCount\\` must be integer (${pageCount})`,\n    )\n    warning(\n      pageRangeDisplayed === 5 || pageRangeDisplayed === 7,\n      `\\`pageRangeDisplayed\\` must be 5 or 7 (${pageRangeDisplayed})`,\n    )\n  }\n\n  const visibleFirstPage = 1\n  const visibleLastPage = Math.min(\n    pageCount,\n    Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),\n  )\n\n  const window = (() => {\n    if (visibleLastPage <= pageRangeDisplayed) {\n      // 表示範囲が1-7ページなら省略は無い。\n      return Array.from(\n        { length: 1 + visibleLastPage - visibleFirstPage },\n        (_, i) => visibleFirstPage + i,\n      )\n    } else {\n      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2\n      // 表示範囲が1-7ページを超えるなら、\n      // - 1ページ目は固定で表示する\n      // - 2ページ目から現在のページの直前までは省略する\n      return [\n        visibleFirstPage,\n        '...' as const,\n        ...Array.from(\n          { length: 1 + visibleLastPage - start },\n          (_, i) => start + i,\n        ),\n      ]\n    }\n  })()\n\n  useDebugValue(window)\n\n  return window\n}\n"],"mappings":";;;;;;;;AAIA,SAAOG,oBAAAC,MAAAC,WAAAC,IAAA;AAAA;CAAA,MAAAC,kCAAA,EAAA;CAAA,IAAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAAE,KAAA,GAAAA,KAAA,GAAAA,MAAA,GAAAF,EAAAE,MAAAC,OAAAC,IAAA,4BAAA;EAAAJ,EAAA,KAAA;;CAGL,MAAAK,qBAAAN,OAAAO,SAAA,IAAAP;CAmBA,IAAIQ,QAAOC,IAAIC,aAAc,cAAY;EACvCf,sBAASG,OAAO,OAAOA,MAAM,6BAA6BA,KAAI,GAAI;EAClEH,sBACGI,YAAY,OAAOA,WACpB,kCAAkCA,UAAS,GAC5C;EACDJ,qBACEW,uBAAuB,KAAKA,uBAAuB,GACnD,0CAA0CA,mBAAkB,GAC7D;;CAIH,MAAAK,kBAAwBC,KAAIC,IAC1Bd,WACAa,KAAIE,IAAKhB,OAAOc,KAAIG,MAAOT,qBAAqB,EAAE,EAAEA,mBACtD,CAAC;CAAA,IAAAU;CAGC,IAAIL,mBAAmBL,oBAAkB;EAAA,IAAAW;EAAA,IAAAhB,EAAA,OAAAU,iBAAA;GAEhCM,KAAAC,MAAKC,KACV,EAAAC,QAAU,IAAIT,kBAVK,GAU+B,EAClDU,MACD;GAAApB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAHDe,KAAOC;QAGN;EAED,MAAAK,QAAcX,mBAAmBL,qBAAqB,KAAK;EAAC,IAAAW;EAAA,IAAAhB,EAAA,OAAAqB,SAAArB,EAAA,OAAAU,iBAAA;GAAA,IAAAY;GAAA,IAAAtB,EAAA,OAAAqB,OAAA;IASxDC,MAAAC,KAAAC,QAAUH,QAAQI;IAACzB,EAAA,KAAAqB;IAAArB,EAAA,KAAAsB;UAAAA,KAAAtB,EAAA;GALhBgB,KAAA;IAlBc;IAoBnB;IAAc,GACXC,MAAKC,KACN,EAAAC,QAAU,IAAIT,kBAAkBW,OAAO,EACvCC,GACD;IACF;GAAAtB,EAAA,KAAAqB;GAAArB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAPDe,KAAOC;;CAZX,MAAAW,SAAeZ;CAuBftB,yBAAckC,OAAO;CAAA,OAEdA;;AAjEF,SAAAP,MAAAQ,GAAAH,GAAA;CAAA,OAkCoB,IAWUA"}
+{"version":3,"file":"helper.cjs","names":["i"],"sources":["../../../src/components/Pagination/helper.ts"],"sourcesContent":["import { useDebugValue } from 'react'\nimport warning from 'warning'\nimport type { PageRangeDisplayed } from './PaginationContext'\n\nexport function usePaginationWindow(\n  page: number,\n  pageCount: number,\n  pageRangeDisplayed: PageRangeDisplayed = 7,\n) {\n  'use memo'\n  // ページャーのリンク生成例:\n  //\n  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]\n  //\n  //       [*1*] [ 2 ] >\n  //\n  // デザインの意図: 前後移動時のカーソル移動を最小限にする。\n\n  if (process.env.NODE_ENV !== 'production') {\n    warning((page | 0) === page, `\\`page\\` must be integer (${page})`)\n    warning(\n      (pageCount | 0) === pageCount,\n      `\\`pageCount\\` must be integer (${pageCount})`,\n    )\n    warning(\n      pageRangeDisplayed === 5 || pageRangeDisplayed === 7,\n      `\\`pageRangeDisplayed\\` must be 5 or 7 (${pageRangeDisplayed})`,\n    )\n  }\n\n  const visibleFirstPage = 1\n  const visibleLastPage = Math.min(\n    pageCount,\n    Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),\n  )\n\n  const window = (() => {\n    if (visibleLastPage <= pageRangeDisplayed) {\n      // 表示範囲が1-7ページなら省略は無い。\n      return Array.from(\n        { length: 1 + visibleLastPage - visibleFirstPage },\n        (_, i) => visibleFirstPage + i,\n      )\n    } else {\n      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2\n      // 表示範囲が1-7ページを超えるなら、\n      // - 1ページ目は固定で表示する\n      // - 2ページ目から現在のページの直前までは省略する\n      return [\n        visibleFirstPage,\n        '...' as const,\n        ...Array.from(\n          { length: 1 + visibleLastPage - start },\n          (_, i) => start + i,\n        ),\n      ]\n    }\n  })()\n\n  useDebugValue(window)\n\n  return window\n}\n"],"mappings":";;;;;;;;AAIA,SAAO,oBAAA,MAAA,WAAA,IAAA;CAAA;CAAA,MAAA,kCAAA,CAAA;CAAA,IAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAA,KAAA,GAAA,KAAA,GAAA,MAAA,GAAA,EAAA,MAAA,OAAA,IAAA,2BAAA;EAAA,EAAA,KAAA;CAAA;CAGL,MAAA,qBAAA,OAAA,SAAA,IAAA;CAmBA,IAAI,QAAO,IAAI,aAAc,cAAY;EACvC,sBAAS,OAAO,OAAO,MAAM,6BAA6B,KAAI,EAAG;EACjE,sBACG,YAAY,OAAO,WACpB,kCAAkC,UAAS,EAC7C;EACA,qBACE,uBAAuB,KAAK,uBAAuB,GACnD,0CAA0C,mBAAkB,EAC9D;CAAC;CAIH,MAAA,kBAAwB,KAAI,IAC1B,WACA,KAAI,IAAK,OAAO,KAAI,MAAO,qBAAqB,CAAC,GAAG,kBAAkB,CACxE;CAAC,IAAA;CAGC,IAAI,mBAAmB,oBAAkB;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,iBAAA;GAEhC,KAAA,MAAK,KACV,EAAA,QAAU,IAAI,kBAVK,EAU8B,GACjD,KACF;GAAC,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAHD,KAAO;CAGN,OAAA;EAED,MAAA,QAAc,mBAAmB,qBAAqB,KAAK;EAAC,IAAA;EAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,iBAAA;GAAA,IAAA;GAAA,IAAA,EAAA,OAAA,OAAA;IASxD,MAAA,KAAA,QAAU,QAAQA;IAAC,EAAA,KAAA;IAAA,EAAA,KAAA;GAAA,OAAA,KAAA,EAAA;GALhB,KAAA;IAlBc;IAoBnB;IAAc,GACX,MAAK,KACN,EAAA,QAAU,IAAI,kBAAkB,MAAM,GACtC,EACF;GAAC;GACF,EAAA,KAAA;GAAA,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAPD,KAAO;CAON;CAnBL,MAAA,SAAe;CAuBf,yBAAc,MAAM;CAAC,OAEd;AAAM;AAjER,SAAA,MAAA,GAAA,GAAA;CAAA,OAkCoB,IAWU;AAAC"}

package/dist/components/Pagination/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","names":["useDebugValue","warning","PageRangeDisplayed","usePaginationWindow","page","pageCount","t0","$","_c","$i","Symbol","for","pageRangeDisplayed","undefined","process","env","NODE_ENV","visibleLastPage","Math","min","max","floor","t1","t2","Array","from","length","_temp","start","t3","__0","i_0","i","const","window","_"],"sources":["../../../src/components/Pagination/helper.ts"],"sourcesContent":["import { useDebugValue } from 'react'\nimport warning from 'warning'\nimport type { PageRangeDisplayed } from './PaginationContext'\n\nexport function usePaginationWindow(\n  page: number,\n  pageCount: number,\n  pageRangeDisplayed: PageRangeDisplayed = 7,\n) {\n  'use memo'\n  // ページャーのリンク生成例:\n  //\n  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]\n  //\n  //       [*1*] [ 2 ] >\n  //\n  // デザインの意図: 前後移動時のカーソル移動を最小限にする。\n\n  if (process.env.NODE_ENV !== 'production') {\n    warning((page | 0) === page, `\\`page\\` must be integer (${page})`)\n    warning(\n      (pageCount | 0) === pageCount,\n      `\\`pageCount\\` must be integer (${pageCount})`,\n    )\n    warning(\n      pageRangeDisplayed === 5 || pageRangeDisplayed === 7,\n      `\\`pageRangeDisplayed\\` must be 5 or 7 (${pageRangeDisplayed})`,\n    )\n  }\n\n  const visibleFirstPage = 1\n  const visibleLastPage = Math.min(\n    pageCount,\n    Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),\n  )\n\n  const window = (() => {\n    if (visibleLastPage <= pageRangeDisplayed) {\n      // 表示範囲が1-7ページなら省略は無い。\n      return Array.from(\n        { length: 1 + visibleLastPage - visibleFirstPage },\n        (_, i) => visibleFirstPage + i,\n      )\n    } else {\n      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2\n      // 表示範囲が1-7ページを超えるなら、\n      // - 1ページ目は固定で表示する\n      // - 2ページ目から現在のページの直前までは省略する\n      return [\n        visibleFirstPage,\n        '...' as const,\n        ...Array.from(\n          { length: 1 + visibleLastPage - start },\n          (_, i) => start + i,\n        ),\n      ]\n    }\n  })()\n\n  useDebugValue(window)\n\n  return window\n}\n"],"mappings":";;;;;;AAIA,SAAOG,oBAAAC,MAAAC,WAAAC,IAAA;AAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAD,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAAE,KAAA,GAAAA,KAAA,GAAAA,MAAA,GAAAF,EAAAE,MAAAC,OAAAC,IAAA,4BAAA;EAAAJ,EAAA,KAAA;;CAGL,MAAAK,qBAAAN,OAAAO,SAAA,IAAAP;CAmBA,IAAIQ,QAAOC,IAAIC,aAAc,cAAY;EACvCf,SAASG,OAAO,OAAOA,MAAM,6BAA6BA,KAAI,GAAI;EAClEH,SACGI,YAAY,OAAOA,WACpB,kCAAkCA,UAAS,GAC5C;EACDJ,QACEW,uBAAuB,KAAKA,uBAAuB,GACnD,0CAA0CA,mBAAkB,GAC7D;;CAIH,MAAAK,kBAAwBC,KAAIC,IAC1Bd,WACAa,KAAIE,IAAKhB,OAAOc,KAAIG,MAAOT,qBAAqB,EAAE,EAAEA,mBACtD,CAAC;CAAA,IAAAU;CAGC,IAAIL,mBAAmBL,oBAAkB;EAAA,IAAAW;EAAA,IAAAhB,EAAA,OAAAU,iBAAA;GAEhCM,KAAAC,MAAKC,KACV,EAAAC,QAAU,IAAIT,kBAVK,GAU+B,EAClDU,MACD;GAAApB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAHDe,KAAOC;QAGN;EAED,MAAAK,QAAcX,mBAAmBL,qBAAqB,KAAK;EAAC,IAAAW;EAAA,IAAAhB,EAAA,OAAAqB,SAAArB,EAAA,OAAAU,iBAAA;GAAA,IAAAY;GAAA,IAAAtB,EAAA,OAAAqB,OAAA;IASxDC,MAAAC,KAAAC,QAAUH,QAAQI;IAACzB,EAAA,KAAAqB;IAAArB,EAAA,KAAAsB;UAAAA,KAAAtB,EAAA;GALhBgB,KAAA;IAlBc;IAoBnB;IAAc,GACXC,MAAKC,KACN,EAAAC,QAAU,IAAIT,kBAAkBW,OAAO,EACvCC,GACD;IACF;GAAAtB,EAAA,KAAAqB;GAAArB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAPDe,KAAOC;;CAZX,MAAAW,SAAeZ;CAuBftB,cAAckC,OAAO;CAAA,OAEdA;;AAjEF,SAAAP,MAAAQ,GAAAH,GAAA;CAAA,OAkCoB,IAWUA"}
+{"version":3,"file":"helper.js","names":["i"],"sources":["../../../src/components/Pagination/helper.ts"],"sourcesContent":["import { useDebugValue } from 'react'\nimport warning from 'warning'\nimport type { PageRangeDisplayed } from './PaginationContext'\n\nexport function usePaginationWindow(\n  page: number,\n  pageCount: number,\n  pageRangeDisplayed: PageRangeDisplayed = 7,\n) {\n  'use memo'\n  // ページャーのリンク生成例:\n  //\n  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]\n  //\n  //       [*1*] [ 2 ] >\n  //\n  // デザインの意図: 前後移動時のカーソル移動を最小限にする。\n\n  if (process.env.NODE_ENV !== 'production') {\n    warning((page | 0) === page, `\\`page\\` must be integer (${page})`)\n    warning(\n      (pageCount | 0) === pageCount,\n      `\\`pageCount\\` must be integer (${pageCount})`,\n    )\n    warning(\n      pageRangeDisplayed === 5 || pageRangeDisplayed === 7,\n      `\\`pageRangeDisplayed\\` must be 5 or 7 (${pageRangeDisplayed})`,\n    )\n  }\n\n  const visibleFirstPage = 1\n  const visibleLastPage = Math.min(\n    pageCount,\n    Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),\n  )\n\n  const window = (() => {\n    if (visibleLastPage <= pageRangeDisplayed) {\n      // 表示範囲が1-7ページなら省略は無い。\n      return Array.from(\n        { length: 1 + visibleLastPage - visibleFirstPage },\n        (_, i) => visibleFirstPage + i,\n      )\n    } else {\n      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2\n      // 表示範囲が1-7ページを超えるなら、\n      // - 1ページ目は固定で表示する\n      // - 2ページ目から現在のページの直前までは省略する\n      return [\n        visibleFirstPage,\n        '...' as const,\n        ...Array.from(\n          { length: 1 + visibleLastPage - start },\n          (_, i) => start + i,\n        ),\n      ]\n    }\n  })()\n\n  useDebugValue(window)\n\n  return window\n}\n"],"mappings":";;;;;;AAIA,SAAO,oBAAA,MAAA,WAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAA,KAAA,GAAA,KAAA,GAAA,MAAA,GAAA,EAAA,MAAA,OAAA,IAAA,2BAAA;EAAA,EAAA,KAAA;CAAA;CAGL,MAAA,qBAAA,OAAA,SAAA,IAAA;CAmBA,IAAI,QAAO,IAAI,aAAc,cAAY;EACvC,SAAS,OAAO,OAAO,MAAM,6BAA6B,KAAI,EAAG;EACjE,SACG,YAAY,OAAO,WACpB,kCAAkC,UAAS,EAC7C;EACA,QACE,uBAAuB,KAAK,uBAAuB,GACnD,0CAA0C,mBAAkB,EAC9D;CAAC;CAIH,MAAA,kBAAwB,KAAI,IAC1B,WACA,KAAI,IAAK,OAAO,KAAI,MAAO,qBAAqB,CAAC,GAAG,kBAAkB,CACxE;CAAC,IAAA;CAGC,IAAI,mBAAmB,oBAAkB;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,iBAAA;GAEhC,KAAA,MAAK,KACV,EAAA,QAAU,IAAI,kBAVK,EAU8B,GACjD,KACF;GAAC,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAHD,KAAO;CAGN,OAAA;EAED,MAAA,QAAc,mBAAmB,qBAAqB,KAAK;EAAC,IAAA;EAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,iBAAA;GAAA,IAAA;GAAA,IAAA,EAAA,OAAA,OAAA;IASxD,MAAA,KAAA,QAAU,QAAQA;IAAC,EAAA,KAAA;IAAA,EAAA,KAAA;GAAA,OAAA,KAAA,EAAA;GALhB,KAAA;IAlBc;IAoBnB;IAAc,GACX,MAAK,KACN,EAAA,QAAU,IAAI,kBAAkB,MAAM,GACtC,EACF;GAAC;GACF,EAAA,KAAA;GAAA,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAPD,KAAO;CAON;CAnBL,MAAA,SAAe;CAuBf,cAAc,MAAM;CAAC,OAEd;AAAM;AAjER,SAAA,MAAA,GAAA,GAAA;CAAA,OAkCoB,IAWU;AAAC"}