matsuri-ui 10.2.0 → 10.2.3

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+See [Github Releases](https://github.com/matsuri-tech/matsuri-ui/releases).
+
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
 ## [10.1.0](https://github.com/matsuri-tech/matsuri-ui/compare/v10.0.0...v10.1.0) (2021-12-27)

package/dist/cjs/@utils/arrayShallowEqual.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.arrayShallowEqual = void 0;
+
+const arrayShallowEqual = (a, b) => {
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+};
+
+exports.arrayShallowEqual = arrayShallowEqual;
+//# sourceMappingURL=arrayShallowEqual.js.map

package/dist/cjs/@utils/arrayShallowEqual.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/@utils/arrayShallowEqual.ts"],"names":["arrayShallowEqual","a","b","length","every","v","i"],"mappings":";;;;;;;AAAO,MAAMA,iBAAiB,GAAG,CAACC,CAAD,EAAwBC,CAAxB,KAAkD;AAC/E,SAAOD,CAAC,CAACE,MAAF,KAAaD,CAAC,CAACC,MAAf,IAAyBF,CAAC,CAACG,KAAF,CAAQ,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,KAAKH,CAAC,CAACI,CAAD,CAAzB,CAAhC;AACH,CAFM","sourcesContent":["export const arrayShallowEqual = (a: readonly unknown[], b: readonly unknown[]) => {\n    return a.length === b.length && a.every((v, i) => v === b[i])\n}\n"],"file":"arrayShallowEqual.js"}

package/dist/cjs/Alert/Alert.js

@@ -158,7 +158,7 @@ const AlertProvider = ({
   const [toasts, setAlerts] = _react2.default.useState([]);
 
   const add = (0, _react2.useCallback)((message, options) => {
-    const id = options !== null && options !== void 0 && options.id ? options.id : Math.random().toString(36).substr(2, 9);
+    const id = options?.id ? options.id : Math.random().toString(36).substr(2, 9);
     setAlerts(pre => {
       return [...pre, {
         id,

package/dist/cjs/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Alert/Alert.tsx"],"names":["AlertContext","Provider","icons","success","CheckIcon","warning","WarningIcon","error","ErrorIcon","Alert","message","duration","Infinity","id","severity","show","setShow","React","useState","remove","transitions","from","opacity","enter","leave","timeout","setTimeout","clearTimeout","undefined","Icon","handleClick","theme","map","item","key","props","css","typography","body","zIndex","tooltip","spacing","palette","intentions","contrastText","main","shadows","dark","shorter","alertPositions","sx","right","bottom","alignItems","left","transform","top","AlertProvider","children","position","toasts","setAlerts","add","options","Math","random","toString","substr","pre","filter","toast","display","flexDirection","overflow","width","boxSizing","maxHeight","padding","useAlert","ctx","addAlert","removeAlert"],"mappings":"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","sourcesContent":["import { Button } from \"../Button\"\nimport { Portal } from \"../Portal\"\nimport { animated, useTransition } from \"react-spring\"\nimport { css } from \"@emotion/react\"\nimport { useTheme } from \"../theme\"\nimport CheckIcon from \"@mui/icons-material/Check\"\nimport CloseIcon from \"@mui/icons-material/Close\"\nimport ErrorIcon from \"@mui/icons-material/Error\"\nimport React, { createContext, useCallback, useContext, useEffect } from \"react\"\nimport WarningIcon from \"@mui/icons-material/Warning\"\n\nexport interface AlertOptions {\n    /**\n     * uniqueな文字列を入れてください。removeAlertを用いて任意のAlertを削除する場合に使用できます。\n     * 指定しない場合に任意の文字列が生成され、addAlertから取得できます。\n     */\n    id?: string\n    /**\n     * 役割を表し、左側のアイコンと色を変更します。\n     * @default \"success\"\n     */\n    severity?: \"error\" | \"success\" | \"warning\"\n    /**\n     * トーストコンポーネントが消えるまでの時間(ms)を表します。\n     * 指定しない場合、自動では消えなくなります。\n     * @default \"Infinity\"\n     */\n    duration?: number\n}\n\nexport interface AlertProps extends AlertOptions {\n    message: React.ReactNode\n}\n\nconst AlertContext = createContext(\n    {} as {\n        add: (message: React.ReactNode, options: AlertOptions) => string\n        remove: (id: string) => void\n    }\n)\nconst { Provider } = AlertContext\n\nconst icons = {\n    success: CheckIcon,\n    warning: WarningIcon,\n    error: ErrorIcon\n}\n\nexport const Alert: React.FC<AlertProps & { id?: string }> = ({\n    message,\n    duration = Infinity,\n    id,\n    severity = \"success\"\n}) => {\n    const [show, setShow] = React.useState(true)\n    const { remove } = useContext(AlertContext)\n    const transitions = useTransition(show, null, {\n        from: { opacity: 0 },\n        enter: { opacity: 1 },\n        leave: { opacity: 0 }\n    })\n\n    useEffect(() => {\n        if (show && duration !== Infinity) {\n            const timeout = setTimeout(() => {\n                setShow(false)\n                if (remove && id) {\n                    remove(id)\n                }\n            }, duration)\n\n            return () => clearTimeout(timeout)\n        }\n        return undefined\n    }, [duration, id, remove, show])\n\n    const Icon = icons[severity]\n\n    const handleClick = useCallback(() => {\n        setShow(false)\n        if (remove && id) {\n            remove(id)\n        }\n    }, [id, remove])\n\n    const theme = useTheme()\n\n    return (\n        <React.Fragment>\n            {transitions.map(({ item, key, props }) =>\n                item ? (\n                    <animated.div\n                        style={props}\n                        css={css`\n                            ${css(theme.typography.body)}\n                            z-index: ${theme.zIndex.tooltip};\n                            display: flex;\n                            width: fit-content;\n                            max-width: 360px;\n                            min-height: ${theme.spacing * 8}px;\n                            margin-top: ${theme.spacing}px;\n                            overflow: hidden;\n                            color: ${theme.palette.intentions[severity].contrastText};\n                            background-color: ${theme.palette.intentions[severity].main};\n                            border-radius: 4px;\n                            box-shadow: ${theme.shadows[4]};\n                        `}\n                        key={key}\n                        role=\"alert\"\n                    >\n                        <div\n                            css={css`\n                                flex-shrink: 0;\n                                width: 30px;\n                                padding: ${theme.spacing}px 0px;\n                                margin-right: 0.3em;\n                                font-size: 1em;\n                                text-align: center;\n                                vertical-align: text-top;\n                                background-color: ${theme.palette.intentions[severity].dark};\n                            `}\n                        >\n                            <Icon fontSize=\"small\" />\n                        </div>\n                        <span\n                            css={css`\n                                padding: ${theme.spacing}px ${theme.spacing * 1.5}px;\n                                word-break: break-all;\n                            `}\n                        >\n                            {message}\n                        </span>\n                        <Button\n                            icon={<CloseIcon fontSize=\"small\" />}\n                            rounded\n                            onClick={handleClick}\n                            css={css`\n                                flex-shrink: 0;\n                                padding: ${theme.spacing}px ${theme.spacing * 1.5}px;\n                                margin-left: 0.3em;\n                                font-size: 1.2em;\n                                color: ${theme.palette.intentions[severity].contrastText};\n                                vertical-align: text-top;\n                                cursor: pointer;\n                                transition: color ${theme.transitions.duration.shorter};\n                                &:hover {\n                                    color: ${theme.palette.intentions[severity].contrastText};\n                                }\n                            `}\n                        />\n                    </animated.div>\n                ) : null\n            )}\n        </React.Fragment>\n    )\n}\n\nexport const alertPositions = [\n    \"top-left\",\n    \"top-center\",\n    \"top-right\",\n    \"bottom-left\",\n    \"bottom-center\",\n    \"bottom-right\"\n] as const\n\nexport type AlertPosition = typeof alertPositions[number]\n\nconst sx = {\n    \"bottom-right\": {\n        right: 0,\n        bottom: 0,\n        alignItems: \"flex-end\"\n    },\n    \"bottom-center\": {\n        bottom: 0,\n        left: \"50%\",\n        transform: \"translateX(-50%)\",\n        alignItems: \"center\"\n    },\n    \"bottom-left\": {\n        left: 0,\n        bottom: 0,\n        alignItems: \"flex-start\"\n    },\n    \"top-right\": {\n        right: 0,\n        top: 0,\n        alignItems: \"flex-end\"\n    },\n    \"top-center\": {\n        top: 0,\n        left: \"50%\",\n        transform: \"translateX(-50%)\",\n        alignItems: \"center\"\n    },\n    \"top-left\": {\n        left: 0,\n        top: 0,\n        alignItems: \"flex-start\"\n    }\n}\nexport const AlertProvider: React.FC<{\n    position?: AlertPosition\n}> = ({ children, position = \"bottom-right\" }) => {\n    const [toasts, setAlerts] = React.useState<\n        ({\n            id: string\n            message: React.ReactNode\n        } & AlertOptions)[]\n    >([])\n\n    const add = useCallback((message: React.ReactNode, options: AlertOptions) => {\n        const id = options?.id ? options.id : Math.random().toString(36).substr(2, 9)\n\n        setAlerts((pre) => {\n            return [...pre, { id, message, ...options }]\n        })\n        return id\n    }, [])\n\n    const remove = useCallback((id) => {\n        setAlerts((toasts) => toasts.filter((toast) => toast.id !== id))\n    }, [])\n\n    const theme = useTheme()\n\n    return (\n        <Provider value={{ add, remove }}>\n            <Portal>\n                <div\n                    css={css({\n                        position: \"fixed\",\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        overflow: \"hidden\",\n                        width: \"fit-content\",\n                        boxSizing: \"border-box\",\n                        maxHeight: \"100%\",\n                        padding: \"8px\",\n                        zIndex: theme.zIndex.tooltip,\n                        ...sx[position]\n                    })}\n                >\n                    {toasts.map((toast) => (\n                        <Alert {...toast} key={toast.id} />\n                    ))}\n                </div>\n            </Portal>\n            {children}\n        </Provider>\n    )\n}\n\nexport const useAlert = () => {\n    const ctx = useContext(AlertContext)\n    return {\n        addAlert: ctx.add,\n        removeAlert: ctx.remove\n    }\n}\n"],"file":"Alert.js"}
+{"version":3,"sources":["../../../src/Alert/Alert.tsx"],"names":["AlertContext","Provider","icons","success","CheckIcon","warning","WarningIcon","error","ErrorIcon","Alert","message","duration","Infinity","id","severity","show","setShow","React","useState","remove","transitions","from","opacity","enter","leave","timeout","setTimeout","clearTimeout","undefined","Icon","handleClick","theme","map","item","key","props","css","typography","body","zIndex","tooltip","spacing","palette","intentions","contrastText","main","shadows","dark","shorter","alertPositions","sx","right","bottom","alignItems","left","transform","top","AlertProvider","children","position","toasts","setAlerts","add","options","Math","random","toString","substr","pre","filter","toast","display","flexDirection","overflow","width","boxSizing","maxHeight","padding","useAlert","ctx","addAlert","removeAlert"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAyBA,MAAMA,YAAY,gBAAG,2BACjB,EADiB,CAArB;AAMA,MAAM;AAAEC,EAAAA;AAAF,IAAeD,YAArB;AAEA,MAAME,KAAK,GAAG;AACVC,EAAAA,OAAO,EAAEC,cADC;AAEVC,EAAAA,OAAO,EAAEC,gBAFC;AAGVC,EAAAA,KAAK,EAAEC;AAHG,CAAd;;AAMO,MAAMC,KAA6C,GAAG,CAAC;AAC1DC,EAAAA,OAD0D;AAE1DC,EAAAA,QAAQ,GAAGC,QAF+C;AAG1DC,EAAAA,EAH0D;AAI1DC,EAAAA,QAAQ,GAAG;AAJ+C,CAAD,KAKvD;AACF,QAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBC,gBAAMC,QAAN,CAAe,IAAf,CAAxB;;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAa,wBAAWnB,YAAX,CAAnB;AACA,QAAMoB,WAAW,GAAG,gCAAcL,IAAd,EAAoB,IAApB,EAA0B;AAC1CM,IAAAA,IAAI,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX,KADoC;AAE1CC,IAAAA,KAAK,EAAE;AAAED,MAAAA,OAAO,EAAE;AAAX,KAFmC;AAG1CE,IAAAA,KAAK,EAAE;AAAEF,MAAAA,OAAO,EAAE;AAAX;AAHmC,GAA1B,CAApB;AAMA,yBAAU,MAAM;AACZ,QAAIP,IAAI,IAAIJ,QAAQ,KAAKC,QAAzB,EAAmC;AAC/B,YAAMa,OAAO,GAAGC,UAAU,CAAC,MAAM;AAC7BV,QAAAA,OAAO,CAAC,KAAD,CAAP;;AACA,YAAIG,MAAM,IAAIN,EAAd,EAAkB;AACdM,UAAAA,MAAM,CAACN,EAAD,CAAN;AACH;AACJ,OALyB,EAKvBF,QALuB,CAA1B;AAOA,aAAO,MAAMgB,YAAY,CAACF,OAAD,CAAzB;AACH;;AACD,WAAOG,SAAP;AACH,GAZD,EAYG,CAACjB,QAAD,EAAWE,EAAX,EAAeM,MAAf,EAAuBJ,IAAvB,CAZH;AAcA,QAAMc,IAAI,GAAG3B,KAAK,CAACY,QAAD,CAAlB;AAEA,QAAMgB,WAAW,GAAG,yBAAY,MAAM;AAClCd,IAAAA,OAAO,CAAC,KAAD,CAAP;;AACA,QAAIG,MAAM,IAAIN,EAAd,EAAkB;AACdM,MAAAA,MAAM,CAACN,EAAD,CAAN;AACH;AACJ,GALmB,EAKjB,CAACA,EAAD,EAAKM,MAAL,CALiB,CAApB;AAOA,QAAMY,KAAK,GAAG,sBAAd;AAEA,SACI,gBAAC,eAAD,CAAO,QAAP,QACKX,WAAW,CAACY,GAAZ,CAAgB,CAAC;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,GAAR;AAAaC,IAAAA;AAAb,GAAD,KACbF,IAAI,GACA,gBAAC,qBAAD,CAAU,GAAV;AACI,IAAA,KAAK,EAAEE,KADX;AAEI,IAAA,GAAG,mBAAEC,UAAF,gBACG,gBAAIL,KAAK,CAACM,UAAN,CAAiBC,IAArB,moXADH,eAEYP,KAAK,CAACQ,MAAN,CAAaC,OAFzB,iEAMeT,KAAK,CAACU,OAAN,GAAgB,CAN/B,oBAOeV,KAAK,CAACU,OAPrB,+BASUV,KAAK,CAACW,OAAN,CAAcC,UAAd,CAAyB7B,QAAzB,EAAmC8B,YAT7C,wBAUqBb,KAAK,CAACW,OAAN,CAAcC,UAAd,CAAyB7B,QAAzB,EAAmC+B,IAVxD,oCAYed,KAAK,CAACe,OAAN,CAAc,CAAd,CAZf,2oXAFP;AAgBI,IAAA,GAAG,EAAEZ,GAhBT;AAiBI,IAAA,IAAI,EAAC;AAjBT,KAmBI;AACI,IAAA,GAAG,mBAAEE,UAAF,uCAGYL,KAAK,CAACU,OAHlB,yGAQqBV,KAAK,CAACW,OAAN,CAAcC,UAAd,CAAyB7B,QAAzB,EAAmCiC,IARxD;AADP,KAYI,gBAAC,IAAD;AAAM,IAAA,QAAQ,EAAC;AAAf,IAZJ,CAnBJ,EAiCI;AACI,IAAA,GAAG,mBAAEX,UAAF,cACYL,KAAK,CAACU,OADlB,SAC+BV,KAAK,CAACU,OAAN,GAAgB,GAD/C;AADP,KAMK/B,OANL,CAjCJ,EAyCI,gBAAC,cAAD;AACI,IAAA,IAAI,EAAE,gBAAC,cAAD;AAAW,MAAA,QAAQ,EAAC;AAApB,MADV;AAEI,IAAA,OAAO,MAFX;AAGI,IAAA,OAAO,EAAEoB,WAHb;AAII,IAAA,GAAG,mBAAEM,UAAF,4BAEYL,KAAK,CAACU,OAFlB,SAE+BV,KAAK,CAACU,OAAN,GAAgB,GAF/C,iDAKUV,KAAK,CAACW,OAAN,CAAcC,UAAd,CAAyB7B,QAAzB,EAAmC8B,YAL7C,+DAQqBb,KAAK,CAACX,WAAN,CAAkBT,QAAlB,CAA2BqC,OARhD,qBAUcjB,KAAK,CAACW,OAAN,CAAcC,UAAd,CAAyB7B,QAAzB,EAAmC8B,YAVjD;AAJP,IAzCJ,CADA,GA6DA,IA9DP,CADL,CADJ;AAoEH,CA3GM;;;AA6GA,MAAMK,cAAc,GAAG,CAC1B,UAD0B,EAE1B,YAF0B,EAG1B,WAH0B,EAI1B,aAJ0B,EAK1B,eAL0B,EAM1B,cAN0B,CAAvB;;AAWP,MAAMC,EAAE,GAAG;AACP,kBAAgB;AACZC,IAAAA,KAAK,EAAE,CADK;AAEZC,IAAAA,MAAM,EAAE,CAFI;AAGZC,IAAAA,UAAU,EAAE;AAHA,GADT;AAMP,mBAAiB;AACbD,IAAAA,MAAM,EAAE,CADK;AAEbE,IAAAA,IAAI,EAAE,KAFO;AAGbC,IAAAA,SAAS,EAAE,kBAHE;AAIbF,IAAAA,UAAU,EAAE;AAJC,GANV;AAYP,iBAAe;AACXC,IAAAA,IAAI,EAAE,CADK;AAEXF,IAAAA,MAAM,EAAE,CAFG;AAGXC,IAAAA,UAAU,EAAE;AAHD,GAZR;AAiBP,eAAa;AACTF,IAAAA,KAAK,EAAE,CADE;AAETK,IAAAA,GAAG,EAAE,CAFI;AAGTH,IAAAA,UAAU,EAAE;AAHH,GAjBN;AAsBP,gBAAc;AACVG,IAAAA,GAAG,EAAE,CADK;AAEVF,IAAAA,IAAI,EAAE,KAFI;AAGVC,IAAAA,SAAS,EAAE,kBAHD;AAIVF,IAAAA,UAAU,EAAE;AAJF,GAtBP;AA4BP,cAAY;AACRC,IAAAA,IAAI,EAAE,CADE;AAERE,IAAAA,GAAG,EAAE,CAFG;AAGRH,IAAAA,UAAU,EAAE;AAHJ;AA5BL,CAAX;;AAkCO,MAAMI,aAEX,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAQ,GAAG;AAAvB,CAAD,KAA6C;AAC9C,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsB5C,gBAAMC,QAAN,CAK1B,EAL0B,CAA5B;;AAOA,QAAM4C,GAAG,GAAG,yBAAY,CAACpD,OAAD,EAA2BqD,OAA3B,KAAqD;AACzE,UAAMlD,EAAE,GAAGkD,OAAO,EAAElD,EAAT,GAAckD,OAAO,CAAClD,EAAtB,GAA2BmD,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,MAA3B,CAAkC,CAAlC,EAAqC,CAArC,CAAtC;AAEAN,IAAAA,SAAS,CAAEO,GAAD,IAAS;AACf,aAAO,CAAC,GAAGA,GAAJ,EAAS;AAAEvD,QAAAA,EAAF;AAAMH,QAAAA,OAAN;AAAe,WAAGqD;AAAlB,OAAT,CAAP;AACH,KAFQ,CAAT;AAGA,WAAOlD,EAAP;AACH,GAPW,EAOT,EAPS,CAAZ;AASA,QAAMM,MAAM,GAAG,yBAAaN,EAAD,IAAQ;AAC/BgD,IAAAA,SAAS,CAAED,MAAD,IAAYA,MAAM,CAACS,MAAP,CAAeC,KAAD,IAAWA,KAAK,CAACzD,EAAN,KAAaA,EAAtC,CAAb,CAAT;AACH,GAFc,EAEZ,EAFY,CAAf;AAIA,QAAMkB,KAAK,GAAG,sBAAd;AAEA,SACI,gBAAC,QAAD;AAAU,IAAA,KAAK,EAAE;AAAE+B,MAAAA,GAAF;AAAO3C,MAAAA;AAAP;AAAjB,KACI,gBAAC,cAAD,QACI;AACI,IAAA,GAAG,eAAE,gBAAI;AACLwC,MAAAA,QAAQ,EAAE,OADL;AAELY,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,aAAa,EAAE,QAHV;AAILC,MAAAA,QAAQ,EAAE,QAJL;AAKLC,MAAAA,KAAK,EAAE,aALF;AAMLC,MAAAA,SAAS,EAAE,YANN;AAOLC,MAAAA,SAAS,EAAE,MAPN;AAQLC,MAAAA,OAAO,EAAE,KARJ;AASLtC,MAAAA,MAAM,EAAER,KAAK,CAACQ,MAAN,CAAaC,OAThB;AAUL,SAAGU,EAAE,CAACS,QAAD;AAVA,KAAJ;AADT,KAcKC,MAAM,CAAC5B,GAAP,CAAYsC,KAAD,IACR,gBAAC,KAAD,eAAWA,KAAX;AAAkB,IAAA,GAAG,EAAEA,KAAK,CAACzD;AAA7B,KADH,CAdL,CADJ,CADJ,EAqBK6C,QArBL,CADJ;AAyBH,CAlDM;;;;AAoDA,MAAMoB,QAAQ,GAAG,MAAM;AAC1B,QAAMC,GAAG,GAAG,wBAAW/E,YAAX,CAAZ;AACA,SAAO;AACHgF,IAAAA,QAAQ,EAAED,GAAG,CAACjB,GADX;AAEHmB,IAAAA,WAAW,EAAEF,GAAG,CAAC5D;AAFd,GAAP;AAIH,CANM","sourcesContent":["import { Button } from \"../Button\"\nimport { Portal } from \"../Portal\"\nimport { animated, useTransition } from \"react-spring\"\nimport { css } from \"@emotion/react\"\nimport { useTheme } from \"../theme\"\nimport CheckIcon from \"@mui/icons-material/Check\"\nimport CloseIcon from \"@mui/icons-material/Close\"\nimport ErrorIcon from \"@mui/icons-material/Error\"\nimport React, { createContext, useCallback, useContext, useEffect } from \"react\"\nimport WarningIcon from \"@mui/icons-material/Warning\"\n\nexport interface AlertOptions {\n    /**\n     * uniqueな文字列を入れてください。removeAlertを用いて任意のAlertを削除する場合に使用できます。\n     * 指定しない場合に任意の文字列が生成され、addAlertから取得できます。\n     */\n    id?: string\n    /**\n     * 役割を表し、左側のアイコンと色を変更します。\n     * @default \"success\"\n     */\n    severity?: \"error\" | \"success\" | \"warning\"\n    /**\n     * トーストコンポーネントが消えるまでの時間(ms)を表します。\n     * 指定しない場合、自動では消えなくなります。\n     * @default \"Infinity\"\n     */\n    duration?: number\n}\n\nexport interface AlertProps extends AlertOptions {\n    message: React.ReactNode\n}\n\nconst AlertContext = createContext(\n    {} as {\n        add: (message: React.ReactNode, options: AlertOptions) => string\n        remove: (id: string) => void\n    }\n)\nconst { Provider } = AlertContext\n\nconst icons = {\n    success: CheckIcon,\n    warning: WarningIcon,\n    error: ErrorIcon\n}\n\nexport const Alert: React.FC<AlertProps & { id?: string }> = ({\n    message,\n    duration = Infinity,\n    id,\n    severity = \"success\"\n}) => {\n    const [show, setShow] = React.useState(true)\n    const { remove } = useContext(AlertContext)\n    const transitions = useTransition(show, null, {\n        from: { opacity: 0 },\n        enter: { opacity: 1 },\n        leave: { opacity: 0 }\n    })\n\n    useEffect(() => {\n        if (show && duration !== Infinity) {\n            const timeout = setTimeout(() => {\n                setShow(false)\n                if (remove && id) {\n                    remove(id)\n                }\n            }, duration)\n\n            return () => clearTimeout(timeout)\n        }\n        return undefined\n    }, [duration, id, remove, show])\n\n    const Icon = icons[severity]\n\n    const handleClick = useCallback(() => {\n        setShow(false)\n        if (remove && id) {\n            remove(id)\n        }\n    }, [id, remove])\n\n    const theme = useTheme()\n\n    return (\n        <React.Fragment>\n            {transitions.map(({ item, key, props }) =>\n                item ? (\n                    <animated.div\n                        style={props}\n                        css={css`\n                            ${css(theme.typography.body)}\n                            z-index: ${theme.zIndex.tooltip};\n                            display: flex;\n                            width: fit-content;\n                            max-width: 360px;\n                            min-height: ${theme.spacing * 8}px;\n                            margin-top: ${theme.spacing}px;\n                            overflow: hidden;\n                            color: ${theme.palette.intentions[severity].contrastText};\n                            background-color: ${theme.palette.intentions[severity].main};\n                            border-radius: 4px;\n                            box-shadow: ${theme.shadows[4]};\n                        `}\n                        key={key}\n                        role=\"alert\"\n                    >\n                        <div\n                            css={css`\n                                flex-shrink: 0;\n                                width: 30px;\n                                padding: ${theme.spacing}px 0px;\n                                margin-right: 0.3em;\n                                font-size: 1em;\n                                text-align: center;\n                                vertical-align: text-top;\n                                background-color: ${theme.palette.intentions[severity].dark};\n                            `}\n                        >\n                            <Icon fontSize=\"small\" />\n                        </div>\n                        <span\n                            css={css`\n                                padding: ${theme.spacing}px ${theme.spacing * 1.5}px;\n                                word-break: break-all;\n                            `}\n                        >\n                            {message}\n                        </span>\n                        <Button\n                            icon={<CloseIcon fontSize=\"small\" />}\n                            rounded\n                            onClick={handleClick}\n                            css={css`\n                                flex-shrink: 0;\n                                padding: ${theme.spacing}px ${theme.spacing * 1.5}px;\n                                margin-left: 0.3em;\n                                font-size: 1.2em;\n                                color: ${theme.palette.intentions[severity].contrastText};\n                                vertical-align: text-top;\n                                cursor: pointer;\n                                transition: color ${theme.transitions.duration.shorter};\n                                &:hover {\n                                    color: ${theme.palette.intentions[severity].contrastText};\n                                }\n                            `}\n                        />\n                    </animated.div>\n                ) : null\n            )}\n        </React.Fragment>\n    )\n}\n\nexport const alertPositions = [\n    \"top-left\",\n    \"top-center\",\n    \"top-right\",\n    \"bottom-left\",\n    \"bottom-center\",\n    \"bottom-right\"\n] as const\n\nexport type AlertPosition = typeof alertPositions[number]\n\nconst sx = {\n    \"bottom-right\": {\n        right: 0,\n        bottom: 0,\n        alignItems: \"flex-end\"\n    },\n    \"bottom-center\": {\n        bottom: 0,\n        left: \"50%\",\n        transform: \"translateX(-50%)\",\n        alignItems: \"center\"\n    },\n    \"bottom-left\": {\n        left: 0,\n        bottom: 0,\n        alignItems: \"flex-start\"\n    },\n    \"top-right\": {\n        right: 0,\n        top: 0,\n        alignItems: \"flex-end\"\n    },\n    \"top-center\": {\n        top: 0,\n        left: \"50%\",\n        transform: \"translateX(-50%)\",\n        alignItems: \"center\"\n    },\n    \"top-left\": {\n        left: 0,\n        top: 0,\n        alignItems: \"flex-start\"\n    }\n}\nexport const AlertProvider: React.FC<{\n    position?: AlertPosition\n}> = ({ children, position = \"bottom-right\" }) => {\n    const [toasts, setAlerts] = React.useState<\n        ({\n            id: string\n            message: React.ReactNode\n        } & AlertOptions)[]\n    >([])\n\n    const add = useCallback((message: React.ReactNode, options: AlertOptions) => {\n        const id = options?.id ? options.id : Math.random().toString(36).substr(2, 9)\n\n        setAlerts((pre) => {\n            return [...pre, { id, message, ...options }]\n        })\n        return id\n    }, [])\n\n    const remove = useCallback((id) => {\n        setAlerts((toasts) => toasts.filter((toast) => toast.id !== id))\n    }, [])\n\n    const theme = useTheme()\n\n    return (\n        <Provider value={{ add, remove }}>\n            <Portal>\n                <div\n                    css={css({\n                        position: \"fixed\",\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        overflow: \"hidden\",\n                        width: \"fit-content\",\n                        boxSizing: \"border-box\",\n                        maxHeight: \"100%\",\n                        padding: \"8px\",\n                        zIndex: theme.zIndex.tooltip,\n                        ...sx[position]\n                    })}\n                >\n                    {toasts.map((toast) => (\n                        <Alert {...toast} key={toast.id} />\n                    ))}\n                </div>\n            </Portal>\n            {children}\n        </Provider>\n    )\n}\n\nexport const useAlert = () => {\n    const ctx = useContext(AlertContext)\n    return {\n        addAlert: ctx.add,\n        removeAlert: ctx.remove\n    }\n}\n"],"file":"Alert.js"}

package/dist/cjs/Calendar/CalendarDaysInMonth.js

@@ -112,7 +112,7 @@ const CalendarDaysInMonth = ({
       props: {}
     };
 
-    if (eventProps && eventProps !== null && eventProps !== void 0 && eventProps.children) {
+    if (eventProps && eventProps?.children) {
       const {
         children,
         ...eventProps_

package/dist/cjs/Calendar/CalendarDaysInMonth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Calendar/CalendarDaysInMonth.tsx"],"names":["dayjs","extend","isSameOrAfter","isSameOrBefore","isDateOutsidePeriod","date","min","max","getEvent","events","find","event","start","undefined","end","getFirstWeekday","startOf","day","getDaysCount","daysInMonth","defaultRenderCell","message","CalendarDaysInMonth","dates","daysProps","renderCell","props","firstWeekday","days","reversedEvents","slice","reverse","map","i","d","disabled","eventProps","children","eventProps_","format"],"mappings":"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","sourcesContent":["import { CalendarDay } from \"./CalendarDay\"\nimport { CalendarDayEvent } from \"./CalendarDayEvent\"\nimport { CalendarDayProps } from \"./CalendarDay\"\nimport { css } from \"@emotion/react\"\nimport { range } from \"../@utils/range\"\nimport React, { useMemo } from \"react\"\nimport dayjs from \"dayjs\"\nimport isSameOrAfter from \"dayjs/plugin/isSameOrAfter\"\nimport isSameOrBefore from \"dayjs/plugin/isSameOrBefore\"\n\ndayjs.extend(isSameOrAfter)\ndayjs.extend(isSameOrBefore)\n\nconst isDateOutsidePeriod = (date: dayjs.Dayjs, min?: dayjs.ConfigType, max?: dayjs.ConfigType) => {\n    return (!!min && date.isSameOrBefore(min, \"date\")) || (!!max && date.isSameOrAfter(max, \"date\"))\n}\n\nconst getEvent = (date: dayjs.Dayjs, events?: CalendarEvent[]) => {\n    return (\n        events &&\n        events.find((event) => {\n            if (event.start === undefined) {\n                return date.isSameOrBefore(event.end, \"date\")\n            }\n            if (event.end === undefined) {\n                return date.isSameOrAfter(event.start, \"date\")\n            }\n            return date.isSameOrAfter(event.start, \"date\") && date.isSameOrBefore(event.end, \"date\")\n        })\n    )\n}\n\nexport interface CalendarDaysProps extends Omit<CalendarDayProps, \"date\" | \"disabled\" | \"event\"> {\n    children?: React.ReactNode\n}\n\nexport interface CalendarEvent {\n    start?: dayjs.ConfigType\n    end?: dayjs.ConfigType\n    type: \"default\" | \"disabled\" | string\n    props?: CalendarDaysProps\n}\n\nexport interface CalendarDaysInMonthProps<T> {\n    children?: never\n    events?: CalendarEvent[]\n    /**\n     * datesで渡されたデータをどのようにレンダリングするかを指定します\n     * @default \"(message: string) => <Centering>{new String(message)}</Centering>\"\"\n     */\n    renderCell?: (props: T) => React.ReactNode\n    /**\n     * keyに対応するカレンダーのセルに任意の子要素を入れることができます。\n     * keyのフォーマットはYYYYMMDDでなければなりません。\n     */\n    dates?: {\n        [date: string]: T\n    }\n    daysProps?: CalendarDaysProps\n    date?: dayjs.ConfigType\n    min?: dayjs.ConfigType\n    max?: dayjs.ConfigType\n}\n\nconst getFirstWeekday = (date: dayjs.ConfigType) => {\n    return dayjs(date).startOf(\"month\").day()\n}\nconst getDaysCount = (date: dayjs.ConfigType) => {\n    return dayjs(date).daysInMonth() + 1\n}\n\nconst defaultRenderCell = (message: any) => (\n    <div\n        css={css`\n            margin: 0 auto;\n        `}\n    >\n        {message}\n    </div>\n)\n\nexport const CalendarDaysInMonth = <T extends any>({\n    dates,\n    events = [],\n    daysProps = {},\n    date = dayjs(),\n    min,\n    max,\n    renderCell = defaultRenderCell,\n    ...props\n}: Readonly<CalendarDaysInMonthProps<T>>) => {\n    const firstWeekday = useMemo(() => getFirstWeekday(date), [date])\n    const days = useMemo(() => getDaysCount(date), [date])\n    const reversedEvents = useMemo(() => events.slice().reverse(), [events])\n    return (\n        <div\n            css={css`\n                display: grid;\n                grid-template-columns: repeat(7, minmax(42px, 1fr));\n                grid-auto-rows: 1fr;\n                & > *:first-of-type::after {\n                    display: block;\n                    grid-row: 1/1;\n                    grid-column: 1/1;\n                    width: 0px;\n                    padding-bottom: 100%;\n                    content: \"\";\n                }\n            `}\n            {...props}\n        >\n            {range(firstWeekday).map((i) => (\n                <div key={`empty__${i}`} />\n            ))}\n            {range(1, days).map((day) => {\n                const d = dayjs(date).date(day)\n                const event = getEvent(d, reversedEvents)\n                const disabled = isDateOutsidePeriod(d, min, max)\n                const { props: eventProps } = event || ({ props: {} } as CalendarEvent)\n                if (eventProps && eventProps?.children) {\n                    const { children, ...eventProps_ } = eventProps\n                    return (\n                        <CalendarDay\n                            date={d}\n                            key={d.format()}\n                            disabled={disabled}\n                            event={event}\n                            {...daysProps}\n                            {...eventProps_}\n                        >\n                            <CalendarDayEvent\n                                start={dayjs(event!.start)}\n                                end={dayjs(event!.end)}\n                                date={d}\n                                title={typeof children === \"string\" ? children : undefined}\n                            >\n                                {children}\n                            </CalendarDayEvent>\n                        </CalendarDay>\n                    )\n                } else {\n                    const children = dates && dates[d.format(\"YYYYMMDD\")]\n                    return (\n                        <CalendarDay\n                            date={d}\n                            key={d.format()}\n                            disabled={disabled}\n                            event={event}\n                            {...daysProps}\n                            {...eventProps}\n                        >\n                            {children && renderCell(children)}\n                        </CalendarDay>\n                    )\n                }\n            })}\n        </div>\n    )\n}\n"],"file":"CalendarDaysInMonth.js"}
+{"version":3,"sources":["../../../src/Calendar/CalendarDaysInMonth.tsx"],"names":["dayjs","extend","isSameOrAfter","isSameOrBefore","isDateOutsidePeriod","date","min","max","getEvent","events","find","event","start","undefined","end","getFirstWeekday","startOf","day","getDaysCount","daysInMonth","defaultRenderCell","message","CalendarDaysInMonth","dates","daysProps","renderCell","props","firstWeekday","days","reversedEvents","slice","reverse","map","i","d","disabled","eventProps","children","eventProps_","format"],"mappings":"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","sourcesContent":["import { CalendarDay } from \"./CalendarDay\"\nimport { CalendarDayEvent } from \"./CalendarDayEvent\"\nimport { CalendarDayProps } from \"./CalendarDay\"\nimport { css } from \"@emotion/react\"\nimport { range } from \"../@utils/range\"\nimport React, { useMemo } from \"react\"\nimport dayjs from \"dayjs\"\nimport isSameOrAfter from \"dayjs/plugin/isSameOrAfter\"\nimport isSameOrBefore from \"dayjs/plugin/isSameOrBefore\"\n\ndayjs.extend(isSameOrAfter)\ndayjs.extend(isSameOrBefore)\n\nconst isDateOutsidePeriod = (date: dayjs.Dayjs, min?: dayjs.ConfigType, max?: dayjs.ConfigType) => {\n    return (!!min && date.isSameOrBefore(min, \"date\")) || (!!max && date.isSameOrAfter(max, \"date\"))\n}\n\nconst getEvent = (date: dayjs.Dayjs, events?: CalendarEvent[]) => {\n    return (\n        events &&\n        events.find((event) => {\n            if (event.start === undefined) {\n                return date.isSameOrBefore(event.end, \"date\")\n            }\n            if (event.end === undefined) {\n                return date.isSameOrAfter(event.start, \"date\")\n            }\n            return date.isSameOrAfter(event.start, \"date\") && date.isSameOrBefore(event.end, \"date\")\n        })\n    )\n}\n\nexport interface CalendarDaysProps extends Omit<CalendarDayProps, \"date\" | \"disabled\" | \"event\"> {\n    children?: React.ReactNode\n}\n\nexport interface CalendarEvent {\n    start?: dayjs.ConfigType\n    end?: dayjs.ConfigType\n    type: \"default\" | \"disabled\" | string\n    props?: CalendarDaysProps\n}\n\nexport interface CalendarDaysInMonthProps<T> {\n    children?: never\n    events?: CalendarEvent[]\n    /**\n     * datesで渡されたデータをどのようにレンダリングするかを指定します\n     * @default \"(message: string) => <Centering>{new String(message)}</Centering>\"\"\n     */\n    renderCell?: (props: T) => React.ReactNode\n    /**\n     * keyに対応するカレンダーのセルに任意の子要素を入れることができます。\n     * keyのフォーマットはYYYYMMDDでなければなりません。\n     */\n    dates?: {\n        [date: string]: T\n    }\n    daysProps?: CalendarDaysProps\n    date?: dayjs.ConfigType\n    min?: dayjs.ConfigType\n    max?: dayjs.ConfigType\n}\n\nconst getFirstWeekday = (date: dayjs.ConfigType) => {\n    return dayjs(date).startOf(\"month\").day()\n}\nconst getDaysCount = (date: dayjs.ConfigType) => {\n    return dayjs(date).daysInMonth() + 1\n}\n\nconst defaultRenderCell = (message: any) => (\n    <div\n        css={css`\n            margin: 0 auto;\n        `}\n    >\n        {message}\n    </div>\n)\n\nexport const CalendarDaysInMonth = <T extends any>({\n    dates,\n    events = [],\n    daysProps = {},\n    date = dayjs(),\n    min,\n    max,\n    renderCell = defaultRenderCell,\n    ...props\n}: Readonly<CalendarDaysInMonthProps<T>>) => {\n    const firstWeekday = useMemo(() => getFirstWeekday(date), [date])\n    const days = useMemo(() => getDaysCount(date), [date])\n    const reversedEvents = useMemo(() => events.slice().reverse(), [events])\n    return (\n        <div\n            css={css`\n                display: grid;\n                grid-template-columns: repeat(7, minmax(42px, 1fr));\n                grid-auto-rows: 1fr;\n                & > *:first-of-type::after {\n                    display: block;\n                    grid-row: 1/1;\n                    grid-column: 1/1;\n                    width: 0px;\n                    padding-bottom: 100%;\n                    content: \"\";\n                }\n            `}\n            {...props}\n        >\n            {range(firstWeekday).map((i) => (\n                <div key={`empty__${i}`} />\n            ))}\n            {range(1, days).map((day) => {\n                const d = dayjs(date).date(day)\n                const event = getEvent(d, reversedEvents)\n                const disabled = isDateOutsidePeriod(d, min, max)\n                const { props: eventProps } = event || ({ props: {} } as CalendarEvent)\n                if (eventProps && eventProps?.children) {\n                    const { children, ...eventProps_ } = eventProps\n                    return (\n                        <CalendarDay\n                            date={d}\n                            key={d.format()}\n                            disabled={disabled}\n                            event={event}\n                            {...daysProps}\n                            {...eventProps_}\n                        >\n                            <CalendarDayEvent\n                                start={dayjs(event!.start)}\n                                end={dayjs(event!.end)}\n                                date={d}\n                                title={typeof children === \"string\" ? children : undefined}\n                            >\n                                {children}\n                            </CalendarDayEvent>\n                        </CalendarDay>\n                    )\n                } else {\n                    const children = dates && dates[d.format(\"YYYYMMDD\")]\n                    return (\n                        <CalendarDay\n                            date={d}\n                            key={d.format()}\n                            disabled={disabled}\n                            event={event}\n                            {...daysProps}\n                            {...eventProps}\n                        >\n                            {children && renderCell(children)}\n                        </CalendarDay>\n                    )\n                }\n            })}\n        </div>\n    )\n}\n"],"file":"CalendarDaysInMonth.js"}

package/dist/cjs/Chip/Chip.js

@@ -35,13 +35,11 @@ const Chip = /*#__PURE__*/_react2.default.forwardRef(({
   title,
   ...props
 }, ref) => {
-  var _theme$palette$intent, _theme$palette$intent2;
-
   const theme = (0, _theme.useTheme)();
   return (0, _react.jsx)("span", _extends({
     ref: ref,
     title: title,
-    css: [theme.typography.caption, /*#__PURE__*/(0, _react.css)("display:inline-flex;box-sizing:border-box;padding:0.5ex 1em;cursor:", title ? "help" : "inherit", ";border-radius:", rounded ? "2ex" : "0.5ex", ";background-color:", ((_theme$palette$intent = theme.palette.intentions[color]) === null || _theme$palette$intent === void 0 ? void 0 : _theme$palette$intent.main) || theme.palette.gray[200], ";color:", ((_theme$palette$intent2 = theme.palette.intentions[color]) === null || _theme$palette$intent2 === void 0 ? void 0 : _theme$palette$intent2.contrastText) || theme.palette.text.primary, ";white-space:nowrap;" + (process.env.NODE_ENV === "production" ? "" : ";label:Chip;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDdUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0NoaXAvQ2hpcC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQYXJ0aWFsQ29sb3JQcm9wcywgdXNlVGhlbWUgfSBmcm9tIFwiLi4vdGhlbWVcIlxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIlxuXG5leHBvcnQgaW50ZXJmYWNlIENoaXBQcm9wcyBleHRlbmRzIFBhcnRpYWxDb2xvclByb3BzLCBPbWl0PFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxTcGFuRWxlbWVudD4sIFwiY29sb3JcIj4ge1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbiAgICAvKipcbiAgICAgKiBJY29u44Go44GX44Gm5YWl44KM44KL6KaB57Sg44KS5oyH5a6a44GX44G+44GZ44CCXG4gICAgICpcbiAgICAgKiBAZGVmYXVsdCBudWxsXG4gICAgICovXG4gICAgaWNvbj86IFJlYWN0LlJlYWN0Tm9kZVxuICAgIC8qKlxuICAgICAqIOWJiumZpOOBleOCjOOBvuOBl+OBn+OAglxuICAgICAqL1xuICAgIHZhcmlhbnQ/OiBzdHJpbmdcbiAgICAvKipcbiAgICAgKiDop5LjgpLkuLjjgY/jgZfjgb7jgZnjgIJcbiAgICAgKi9cbiAgICByb3VuZGVkPzogYm9vbGVhblxuICAgIC8qKlxuICAgICAqIOODm+ODkOODvOaZguOBq+ODhOODvOODq+ODgeODg+ODl+OBruOCiOOBhuOBquimi+OBn+ebruOBp+aMh+WumuOBleOCjOOBn+aWh+Wtl+WIl+OCkuihqOekuuOBl+OBvuOBmeOAglxuICAgICAqIOOBk+OBruOCiOOBhuOBquOCs+ODs+ODneODvOODjeODs+ODiOOBp+OBr+aWh+Wtl+aVsOOCkuOBguOBvuOCiumVt+OBj+OBp+OBjeOBquOBhOOBruOBp+ODpuODvOOCtuODvOOBq+S4jeimquWIh+OBq+OBquOCiuOBjOOBoeOBquOBruOBp+OAgVxuICAgICAqIOOBquOCi+OBueOBj+aMh+WumuOBl+OBpuODpuODvOOCtuODvOOCkuaJi+WKqeOBkeOBl+OBpuOBj+OBoOOBleOBhOOAglxuICAgICAqIHRpdGxl44GM5oyH5a6a44GV44KM44Gf5aC05ZCI44CBY3Vyc29y44GMaGVscOOBq+WkieabtOOBleOCjOOBvuOBmeOAglxuICAgICAqIFRvb2x0aXDjgrPjg7Pjg53jg7zjg43jg7Pjg4jjgpLliKnnlKjjgZnjgovjgojjgorjgZPjgaHjgonjga7liKnnlKjjgpLlhKrlhYjjgZnjgovjgbnjgY3jgafjgZnjgIJcbiAgICAgKi9cbiAgICB0aXRsZT86IHN0cmluZ1xuICAgIHN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllc1xuICAgIGNsYXNzTmFtZT86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgQ2hpcCA9IFJlYWN0LmZvcndhcmRSZWY8SFRNTFNwYW5FbGVtZW50LCBDaGlwUHJvcHM+KFxuICAgICh7IGNvbG9yID0gXCJkZWZhdWx0XCIsIGljb24sIGNoaWxkcmVuLCByb3VuZGVkLCB0aXRsZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB0aXRsZT17dGl0bGV9XG4gICAgICAgICAgICAgICAgY3NzPXtbXG4gICAgICAgICAgICAgICAgICAgIHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbixcbiAgICAgICAgICAgICAgICAgICAgY3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICAgICAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMC41ZXggMWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgY3Vyc29yOiAke3RpdGxlID8gXCJoZWxwXCIgOiBcImluaGVyaXRcIn07XG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiAke3JvdW5kZWQgPyBcIjJleFwiIDogXCIwLjVleFwifTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucGFsZXR0ZS5pbnRlbnRpb25zW2NvbG9yXT8ubWFpbiB8fCB0aGVtZS5wYWxldHRlLmdyYXlbMjAwXX07XG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLmludGVudGlvbnNbY29sb3JdPy5jb250cmFzdFRleHQgfHwgdGhlbWUucGFsZXR0ZS50ZXh0LnByaW1hcnl9O1xuICAgICAgICAgICAgICAgICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgICAgICAgICAgICAgICAgYFxuICAgICAgICAgICAgICAgIF19XG4gICAgICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMC41ZW07XG4gICAgICAgICAgICAgICAgICAgICAgICBgfVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICB7aWNvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICApXG4gICAgfVxuKVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : ";label:Chip;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDZ0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0NoaXAvQ2hpcC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQYXJ0aWFsQ29sb3JQcm9wcywgdXNlVGhlbWUgfSBmcm9tIFwiLi4vdGhlbWVcIlxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIlxuXG5leHBvcnQgaW50ZXJmYWNlIENoaXBQcm9wcyBleHRlbmRzIFBhcnRpYWxDb2xvclByb3BzLCBPbWl0PFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxTcGFuRWxlbWVudD4sIFwiY29sb3JcIj4ge1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbiAgICAvKipcbiAgICAgKiBJY29u44Go44GX44Gm5YWl44KM44KL6KaB57Sg44KS5oyH5a6a44GX44G+44GZ44CCXG4gICAgICpcbiAgICAgKiBAZGVmYXVsdCBudWxsXG4gICAgICovXG4gICAgaWNvbj86IFJlYWN0LlJlYWN0Tm9kZVxuICAgIC8qKlxuICAgICAqIOWJiumZpOOBleOCjOOBvuOBl+OBn+OAglxuICAgICAqL1xuICAgIHZhcmlhbnQ/OiBzdHJpbmdcbiAgICAvKipcbiAgICAgKiDop5LjgpLkuLjjgY/jgZfjgb7jgZnjgIJcbiAgICAgKi9cbiAgICByb3VuZGVkPzogYm9vbGVhblxuICAgIC8qKlxuICAgICAqIOODm+ODkOODvOaZguOBq+ODhOODvOODq+ODgeODg+ODl+OBruOCiOOBhuOBquimi+OBn+ebruOBp+aMh+WumuOBleOCjOOBn+aWh+Wtl+WIl+OCkuihqOekuuOBl+OBvuOBmeOAglxuICAgICAqIOOBk+OBruOCiOOBhuOBquOCs+ODs+ODneODvOODjeODs+ODiOOBp+OBr+aWh+Wtl+aVsOOCkuOBguOBvuOCiumVt+OBj+OBp+OBjeOBquOBhOOBruOBp+ODpuODvOOCtuODvOOBq+S4jeimquWIh+OBq+OBquOCiuOBjOOBoeOBquOBruOBp+OAgVxuICAgICAqIOOBquOCi+OBueOBj+aMh+WumuOBl+OBpuODpuODvOOCtuODvOOCkuaJi+WKqeOBkeOBl+OBpuOBj+OBoOOBleOBhOOAglxuICAgICAqIHRpdGxl44GM5oyH5a6a44GV44KM44Gf5aC05ZCI44CBY3Vyc29y44GMaGVscOOBq+WkieabtOOBleOCjOOBvuOBmeOAglxuICAgICAqIFRvb2x0aXDjgrPjg7Pjg53jg7zjg43jg7Pjg4jjgpLliKnnlKjjgZnjgovjgojjgorjgZPjgaHjgonjga7liKnnlKjjgpLlhKrlhYjjgZnjgovjgbnjgY3jgafjgZnjgIJcbiAgICAgKi9cbiAgICB0aXRsZT86IHN0cmluZ1xuICAgIHN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllc1xuICAgIGNsYXNzTmFtZT86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgQ2hpcCA9IFJlYWN0LmZvcndhcmRSZWY8SFRNTFNwYW5FbGVtZW50LCBDaGlwUHJvcHM+KFxuICAgICh7IGNvbG9yID0gXCJkZWZhdWx0XCIsIGljb24sIGNoaWxkcmVuLCByb3VuZGVkLCB0aXRsZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB0aXRsZT17dGl0bGV9XG4gICAgICAgICAgICAgICAgY3NzPXtbXG4gICAgICAgICAgICAgICAgICAgIHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbixcbiAgICAgICAgICAgICAgICAgICAgY3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICAgICAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMC41ZXggMWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgY3Vyc29yOiAke3RpdGxlID8gXCJoZWxwXCIgOiBcImluaGVyaXRcIn07XG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiAke3JvdW5kZWQgPyBcIjJleFwiIDogXCIwLjVleFwifTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucGFsZXR0ZS5pbnRlbnRpb25zW2NvbG9yXT8ubWFpbiB8fCB0aGVtZS5wYWxldHRlLmdyYXlbMjAwXX07XG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLmludGVudGlvbnNbY29sb3JdPy5jb250cmFzdFRleHQgfHwgdGhlbWUucGFsZXR0ZS50ZXh0LnByaW1hcnl9O1xuICAgICAgICAgICAgICAgICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgICAgICAgICAgICAgICAgYFxuICAgICAgICAgICAgICAgIF19XG4gICAgICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMC41ZW07XG4gICAgICAgICAgICAgICAgICAgICAgICBgfVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICB7aWNvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICApXG4gICAgfVxuKVxuIl19 */"]
+    css: [theme.typography.caption, /*#__PURE__*/(0, _react.css)("display:inline-flex;box-sizing:border-box;padding:0.5ex 1em;cursor:", title ? "help" : "inherit", ";border-radius:", rounded ? "2ex" : "0.5ex", ";background-color:", theme.palette.intentions[color]?.main || theme.palette.gray[200], ";color:", theme.palette.intentions[color]?.contrastText || theme.palette.text.primary, ";white-space:nowrap;" + (process.env.NODE_ENV === "production" ? "" : ";label:Chip;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDdUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0NoaXAvQ2hpcC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQYXJ0aWFsQ29sb3JQcm9wcywgdXNlVGhlbWUgfSBmcm9tIFwiLi4vdGhlbWVcIlxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIlxuXG5leHBvcnQgaW50ZXJmYWNlIENoaXBQcm9wcyBleHRlbmRzIFBhcnRpYWxDb2xvclByb3BzLCBPbWl0PFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxTcGFuRWxlbWVudD4sIFwiY29sb3JcIj4ge1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbiAgICAvKipcbiAgICAgKiBJY29u44Go44GX44Gm5YWl44KM44KL6KaB57Sg44KS5oyH5a6a44GX44G+44GZ44CCXG4gICAgICpcbiAgICAgKiBAZGVmYXVsdCBudWxsXG4gICAgICovXG4gICAgaWNvbj86IFJlYWN0LlJlYWN0Tm9kZVxuICAgIC8qKlxuICAgICAqIOWJiumZpOOBleOCjOOBvuOBl+OBn+OAglxuICAgICAqL1xuICAgIHZhcmlhbnQ/OiBzdHJpbmdcbiAgICAvKipcbiAgICAgKiDop5LjgpLkuLjjgY/jgZfjgb7jgZnjgIJcbiAgICAgKi9cbiAgICByb3VuZGVkPzogYm9vbGVhblxuICAgIC8qKlxuICAgICAqIOODm+ODkOODvOaZguOBq+ODhOODvOODq+ODgeODg+ODl+OBruOCiOOBhuOBquimi+OBn+ebruOBp+aMh+WumuOBleOCjOOBn+aWh+Wtl+WIl+OCkuihqOekuuOBl+OBvuOBmeOAglxuICAgICAqIOOBk+OBruOCiOOBhuOBquOCs+ODs+ODneODvOODjeODs+ODiOOBp+OBr+aWh+Wtl+aVsOOCkuOBguOBvuOCiumVt+OBj+OBp+OBjeOBquOBhOOBruOBp+ODpuODvOOCtuODvOOBq+S4jeimquWIh+OBq+OBquOCiuOBjOOBoeOBquOBruOBp+OAgVxuICAgICAqIOOBquOCi+OBueOBj+aMh+WumuOBl+OBpuODpuODvOOCtuODvOOCkuaJi+WKqeOBkeOBl+OBpuOBj+OBoOOBleOBhOOAglxuICAgICAqIHRpdGxl44GM5oyH5a6a44GV44KM44Gf5aC05ZCI44CBY3Vyc29y44GMaGVscOOBq+WkieabtOOBleOCjOOBvuOBmeOAglxuICAgICAqIFRvb2x0aXDjgrPjg7Pjg53jg7zjg43jg7Pjg4jjgpLliKnnlKjjgZnjgovjgojjgorjgZPjgaHjgonjga7liKnnlKjjgpLlhKrlhYjjgZnjgovjgbnjgY3jgafjgZnjgIJcbiAgICAgKi9cbiAgICB0aXRsZT86IHN0cmluZ1xuICAgIHN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllc1xuICAgIGNsYXNzTmFtZT86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgQ2hpcCA9IFJlYWN0LmZvcndhcmRSZWY8SFRNTFNwYW5FbGVtZW50LCBDaGlwUHJvcHM+KFxuICAgICh7IGNvbG9yID0gXCJkZWZhdWx0XCIsIGljb24sIGNoaWxkcmVuLCByb3VuZGVkLCB0aXRsZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB0aXRsZT17dGl0bGV9XG4gICAgICAgICAgICAgICAgY3NzPXtbXG4gICAgICAgICAgICAgICAgICAgIHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbixcbiAgICAgICAgICAgICAgICAgICAgY3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICAgICAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMC41ZXggMWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgY3Vyc29yOiAke3RpdGxlID8gXCJoZWxwXCIgOiBcImluaGVyaXRcIn07XG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiAke3JvdW5kZWQgPyBcIjJleFwiIDogXCIwLjVleFwifTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucGFsZXR0ZS5pbnRlbnRpb25zW2NvbG9yXT8ubWFpbiB8fCB0aGVtZS5wYWxldHRlLmdyYXlbMjAwXX07XG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLmludGVudGlvbnNbY29sb3JdPy5jb250cmFzdFRleHQgfHwgdGhlbWUucGFsZXR0ZS50ZXh0LnByaW1hcnl9O1xuICAgICAgICAgICAgICAgICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgICAgICAgICAgICAgICAgYFxuICAgICAgICAgICAgICAgIF19XG4gICAgICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMC41ZW07XG4gICAgICAgICAgICAgICAgICAgICAgICBgfVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICB7aWNvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICApXG4gICAgfVxuKVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : ";label:Chip;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGlwL0NoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDZ0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0NoaXAvQ2hpcC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQYXJ0aWFsQ29sb3JQcm9wcywgdXNlVGhlbWUgfSBmcm9tIFwiLi4vdGhlbWVcIlxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIlxuXG5leHBvcnQgaW50ZXJmYWNlIENoaXBQcm9wcyBleHRlbmRzIFBhcnRpYWxDb2xvclByb3BzLCBPbWl0PFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxTcGFuRWxlbWVudD4sIFwiY29sb3JcIj4ge1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbiAgICAvKipcbiAgICAgKiBJY29u44Go44GX44Gm5YWl44KM44KL6KaB57Sg44KS5oyH5a6a44GX44G+44GZ44CCXG4gICAgICpcbiAgICAgKiBAZGVmYXVsdCBudWxsXG4gICAgICovXG4gICAgaWNvbj86IFJlYWN0LlJlYWN0Tm9kZVxuICAgIC8qKlxuICAgICAqIOWJiumZpOOBleOCjOOBvuOBl+OBn+OAglxuICAgICAqL1xuICAgIHZhcmlhbnQ/OiBzdHJpbmdcbiAgICAvKipcbiAgICAgKiDop5LjgpLkuLjjgY/jgZfjgb7jgZnjgIJcbiAgICAgKi9cbiAgICByb3VuZGVkPzogYm9vbGVhblxuICAgIC8qKlxuICAgICAqIOODm+ODkOODvOaZguOBq+ODhOODvOODq+ODgeODg+ODl+OBruOCiOOBhuOBquimi+OBn+ebruOBp+aMh+WumuOBleOCjOOBn+aWh+Wtl+WIl+OCkuihqOekuuOBl+OBvuOBmeOAglxuICAgICAqIOOBk+OBruOCiOOBhuOBquOCs+ODs+ODneODvOODjeODs+ODiOOBp+OBr+aWh+Wtl+aVsOOCkuOBguOBvuOCiumVt+OBj+OBp+OBjeOBquOBhOOBruOBp+ODpuODvOOCtuODvOOBq+S4jeimquWIh+OBq+OBquOCiuOBjOOBoeOBquOBruOBp+OAgVxuICAgICAqIOOBquOCi+OBueOBj+aMh+WumuOBl+OBpuODpuODvOOCtuODvOOCkuaJi+WKqeOBkeOBl+OBpuOBj+OBoOOBleOBhOOAglxuICAgICAqIHRpdGxl44GM5oyH5a6a44GV44KM44Gf5aC05ZCI44CBY3Vyc29y44GMaGVscOOBq+WkieabtOOBleOCjOOBvuOBmeOAglxuICAgICAqIFRvb2x0aXDjgrPjg7Pjg53jg7zjg43jg7Pjg4jjgpLliKnnlKjjgZnjgovjgojjgorjgZPjgaHjgonjga7liKnnlKjjgpLlhKrlhYjjgZnjgovjgbnjgY3jgafjgZnjgIJcbiAgICAgKi9cbiAgICB0aXRsZT86IHN0cmluZ1xuICAgIHN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllc1xuICAgIGNsYXNzTmFtZT86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgQ2hpcCA9IFJlYWN0LmZvcndhcmRSZWY8SFRNTFNwYW5FbGVtZW50LCBDaGlwUHJvcHM+KFxuICAgICh7IGNvbG9yID0gXCJkZWZhdWx0XCIsIGljb24sIGNoaWxkcmVuLCByb3VuZGVkLCB0aXRsZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB0aXRsZT17dGl0bGV9XG4gICAgICAgICAgICAgICAgY3NzPXtbXG4gICAgICAgICAgICAgICAgICAgIHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbixcbiAgICAgICAgICAgICAgICAgICAgY3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICAgICAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMC41ZXggMWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgY3Vyc29yOiAke3RpdGxlID8gXCJoZWxwXCIgOiBcImluaGVyaXRcIn07XG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiAke3JvdW5kZWQgPyBcIjJleFwiIDogXCIwLjVleFwifTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucGFsZXR0ZS5pbnRlbnRpb25zW2NvbG9yXT8ubWFpbiB8fCB0aGVtZS5wYWxldHRlLmdyYXlbMjAwXX07XG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLmludGVudGlvbnNbY29sb3JdPy5jb250cmFzdFRleHQgfHwgdGhlbWUucGFsZXR0ZS50ZXh0LnByaW1hcnl9O1xuICAgICAgICAgICAgICAgICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgICAgICAgICAgICAgICAgYFxuICAgICAgICAgICAgICAgIF19XG4gICAgICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMC41ZW07XG4gICAgICAgICAgICAgICAgICAgICAgICBgfVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICB7aWNvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICApXG4gICAgfVxuKVxuIl19 */"]
   }, props), icon && (0, _react.jsx)("span", {
     css: _ref
   }, icon), children);

package/dist/cjs/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chip/Chip.tsx"],"names":["Chip","React","forwardRef","color","icon","children","rounded","title","props","ref","theme","typography","caption","css","palette","intentions","main","gray","contrastText","text","primary"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;AA8BO,MAAMA,IAAI,gBAAGC,gBAAMC,UAAN,CAChB,CAAC;AAAEC,EAAAA,KAAK,GAAG,SAAV;AAAqBC,EAAAA,IAArB;AAA2BC,EAAAA,QAA3B;AAAqCC,EAAAA,OAArC;AAA8CC,EAAAA,KAA9C;AAAqD,KAAGC;AAAxD,CAAD,EAAkEC,GAAlE,KAA0E;AAAA;;AACtE,QAAMC,KAAK,GAAG,sBAAd;AACA,SACI;AACI,IAAA,GAAG,EAAED,GADT;AAEI,IAAA,KAAK,EAAEF,KAFX;AAGI,IAAA,GAAG,GACCG,KAAK,CAACC,UAAN,CAAiBC,OADlB,mBAECC,UAFD,yEAMeN,KAAK,GAAG,MAAH,GAAY,SANhC,qBAOsBD,OAAO,GAAG,KAAH,GAAW,OAPxC,wBAQyB,0BAAAI,KAAK,CAACI,OAAN,CAAcC,UAAd,CAAyBZ,KAAzB,iFAAiCa,IAAjC,KAAyCN,KAAK,CAACI,OAAN,CAAcG,IAAd,CAAmB,GAAnB,CARlE,aASc,2BAAAP,KAAK,CAACI,OAAN,CAAcC,UAAd,CAAyBZ,KAAzB,mFAAiCe,YAAjC,KAAiDR,KAAK,CAACI,OAAN,CAAcK,IAAd,CAAmBC,OATlF;AAHP,KAgBQZ,KAhBR,GAkBKJ,IAAI,IACD;AACI,IAAA,GAAG;AADP,KAKKA,IALL,CAnBR,EA2BKC,QA3BL,CADJ;AA+BH,CAlCe,CAAb","sourcesContent":["import { PartialColorProps, useTheme } from \"../theme\"\nimport { css } from \"@emotion/react\"\nimport React from \"react\"\n\nexport interface ChipProps extends PartialColorProps, Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\"> {\n    children: React.ReactNode\n    /**\n     * Iconとして入れる要素を指定します。\n     *\n     * @default null\n     */\n    icon?: React.ReactNode\n    /**\n     * 削除されました。\n     */\n    variant?: string\n    /**\n     * 角を丸くします。\n     */\n    rounded?: boolean\n    /**\n     * ホバー時にツールチップのような見た目で指定された文字列を表示します。\n     * このようなコンポーネントでは文字数をあまり長くできないのでユーザーに不親切になりがちなので、\n     * なるべく指定してユーザーを手助けしてください。\n     * titleが指定された場合、cursorがhelpに変更されます。\n     * Tooltipコンポーネントを利用するよりこちらの利用を優先するべきです。\n     */\n    title?: string\n    style?: React.CSSProperties\n    className?: string\n}\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n    ({ color = \"default\", icon, children, rounded, title, ...props }, ref) => {\n        const theme = useTheme()\n        return (\n            <span\n                ref={ref}\n                title={title}\n                css={[\n                    theme.typography.caption,\n                    css`\n                        display: inline-flex;\n                        box-sizing: border-box;\n                        padding: 0.5ex 1em;\n                        cursor: ${title ? \"help\" : \"inherit\"};\n                        border-radius: ${rounded ? \"2ex\" : \"0.5ex\"};\n                        background-color: ${theme.palette.intentions[color]?.main || theme.palette.gray[200]};\n                        color: ${theme.palette.intentions[color]?.contrastText || theme.palette.text.primary};\n                        white-space: nowrap;\n                    `\n                ]}\n                {...props}\n            >\n                {icon && (\n                    <span\n                        css={css`\n                            margin-right: 0.5em;\n                        `}\n                    >\n                        {icon}\n                    </span>\n                )}\n                {children}\n            </span>\n        )\n    }\n)\n"],"file":"Chip.js"}
+{"version":3,"sources":["../../../src/Chip/Chip.tsx"],"names":["Chip","React","forwardRef","color","icon","children","rounded","title","props","ref","theme","typography","caption","css","palette","intentions","main","gray","contrastText","text","primary"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;AA8BO,MAAMA,IAAI,gBAAGC,gBAAMC,UAAN,CAChB,CAAC;AAAEC,EAAAA,KAAK,GAAG,SAAV;AAAqBC,EAAAA,IAArB;AAA2BC,EAAAA,QAA3B;AAAqCC,EAAAA,OAArC;AAA8CC,EAAAA,KAA9C;AAAqD,KAAGC;AAAxD,CAAD,EAAkEC,GAAlE,KAA0E;AACtE,QAAMC,KAAK,GAAG,sBAAd;AACA,SACI;AACI,IAAA,GAAG,EAAED,GADT;AAEI,IAAA,KAAK,EAAEF,KAFX;AAGI,IAAA,GAAG,GACCG,KAAK,CAACC,UAAN,CAAiBC,OADlB,mBAECC,UAFD,yEAMeN,KAAK,GAAG,MAAH,GAAY,SANhC,qBAOsBD,OAAO,GAAG,KAAH,GAAW,OAPxC,wBAQyBI,KAAK,CAACI,OAAN,CAAcC,UAAd,CAAyBZ,KAAzB,GAAiCa,IAAjC,IAAyCN,KAAK,CAACI,OAAN,CAAcG,IAAd,CAAmB,GAAnB,CARlE,aAScP,KAAK,CAACI,OAAN,CAAcC,UAAd,CAAyBZ,KAAzB,GAAiCe,YAAjC,IAAiDR,KAAK,CAACI,OAAN,CAAcK,IAAd,CAAmBC,OATlF;AAHP,KAgBQZ,KAhBR,GAkBKJ,IAAI,IACD;AACI,IAAA,GAAG;AADP,KAKKA,IALL,CAnBR,EA2BKC,QA3BL,CADJ;AA+BH,CAlCe,CAAb","sourcesContent":["import { PartialColorProps, useTheme } from \"../theme\"\nimport { css } from \"@emotion/react\"\nimport React from \"react\"\n\nexport interface ChipProps extends PartialColorProps, Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\"> {\n    children: React.ReactNode\n    /**\n     * Iconとして入れる要素を指定します。\n     *\n     * @default null\n     */\n    icon?: React.ReactNode\n    /**\n     * 削除されました。\n     */\n    variant?: string\n    /**\n     * 角を丸くします。\n     */\n    rounded?: boolean\n    /**\n     * ホバー時にツールチップのような見た目で指定された文字列を表示します。\n     * このようなコンポーネントでは文字数をあまり長くできないのでユーザーに不親切になりがちなので、\n     * なるべく指定してユーザーを手助けしてください。\n     * titleが指定された場合、cursorがhelpに変更されます。\n     * Tooltipコンポーネントを利用するよりこちらの利用を優先するべきです。\n     */\n    title?: string\n    style?: React.CSSProperties\n    className?: string\n}\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n    ({ color = \"default\", icon, children, rounded, title, ...props }, ref) => {\n        const theme = useTheme()\n        return (\n            <span\n                ref={ref}\n                title={title}\n                css={[\n                    theme.typography.caption,\n                    css`\n                        display: inline-flex;\n                        box-sizing: border-box;\n                        padding: 0.5ex 1em;\n                        cursor: ${title ? \"help\" : \"inherit\"};\n                        border-radius: ${rounded ? \"2ex\" : \"0.5ex\"};\n                        background-color: ${theme.palette.intentions[color]?.main || theme.palette.gray[200]};\n                        color: ${theme.palette.intentions[color]?.contrastText || theme.palette.text.primary};\n                        white-space: nowrap;\n                    `\n                ]}\n                {...props}\n            >\n                {icon && (\n                    <span\n                        css={css`\n                            margin-right: 0.5em;\n                        `}\n                    >\n                        {icon}\n                    </span>\n                )}\n                {children}\n            </span>\n        )\n    }\n)\n"],"file":"Chip.js"}

package/dist/cjs/DateTextField/DateTextField.js

@@ -62,7 +62,7 @@ const DateTextField = ({
   const formater = (0, _react.useCallback)(value => {
     const format = /([\d*]{0,4})([\d*]{0,2})?([\d*]{0,2})?/;
     const execResult = format.exec(value.split(delimiter).join(""));
-    const validValues = (execResult === null || execResult === void 0 ? void 0 : execResult.splice(1, 3).filter(x => x)) || [];
+    const validValues = execResult?.splice(1, 3).filter(x => x) || [];
     return validValues.join(delimiter) + (value.length === 4 || value.length === 6 ? delimiter : "");
   }, [delimiter]);
   const [value, setValue] = (0, _react.useState)(() => {
@@ -78,7 +78,7 @@ const DateTextField = ({
         return false;
       }
 
-      return !validateDate(value, template) && ((validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.patternMismatch) || `有効な日付を${template}形式で入力してください`);
+      return !validateDate(value, template) && (validationMessages?.patternMismatch || `有効な日付を${template}形式で入力してください`);
     };
 
     const rangeUnderflowValidation = value => {
@@ -90,7 +90,7 @@ const DateTextField = ({
         return false;
       }
 
-      return (0, _dayjs.default)(value).isBefore((0, _dayjs.default)(min)) && ((validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeUnderflow) || `${(0, _dayjs.default)(min).format(template)} 以降の値を指定する必要があります。`);
+      return (0, _dayjs.default)(value).isBefore((0, _dayjs.default)(min)) && (validationMessages?.rangeUnderflow || `${(0, _dayjs.default)(min).format(template)} 以降の値を指定する必要があります。`);
     };
 
     const rangeOverflowValidation = value => {
@@ -102,11 +102,11 @@ const DateTextField = ({
         return false;
       }
 
-      return (0, _dayjs.default)(value).isAfter((0, _dayjs.default)(max)) && ((validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeOverflow) || `${(0, _dayjs.default)(max).format(template)} 以前の値を指定する必要があります。`);
+      return (0, _dayjs.default)(value).isAfter((0, _dayjs.default)(max)) && (validationMessages?.rangeOverflow || `${(0, _dayjs.default)(max).format(template)} 以前の値を指定する必要があります。`);
     };
 
     return [...propsCustomValidations, patternMismatchValidation, rangeUnderflowValidation, rangeOverflowValidation];
-  }, [delimiter, max, min, propsCustomValidations, template, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.patternMismatch, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeOverflow, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeUnderflow]);
+  }, [delimiter, max, min, propsCustomValidations, template, validationMessages?.patternMismatch, validationMessages?.rangeOverflow, validationMessages?.rangeUnderflow]);
   const validation = (0, _useValidation.useValidation)({
     ref,
     validationMessages,
@@ -127,7 +127,7 @@ const DateTextField = ({
     }
 
     const element = event.currentTarget;
-    let cursorPosition = element === null || element === void 0 ? void 0 : element.selectionStart;
+    let cursorPosition = element?.selectionStart;
     requestAnimationFrame(() => {
       if (document.activeElement !== element) return;
       if (cursorPosition === null) return;

package/dist/cjs/DateTextField/DateTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DateTextField/DateTextField.tsx"],"names":["validateDate","date","format","DateTextField","className","style","label","onChange","validationMessages","customValidations","propsCustomValidations","value","propsValue","defaultValue","min","max","readOnly","propsReadOnly","loading","propsLoading","disabled","bottomGutter","helperText","invalid","delimiter","props","ref","template","join","formater","execResult","exec","split","validValues","splice","filter","x","length","setValue","replace","pattern","RegExp","lightPattern","patternMismatchValidation","test","patternMismatch","rangeUnderflowValidation","isBefore","rangeUnderflow","rangeOverflowValidation","isAfter","rangeOverflow","validation","handleChange","event","formatedValue","currentTarget","element","cursorPosition","selectionStart","requestAnimationFrame","document","activeElement","setSelectionRange","touched","additionalProps","required","valid","message"],"mappings":"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","sourcesContent":["import { FieldProps } from \"../TextField\"\nimport { FormControl } from \"../FormControl\"\nimport { FormHelperText, InputBottomGutterProps } from \"../FormHelperText\"\nimport { InputBase, InputBaseProps } from \"../InputBase\"\nimport { InputLabel } from \"../InputLabel\"\nimport { useDitectInputTouched } from \"../TextField/useDitectInputTouched\"\nimport { useFieldGroup } from \"../FieldGroup\"\nimport { useValidation } from \"../TextField/useValidation\"\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport dayjs from \"dayjs\"\n\nexport interface DateTextFieldProps\n    extends FieldProps<string>,\n        Omit<InputBaseProps, \"defaultValue\" | \"value\" | \"onChange\">,\n        InputBottomGutterProps {\n    type?: never\n    /**\n     * @default \"/\"\n     * @description 日付を区切るための文字列。\n     */\n    delimiter?: string\n}\n\nconst validateDate = (date: string, format: string) => {\n    return dayjs(date, format).format(format) === date\n}\n\nexport const DateTextField = ({\n    className,\n    style,\n    label,\n    onChange,\n    validationMessages,\n    customValidations: propsCustomValidations = [],\n    value: propsValue,\n    defaultValue,\n    min,\n    max,\n    readOnly: propsReadOnly,\n    loading: propsLoading,\n    disabled,\n    bottomGutter,\n    helperText,\n    invalid,\n    delimiter = \"/\",\n    ...props\n}: DateTextFieldProps) => {\n    const ref = useRef<HTMLInputElement>(null)\n\n    const template = useMemo(() => [\"YYYY\", \"MM\", \"DD\"].join(delimiter), [delimiter])\n\n    const formater = useCallback(\n        (value: string) => {\n            const format = /([\\d*]{0,4})([\\d*]{0,2})?([\\d*]{0,2})?/\n            const execResult = format.exec(value.split(delimiter).join(\"\"))\n            const validValues = execResult?.splice(1, 3).filter((x) => x) || []\n            return validValues.join(delimiter) + (value.length === 4 || value.length === 6 ? delimiter : \"\")\n        },\n        [delimiter]\n    )\n\n    const [value, setValue] = useState(() => {\n        const value = propsValue || defaultValue\n        return value ? formater(value.replace(/[^0-9]/g, \"\")) : \"\"\n    })\n\n    const customValidations = useMemo(() => {\n        const pattern = new RegExp([\"[0-9]{4}\", \"(0[1-9]|1[012])\", \"(0[1-9]|[12][0-9]|3[01])\"].join(delimiter))\n        const lightPattern = new RegExp([\"[\\\\d*]{4}\", \"[\\\\d*]{2}\", \"[\\\\d*]{2}\"].join(delimiter))\n\n        const patternMismatchValidation = (value: string) => {\n            if (!lightPattern.test(value)) {\n                return false\n            }\n            return (\n                !validateDate(value, template) &&\n                (validationMessages?.patternMismatch || `有効な日付を${template}形式で入力してください`)\n            )\n        }\n        const rangeUnderflowValidation = (value: string) => {\n            if (!min) {\n                return false\n            }\n            if (!pattern.test(value)) {\n                return false\n            }\n            return (\n                dayjs(value).isBefore(dayjs(min)) &&\n                (validationMessages?.rangeUnderflow ||\n                    `${dayjs(min).format(template)} 以降の値を指定する必要があります。`)\n            )\n        }\n        const rangeOverflowValidation = (value: string) => {\n            if (!max) {\n                return false\n            }\n            if (!pattern.test(value)) {\n                return false\n            }\n            return (\n                dayjs(value).isAfter(dayjs(max)) &&\n                (validationMessages?.rangeOverflow ||\n                    `${dayjs(max).format(template)} 以前の値を指定する必要があります。`)\n            )\n        }\n        return [...propsCustomValidations, patternMismatchValidation, rangeUnderflowValidation, rangeOverflowValidation]\n    }, [\n        delimiter,\n        max,\n        min,\n        propsCustomValidations,\n        template,\n        validationMessages?.patternMismatch,\n        validationMessages?.rangeOverflow,\n        validationMessages?.rangeUnderflow\n    ])\n\n    const validation = useValidation<string>({\n        ref,\n        validationMessages,\n        customValidations,\n        value\n    })\n\n    /**\n     * Handling\n     */\n    const handleChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            const formatedValue = event.currentTarget.value || \"\"\n            const value = formatedValue.replace(new RegExp(delimiter, \"g\"), \"\")\n            setValue(formater(value))\n            if (onChange) {\n                onChange(formater(value), event)\n            }\n            const element = event.currentTarget\n            let cursorPosition = element?.selectionStart\n\n            requestAnimationFrame(() => {\n                if (document.activeElement !== element) return\n                if (cursorPosition === null) return\n                if (element.value[cursorPosition - 1] === delimiter) {\n                    cursorPosition = cursorPosition + 1\n                }\n                element.setSelectionRange(cursorPosition, cursorPosition)\n            })\n        },\n        [delimiter, formater, onChange]\n    )\n\n    /**\n     * External Update Value\n     */\n    useEffect(() => {\n        if (propsValue) {\n            setValue(propsValue)\n        }\n    }, [propsValue])\n\n    const [touched, additionalProps] = useDitectInputTouched()\n\n    const { loading, readOnly } = useFieldGroup({ loading: propsLoading, readOnly: propsReadOnly })\n\n    return (\n        <FormControl style={style} className={className}>\n            <InputLabel aria-disabled={disabled} required={props.required} loading={loading}>\n                {label}\n            </InputLabel>\n            <InputBase\n                ref={ref}\n                onChange={handleChange}\n                type=\"text\"\n                readOnly={readOnly}\n                {...props}\n                disabled={disabled}\n                value={value}\n                data-invalid={!validation.valid}\n                loading={loading}\n                {...additionalProps}\n            />\n            {touched && validation.message ? (\n                <FormHelperText bottomGutter={bottomGutter} invalid={!validation.valid}>\n                    {validation.message}\n                </FormHelperText>\n            ) : (\n                <FormHelperText bottomGutter={bottomGutter} invalid={invalid} loading={loading}>\n                    {typeof helperText === \"function\" ? helperText({ value }) : helperText}\n                </FormHelperText>\n            )}\n        </FormControl>\n    )\n}\n"],"file":"DateTextField.js"}
+{"version":3,"sources":["../../../src/DateTextField/DateTextField.tsx"],"names":["validateDate","date","format","DateTextField","className","style","label","onChange","validationMessages","customValidations","propsCustomValidations","value","propsValue","defaultValue","min","max","readOnly","propsReadOnly","loading","propsLoading","disabled","bottomGutter","helperText","invalid","delimiter","props","ref","template","join","formater","execResult","exec","split","validValues","splice","filter","x","length","setValue","replace","pattern","RegExp","lightPattern","patternMismatchValidation","test","patternMismatch","rangeUnderflowValidation","isBefore","rangeUnderflow","rangeOverflowValidation","isAfter","rangeOverflow","validation","handleChange","event","formatedValue","currentTarget","element","cursorPosition","selectionStart","requestAnimationFrame","document","activeElement","setSelectionRange","touched","additionalProps","required","valid","message"],"mappings":"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","sourcesContent":["import { FieldProps } from \"../TextField\"\nimport { FormControl } from \"../FormControl\"\nimport { FormHelperText, InputBottomGutterProps } from \"../FormHelperText\"\nimport { InputBase, InputBaseProps } from \"../InputBase\"\nimport { InputLabel } from \"../InputLabel\"\nimport { useDitectInputTouched } from \"../TextField/useDitectInputTouched\"\nimport { useFieldGroup } from \"../FieldGroup\"\nimport { useValidation } from \"../TextField/useValidation\"\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport dayjs from \"dayjs\"\n\nexport interface DateTextFieldProps\n    extends FieldProps<string>,\n        Omit<InputBaseProps, \"defaultValue\" | \"value\" | \"onChange\">,\n        InputBottomGutterProps {\n    type?: never\n    /**\n     * @default \"/\"\n     * @description 日付を区切るための文字列。\n     */\n    delimiter?: string\n}\n\nconst validateDate = (date: string, format: string) => {\n    return dayjs(date, format).format(format) === date\n}\n\nexport const DateTextField = ({\n    className,\n    style,\n    label,\n    onChange,\n    validationMessages,\n    customValidations: propsCustomValidations = [],\n    value: propsValue,\n    defaultValue,\n    min,\n    max,\n    readOnly: propsReadOnly,\n    loading: propsLoading,\n    disabled,\n    bottomGutter,\n    helperText,\n    invalid,\n    delimiter = \"/\",\n    ...props\n}: DateTextFieldProps) => {\n    const ref = useRef<HTMLInputElement>(null)\n\n    const template = useMemo(() => [\"YYYY\", \"MM\", \"DD\"].join(delimiter), [delimiter])\n\n    const formater = useCallback(\n        (value: string) => {\n            const format = /([\\d*]{0,4})([\\d*]{0,2})?([\\d*]{0,2})?/\n            const execResult = format.exec(value.split(delimiter).join(\"\"))\n            const validValues = execResult?.splice(1, 3).filter((x) => x) || []\n            return validValues.join(delimiter) + (value.length === 4 || value.length === 6 ? delimiter : \"\")\n        },\n        [delimiter]\n    )\n\n    const [value, setValue] = useState(() => {\n        const value = propsValue || defaultValue\n        return value ? formater(value.replace(/[^0-9]/g, \"\")) : \"\"\n    })\n\n    const customValidations = useMemo(() => {\n        const pattern = new RegExp([\"[0-9]{4}\", \"(0[1-9]|1[012])\", \"(0[1-9]|[12][0-9]|3[01])\"].join(delimiter))\n        const lightPattern = new RegExp([\"[\\\\d*]{4}\", \"[\\\\d*]{2}\", \"[\\\\d*]{2}\"].join(delimiter))\n\n        const patternMismatchValidation = (value: string) => {\n            if (!lightPattern.test(value)) {\n                return false\n            }\n            return (\n                !validateDate(value, template) &&\n                (validationMessages?.patternMismatch || `有効な日付を${template}形式で入力してください`)\n            )\n        }\n        const rangeUnderflowValidation = (value: string) => {\n            if (!min) {\n                return false\n            }\n            if (!pattern.test(value)) {\n                return false\n            }\n            return (\n                dayjs(value).isBefore(dayjs(min)) &&\n                (validationMessages?.rangeUnderflow ||\n                    `${dayjs(min).format(template)} 以降の値を指定する必要があります。`)\n            )\n        }\n        const rangeOverflowValidation = (value: string) => {\n            if (!max) {\n                return false\n            }\n            if (!pattern.test(value)) {\n                return false\n            }\n            return (\n                dayjs(value).isAfter(dayjs(max)) &&\n                (validationMessages?.rangeOverflow ||\n                    `${dayjs(max).format(template)} 以前の値を指定する必要があります。`)\n            )\n        }\n        return [...propsCustomValidations, patternMismatchValidation, rangeUnderflowValidation, rangeOverflowValidation]\n    }, [\n        delimiter,\n        max,\n        min,\n        propsCustomValidations,\n        template,\n        validationMessages?.patternMismatch,\n        validationMessages?.rangeOverflow,\n        validationMessages?.rangeUnderflow\n    ])\n\n    const validation = useValidation<string>({\n        ref,\n        validationMessages,\n        customValidations,\n        value\n    })\n\n    /**\n     * Handling\n     */\n    const handleChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            const formatedValue = event.currentTarget.value || \"\"\n            const value = formatedValue.replace(new RegExp(delimiter, \"g\"), \"\")\n            setValue(formater(value))\n            if (onChange) {\n                onChange(formater(value), event)\n            }\n            const element = event.currentTarget\n            let cursorPosition = element?.selectionStart\n\n            requestAnimationFrame(() => {\n                if (document.activeElement !== element) return\n                if (cursorPosition === null) return\n                if (element.value[cursorPosition - 1] === delimiter) {\n                    cursorPosition = cursorPosition + 1\n                }\n                element.setSelectionRange(cursorPosition, cursorPosition)\n            })\n        },\n        [delimiter, formater, onChange]\n    )\n\n    /**\n     * External Update Value\n     */\n    useEffect(() => {\n        if (propsValue) {\n            setValue(propsValue)\n        }\n    }, [propsValue])\n\n    const [touched, additionalProps] = useDitectInputTouched()\n\n    const { loading, readOnly } = useFieldGroup({ loading: propsLoading, readOnly: propsReadOnly })\n\n    return (\n        <FormControl style={style} className={className}>\n            <InputLabel aria-disabled={disabled} required={props.required} loading={loading}>\n                {label}\n            </InputLabel>\n            <InputBase\n                ref={ref}\n                onChange={handleChange}\n                type=\"text\"\n                readOnly={readOnly}\n                {...props}\n                disabled={disabled}\n                value={value}\n                data-invalid={!validation.valid}\n                loading={loading}\n                {...additionalProps}\n            />\n            {touched && validation.message ? (\n                <FormHelperText bottomGutter={bottomGutter} invalid={!validation.valid}>\n                    {validation.message}\n                </FormHelperText>\n            ) : (\n                <FormHelperText bottomGutter={bottomGutter} invalid={invalid} loading={loading}>\n                    {typeof helperText === \"function\" ? helperText({ value }) : helperText}\n                </FormHelperText>\n            )}\n        </FormControl>\n    )\n}\n"],"file":"DateTextField.js"}

package/dist/cjs/DropArea/DropArea.js

@@ -45,7 +45,7 @@ const DropArea = /*#__PURE__*/_react2.default.forwardRef(({
     e.stopPropagation();
 
     if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      onDrop(accept ? Array.from(e.dataTransfer.files).filter(file => accept === null || accept === void 0 ? void 0 : accept.test(file.type)) : Array.from(e.dataTransfer.files));
+      onDrop(accept ? Array.from(e.dataTransfer.files).filter(file => accept?.test(file.type)) : Array.from(e.dataTransfer.files));
       e.dataTransfer.clearData();
     }
 
@@ -56,9 +56,7 @@ const DropArea = /*#__PURE__*/_react2.default.forwardRef(({
   const [accepted, setAccepted] = (0, _react2.useState)(false);
   (0, _react2.useEffect)(() => {
     const handler = event => {
-      var _event$dataTransfer;
-
-      setAccepted(((_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.types.includes("Files")) ?? false);
+      setAccepted(event.dataTransfer?.types.includes("Files") ?? false);
       setStatus(event.type);
       event.preventDefault();
       event.stopPropagation();

package/dist/cjs/DropArea/DropArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/DropArea/DropArea.tsx"],"names":["DefaultComponent","accepted","props","palette","transitions","css","background","paper","gray","undefined","duration","shorter","easing","easeIn","intentions","primary","light","main","DropArea","React","forwardRef","onDrop","as","accept","ref","handleCancel","e","preventDefault","stopPropagation","handleDrop","dataTransfer","files","length","Array","from","filter","file","test","type","clearData","currentTarget","dataset","dropAreaStatus","Component","status","setStatus","setAccepted","handler","event","types","includes","document","addEventListener","removeEventListener"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAIL,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA4B;AAC5B,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAA2B,sBAAjC;AACA,SACI,oCACQF,KADR;AAEI,IAAA,GAAG,mBAAEG,UAAF,oGAKqBF,OAAO,CAACG,UAAR,CAAmBC,KALxC,yBAMsBJ,OAAO,CAACK,IAAR,CAAa,GAAb,CANtB,yBASG,CAACP,QAAQ,KAAKQ,SAAb,IAA0BR,QAA3B,sBACFI,UADE,8BAE6BD,WAAW,CAACM,QAAZ,CAAqBC,OAFlD,OAE6DP,WAAW,CAACQ,MAAZ,CAAmBC,MAFhF,6DAI0BV,OAAO,CAACW,UAAR,CAAmBC,OAAnB,CAA2BC,KAJrD,oBAKsBb,OAAO,CAACW,UAAR,CAAmBC,OAAnB,CAA2BE,IALjD,2lLATH;AAFP,KADJ;AAuBH,CA7BD;;AAwCO,MAAMC,QAAQ,gBAAGC,gBAAMC,UAAN,CACpB,CAA8B;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,EAAV;AAAcC,EAAAA,MAAd;AAAsB,KAAGrB;AAAzB,CAA9B,EAAkFsB,GAAlF,KAA8G;AAC1G,QAAMC,YAAY,GAAG,yBAAaC,CAAD,IAAwC;AACrEA,IAAAA,CAAC,CAACC,cAAF;AACAD,IAAAA,CAAC,CAACE,eAAF;AACH,GAHoB,EAGlB,EAHkB,CAArB;AAIA,QAAMC,UAAU,GAAG,yBACdH,CAAD,IAAwC;AACpCA,IAAAA,CAAC,CAACC,cAAF;AACAD,IAAAA,CAAC,CAACE,eAAF;;AACA,QAAIF,CAAC,CAACI,YAAF,IAAkBJ,CAAC,CAACI,YAAF,CAAeC,KAAjC,IAA0CL,CAAC,CAACI,YAAF,CAAeC,KAAf,CAAqBC,MAArB,GAA8B,CAA5E,EAA+E;AAC3EX,MAAAA,MAAM,CACFE,MAAM,GACAU,KAAK,CAACC,IAAN,CAAWR,CAAC,CAACI,YAAF,CAAeC,KAA1B,EAAiCI,MAAjC,CAAyCC,IAAD,IAAUb,MAAV,aAAUA,MAAV,uBAAUA,MAAM,CAAEc,IAAR,CAAaD,IAAI,CAACE,IAAlB,CAAlD,CADA,GAEAL,KAAK,CAACC,IAAN,CAAWR,CAAC,CAACI,YAAF,CAAeC,KAA1B,CAHJ,CAAN;AAKAL,MAAAA,CAAC,CAACI,YAAF,CAAeS,SAAf;AACH;;AACD,WAAOb,CAAC,CAACc,aAAF,CAAgBC,OAAhB,CAAwBC,cAA/B;AACH,GAbc,EAcf,CAACnB,MAAD,EAASF,MAAT,CAde,CAAnB;AAgBA,QAAMsB,SAA4B,GAAGrB,EAAE,IAAItB,gBAA3C;AACA,QAAM,CAAC4C,MAAD,EAASC,SAAT,IAAsB,sBAAS,EAAT,CAA5B;AACA,QAAM,CAAC5C,QAAD,EAAW6C,WAAX,IAA0B,sBAAkB,KAAlB,CAAhC;AACA,yBAAU,MAAM;AACZ,UAAMC,OAAO,GAAIC,KAAD,IAAsB;AAAA;;AAClCF,MAAAA,WAAW,CAAC,wBAAAE,KAAK,CAAClB,YAAN,4EAAoBmB,KAApB,CAA0BC,QAA1B,CAAmC,OAAnC,MAA+C,KAAhD,CAAX;AACAL,MAAAA,SAAS,CAACG,KAAK,CAACV,IAAP,CAAT;AACAU,MAAAA,KAAK,CAACrB,cAAN;AACAqB,MAAAA,KAAK,CAACpB,eAAN;AACH,KALD;;AAMAuB,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,MAA1B,EAAkCL,OAAlC;AACAI,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsCL,OAAtC;AACAI,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCL,OAAvC;AACA,WAAO,MAAM;AACTI,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,MAA7B,EAAqCN,OAArC;AACAI,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCN,OAAzC;AACAI,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CN,OAA1C;AACH,KAJD;AAKH,GAfD,EAeG,EAfH;AAgBA,SACI,gBAAC,SAAD;AACI,IAAA,GAAG,EAAEvB,GADT;AAEI,4BAAsBoB;AAF1B,KAGQ1C,KAHR;AAII,IAAA,QAAQ,EAAED,QAJd;AAKI,IAAA,WAAW,EAAEwB,YALjB;AAMI,IAAA,WAAW,EAAEA,YANjB;AAOI,IAAA,UAAU,EAAEA,YAPhB;AAQI,IAAA,MAAM,EAAEI;AARZ,KADJ;AAYH,CArDmB,CAAjB","sourcesContent":["import { AsComponentProps, FakeAsComponent } from \"../AsComponentProps\"\nimport { css } from \"@emotion/react\"\nimport { useTheme } from \"../theme\"\nimport React, { useCallback, useEffect, useState } from \"react\"\n\nconst DefaultComponent: React.FC<\n    React.HTMLAttributes<HTMLElement> & {\n        accepted?: boolean\n    }\n> = ({ accepted, ...props }) => {\n    const { palette, transitions } = useTheme()\n    return (\n        <div\n            {...props}\n            css={css`\n                box-sizing: border-box;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background-color: ${palette.background.paper};\n                border: 2px dashed ${palette.gray[300]};\n                border-radius: 4px;\n\n                ${(accepted === undefined || accepted) &&\n                css`\n                    transition: border-color ${transitions.duration.shorter} ${transitions.easing.easeIn};\n                    &[data-dropzone-status=\"dragover\"] {\n                        background-color: ${palette.intentions.primary.light};\n                        border-color: ${palette.intentions.primary.main};\n                    }\n                `}\n            `}\n        />\n    )\n}\nexport interface BaseDropAreaProps {\n    onDrop: (files: File[]) => void\n    onDragEnter?: never\n    onDragLeave?: never\n    onDragOver?: never\n    accept?: RegExp\n}\n\nexport type DropAreaProps<E extends React.ElementType> = AsComponentProps<E, BaseDropAreaProps>\n\nexport const DropArea = React.forwardRef(\n    <E extends React.ElementType>({ onDrop, as, accept, ...props }: DropAreaProps<E>, ref: React.Ref<Element>) => {\n        const handleCancel = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n            e.preventDefault()\n            e.stopPropagation()\n        }, [])\n        const handleDrop = useCallback(\n            (e: React.DragEvent<HTMLDivElement>) => {\n                e.preventDefault()\n                e.stopPropagation()\n                if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n                    onDrop(\n                        accept\n                            ? Array.from(e.dataTransfer.files).filter((file) => accept?.test(file.type))\n                            : Array.from(e.dataTransfer.files)\n                    )\n                    e.dataTransfer.clearData()\n                }\n                delete e.currentTarget.dataset.dropAreaStatus\n            },\n            [accept, onDrop]\n        )\n        const Component: React.ElementType = as || DefaultComponent\n        const [status, setStatus] = useState(\"\")\n        const [accepted, setAccepted] = useState<boolean>(false)\n        useEffect(() => {\n            const handler = (event: DragEvent) => {\n                setAccepted(event.dataTransfer?.types.includes(\"Files\") ?? false)\n                setStatus(event.type)\n                event.preventDefault()\n                event.stopPropagation()\n            }\n            document.addEventListener(\"drop\", handler)\n            document.addEventListener(\"dragover\", handler)\n            document.addEventListener(\"dragleave\", handler)\n            return () => {\n                document.removeEventListener(\"drop\", handler)\n                document.removeEventListener(\"dragover\", handler)\n                document.removeEventListener(\"dragleave\", handler)\n            }\n        }, [])\n        return (\n            <Component\n                ref={ref}\n                data-dropzone-status={status}\n                {...props}\n                accepted={accepted}\n                onDragEnter={handleCancel}\n                onDragLeave={handleCancel}\n                onDragOver={handleCancel}\n                onDrop={handleDrop}\n            />\n        )\n    }\n) as FakeAsComponent<typeof DefaultComponent, BaseDropAreaProps>\n"],"file":"DropArea.js"}
+{"version":3,"sources":["../../../src/DropArea/DropArea.tsx"],"names":["DefaultComponent","accepted","props","palette","transitions","css","background","paper","gray","undefined","duration","shorter","easing","easeIn","intentions","primary","light","main","DropArea","React","forwardRef","onDrop","as","accept","ref","handleCancel","e","preventDefault","stopPropagation","handleDrop","dataTransfer","files","length","Array","from","filter","file","test","type","clearData","currentTarget","dataset","dropAreaStatus","Component","status","setStatus","setAccepted","handler","event","types","includes","document","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import { AsComponentProps, FakeAsComponent } from \"../AsComponentProps\"\nimport { css } from \"@emotion/react\"\nimport { useTheme } from \"../theme\"\nimport React, { useCallback, useEffect, useState } from \"react\"\n\nconst DefaultComponent: React.FC<\n    React.HTMLAttributes<HTMLElement> & {\n        accepted?: boolean\n    }\n> = ({ accepted, ...props }) => {\n    const { palette, transitions } = useTheme()\n    return (\n        <div\n            {...props}\n            css={css`\n                box-sizing: border-box;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background-color: ${palette.background.paper};\n                border: 2px dashed ${palette.gray[300]};\n                border-radius: 4px;\n\n                ${(accepted === undefined || accepted) &&\n                css`\n                    transition: border-color ${transitions.duration.shorter} ${transitions.easing.easeIn};\n                    &[data-dropzone-status=\"dragover\"] {\n                        background-color: ${palette.intentions.primary.light};\n                        border-color: ${palette.intentions.primary.main};\n                    }\n                `}\n            `}\n        />\n    )\n}\nexport interface BaseDropAreaProps {\n    onDrop: (files: File[]) => void\n    onDragEnter?: never\n    onDragLeave?: never\n    onDragOver?: never\n    accept?: RegExp\n}\n\nexport type DropAreaProps<E extends React.ElementType> = AsComponentProps<E, BaseDropAreaProps>\n\nexport const DropArea = React.forwardRef(\n    <E extends React.ElementType>({ onDrop, as, accept, ...props }: DropAreaProps<E>, ref: React.Ref<Element>) => {\n        const handleCancel = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n            e.preventDefault()\n            e.stopPropagation()\n        }, [])\n        const handleDrop = useCallback(\n            (e: React.DragEvent<HTMLDivElement>) => {\n                e.preventDefault()\n                e.stopPropagation()\n                if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n                    onDrop(\n                        accept\n                            ? Array.from(e.dataTransfer.files).filter((file) => accept?.test(file.type))\n                            : Array.from(e.dataTransfer.files)\n                    )\n                    e.dataTransfer.clearData()\n                }\n                delete e.currentTarget.dataset.dropAreaStatus\n            },\n            [accept, onDrop]\n        )\n        const Component: React.ElementType = as || DefaultComponent\n        const [status, setStatus] = useState(\"\")\n        const [accepted, setAccepted] = useState<boolean>(false)\n        useEffect(() => {\n            const handler = (event: DragEvent) => {\n                setAccepted(event.dataTransfer?.types.includes(\"Files\") ?? false)\n                setStatus(event.type)\n                event.preventDefault()\n                event.stopPropagation()\n            }\n            document.addEventListener(\"drop\", handler)\n            document.addEventListener(\"dragover\", handler)\n            document.addEventListener(\"dragleave\", handler)\n            return () => {\n                document.removeEventListener(\"drop\", handler)\n                document.removeEventListener(\"dragover\", handler)\n                document.removeEventListener(\"dragleave\", handler)\n            }\n        }, [])\n        return (\n            <Component\n                ref={ref}\n                data-dropzone-status={status}\n                {...props}\n                accepted={accepted}\n                onDragEnter={handleCancel}\n                onDragLeave={handleCancel}\n                onDragOver={handleCancel}\n                onDrop={handleDrop}\n            />\n        )\n    }\n) as FakeAsComponent<typeof DefaultComponent, BaseDropAreaProps>\n"],"file":"DropArea.js"}

package/dist/cjs/ImageUploader/ImageUploader.js

@@ -170,7 +170,7 @@ const ImageUploader = ({
 
   const [kickUpload, setKickUpload] = (0, _react2.useState)(false);
   const handleClick = (0, _react2.useCallback)(key => {
-    const result = pictures.map((val, index) => [val, index]).find(([p, _]) => (p === null || p === void 0 ? void 0 : p.key) === key);
+    const result = pictures.map((val, index) => [val, index]).find(([p, _]) => p?.key === key);
     if (!result) return;
     const [picture, index] = result;
     if (!picture) return; // アップロードがまだの写真は削除させない
@@ -185,7 +185,7 @@ const ImageUploader = ({
         if (onChangeProgress) {
           onChangeProgress({
             total: current.filter(p => p).length,
-            uploaded: current.filter(p => p === null || p === void 0 ? void 0 : p.uploaded).length
+            uploaded: current.filter(p => p?.uploaded).length
           });
         }
 
@@ -288,7 +288,7 @@ const ImageUploader = ({
     if (onChangeProgress) {
       onChangeProgress({
         total: pictures.filter(p => p).length,
-        uploaded: pictures.filter(p => p === null || p === void 0 ? void 0 : p.uploaded).length
+        uploaded: pictures.filter(p => p?.uploaded).length
       });
     }
   }, // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/cjs/ImageUploader/ImageUploader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ImageUploader/ImageUploader.tsx"],"names":["ImageUploaderThumbnail","pictureKey","compressing","requested","uploaded","onClickPicture","props","handleClick","FileThumbnail","file","undefined","objectURL","URL","createObjectURL","handleLoad","revokeObjectURL","FileThumbnailAreaUnmemoized","compressedData","onClick","FileThumbnailArea","React","memo","uploading","UPLOADING_THROTTLE","COMPRESSING_THROTTLE","ImageUploader","compress","selectedFiles","requestUploadPicture","onCompleted","onChangeProgress","counter","pictures","setPictures","kickCompress","setKickCompress","kickUpload","setKickUpload","key","result","map","val","index","find","p","_","picture","onDelete","prev","current","total","filter","length","files","targets","push","f","candidates","i","slice","fobj","blob","every"],"mappings":"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","sourcesContent":["import { Layout, Row } from \"../Layouts\"\nimport { css } from \"@emotion/react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport CheckIcon from \"@mui/icons-material/Check\"\nimport CloseIcon from \"@mui/icons-material/Close\"\nimport React from \"react\"\n\nexport interface ImageUploaderThumbnailProps {\n    compressing: boolean\n    requested: boolean\n    uploaded: boolean\n    pictureKey?: string\n    onClickPicture: (key: string) => void\n}\n\nexport const ImageUploaderThumbnail: React.FC<\n    ImageUploaderThumbnailProps & React.ImgHTMLAttributes<HTMLImageElement>\n> = ({ pictureKey, compressing, requested, uploaded, onClickPicture, ...props }) => {\n    const handleClick = useCallback(() => {\n        if (pictureKey) {\n            onClickPicture(pictureKey)\n        }\n    }, [onClickPicture, pictureKey])\n\n    return (\n        <div\n            onClick={handleClick}\n            css={css`\n                position: relative;\n                width: 100%;\n                padding-top: 100%;\n            `}\n        >\n            <div\n                data-state={\n                    compressing\n                        ? \"compressing\"\n                        : !requested\n                        ? \"waitingInQueue\"\n                        : requested && !uploaded\n                        ? \"uploading\"\n                        : \"uploaded\"\n                }\n                role=\"button\"\n                css={css`\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    transform: translate(-50%, -50%);\n                    z-index: 1;\n                    font-size: 32px;\n                    width: 100%;\n                    height: 100%;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n\n                    &[data-state=\"compressing\"] {\n                        background-color: rgba(128, 128, 128, 1);\n                    }\n                    &[data-state=\"waitingInQueue\"] {\n                        background-color: rgba(255, 255, 255, 0.7);\n                    }\n                    &[data-state=\"uploading\"] {\n                        background-color: rgba(65, 65, 65, 0.8);\n                    }\n                    &[data-state=\"uploaded\"] {\n                        cursor: pointer;\n                        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n                    }\n                `}\n            >\n                {requested && !uploaded && <>...</>}\n                {uploaded && <CheckIcon color=\"success\" />}\n            </div>\n            {uploaded && (\n                <div\n                    css={css`\n                        position: absolute;\n                        top: 0;\n                        right: 0;\n                        z-index: 2;\n                        margin: 5px;\n                        padding: 7px;\n                        background-color: #4a4a4a;\n                        border-radius: 50%;\n                        font-size: 11px;\n                        line-height: 1;\n                        cursor: pointer;\n\n                        & > svg {\n                            color: white;\n                        }\n                    `}\n                >\n                    <CloseIcon />\n                </div>\n            )}\n            <img\n                css={css`\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    object-fit: cover;\n                `}\n                {...props}\n            />\n        </div>\n    )\n}\n\nconst FileThumbnail: React.FC<\n    {\n        file?: Blob\n    } & Omit<ImageUploaderThumbnailProps, \"compressing\">\n> = ({ file, pictureKey, ...props }) => {\n    if (!file) {\n        return (\n            <ImageUploaderThumbnail\n                compressing={true}\n                requested={false}\n                uploaded={false}\n                pictureKey={undefined}\n                onClickPicture={() => {\n                    return\n                }}\n            />\n        )\n    }\n\n    const objectURL = URL.createObjectURL(file)\n    const handleLoad = () => {\n        URL.revokeObjectURL(objectURL)\n    }\n\n    return (\n        <ImageUploaderThumbnail\n            {...props}\n            src={objectURL}\n            onLoad={handleLoad}\n            compressing={!file}\n            pictureKey={pictureKey}\n        />\n    )\n}\n\nconst FileThumbnailAreaUnmemoized: React.FC<FileObject & { pictureKey: string; onClick: (key: string) => void }> = ({\n    compressedData,\n    requested,\n    uploaded,\n    pictureKey,\n    onClick\n}) => (\n    <Layout.Item xs={4}>\n        <FileThumbnail\n            file={compressedData}\n            requested={requested}\n            uploaded={uploaded}\n            pictureKey={pictureKey}\n            onClickPicture={onClick}\n        />\n    </Layout.Item>\n)\nconst FileThumbnailArea = React.memo(FileThumbnailAreaUnmemoized)\n\n// 最初にfileがセットされ、ファイルの圧縮処理が順次行われる。圧縮が終わったら圧縮後データがcompressedDataに保存された後、fileはundefinedになる(メモリ使用量を節約するため)\n// その後、uploadが順次行われるという流れ\nexport interface FileObject {\n    file?: File\n    compressedData?: Blob\n    key: string\n    requested: boolean\n    uploaded: boolean\n}\n\nlet uploading = 0\nconst UPLOADING_THROTTLE = 5\n\nlet compressing = 0\nconst COMPRESSING_THROTTLE = 5\n\nexport const ImageUploader: React.FC<{\n    compress?: (file: File) => Promise<Blob>\n    selectedFiles?: File[]\n    requestUploadPicture: (pictureKey: string, file: Blob) => Promise<void>\n    onClick: (fileObject: FileObject, onDelete: () => void) => void\n    onChangeProgress?: (progress: { total: number; uploaded: number }) => void\n    onCompleted?: () => void\n}> = ({\n    compress = async (file: File) => file,\n    selectedFiles,\n    requestUploadPicture,\n    onClick,\n    onCompleted,\n    onChangeProgress\n}) => {\n    // fileにuniqueなkeyを付与するためのカウンター\n    const counter = useRef<number>(0)\n    // 対象となる写真を全て積む用\n    // indexに依存したコードを書いているので削除したい時はそこをundefinedにし、順番を変えないようにするなどの工夫が必要\n    const [pictures, setPictures] = useState<(FileObject | undefined)[]>([])\n    // compress promiseを発火する副作用を起動する用のフラグ\n    const [kickCompress, setKickCompress] = useState(false)\n    // upload promiseを発火する副作用を起動する用のフラグ\n    const [kickUpload, setKickUpload] = useState(false)\n\n    const handleClick = useCallback(\n        (key: string) => {\n            const result = pictures.map((val, index) => [val, index] as const).find(([p, _]) => p?.key === key)\n            if (!result) return\n\n            const [picture, index] = result\n            if (!picture) return\n\n            // アップロードがまだの写真は削除させない\n            if (!picture.uploaded) return\n\n            const onDelete = () => {\n                setPictures((prev) => {\n                    const current = [...prev]\n                    current[index] = undefined\n\n                    // 削除時もChangeProgressを発火させる\n                    if (onChangeProgress) {\n                        onChangeProgress({\n                            total: current.filter((p) => p).length,\n                            uploaded: current.filter((p) => p?.uploaded).length\n                        })\n                    }\n                    return current\n                })\n            }\n\n            onClick(picture, onDelete)\n        },\n        [onChangeProgress, onClick, pictures]\n    )\n\n    useEffect(() => {\n        void (() => {\n            const files = selectedFiles\n            if (!files) return\n\n            // ひとまず初期状態のデータをpicturesに詰めておいて、圧縮が終わる間に何かしら画面に反映できるようにする\n            const targets: FileObject[] = []\n            for (const file of files) {\n                counter.current++\n\n                targets.push({\n                    file,\n                    key: `${counter.current}`,\n                    requested: false,\n                    uploaded: false\n                })\n            }\n\n            setPictures((pictures) => [...pictures, ...targets])\n            setKickCompress((f) => !f)\n        })()\n    }, [selectedFiles])\n\n    useEffect(\n        () => {\n            const candidates = pictures\n                .map((val, i) => [val, i] as const)\n                .filter(([f, _]) => f && !f.compressedData)\n                .slice(0, COMPRESSING_THROTTLE)\n\n            for (const [fobj, index] of candidates) {\n                // fobjがundefinedのパターンはfilterで消えているはずなので本来不要だが型がそこまで推論できないのでしょうがない\n                if (!fobj) return\n                if (compressing >= COMPRESSING_THROTTLE) break\n\n                void (async () => {\n                    compressing++\n                    const blob = await compress(fobj.file!)\n                    compressing--\n\n                    // ここでインデックスアクセスをかけているので少なくともpromise実行中に順番が変更されないことが必要\n                    setPictures((prev) => {\n                        if (!prev[index]) return prev\n                        const current = [...prev]\n\n                        // Fileの生データは不要なのでGCに回収してもらう\n                        current[index]!.file = undefined\n                        current[index]!.compressedData = blob\n\n                        return current\n                    })\n\n                    // 1つ終わったら空きが出るはずなので次のものをkickする\n                    setKickCompress((f) => !f)\n                    setKickUpload((f) => !f)\n                })()\n            }\n        },\n        // kickUploadのフラグによりpromiseのキューイングの管理をしているのでpicturesは監視しない\n        // (picturesをdepsに入れるとこのuseEffect内でsetPicturesしている関係で無限ループが起きる可能性があるため)\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [kickCompress]\n    )\n\n    useEffect(\n        () => {\n            // この実装では最大UPLOADING_THROTTLE個のものを待ちキューに積もうとしているが途中からは1つしか空きがない状態になる可能性が高いのでここのfilterは過剰にとってしまうかもしれない\n            const candidates = pictures\n                .map((val, i) => [val, i] as const)\n                .filter(([f, _]) => f && f.compressedData && !f.requested)\n                .slice(0, UPLOADING_THROTTLE)\n\n            for (const [fobj, index] of candidates) {\n                if (!fobj) return\n                if (uploading >= UPLOADING_THROTTLE) break\n\n                void (async () => {\n                    setPictures((prev) => {\n                        const current = [...prev]\n                        if (!current[index]) return current\n\n                        current[index]!.requested = true\n\n                        return current\n                    })\n                    uploading++\n                    await requestUploadPicture(fobj.key, fobj.compressedData!)\n                    uploading--\n\n                    // ここでインデックスアクセスをかけているので少なくともpromise実行中に順番が変更されないことが必要\n                    setPictures((prev) => {\n                        if (!prev[index]) return prev\n                        const current = [...prev]\n\n                        current[index]!.uploaded = true\n\n                        return current\n                    })\n\n                    // 1つ終わったら空きが出るはずなので次のものをkickする\n                    setKickUpload((f) => !f)\n                })()\n            }\n        },\n        // kickUploadのフラグによりpromiseのキューイングの管理をしているのでpicturesは監視しない\n        // (picturesをdepsに入れるとこのuseEffect内でsetPicturesしている関係で無限ループが起きる可能性があるため)\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [kickUpload, requestUploadPicture]\n    )\n\n    useEffect(\n        () => {\n            // 全てのファイルのアップロードが終わったらonCompletedを呼びたいので、アップロードが終わるたびに呼ばれるkickUploadに反応してcompletedかどうかを調べる\n            // picturesが全部uploadedかどうかを調べるのは時間がかかりそうなので先にcompressingとuploadingの数をカウントしておく\n            if (\n                pictures.length > 0 &&\n                compressing == 0 &&\n                uploading == 0 &&\n                pictures.every((f) => (f ? f.uploaded : true)) &&\n                onCompleted\n            ) {\n                onCompleted()\n            }\n\n            // 進捗が変化したらonChangeProgressを呼ぶが、kickUploadがトリガーなので進捗が変化してなくても呼ばれてしまう可能性がある\n            if (onChangeProgress) {\n                onChangeProgress({\n                    total: pictures.filter((p) => p).length,\n                    uploaded: pictures.filter((p) => p?.uploaded).length\n                })\n            }\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [kickUpload]\n    )\n\n    return (\n        <Row gap={2}>\n            {pictures.map(\n                (picture) =>\n                    picture && (\n                        <FileThumbnailArea\n                            {...picture}\n                            key={picture.key}\n                            pictureKey={picture.key}\n                            onClick={handleClick}\n                        />\n                    )\n            )}\n        </Row>\n    )\n}\n"],"file":"ImageUploader.js"}
+{"version":3,"sources":["../../../src/ImageUploader/ImageUploader.tsx"],"names":["ImageUploaderThumbnail","pictureKey","compressing","requested","uploaded","onClickPicture","props","handleClick","FileThumbnail","file","undefined","objectURL","URL","createObjectURL","handleLoad","revokeObjectURL","FileThumbnailAreaUnmemoized","compressedData","onClick","FileThumbnailArea","React","memo","uploading","UPLOADING_THROTTLE","COMPRESSING_THROTTLE","ImageUploader","compress","selectedFiles","requestUploadPicture","onCompleted","onChangeProgress","counter","pictures","setPictures","kickCompress","setKickCompress","kickUpload","setKickUpload","key","result","map","val","index","find","p","_","picture","onDelete","prev","current","total","filter","length","files","targets","push","f","candidates","i","slice","fobj","blob","every"],"mappings":"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","sourcesContent":["import { Layout, Row } from \"../Layouts\"\nimport { css } from \"@emotion/react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport CheckIcon from \"@mui/icons-material/Check\"\nimport CloseIcon from \"@mui/icons-material/Close\"\nimport React from \"react\"\n\nexport interface ImageUploaderThumbnailProps {\n    compressing: boolean\n    requested: boolean\n    uploaded: boolean\n    pictureKey?: string\n    onClickPicture: (key: string) => void\n}\n\nexport const ImageUploaderThumbnail: React.FC<\n    ImageUploaderThumbnailProps & React.ImgHTMLAttributes<HTMLImageElement>\n> = ({ pictureKey, compressing, requested, uploaded, onClickPicture, ...props }) => {\n    const handleClick = useCallback(() => {\n        if (pictureKey) {\n            onClickPicture(pictureKey)\n        }\n    }, [onClickPicture, pictureKey])\n\n    return (\n        <div\n            onClick={handleClick}\n            css={css`\n                position: relative;\n                width: 100%;\n                padding-top: 100%;\n            `}\n        >\n            <div\n                data-state={\n                    compressing\n                        ? \"compressing\"\n                        : !requested\n                        ? \"waitingInQueue\"\n                        : requested && !uploaded\n                        ? \"uploading\"\n                        : \"uploaded\"\n                }\n                role=\"button\"\n                css={css`\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    transform: translate(-50%, -50%);\n                    z-index: 1;\n                    font-size: 32px;\n                    width: 100%;\n                    height: 100%;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n\n                    &[data-state=\"compressing\"] {\n                        background-color: rgba(128, 128, 128, 1);\n                    }\n                    &[data-state=\"waitingInQueue\"] {\n                        background-color: rgba(255, 255, 255, 0.7);\n                    }\n                    &[data-state=\"uploading\"] {\n                        background-color: rgba(65, 65, 65, 0.8);\n                    }\n                    &[data-state=\"uploaded\"] {\n                        cursor: pointer;\n                        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n                    }\n                `}\n            >\n                {requested && !uploaded && <>...</>}\n                {uploaded && <CheckIcon color=\"success\" />}\n            </div>\n            {uploaded && (\n                <div\n                    css={css`\n                        position: absolute;\n                        top: 0;\n                        right: 0;\n                        z-index: 2;\n                        margin: 5px;\n                        padding: 7px;\n                        background-color: #4a4a4a;\n                        border-radius: 50%;\n                        font-size: 11px;\n                        line-height: 1;\n                        cursor: pointer;\n\n                        & > svg {\n                            color: white;\n                        }\n                    `}\n                >\n                    <CloseIcon />\n                </div>\n            )}\n            <img\n                css={css`\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    object-fit: cover;\n                `}\n                {...props}\n            />\n        </div>\n    )\n}\n\nconst FileThumbnail: React.FC<\n    {\n        file?: Blob\n    } & Omit<ImageUploaderThumbnailProps, \"compressing\">\n> = ({ file, pictureKey, ...props }) => {\n    if (!file) {\n        return (\n            <ImageUploaderThumbnail\n                compressing={true}\n                requested={false}\n                uploaded={false}\n                pictureKey={undefined}\n                onClickPicture={() => {\n                    return\n                }}\n            />\n        )\n    }\n\n    const objectURL = URL.createObjectURL(file)\n    const handleLoad = () => {\n        URL.revokeObjectURL(objectURL)\n    }\n\n    return (\n        <ImageUploaderThumbnail\n            {...props}\n            src={objectURL}\n            onLoad={handleLoad}\n            compressing={!file}\n            pictureKey={pictureKey}\n        />\n    )\n}\n\nconst FileThumbnailAreaUnmemoized: React.FC<FileObject & { pictureKey: string; onClick: (key: string) => void }> = ({\n    compressedData,\n    requested,\n    uploaded,\n    pictureKey,\n    onClick\n}) => (\n    <Layout.Item xs={4}>\n        <FileThumbnail\n            file={compressedData}\n            requested={requested}\n            uploaded={uploaded}\n            pictureKey={pictureKey}\n            onClickPicture={onClick}\n        />\n    </Layout.Item>\n)\nconst FileThumbnailArea = React.memo(FileThumbnailAreaUnmemoized)\n\n// 最初にfileがセットされ、ファイルの圧縮処理が順次行われる。圧縮が終わったら圧縮後データがcompressedDataに保存された後、fileはundefinedになる(メモリ使用量を節約するため)\n// その後、uploadが順次行われるという流れ\nexport interface FileObject {\n    file?: File\n    compressedData?: Blob\n    key: string\n    requested: boolean\n    uploaded: boolean\n}\n\nlet uploading = 0\nconst UPLOADING_THROTTLE = 5\n\nlet compressing = 0\nconst COMPRESSING_THROTTLE = 5\n\nexport const ImageUploader: React.FC<{\n    compress?: (file: File) => Promise<Blob>\n    selectedFiles?: File[]\n    requestUploadPicture: (pictureKey: string, file: Blob) => Promise<void>\n    onClick: (fileObject: FileObject, onDelete: () => void) => void\n    onChangeProgress?: (progress: { total: number; uploaded: number }) => void\n    onCompleted?: () => void\n}> = ({\n    compress = async (file: File) => file,\n    selectedFiles,\n    requestUploadPicture,\n    onClick,\n    onCompleted,\n    onChangeProgress\n}) => {\n    // fileにuniqueなkeyを付与するためのカウンター\n    const counter = useRef<number>(0)\n    // 対象となる写真を全て積む用\n    // indexに依存したコードを書いているので削除したい時はそこをundefinedにし、順番を変えないようにするなどの工夫が必要\n    const [pictures, setPictures] = useState<(FileObject | undefined)[]>([])\n    // compress promiseを発火する副作用を起動する用のフラグ\n    const [kickCompress, setKickCompress] = useState(false)\n    // upload promiseを発火する副作用を起動する用のフラグ\n    const [kickUpload, setKickUpload] = useState(false)\n\n    const handleClick = useCallback(\n        (key: string) => {\n            const result = pictures.map((val, index) => [val, index] as const).find(([p, _]) => p?.key === key)\n            if (!result) return\n\n            const [picture, index] = result\n            if (!picture) return\n\n            // アップロードがまだの写真は削除させない\n            if (!picture.uploaded) return\n\n            const onDelete = () => {\n                setPictures((prev) => {\n                    const current = [...prev]\n                    current[index] = undefined\n\n                    // 削除時もChangeProgressを発火させる\n                    if (onChangeProgress) {\n                        onChangeProgress({\n                            total: current.filter((p) => p).length,\n                            uploaded: current.filter((p) => p?.uploaded).length\n                        })\n                    }\n                    return current\n                })\n            }\n\n            onClick(picture, onDelete)\n        },\n        [onChangeProgress, onClick, pictures]\n    )\n\n    useEffect(() => {\n        void (() => {\n            const files = selectedFiles\n            if (!files) return\n\n            // ひとまず初期状態のデータをpicturesに詰めておいて、圧縮が終わる間に何かしら画面に反映できるようにする\n            const targets: FileObject[] = []\n            for (const file of files) {\n                counter.current++\n\n                targets.push({\n                    file,\n                    key: `${counter.current}`,\n                    requested: false,\n                    uploaded: false\n                })\n            }\n\n            setPictures((pictures) => [...pictures, ...targets])\n            setKickCompress((f) => !f)\n        })()\n    }, [selectedFiles])\n\n    useEffect(\n        () => {\n            const candidates = pictures\n                .map((val, i) => [val, i] as const)\n                .filter(([f, _]) => f && !f.compressedData)\n                .slice(0, COMPRESSING_THROTTLE)\n\n            for (const [fobj, index] of candidates) {\n                // fobjがundefinedのパターンはfilterで消えているはずなので本来不要だが型がそこまで推論できないのでしょうがない\n                if (!fobj) return\n                if (compressing >= COMPRESSING_THROTTLE) break\n\n                void (async () => {\n                    compressing++\n                    const blob = await compress(fobj.file!)\n                    compressing--\n\n                    // ここでインデックスアクセスをかけているので少なくともpromise実行中に順番が変更されないことが必要\n                    setPictures((prev) => {\n                        if (!prev[index]) return prev\n                        const current = [...prev]\n\n                        // Fileの生データは不要なのでGCに回収してもらう\n                        current[index]!.file = undefined\n                        current[index]!.compressedData = blob\n\n                        return current\n                    })\n\n                    // 1つ終わったら空きが出るはずなので次のものをkickする\n                    setKickCompress((f) => !f)\n                    setKickUpload((f) => !f)\n                })()\n            }\n        },\n        // kickUploadのフラグによりpromiseのキューイングの管理をしているのでpicturesは監視しない\n        // (picturesをdepsに入れるとこのuseEffect内でsetPicturesしている関係で無限ループが起きる可能性があるため)\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [kickCompress]\n    )\n\n    useEffect(\n        () => {\n            // この実装では最大UPLOADING_THROTTLE個のものを待ちキューに積もうとしているが途中からは1つしか空きがない状態になる可能性が高いのでここのfilterは過剰にとってしまうかもしれない\n            const candidates = pictures\n                .map((val, i) => [val, i] as const)\n                .filter(([f, _]) => f && f.compressedData && !f.requested)\n                .slice(0, UPLOADING_THROTTLE)\n\n            for (const [fobj, index] of candidates) {\n                if (!fobj) return\n                if (uploading >= UPLOADING_THROTTLE) break\n\n                void (async () => {\n                    setPictures((prev) => {\n                        const current = [...prev]\n                        if (!current[index]) return current\n\n                        current[index]!.requested = true\n\n                        return current\n                    })\n                    uploading++\n                    await requestUploadPicture(fobj.key, fobj.compressedData!)\n                    uploading--\n\n                    // ここでインデックスアクセスをかけているので少なくともpromise実行中に順番が変更されないことが必要\n                    setPictures((prev) => {\n                        if (!prev[index]) return prev\n                        const current = [...prev]\n\n                        current[index]!.uploaded = true\n\n                        return current\n                    })\n\n                    // 1つ終わったら空きが出るはずなので次のものをkickする\n                    setKickUpload((f) => !f)\n                })()\n            }\n        },\n        // kickUploadのフラグによりpromiseのキューイングの管理をしているのでpicturesは監視しない\n        // (picturesをdepsに入れるとこのuseEffect内でsetPicturesしている関係で無限ループが起きる可能性があるため)\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [kickUpload, requestUploadPicture]\n    )\n\n    useEffect(\n        () => {\n            // 全てのファイルのアップロードが終わったらonCompletedを呼びたいので、アップロードが終わるたびに呼ばれるkickUploadに反応してcompletedかどうかを調べる\n            // picturesが全部uploadedかどうかを調べるのは時間がかかりそうなので先にcompressingとuploadingの数をカウントしておく\n            if (\n                pictures.length > 0 &&\n                compressing == 0 &&\n                uploading == 0 &&\n                pictures.every((f) => (f ? f.uploaded : true)) &&\n                onCompleted\n            ) {\n                onCompleted()\n            }\n\n            // 進捗が変化したらonChangeProgressを呼ぶが、kickUploadがトリガーなので進捗が変化してなくても呼ばれてしまう可能性がある\n            if (onChangeProgress) {\n                onChangeProgress({\n                    total: pictures.filter((p) => p).length,\n                    uploaded: pictures.filter((p) => p?.uploaded).length\n                })\n            }\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [kickUpload]\n    )\n\n    return (\n        <Row gap={2}>\n            {pictures.map(\n                (picture) =>\n                    picture && (\n                        <FileThumbnailArea\n                            {...picture}\n                            key={picture.key}\n                            pictureKey={picture.key}\n                            onClick={handleClick}\n                        />\n                    )\n            )}\n        </Row>\n    )\n}\n"],"file":"ImageUploader.js"}