@dotss/ui 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @dotss/ui
+
+## 1.0.3
+
+### Patch Changes
+
+### Documentation
+
+- 1.0.3 릴리즈 ([67b2ccb](https://github.com/thedotscorp/dots/commit/67b2ccb96108b1d1035df95482378cc5ed9b6bab))
+
+### Documentation
+
+- 1.0.3 릴리즈 ([67b2ccb](https://github.com/thedotscorp/dots/commit/67b2ccb96108b1d1035df95482378cc5ed9b6bab))
+
+### Documentation
+
+- 1.0.3 릴리즈 ([67b2ccb](https://github.com/thedotscorp/dots/commit/67b2ccb96108b1d1035df95482378cc5ed9b6bab))
+
+## 0.0.10
+
+## 0.0.6
+
+## 0.0.5
+
+## 0.0.4
+
+## 0.0.2

package/build-storybook.log

@@ -0,0 +1,129 @@
+
+> @dotss/ui@1.0.2 build-storybook /Users/dong-yeon/Desktop/codes/dots/packages/ui
+> storybook build --output-dir\=/var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj
+
+@storybook/core v8.6.14
+
+info => Cleaning outputDir: ../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj
+info => Loading presets
+info Found existing addon "@storybook/addon-viewport", skipping.
+info Found existing addon "@storybook/addon-viewport", skipping.
+info => Building manager..
+info => Manager built (143 ms)
+info => Building preview..
+info Using tsconfig paths for react-docgen
+vite v6.3.5 building for production...
+transforming...
+✓ 489 modules transformed.
+rendering chunks...
+
+[vite:dts] Start generate declaration files...
+computing gzip size...
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/iframe.html                                                18.16 kB │ gzip:   5.13 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/convertNumberToCSSValue-CBMEHva9.js                  0.07 kB │ gzip:   0.09 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/_commonjsHelpers-CqkleIqs.js                         0.12 kB │ gzip:   0.13 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-gCiAd5Q3.js                                    0.13 kB │ gzip:   0.14 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-DMwx3okQ.js                                    0.14 kB │ gzip:   0.13 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-BFxb-EEy.js                                  0.16 kB │ gzip:   0.16 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-CvbIS5ZJ.js                                  0.18 kB │ gzip:   0.16 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/getSibling-Dj28LAf2.js                               0.25 kB │ gzip:   0.20 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/useCheckHoverPossible-D4BnJALP.js                    0.28 kB │ gzip:   0.22 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-DVYH0KGz.js                                    0.46 kB │ gzip:   0.30 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/useCheckHasFocus-hzoLRJXx.js                         0.47 kB │ gzip:   0.26 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/useCheckKeyboardMode-Dd-GROTx.js                     0.48 kB │ gzip:   0.30 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-DHQbi4pV.js                                  0.61 kB │ gzip:   0.42 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/getContrastingTextColor-CWnHhleC.js                  0.66 kB │ gzip:   0.40 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/chunk-XP5HYGXS-BpfKkqn7.js                           0.71 kB │ gzip:   0.40 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-DGUiP6tS.js                                  0.71 kB │ gzip:   0.50 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-C_Ydk3Up.js                                    0.74 kB │ gzip:   0.31 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-DrFu-skq.js                                    0.77 kB │ gzip:   0.47 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/getPaletteColor-C38FVfut.js                          0.82 kB │ gzip:   0.35 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/react-18-DqZCBjeW.js                                 0.93 kB │ gzip:   0.52 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Box.stories--6yMMtaM.js                              0.93 kB │ gzip:   0.52 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-PkD-vVdw.js                                  0.95 kB │ gzip:   0.60 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/jsx-runtime-CBFqWUVk.js                              1.00 kB │ gzip:   0.62 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Box-B8Ti1g-D.js                                      1.15 kB │ gzip:   0.54 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Typography-DGi3wi-o.js                               1.26 kB │ gzip:   0.66 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-Bb87MuEh.js                                    1.29 kB │ gzip:   0.47 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/emotion-react.browser.esm-cXkse2Qd.js                1.45 kB │ gzip:   0.80 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Flexbox-DZrKCIT6.js                                  1.65 kB │ gzip:   0.65 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Radio.stories-DC2KdFa9.js                            1.77 kB │ gzip:   0.80 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Checkbox.stories-Bxr9MtHO.js                         1.77 kB │ gzip:   0.81 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/useTheme-Cqhwhctk.js                                 1.78 kB │ gzip:   0.61 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Icon.stories-Dziwv5qg.js                             1.85 kB │ gzip:   0.68 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/IconButton.stories-B7CSL0r4.js                       1.90 kB │ gzip:   0.70 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/CircularProgressIndicator-uTJ1SWVq.js                2.06 kB │ gzip:   0.92 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Chip-DD2Q4odZ.js                                     2.06 kB │ gzip:   0.91 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/CircularProgressIndicator.stories-CMlinbuI.js        2.13 kB │ gzip:   0.74 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-QvCodrlq.js                                  2.21 kB │ gzip:   1.20 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Flexbox.stories-B5FdTaLH.js                          2.27 kB │ gzip:   0.87 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Introduction-Co4ztrjt.js                             2.36 kB │ gzip:   1.09 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-CjqLUPxs.js                                  2.48 kB │ gzip:   1.34 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/MenuButton-Ds3pbgfI.js                               2.54 kB │ gzip:   0.93 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/getIconLabel-DyMnAM_i.js                             2.66 kB │ gzip:   1.41 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/FormControlText-Di0LuCkB.js                          2.67 kB │ gzip:   1.11 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/MenuBlock-DfJzGgNM.js                                2.89 kB │ gzip:   1.18 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Backdrop-CgpHnjAT.js                                 3.05 kB │ gzip:   1.21 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/FormControlText.stories-C3Q6SZZ4.js                  3.17 kB │ gzip:   0.98 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Label.stories-DwBLCDuE.js                            3.26 kB │ gzip:   0.91 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Radio-BFshJyOC.js                                    3.28 kB │ gzip:   1.18 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Backdrop.stories-ikvq-jFP.js                         3.41 kB │ gzip:   1.04 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Chip.stories-DScMdiB8.js                             3.44 kB │ gzip:   0.93 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-DD_OYowb.js                                  3.51 kB │ gzip:   1.69 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Checkbox-C9uAYubv.js                                 3.60 kB │ gzip:   1.42 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/RadioGroup.stories-C9vQTjhV.js                       3.65 kB │ gzip:   1.28 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Label-CuVsDaNu.js                                    4.37 kB │ gzip:   1.21 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Card.stories-Bg8oQOVY.js                             4.55 kB │ gzip:   1.56 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Badge.stories-oDz474BM.js                            4.65 kB │ gzip:   1.71 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/LineProgressIndicator.stories-CTBCUUXj.js            4.80 kB │ gzip:   1.65 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Skeleton.stories-XH8TJy-m.js                         4.80 kB │ gzip:   1.63 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Typography.stories-BCxbnkWN.js                       4.94 kB │ gzip:   1.20 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Button.stories-Bm3fWJmp.js                           5.04 kB │ gzip:   1.22 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-B8lJiyuQ.js                                  5.06 kB │ gzip:   1.88 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/tictoccroc-parent-XY675Va4.js                        5.29 kB │ gzip:   1.33 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/tictoccroc-teacher-IPXzHPzl.js                       5.29 kB │ gzip:   1.34 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/display-DGEKSqg_.js                                  5.54 kB │ gzip:   1.17 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/PageControl.stories-DJBz0m9a.js                      5.69 kB │ gzip:   2.01 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/TextField-Dv7cIL_W.js                                5.72 kB │ gzip:   2.11 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Menu-BUsjeils.js                                     6.76 kB │ gzip:   2.48 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/TextField.stories-ClODSdU9.js                        6.95 kB │ gzip:   2.07 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/emotion-styled.browser.esm-BlnBbBzT.js               7.24 kB │ gzip:   3.53 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-CgCoV-L-.js                                    7.28 kB │ gzip:   2.97 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Button-Vzk1RPto.js                                   7.30 kB │ gzip:   1.94 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-BWzBA1C2.js                                  7.62 kB │ gzip:   1.56 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/IconButton-DZc_n1em.js                               8.11 kB │ gzip:   2.12 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/preview-BBWR9nbA.js                                  8.12 kB │ gzip:   3.10 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Switch.stories-BzN44QMm.js                           8.50 kB │ gzip:   2.41 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/NumberKeypad.stories-ERxO2mel.js                     9.02 kB │ gzip:   2.70 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Accordion.stories-Dw4kvOQx.js                        9.56 kB │ gzip:   2.67 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Slider.stories-D5wvP8v7.js                          11.33 kB │ gzip:   3.48 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/TextArea.stories-ClnMkHEx.js                        12.21 kB │ gzip:   3.87 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/test-utils-Bu1HB4bq.js                              13.09 kB │ gzip:   5.11 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/ChainPicker.stories-CwD_eLjq.js                     13.72 kB │ gzip:   4.18 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/SegmentedButton.stories-CkumW8ZP.js                 15.56 kB │ gzip:   3.38 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Tooltip.stories-BvZ4rvoz.js                         16.82 kB │ gzip:   3.89 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Tab.stories-DoNIF7fC.js                             17.12 kB │ gzip:   4.26 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/emotion-react-jsx-runtime.browser.esm-D2OEHE2d.js   19.06 kB │ gzip:   7.71 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Autocomplete.stories-CiAULPtq.js                    21.19 kB │ gzip:   5.12 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Snackbar.stories-Df6xBrpn.js                        21.30 kB │ gzip:   4.05 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Select.stories-CUOjUdq0.js                          21.35 kB │ gzip:   5.21 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Color-YHDXOIA2-Dh6K2CHl.js                          29.41 kB │ gzip:  11.09 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/matchers-7Z3WT2CE-T3xScrR7.js                       29.81 kB │ gzip:  10.30 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/entry-preview-N0WBwhAK.js                           29.84 kB │ gzip:   9.55 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/BottomSheet.stories-DJp-Pooq.js                     33.95 kB │ gzip:   5.89 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Menu.stories-YcYo6l6N.js                            35.34 kB │ gzip:   3.06 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Dialog.stories-DWiw9k3c.js                          36.48 kB │ gzip:   5.79 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/DatePicker.stories-BF-wBqyM.js                      45.86 kB │ gzip:   8.77 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-CXQShRbs.js                                   53.73 kB │ gzip:  15.55 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-CbxeZXnq.js                                  134.66 kB │ gzip:  43.22 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/Icon-BjW-Y7r8.js                                   147.80 kB │ gzip:  42.82 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/iframe-BPl9jUsS.js                                 221.40 kB │ gzip:  74.25 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/entry-preview-docs-BlTFYRbw.js                     247.11 kB │ gzip:  73.44 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/axe-CGjeO0Ii.js                                    572.54 kB │ gzip: 158.07 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/index-B-CsdE-Z.js                                  662.16 kB │ gzip: 156.68 kB
+../../../../../../../var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj/assets/DocsRenderer-CFRXHY34-CGQmfxfb.js                  895.09 kB │ gzip: 276.40 kB
+[vite:dts] Declaration files built in 4333ms.
+
+✓ built in 10.82s
+info => Preview built (13 s)
+info => Output directory: /var/folders/cb/h5blzpkx6p1b2ygycgd_5h1m0000gp/T/chromatic--8145-0gmGfGH05Lvj

package/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Accordion from './Accordion';
+import Box from '../Box';
+import Typography from '../Typography';
+
+const meta = {
+  title: 'Component/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Uncontrolled: Story = {
+  args: {
+    children: (
+      <>
+        <Typography>Content 1</Typography>
+        <Typography>Content 2</Typography>
+        <Typography>Content 3</Typography>
+        <Typography>Content 4</Typography>
+        <Typography>Content 5</Typography>
+      </>
+    ),
+    title: 'Uncontrolled Accordion',
+    expand: true
+  }
+};
+
+export const Controlled: Story = {
+  render: (props) => {
+    const [expand, setExpand] = useState(false);
+
+    const handleExpand = () => setExpand((prev) => !prev);
+
+    useEffect(() => {
+      setExpand(props.expand || false);
+    }, [props.expand]);
+
+    return (
+      <Accordion {...props} expand={expand} onChange={handleExpand}>
+        {props.children}
+      </Accordion>
+    );
+  },
+  args: {
+    children: (
+      <>
+        <Typography>Content 1</Typography>
+        <Typography>Content 2</Typography>
+        <Typography>Content 3</Typography>
+        <Typography>Content 4</Typography>
+        <Typography>Content 5</Typography>
+      </>
+    ),
+    title: 'Controlled Accordion',
+    expand: false,
+    onChange: () => {},
+    headerButtonProps: {
+      id: 'controlled-accordion-header-button'
+    },
+    panelProps: {
+      id: 'controlled-accordion-panel'
+    }
+  }
+};
+
+export const Nested: Story = {
+  render: () => {
+    return (
+      <Accordion title="Parent">
+        <Accordion title="Child 1">
+          <Typography>Content 1</Typography>
+          <Typography>Content 2</Typography>
+          <Typography>Content 3</Typography>
+          <Typography>Content 4</Typography>
+          <Typography>Content 5</Typography>
+        </Accordion>
+        <Accordion title="Child 2">
+          <Typography>Content 6</Typography>
+          <Typography>Content 7</Typography>
+          <Typography>Content 8</Typography>
+          <Typography>Content 9</Typography>
+          <Typography>Content 10</Typography>
+        </Accordion>
+      </Accordion>
+    );
+  },
+  args: {
+    title: 'Nested Accordion'
+  }
+};
+
+export const FullWidth: Story = {
+  render: (props) => {
+    const [expand, setExpand] = useState(false);
+
+    const handleExpand = () => setExpand((prev) => !prev);
+
+    useEffect(() => {
+      setExpand(props.expand || false);
+    }, [props.expand]);
+
+    return (
+      <Box
+        inlineCSS={{
+          width: '100vh'
+        }}
+      >
+        <Accordion {...props} expand={expand} onChange={handleExpand}>
+          {props.children}
+        </Accordion>
+      </Box>
+    );
+  },
+  args: {
+    children: (
+      <>
+        <Typography>Content 1</Typography>
+        <Typography>Content 2</Typography>
+        <Typography>Content 3</Typography>
+        <Typography>Content 4</Typography>
+        <Typography>Content 5</Typography>
+      </>
+    ),
+    title: 'Accordion',
+    expand: false,
+    fullWidth: true,
+    onChange: () => {}
+  }
+};

package/components/Accordion/Accordion.styles.ts

@@ -0,0 +1,76 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { AccordionProps } from './Accordion';
+
+export const StyledAccordion = styled.div<Pick<AccordionProps, 'fullWidth' | 'disabled'>>`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background-color: ${({
+    theme: {
+      palette: { grey, background }
+    },
+    disabled
+  }) => (disabled ? background.secondary : grey.white)};
+
+  ${({ fullWidth }): CSSObject | null => (fullWidth ? { width: '100%' } : null)};
+`;
+
+export const Header = styled.div<Pick<AccordionProps, 'disabled'>>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: calc(24px + (${({ theme: { spacing } }) => spacing.content(4)}px * 2));
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+
+  ${({
+    theme: {
+      palette: { grey },
+      typography: { h5M }
+    },
+    disabled
+  }) => ({
+    fontSize: h5M.size,
+    fontWeight: h5M.weight,
+    lineHeight: h5M.lineHeight,
+    letterSpacing: h5M.letterSpacing,
+    color: disabled ? grey['50'] : grey['70'],
+    '& svg': {
+      color: disabled ? grey['50'] : grey['70']
+    }
+  })};
+`;
+
+export const HeaderButton = styled.button<{ fullWidth: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+  padding: ${({ theme: { spacing } }) => spacing.content(4)}px;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  ${({ fullWidth }): CSSObject | null => (fullWidth ? { width: '100%' } : null)};
+`;
+
+export const Rotate = styled.div<Pick<AccordionProps, 'expand'>>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  transform: rotate(${({ expand }) => (expand ? '180deg' : '0deg')});
+`;
+
+export const Panel = styled.div`
+  transition: height 0.2s;
+  overflow: hidden;
+`;
+
+export const PanelInner = styled.div`
+  padding: ${({ theme: { spacing } }) =>
+    `0 ${spacing.content(4)}px ${spacing.content(4)}px ${spacing.content(4)}px`};
+`;

package/components/Accordion/Accordion.tsx

@@ -0,0 +1,148 @@
+import type { ElementType, HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+
+import Icon from '@components/Icon';
+import type { GeneralComponentProps, PolymorphicComponentProps } from '@typings/component';
+
+import type { CSSValue } from '@typings/utility';
+
+import convertNumberToCSSValue from '@utils/convertNumberToCSSValue';
+
+import {
+  Header,
+  HeaderButton,
+  Panel,
+  PanelInner,
+  Rotate,
+  StyledAccordion
+} from './Accordion.styles';
+
+export interface AccordionProps
+  extends Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, 'title'> {
+  expand?: boolean;
+  onChange?: (e: MouseEvent<HTMLDivElement>) => void;
+  title: ReactNode;
+  endAdornment?: ReactNode;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  headerProps?: PolymorphicComponentProps<ElementType>;
+  headerButtonProps?: HTMLAttributes<HTMLButtonElement>;
+  panelProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
+  {
+    children,
+    expand = false,
+    title,
+    endAdornment,
+    onChange,
+    disabled = false,
+    inlineCSS,
+    fullWidth = false,
+    headerProps,
+    headerButtonProps,
+    panelProps,
+    ...props
+  },
+  ref
+) {
+  const defaultHeaderButtonId = useId();
+  const defaultPanelId = useId();
+
+  const headerButtonId = headerButtonProps?.id || defaultHeaderButtonId;
+  const panelId = panelProps?.id || defaultPanelId;
+
+  const [isExpand, setIsExpand] = useState(expand);
+  const [height, setHeight] = useState<CSSValue>(expand ? 'auto' : '0px');
+
+  const contentInnerRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    if (typeof onChange === 'function') {
+      onChange(e);
+    } else {
+      setIsExpand((prev) => !prev);
+    }
+  };
+
+  useEffect(() => {
+    setIsExpand(expand);
+  }, [expand]);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    const contentHeight = convertNumberToCSSValue(
+      contentInnerRef.current?.scrollHeight || 0
+    ) as string;
+    const isStartClose = !isExpand && height === 'auto';
+    const isReadyToClose = !isExpand && height !== 'auto';
+
+    if (contentInnerRef.current?.parentElement) {
+      if (isExpand) {
+        contentInnerRef.current.parentElement.style.height = contentHeight;
+
+        timeoutId = setTimeout(() => {
+          setHeight('auto');
+          if (contentInnerRef.current?.parentElement) {
+            contentInnerRef.current.parentElement.style.height = 'auto';
+          }
+        }, 200);
+      } else if (isStartClose) {
+        contentInnerRef.current.parentElement.style.height = contentHeight;
+        setHeight(contentHeight);
+      } else if (isReadyToClose) {
+        contentInnerRef.current.parentElement.style.height = '0px';
+        setHeight('0px');
+      }
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isExpand, height]);
+
+  return (
+    <StyledAccordion ref={ref} disabled={disabled} fullWidth={fullWidth} {...props} css={inlineCSS}>
+      <Header
+        as={headerProps?.tag || 'h3'}
+        onClick={handleClick}
+        disabled={disabled}
+        {...headerProps}
+      >
+        <HeaderButton
+          id={headerButtonId}
+          aria-disabled={disabled}
+          aria-expanded={isExpand}
+          aria-controls={panelId}
+          fullWidth={fullWidth}
+          {...headerButtonProps}
+        >
+          {title}
+          <Rotate expand={isExpand}>
+            {endAdornment || <Icon name="ChevronDownLine" size="xSmall" />}
+          </Rotate>
+        </HeaderButton>
+      </Header>
+      <Panel>
+        <PanelInner
+          role="region"
+          id={panelId}
+          aria-labelledby={headerButtonId}
+          ref={contentInnerRef}
+          {...panelProps}
+        >
+          {children}
+        </PanelInner>
+      </Panel>
+    </StyledAccordion>
+  );
+});
+
+export default Accordion;

package/components/Accordion/index.ts

@@ -0,0 +1,3 @@
+import Accordion from './Accordion';
+
+export default Accordion;