@lunit/design-system 2.0.2 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -7
- package/dist/cjs/components/Chip/index.js +1 -1
- package/dist/cjs/components/Chip/index.js.map +1 -1
- package/dist/cjs/components/Dialog/index.js +1 -1
- package/dist/cjs/components/Dialog/index.js.map +1 -1
- package/dist/cjs/components/Dropdown/index.js +1 -1
- package/dist/cjs/components/Dropdown/index.js.map +1 -1
- package/dist/cjs/components/TextField/index.js +1 -1
- package/dist/cjs/components/TextField/index.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/components/Chip/Chip.styled.js +9 -16
- package/dist/components/Chip/Chip.styled.js.map +1 -1
- package/dist/components/Dialog/Dialog.js +0 -6
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Dropdown/Dropdown.js +37 -4
- package/dist/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/components/Dropdown/Dropdown.styled.js +161 -0
- package/dist/components/Dropdown/Dropdown.styled.js.map +1 -0
- package/dist/components/Dropdown/Dropdown.types.js +2 -0
- package/dist/components/Dropdown/Dropdown.types.js.map +1 -0
- package/dist/components/Dropdown/DropdownItem.js +36 -0
- package/dist/components/Dropdown/DropdownItem.js.map +1 -0
- package/dist/components/Dropdown/index.js +1 -0
- package/dist/components/Dropdown/index.js.map +1 -1
- package/dist/components/TextField/TextField.js +1 -1
- package/dist/components/TextField/TextField.js.map +1 -1
- package/dist/components/TextField/TextField.style.js +27 -3
- package/dist/components/TextField/TextField.style.js.map +1 -1
- package/dist/foundation/Typography/index.js +5 -0
- package/dist/foundation/Typography/index.js.map +1 -1
- package/dist/foundation/Typography/tokens.js +44 -0
- package/dist/foundation/Typography/tokens.js.map +1 -1
- package/dist/foundation/colors/base/blue.js +12 -10
- package/dist/foundation/colors/base/blue.js.map +1 -1
- package/dist/foundation/colors/base/green.js +11 -9
- package/dist/foundation/colors/base/green.js.map +1 -1
- package/dist/foundation/colors/base/grey.js +30 -15
- package/dist/foundation/colors/base/grey.js.map +1 -1
- package/dist/foundation/colors/base/lunitTeal.js +2 -0
- package/dist/foundation/colors/base/lunitTeal.js.map +1 -1
- package/dist/foundation/colors/base/magenta.js +3 -1
- package/dist/foundation/colors/base/magenta.js.map +1 -1
- package/dist/foundation/colors/base/orange.js +11 -9
- package/dist/foundation/colors/base/orange.js.map +1 -1
- package/dist/foundation/colors/base/purple.js +3 -1
- package/dist/foundation/colors/base/purple.js.map +1 -1
- package/dist/foundation/colors/base/red.js +5 -3
- package/dist/foundation/colors/base/red.js.map +1 -1
- package/dist/foundation/colors/base/yellow.js +12 -10
- package/dist/foundation/colors/base/yellow.js.map +1 -1
- package/dist/foundation/colors/index.js +3 -0
- package/dist/foundation/colors/index.js.map +1 -1
- package/dist/foundation/colors/token/component.js +26 -22
- package/dist/foundation/colors/token/component.js.map +1 -1
- package/dist/foundation/colors/token/core.js +21 -0
- package/dist/foundation/colors/token/core.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/types/components/Button/Button.styled.d.ts +3 -3
- package/dist/types/components/Chip/Chip.styled.d.ts +12 -12
- package/dist/types/components/Dialog/Dialog.d.ts +0 -3
- package/dist/types/components/Dropdown/Dropdown.d.ts +3 -1
- package/dist/types/components/Dropdown/Dropdown.styled.d.ts +41 -0
- package/dist/types/components/Dropdown/Dropdown.types.d.ts +11 -0
- package/dist/types/components/Dropdown/DropdownItem.d.ts +13 -0
- package/dist/types/components/Dropdown/index.d.ts +2 -0
- package/dist/types/components/ToggleButton/ToggleButton.styled.d.ts +2 -2
- package/dist/types/foundation/Typography/index.d.ts +21 -1
- package/dist/types/foundation/Typography/tokens.d.ts +15 -0
- package/dist/types/foundation/colors/base/blue.d.ts +2 -0
- package/dist/types/foundation/colors/base/green.d.ts +2 -0
- package/dist/types/foundation/colors/base/grey.d.ts +15 -0
- package/dist/types/foundation/colors/base/lunitTeal.d.ts +2 -0
- package/dist/types/foundation/colors/base/magenta.d.ts +2 -0
- package/dist/types/foundation/colors/base/orange.d.ts +2 -0
- package/dist/types/foundation/colors/base/purple.d.ts +2 -0
- package/dist/types/foundation/colors/base/red.d.ts +2 -0
- package/dist/types/foundation/colors/base/yellow.d.ts +2 -0
- package/dist/types/foundation/colors/index.d.ts +3 -0
- package/dist/types/foundation/colors/types.d.ts +3 -0
- package/dist/types/foundation/index.d.ts +3 -0
- package/dist/types/index.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/Chip/Chip.styled.ts +9 -16
- package/src/components/Dialog/Dialog.tsx +0 -8
- package/src/components/Dropdown/Dropdown.styled.tsx +170 -0
- package/src/components/Dropdown/Dropdown.tsx +59 -8
- package/src/components/Dropdown/Dropdown.types.ts +15 -0
- package/src/components/Dropdown/DropdownItem.tsx +107 -0
- package/src/components/Dropdown/index.ts +6 -0
- package/src/components/TextField/TextField.style.ts +28 -3
- package/src/components/TextField/TextField.tsx +1 -7
- package/src/foundation/Typography/index.ts +10 -0
- package/src/foundation/Typography/tokens.ts +45 -0
- package/src/foundation/colors/base/blue.ts +12 -10
- package/src/foundation/colors/base/green.ts +11 -9
- package/src/foundation/colors/base/grey.ts +30 -15
- package/src/foundation/colors/base/lunitTeal.ts +2 -0
- package/src/foundation/colors/base/magenta.ts +3 -1
- package/src/foundation/colors/base/orange.ts +11 -9
- package/src/foundation/colors/base/purple.ts +3 -1
- package/src/foundation/colors/base/red.ts +5 -3
- package/src/foundation/colors/base/yellow.ts +12 -10
- package/src/foundation/colors/index.ts +3 -0
- package/src/foundation/colors/token/component.ts +26 -22
- package/src/foundation/colors/token/core.ts +21 -0
- package/src/foundation/colors/types.ts +3 -0
- package/src/index.ts +6 -1
- package/src/stories/components/Chip/Chip.stories.tsx +18 -0
- package/src/stories/components/Chip/ChipDocs.mdx +20 -0
- package/src/stories/components/Dialog/DialogDocs.mdx +2 -10
- package/src/stories/components/Dropdown/Dropdown.stories.tsx +299 -10
- package/src/stories/components/Dropdown/DropdownExamples.stories.tsx +221 -0
- package/src/stories/components/Dropdown/DropdownItem.stories.tsx +360 -0
- package/src/stories/components/TextField/BasicTextField.stories.tsx +28 -0
- package/src/stories/components/TextField/TextFieldDocs.mdx +12 -0
- package/src/stories/foundation/Typography/Typography.stories.tsx +13 -0
- package/src/stories/foundation/Typography/const.ts +6 -1
- package/src/stories/foundation/colors/TokenPaletteTable.tsx +19 -1
- package/dist/cjs/components/Modal/index.js +0 -2
- package/dist/cjs/components/Modal/index.js.map +0 -1
- package/dist/components/Modal/Modal.js +0 -7
- package/dist/components/Modal/Modal.js.map +0 -1
- package/dist/components/Modal/index.js +0 -2
- package/dist/components/Modal/index.js.map +0 -1
- package/dist/types/components/Modal/Modal.d.ts +0 -2
- package/dist/types/components/Modal/index.d.ts +0 -1
package/README.md
CHANGED
|
@@ -1,17 +1,117 @@
|
|
|
1
1
|
# Lunit Design System
|
|
2
2
|
|
|
3
|
+
## Introduction
|
|
4
|
+
|
|
5
|
+
Lunit Design System Library is a collection of reusable components and styles that are used to build Lunit's products.<br />
|
|
6
|
+
It is built on top of Material UI, a popular React UI framework.
|
|
7
|
+
|
|
8
|
+
- [Design System Component Storybook](https://main--62d7d1f2efc8a1e364b5e5e8.chromatic.com/?path=/docs/getting-started-overview--docs)
|
|
9
|
+
- [Design System Figma](https://www.figma.com/design/9CoirIDPof6exynJosiGXi/Design-System_2.0.0_Latest?node-id=0-1&p=f&m=dev)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
Currently, the design system only supports material ui v5 and react v18, so you need to install those versions.
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @emotion/react@11.11.4 @emotion/styled@11.11.0 @mui/material@5.15.14 @lunit/design-system --legacy-peer-deps
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick Start
|
|
20
|
+
|
|
21
|
+
### 1. Setting Provider
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import {
|
|
25
|
+
createTheme,
|
|
26
|
+
ThemeProvider as MuiThemeProvider,
|
|
27
|
+
} from "@mui/material/styles";
|
|
28
|
+
import { deepmerge } from "@mui/utils";
|
|
29
|
+
import CssBaseline from "@mui/material/CssBaseline";
|
|
30
|
+
import { themeOptions } from "@lunit/design-system";
|
|
31
|
+
|
|
32
|
+
const theme = createTheme(
|
|
33
|
+
deepmerge(themeOptions, {
|
|
34
|
+
typography: {
|
|
35
|
+
fontFamily: ["Pretendard Variable"],
|
|
36
|
+
},
|
|
37
|
+
})
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
41
|
+
return (
|
|
42
|
+
<MuiThemeProvider theme={theme}>
|
|
43
|
+
<CssBaseline />
|
|
44
|
+
{children}
|
|
45
|
+
</MuiThemeProvider>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function App() {
|
|
50
|
+
return (
|
|
51
|
+
<ThemeProvider>
|
|
52
|
+
<YourApp />
|
|
53
|
+
</ThemeProvider>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### 2. Setting Pretendard Font
|
|
59
|
+
|
|
60
|
+
#### React App with vite
|
|
61
|
+
|
|
62
|
+
Download the PretendardVariable.woff2 font in [Pretendard GitHub](https://github.com/orioncactus/pretendard?tab=readme-ov-file#%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C) and place it in your css file.
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
@font-face {
|
|
66
|
+
font-family: "Pretendard Variable";
|
|
67
|
+
src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### Next App
|
|
72
|
+
|
|
73
|
+
Apply the Pretendard font using NextFont in the Provider.
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import localFont from "next/font/local";
|
|
77
|
+
|
|
78
|
+
const pretendard = localFont({
|
|
79
|
+
src: "./fonts/PretendardVariable.woff2",
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
const theme = createTheme(
|
|
83
|
+
deepmerge(themeOptions, {
|
|
84
|
+
typography: {
|
|
85
|
+
fontFamily: [pretendard.style.fontFamily, "Pretendard Variable"],
|
|
86
|
+
},
|
|
87
|
+
})
|
|
88
|
+
);
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
#### Setting Theme color
|
|
92
|
+
|
|
93
|
+
The color token in the design system shows different colors depending on the theme you have set up.<br />
|
|
94
|
+
Here's how to set the color theme.
|
|
95
|
+
|
|
96
|
+
> Note: If you don't set a theme, the `Dark 1 theme` is applied,<br />
|
|
97
|
+
> and the text may not be visible if the background is white. <br />
|
|
98
|
+
> You can fix this by modifying the theme. Please refer to the guide below
|
|
99
|
+
|
|
100
|
+
- [how to set themes of lunit design system docs](https://main--62d7d1f2efc8a1e364b5e5e8.chromatic.com/?path=/docs/foundation-colors--docs#how-to-set-themes)
|
|
101
|
+
|
|
3
102
|
## Development
|
|
4
103
|
|
|
5
104
|
- At `repository root` location
|
|
6
105
|
- `npm i` : Install node modules and set Nx environment
|
|
7
|
-
- `
|
|
8
|
-
|
|
9
|
-
## Usage
|
|
106
|
+
- `npm run storybook:design-system` : Runs [storybook](https://storybook.js.org) local dev server on http://localhost:6006
|
|
10
107
|
|
|
11
108
|
### Create Story
|
|
12
109
|
|
|
13
|
-
A story is simply a case in which one component is executable
|
|
14
|
-
You can browse the stories in the UI and see the code behind them in files
|
|
110
|
+
A story is simply a case in which one component is executable.<br />
|
|
111
|
+
You can browse the stories in the UI and see the code behind them in files<br />
|
|
112
|
+
that end with `.stories.js(jsx)` or `.stories.ts(tsx)`.
|
|
113
|
+
|
|
114
|
+
- [Writing stories Docs](https://storybook.js.org/docs/react/writing-stories/introductio)
|
|
15
115
|
|
|
16
116
|
```jsx
|
|
17
117
|
// Button.stories.js|jsx
|
|
@@ -29,6 +129,6 @@ export default {
|
|
|
29
129
|
export const Primary = () => <Button primary>Button</Button>;
|
|
30
130
|
```
|
|
31
131
|
|
|
32
|
-
|
|
132
|
+
## Deployment
|
|
33
133
|
|
|
34
|
-
|
|
134
|
+
- [@lunit/design-system npm publish docs](https://lunit.atlassian.net/wiki/x/FoKe8)
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";var e={n:t=>{var o=t&&t.__esModule?()=>t.default:()=>t;return e.d(o,{a:o}),o},d:(t,o)=>{for(var r in o)e.o(o,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>
|
|
1
|
+
(()=>{"use strict";var e={n:t=>{var o=t&&t.__esModule?()=>t.default:()=>t;return e.d(o,{a:o}),o},d:(t,o)=>{for(var r in o)e.o(o,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>w});const o=require("react/jsx-runtime"),r=require("@mui/material"),n=require("@lunit/design-system-icons/Close16");var i=e.n(n);const a="primary",l="secondary",c="error",p="warning",s="success",u={height:"22px",width:"auto",minWidth:"22px",boxShadow:"none","&.Mui-disabled":{opacity:1},"& .MuiChip-label":{padding:0,marginInline:"8px"}},d=(e,t,o)=>{if("text"===e)switch(o){case a:return t.palette.lunit_token.component.chip_primary_text;case l:return t.palette.lunit_token.component.chip_secondary_text;case c:return t.palette.lunit_token.component.chip_error_text;case p:return t.palette.lunit_token.component.chip_warning_text;case s:return t.palette.lunit_token.component.chip_success_text;default:return t.palette.lunit_token.component.chip_primary_text}else switch(o){case a:return t.palette.lunit_token.component.chip_primary_bg;case l:return t.palette.lunit_token.component.chip_secondary_bg;case c:return t.palette.lunit_token.component.chip_error_bg;case p:return t.palette.lunit_token.component.chip_warning_bg;case s:return t.palette.lunit_token.component.chip_success_bg;default:return t.palette.lunit_token.component.chip_primary_bg}},h=(0,r.styled)(r.Chip,{shouldForwardProp:e=>!["color"].includes(e.toString())})((({theme:e,color:t})=>({...u,...e.typography.caption,color:d("text",e,t),borderColor:d("text",e,t)}))),x=(0,r.styled)(r.Chip,{shouldForwardProp:e=>!["color"].includes(e.toString())})((()=>({theme:e,color:t})=>({...u,...e.typography.caption,color:e.palette.lunit_token.core.text_normal,backgroundColor:d("bg",e,t),"& .MuiSvgIcon-root":{marginBlock:"3px",marginLeft:"3px",marginRight:"4px",height:"16px",width:"16px",color:d("text",e,t)},"& .MuiChip-avatar":{marginBlock:"3px",marginLeft:"4px",marginRight:"5px",height:"14px",width:"14px",fontSize:"11px",fontWeight:500,lineHeight:"16px",display:"flex",textAlign:"center",alignItems:"center",color:d("bg",e,t),backgroundColor:d("text",e,t)}}))),g=(0,r.styled)(x,{shouldForwardProp:e=>!["color"].includes(e.toString())})((()=>({theme:e,color:t})=>({position:"relative",left:0,right:0,zIndex:0,"&:hover":{backgroundColor:d("bg",e,t)},"&:hover::before":{position:"absolute",zIndex:-1,content:'""',top:0,left:0,right:0,bottom:0,backgroundColor:e.palette.lunit_token.core.hover,borderRadius:"11px"}}))),m=(0,r.styled)(x)((()=>({theme:e})=>({"& .MuiChip-deleteIcon":{marginLeft:"4px",marginRight:"3px"},"& .delete-icon-hover-layer":{position:"absolute",zIndex:1e3,top:0,left:"auto",right:0,bottom:0,opacity:0,color:e.palette.lunit_token.core.hover,":hover":{cursor:"pointer",opacity:1}}}))),_=e=>{const{color:t="primary",...r}=e;return(0,o.jsx)(h,{...r,variant:"outlined",disabled:!0,color:t})},b=e=>{if(e&&"string"==typeof e)return 0===e.length?(0,o.jsx)(r.Avatar,{}):(0,o.jsx)(r.Avatar,{children:e.slice(0,1).toLocaleUpperCase()})},y=e=>{if(e&&"string"!=typeof e)return e},k=(e,t)=>({marginLeft:e?"0px":"8px",marginRight:t?"0px":"8px"}),f=e=>{const{color:t="primary",thumbnail:r,sx:n,variant:i,...a}=e;return(0,o.jsx)(x,{...a,disabled:!0,avatar:b(r),icon:y(r),color:t,sx:{"& .MuiChip-label":{...k(r)},...n}})},v=e=>{const{color:t="primary",thumbnail:r,onDelete:n,onClick:i,sx:a,variant:l,...c}=e;return(0,o.jsx)(g,{...c,onClick:i,avatar:b(r),icon:y(r),color:t,sx:{"& .MuiChip-label":{...k(r)}}})},C=({onClick:e})=>(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(i(),{}),(0,o.jsx)(i(),{className:"delete-icon-hover-layer",onClick:e})]}),j=e=>{const{color:t="primary",thumbnail:r,onDelete:n,sx:i,variant:a,...l}=e;return(0,o.jsx)(m,{...l,color:t,onDelete:n,deleteIcon:(0,o.jsx)(C,{onClick:n}),avatar:b(r),icon:y(r),sx:{"& .MuiChip-label":{...k(r,Boolean(n))},...i}})},w=e=>{const{kind:t,variant:r,onDelete:n,onClick:i,...a}=e;return"outlined"===t||"outlined"===r?(0,o.jsx)(_,{...e}):i?(0,o.jsx)(v,{...e}):n?(0,o.jsx)(j,{...e}):(0,o.jsx)(f,{...a})};module.exports=t})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/Chip/index.js","mappings":"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","sources":["webpack://@lunit/design-system/webpack/bootstrap","webpack://@lunit/design-system/webpack/runtime/compat get default export","webpack://@lunit/design-system/webpack/runtime/define property getters","webpack://@lunit/design-system/webpack/runtime/hasOwnProperty shorthand","webpack://@lunit/design-system/webpack/runtime/make namespace object","webpack://@lunit/design-system/external commonjs \"react/jsx-runtime\"","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Close16\"","webpack://@lunit/design-system/./src/components/Chip/consts.ts","webpack://@lunit/design-system/./src/components/Chip/Chip.styled.ts","webpack://@lunit/design-system/./src/components/Chip/Chip.tsx"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react/jsx-runtime\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Close16\");","export const CHIP_COLORS = {\n PRIMARY: \"primary\",\n SECONDARY: \"secondary\",\n ERROR: \"error\",\n WARNING: \"warning\",\n SUCCESS: \"success\",\n} as const;\n","import { Chip as MuiChip, styled } from \"@mui/material\";\nimport { CHIP_COLORS } from \"./consts\";\n\nimport type { Theme } from \"@mui/material/styles\";\nimport type {\n ChipColor,\n OutlinedChipProps,\n BaseContainedChipProps,\n EnableContainedChipProps,\n} from \"./Chip.types\";\n\nconst COMMON_STYLES = {\n \"&.MuiChip-root\": {\n height: \"22px\",\n width: \"auto\",\n minWidth: \"22px\",\n boxShadow: \"none\",\n },\n \"&.Mui-disabled\": {\n opacity: 1,\n },\n \"& .MuiChip-label\": {\n display: \"flex\",\n alignItems: \"center\",\n textAlign: \"center\",\n padding: 0,\n marginInline: \"8px\",\n },\n};\n\nconst getColorToken = (\n token: \"text\" | \"bg\",\n theme: Theme,\n color?: ChipColor\n) => {\n if (token === \"text\") {\n switch (color) {\n case CHIP_COLORS.PRIMARY:\n return theme.palette.lunit_token.component.chip_primary_text;\n case CHIP_COLORS.SECONDARY:\n return theme.palette.lunit_token.component.chip_secondary_text;\n case CHIP_COLORS.ERROR:\n return theme.palette.lunit_token.component.chip_error_text;\n case CHIP_COLORS.WARNING:\n return theme.palette.lunit_token.component.chip_warning_text;\n case CHIP_COLORS.SUCCESS:\n return theme.palette.lunit_token.component.chip_success_text;\n default:\n return theme.palette.lunit_token.component.chip_primary_text;\n }\n } else {\n switch (color) {\n case CHIP_COLORS.PRIMARY:\n return theme.palette.lunit_token.component.chip_primary_bg;\n case CHIP_COLORS.SECONDARY:\n return theme.palette.lunit_token.component.chip_secondary_bg;\n case CHIP_COLORS.ERROR:\n return theme.palette.lunit_token.component.chip_error_bg;\n case CHIP_COLORS.WARNING:\n return theme.palette.lunit_token.component.chip_warning_bg;\n case CHIP_COLORS.SUCCESS:\n return theme.palette.lunit_token.component.chip_success_bg;\n default:\n return theme.palette.lunit_token.component.chip_primary_bg;\n }\n }\n};\n\nexport const StyledOutlinedChip = styled(MuiChip, {\n shouldForwardProp: (prop) => ![\"color\"].includes(prop.toString()),\n})<OutlinedChipProps>(({ theme, color }) => ({\n ...COMMON_STYLES,\n ...theme.typography.caption,\n\n color: getColorToken(\"text\", theme, color),\n borderColor: getColorToken(\"text\", theme, color),\n}));\n\nexport const StyledContainedChipBase = styled(MuiChip, {\n shouldForwardProp: (prop) => ![\"color\"].includes(prop.toString()),\n})<BaseContainedChipProps>(() => ({ theme, color }) => ({\n ...COMMON_STYLES,\n ...theme.typography.caption,\n\n color: theme.palette.lunit_token.core.text_normal,\n backgroundColor: getColorToken(\"bg\", theme, color),\n\n \"& .MuiSvgIcon-root\": {\n marginBlock: \"3px\",\n marginLeft: \"3px\",\n marginRight: \"4px\",\n height: \"16px\",\n width: \"16px\",\n color: getColorToken(\"text\", theme, color),\n },\n \"& .MuiChip-avatar\": {\n marginBlock: \"3px\",\n marginLeft: \"4px\",\n marginRight: \"5px\",\n height: \"14px\",\n width: \"14px\",\n fontSize: \"11px\",\n fontWeight: 500,\n lineHeight: \"16px\",\n display: \"flex\",\n textAlign: \"center\",\n alignItems: \"center\",\n color: getColorToken(\"bg\", theme, color),\n backgroundColor: getColorToken(\"text\", theme, color),\n },\n}));\n\nexport const StyledContainedChipEnable = styled(StyledContainedChipBase, {\n shouldForwardProp: (prop) => ![\"color\"].includes(prop.toString()),\n})<EnableContainedChipProps>(() => ({ theme, color }) => ({\n /**\n * Setting the z-index of the chip to 0 and the z-index of the pseudo element to -1\n * allows the pseudo element(hover layer) to be rendered between the chip and the chip's children.\n */\n \"&.MuiChip-root\": {\n position: \"relative\",\n left: 0,\n right: 0,\n zIndex: 0,\n },\n \"&:hover\": {\n backgroundColor: getColorToken(\"bg\", theme, color),\n },\n \"&.MuiChip-root:hover::before\": {\n position: \"absolute\",\n zIndex: -1,\n content: '\"\"',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: theme.palette.lunit_token.core.hover,\n borderRadius: \"11px\",\n },\n}));\n\nexport const StyledContainedChipDeletable = styled(\n StyledContainedChipBase\n)<BaseContainedChipProps>(() => ({ theme }) => ({\n \"& .MuiChip-deleteIcon\": {\n marginLeft: \"4px\",\n marginRight: \"3px\",\n },\n\n \"& .delete-icon-hover-layer\": {\n position: \"absolute\",\n zIndex: 1000,\n top: 0,\n left: \"auto\",\n right: 0,\n bottom: 0,\n opacity: 0,\n color: theme.palette.lunit_token.core.hover,\n \":hover\": {\n cursor: \"pointer\",\n opacity: 1,\n },\n },\n}));\n","import React from \"react\";\nimport { Avatar } from \"@mui/material\";\nimport Close16 from \"@lunit/design-system-icons/Close16\";\nimport {\n StyledOutlinedChip,\n StyledContainedChipBase,\n StyledContainedChipEnable,\n StyledContainedChipDeletable,\n} from \"./Chip.styled\";\n\nimport type {\n OutlinedChipProps,\n ReadOnlyContainedChipProps,\n EnableContainedChipProps,\n DeletableContainedChipProps,\n ChipProps,\n ChipType,\n ChipThumbnail,\n} from \"./Chip.types\";\n\nconst Chip: ChipType = (props: ChipProps) => {\n const { kind, variant, onDelete, onClick, ...restProps } = props;\n\n const isOutlined = kind === \"outlined\" || variant === \"outlined\";\n\n if (isOutlined) return <OutlinedChip {...props} />;\n else if (onClick) return <EnableContainedChip {...props} />;\n else if (onDelete) return <DeletableContainedChip {...props} />;\n\n return <ReadOnlyContainedChip {...restProps} />;\n};\n\nconst OutlinedChip = (props: OutlinedChipProps) => {\n const { color = \"primary\", ...restProps } = props;\n\n return (\n <StyledOutlinedChip\n {...restProps}\n variant=\"outlined\"\n disabled\n color={color}\n />\n );\n};\n\n/**\n * Conditional styling for contained chip\n */\nconst getAvatar = (thumbnail: ChipThumbnail | undefined) => {\n if (!thumbnail || typeof thumbnail !== \"string\") return;\n if (thumbnail.length === 0) return <Avatar />;\n return <Avatar>{thumbnail.slice(0, 1).toLocaleUpperCase()}</Avatar>;\n};\nconst getIcon = (thumbnail: ChipThumbnail | undefined) => {\n if (thumbnail && typeof thumbnail !== \"string\") return thumbnail;\n return undefined;\n};\nconst getLabelMargin = (\n thumbnail: ChipThumbnail | undefined,\n deletable?: boolean\n) => {\n return {\n marginLeft: thumbnail ? \"0px\" : \"8px\",\n marginRight: deletable ? \"0px\" : \"8px\",\n };\n};\n\nconst ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {\n const { color = \"primary\", thumbnail, sx, variant, ...restProps } = props;\n\n return (\n <StyledContainedChipBase\n {...restProps}\n disabled\n avatar={getAvatar(thumbnail)}\n icon={getIcon(thumbnail)}\n color={color}\n sx={{\n \"& .MuiChip-label\": {\n ...getLabelMargin(thumbnail),\n },\n ...sx,\n }}\n />\n );\n};\n\nconst EnableContainedChip = (props: EnableContainedChipProps) => {\n const {\n color = \"primary\",\n thumbnail,\n onDelete,\n onClick,\n sx,\n variant,\n ...restProps\n } = props;\n\n return (\n <StyledContainedChipEnable\n {...restProps}\n onClick={onClick}\n avatar={getAvatar(thumbnail)}\n icon={getIcon(thumbnail)}\n color={color}\n sx={{\n \"& .MuiChip-label\": {\n ...getLabelMargin(thumbnail),\n },\n }}\n />\n );\n};\n\nconst DeleteIconWithHoverLayer = ({ onClick }: { onClick: () => void }) => {\n return (\n <>\n <Close16 />\n <Close16 className=\"delete-icon-hover-layer\" onClick={onClick} />\n </>\n );\n};\nconst DeletableContainedChip = (props: DeletableContainedChipProps) => {\n const {\n color = \"primary\",\n thumbnail,\n onDelete,\n sx,\n variant,\n ...restProps\n } = props;\n\n return (\n <StyledContainedChipDeletable\n {...restProps}\n color={color}\n onDelete={onDelete}\n deleteIcon={<DeleteIconWithHoverLayer onClick={onDelete} />}\n avatar={getAvatar(thumbnail)}\n icon={getIcon(thumbnail)}\n sx={{\n \"& .MuiChip-label\": {\n ...getLabelMargin(thumbnail, Boolean(onDelete)),\n },\n ...sx,\n }}\n />\n );\n};\n\nexport default Chip;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","CHIP_COLORS","COMMON_STYLES","height","width","minWidth","boxShadow","opacity","display","alignItems","textAlign","padding","marginInline","getColorToken","token","theme","color","palette","lunit_token","component","chip_primary_text","chip_secondary_text","chip_error_text","chip_warning_text","chip_success_text","chip_primary_bg","chip_secondary_bg","chip_error_bg","chip_warning_bg","chip_success_bg","StyledOutlinedChip","styled","shouldForwardProp","includes","toString","typography","caption","borderColor","StyledContainedChipBase","core","text_normal","backgroundColor","marginBlock","marginLeft","marginRight","fontSize","fontWeight","lineHeight","StyledContainedChipEnable","position","left","right","zIndex","content","top","bottom","hover","borderRadius","StyledContainedChipDeletable","cursor","OutlinedChip","props","restProps","variant","disabled","getAvatar","thumbnail","length","Avatar","slice","toLocaleUpperCase","getIcon","getLabelMargin","deletable","ReadOnlyContainedChip","sx","avatar","icon","EnableContainedChip","onDelete","onClick","DeleteIconWithHoverLayer","className","DeletableContainedChip","deleteIcon","Boolean","kind"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/Chip/index.js","mappings":"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","sources":["webpack://@lunit/design-system/webpack/bootstrap","webpack://@lunit/design-system/webpack/runtime/compat get default export","webpack://@lunit/design-system/webpack/runtime/define property getters","webpack://@lunit/design-system/webpack/runtime/hasOwnProperty shorthand","webpack://@lunit/design-system/webpack/runtime/make namespace object","webpack://@lunit/design-system/external commonjs \"react/jsx-runtime\"","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Close16\"","webpack://@lunit/design-system/./src/components/Chip/consts.ts","webpack://@lunit/design-system/./src/components/Chip/Chip.styled.ts","webpack://@lunit/design-system/./src/components/Chip/Chip.tsx"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react/jsx-runtime\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Close16\");","export const CHIP_COLORS = {\n PRIMARY: \"primary\",\n SECONDARY: \"secondary\",\n ERROR: \"error\",\n WARNING: \"warning\",\n SUCCESS: \"success\",\n} as const;\n","import { Chip as MuiChip, styled } from \"@mui/material\";\nimport { CHIP_COLORS } from \"./consts\";\n\nimport type { Theme } from \"@mui/material/styles\";\nimport type {\n ChipColor,\n OutlinedChipProps,\n BaseContainedChipProps,\n EnableContainedChipProps,\n} from \"./Chip.types\";\n\nconst COMMON_STYLES = {\n height: \"22px\",\n width: \"auto\",\n minWidth: \"22px\",\n boxShadow: \"none\",\n \"&.Mui-disabled\": {\n opacity: 1,\n },\n \"& .MuiChip-label\": {\n padding: 0,\n marginInline: \"8px\",\n },\n};\n\nconst getColorToken = (\n token: \"text\" | \"bg\",\n theme: Theme,\n color?: ChipColor\n) => {\n if (token === \"text\") {\n switch (color) {\n case CHIP_COLORS.PRIMARY:\n return theme.palette.lunit_token.component.chip_primary_text;\n case CHIP_COLORS.SECONDARY:\n return theme.palette.lunit_token.component.chip_secondary_text;\n case CHIP_COLORS.ERROR:\n return theme.palette.lunit_token.component.chip_error_text;\n case CHIP_COLORS.WARNING:\n return theme.palette.lunit_token.component.chip_warning_text;\n case CHIP_COLORS.SUCCESS:\n return theme.palette.lunit_token.component.chip_success_text;\n default:\n return theme.palette.lunit_token.component.chip_primary_text;\n }\n } else {\n switch (color) {\n case CHIP_COLORS.PRIMARY:\n return theme.palette.lunit_token.component.chip_primary_bg;\n case CHIP_COLORS.SECONDARY:\n return theme.palette.lunit_token.component.chip_secondary_bg;\n case CHIP_COLORS.ERROR:\n return theme.palette.lunit_token.component.chip_error_bg;\n case CHIP_COLORS.WARNING:\n return theme.palette.lunit_token.component.chip_warning_bg;\n case CHIP_COLORS.SUCCESS:\n return theme.palette.lunit_token.component.chip_success_bg;\n default:\n return theme.palette.lunit_token.component.chip_primary_bg;\n }\n }\n};\n\nexport const StyledOutlinedChip = styled(MuiChip, {\n shouldForwardProp: (prop) => ![\"color\"].includes(prop.toString()),\n})<OutlinedChipProps>(({ theme, color }) => ({\n ...COMMON_STYLES,\n ...theme.typography.caption,\n\n color: getColorToken(\"text\", theme, color),\n borderColor: getColorToken(\"text\", theme, color),\n}));\n\nexport const StyledContainedChipBase = styled(MuiChip, {\n shouldForwardProp: (prop) => ![\"color\"].includes(prop.toString()),\n})<BaseContainedChipProps>(() => ({ theme, color }) => ({\n ...COMMON_STYLES,\n ...theme.typography.caption,\n\n color: theme.palette.lunit_token.core.text_normal,\n backgroundColor: getColorToken(\"bg\", theme, color),\n\n \"& .MuiSvgIcon-root\": {\n marginBlock: \"3px\",\n marginLeft: \"3px\",\n marginRight: \"4px\",\n height: \"16px\",\n width: \"16px\",\n color: getColorToken(\"text\", theme, color),\n },\n \"& .MuiChip-avatar\": {\n marginBlock: \"3px\",\n marginLeft: \"4px\",\n marginRight: \"5px\",\n height: \"14px\",\n width: \"14px\",\n fontSize: \"11px\",\n fontWeight: 500,\n lineHeight: \"16px\",\n display: \"flex\",\n textAlign: \"center\",\n alignItems: \"center\",\n color: getColorToken(\"bg\", theme, color),\n backgroundColor: getColorToken(\"text\", theme, color),\n },\n}));\n\nexport const StyledContainedChipEnable = styled(StyledContainedChipBase, {\n shouldForwardProp: (prop) => ![\"color\"].includes(prop.toString()),\n})<EnableContainedChipProps>(() => ({ theme, color }) => ({\n /**\n * Setting the z-index of the chip to 0 and the z-index of the pseudo element to -1\n * allows the pseudo element(hover layer) to be rendered between the chip and the chip's children.\n */\n position: \"relative\",\n left: 0,\n right: 0,\n zIndex: 0,\n \"&:hover\": {\n backgroundColor: getColorToken(\"bg\", theme, color),\n },\n \"&:hover::before\": {\n position: \"absolute\",\n zIndex: -1,\n content: '\"\"',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: theme.palette.lunit_token.core.hover,\n borderRadius: \"11px\",\n },\n}));\n\nexport const StyledContainedChipDeletable = styled(\n StyledContainedChipBase\n)<BaseContainedChipProps>(() => ({ theme }) => ({\n \"& .MuiChip-deleteIcon\": {\n marginLeft: \"4px\",\n marginRight: \"3px\",\n },\n\n \"& .delete-icon-hover-layer\": {\n position: \"absolute\",\n zIndex: 1000,\n top: 0,\n left: \"auto\",\n right: 0,\n bottom: 0,\n opacity: 0,\n color: theme.palette.lunit_token.core.hover,\n \":hover\": {\n cursor: \"pointer\",\n opacity: 1,\n },\n },\n}));\n","import React from \"react\";\nimport { Avatar } from \"@mui/material\";\nimport Close16 from \"@lunit/design-system-icons/Close16\";\nimport {\n StyledOutlinedChip,\n StyledContainedChipBase,\n StyledContainedChipEnable,\n StyledContainedChipDeletable,\n} from \"./Chip.styled\";\n\nimport type {\n OutlinedChipProps,\n ReadOnlyContainedChipProps,\n EnableContainedChipProps,\n DeletableContainedChipProps,\n ChipProps,\n ChipType,\n ChipThumbnail,\n} from \"./Chip.types\";\n\nconst Chip: ChipType = (props: ChipProps) => {\n const { kind, variant, onDelete, onClick, ...restProps } = props;\n\n const isOutlined = kind === \"outlined\" || variant === \"outlined\";\n\n if (isOutlined) return <OutlinedChip {...props} />;\n else if (onClick) return <EnableContainedChip {...props} />;\n else if (onDelete) return <DeletableContainedChip {...props} />;\n\n return <ReadOnlyContainedChip {...restProps} />;\n};\n\nconst OutlinedChip = (props: OutlinedChipProps) => {\n const { color = \"primary\", ...restProps } = props;\n\n return (\n <StyledOutlinedChip\n {...restProps}\n variant=\"outlined\"\n disabled\n color={color}\n />\n );\n};\n\n/**\n * Conditional styling for contained chip\n */\nconst getAvatar = (thumbnail: ChipThumbnail | undefined) => {\n if (!thumbnail || typeof thumbnail !== \"string\") return;\n if (thumbnail.length === 0) return <Avatar />;\n return <Avatar>{thumbnail.slice(0, 1).toLocaleUpperCase()}</Avatar>;\n};\nconst getIcon = (thumbnail: ChipThumbnail | undefined) => {\n if (thumbnail && typeof thumbnail !== \"string\") return thumbnail;\n return undefined;\n};\nconst getLabelMargin = (\n thumbnail: ChipThumbnail | undefined,\n deletable?: boolean\n) => {\n return {\n marginLeft: thumbnail ? \"0px\" : \"8px\",\n marginRight: deletable ? \"0px\" : \"8px\",\n };\n};\n\nconst ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {\n const { color = \"primary\", thumbnail, sx, variant, ...restProps } = props;\n\n return (\n <StyledContainedChipBase\n {...restProps}\n disabled\n avatar={getAvatar(thumbnail)}\n icon={getIcon(thumbnail)}\n color={color}\n sx={{\n \"& .MuiChip-label\": {\n ...getLabelMargin(thumbnail),\n },\n ...sx,\n }}\n />\n );\n};\n\nconst EnableContainedChip = (props: EnableContainedChipProps) => {\n const {\n color = \"primary\",\n thumbnail,\n onDelete,\n onClick,\n sx,\n variant,\n ...restProps\n } = props;\n\n return (\n <StyledContainedChipEnable\n {...restProps}\n onClick={onClick}\n avatar={getAvatar(thumbnail)}\n icon={getIcon(thumbnail)}\n color={color}\n sx={{\n \"& .MuiChip-label\": {\n ...getLabelMargin(thumbnail),\n },\n }}\n />\n );\n};\n\nconst DeleteIconWithHoverLayer = ({ onClick }: { onClick: () => void }) => {\n return (\n <>\n <Close16 />\n <Close16 className=\"delete-icon-hover-layer\" onClick={onClick} />\n </>\n );\n};\nconst DeletableContainedChip = (props: DeletableContainedChipProps) => {\n const {\n color = \"primary\",\n thumbnail,\n onDelete,\n sx,\n variant,\n ...restProps\n } = props;\n\n return (\n <StyledContainedChipDeletable\n {...restProps}\n color={color}\n onDelete={onDelete}\n deleteIcon={<DeleteIconWithHoverLayer onClick={onDelete} />}\n avatar={getAvatar(thumbnail)}\n icon={getIcon(thumbnail)}\n sx={{\n \"& .MuiChip-label\": {\n ...getLabelMargin(thumbnail, Boolean(onDelete)),\n },\n ...sx,\n }}\n />\n );\n};\n\nexport default Chip;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","CHIP_COLORS","COMMON_STYLES","height","width","minWidth","boxShadow","opacity","padding","marginInline","getColorToken","token","theme","color","palette","lunit_token","component","chip_primary_text","chip_secondary_text","chip_error_text","chip_warning_text","chip_success_text","chip_primary_bg","chip_secondary_bg","chip_error_bg","chip_warning_bg","chip_success_bg","StyledOutlinedChip","styled","shouldForwardProp","includes","toString","typography","caption","borderColor","StyledContainedChipBase","core","text_normal","backgroundColor","marginBlock","marginLeft","marginRight","fontSize","fontWeight","lineHeight","display","textAlign","alignItems","StyledContainedChipEnable","position","left","right","zIndex","content","top","bottom","hover","borderRadius","StyledContainedChipDeletable","cursor","OutlinedChip","props","restProps","variant","disabled","getAvatar","thumbnail","length","Avatar","slice","toLocaleUpperCase","getIcon","getLabelMargin","deletable","ReadOnlyContainedChip","sx","avatar","icon","EnableContainedChip","onDelete","onClick","DeleteIconWithHoverLayer","className","DeletableContainedChip","deleteIcon","Boolean","kind"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";var e={n:o=>{var
|
|
1
|
+
(()=>{"use strict";var e={n:o=>{var t=o&&o.__esModule?()=>o.default:()=>o;return e.d(t,{a:t}),t},d:(o,t)=>{for(var n in t)e.o(t,n)&&!e.o(o,n)&&Object.defineProperty(o,n,{enumerable:!0,get:t[n]})},o:(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{default:()=>T});const t=require("react/jsx-runtime"),n=require("react"),i=require("react-dom"),r=require("@lunit/design-system-icons"),l=require("@mui/material/styles"),a=(0,l.styled)("div")({display:"flex",flex:"0 0 auto",alignItems:"center",justifyContent:"flex-end",gap:12});function d(e){const{children:o,justifyContent:n,sx:i}=e;return(0,t.jsx)(a,{id:"dialog-action","data-testid":"dialog-action",className:"dialog-action",sx:{justifyContent:n,...i},children:o})}const s={small:{width:"320px",maxWidth:"320px"},medium:{width:"500px",maxWidth:"840px"},modal:{position:"relative"},nonModal:{position:"fixed",top:"30px",right:"30px"}},c={small:{display:"flex",alignItems:"center",height:"52px",maxHeight:"100%",padding:"20px 20px 4px 20px"},medium:{display:"flex",alignItems:"center",height:"64px",maxHeight:"100%",padding:"30px 32px 6px 32px"}},p={small:{paddingInline:"20px calc(20px - 10px)",paddingTop:"8px",paddingBottom:"28px"},smallAction:{paddingInline:"20px calc(20px - 10px)",paddingBlock:"8px"},medium:{paddingInline:"32px calc(32px - 14px)",paddingTop:"16px",paddingBottom:"32px"},mediumAction:{paddingInline:"32px calc(32px - 14px)",paddingBlock:"16px"}},x={small:{height:"64px",padding:"8px 20px 20px 20px"},medium:{height:"84px",padding:"16px 32px 32px 32px"}},m=(0,l.styled)("div")({position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(17, 17, 19, 0.7)",zIndex:1e3,display:"grid",placeItems:"center"}),u=(0,l.styled)("div")((({theme:e,size:o,nonModal:t,type:n})=>({zIndex:1001,maxHeight:"80vh",display:"flex",flexDirection:"column",boxSizing:"border-box",borderRadius:"10px",backgroundColor:e.palette.lunit_token.core.bg_03,color:e.palette.lunit_token.core.text_normal,...s["small"===o?"small":"medium"],...s[t?"nonModal":"modal"],"& #dialog-title":{...c["small"===o?"small":"medium"]},"& #dialog-content":{...p["small"===o&&"passive"!==n?"smallAction":"small"===o?"small":"medium"===o&&"passive"!==n?"mediumAction":"medium"],scrollbarGutter:"stable","::-webkit-scrollbar":{width:"small"===o?"10px":"14px"},"::webkit-scrollbar-track":{background:"transparent"},"::-webkit-scrollbar-thumb":{backgroundClip:"padding-box",border:"2px solid transparent",borderRadius:"10px",backgroundColor:e.palette.lunit_token.component.scrollbars_bg}},"& #dialog-action":{...x["small"===o?"small":"medium"]}}))),h=(0,l.styled)("header")({display:"flex",width:"100%",flex:"0 0 auto",alignItems:"center",justifyContent:"flex-start",gap:"8px"}),g=(0,l.styled)("div")({display:"flex",justifyContent:"center",width:"20px",height:"20px","& .MuiSvgIcon-root":{display:"flex",justifyContent:"center",width:"20px",height:"20px",fontSize:"20px"}}),b=(0,l.styled)("div")((({theme:e})=>({...e.typography.body2_14_regular,flex:"1 1 auto",overflowY:"scroll"}))),y=require("@mui/material"),_=({kind:e,size:o,selected:t=!1})=>"small"===o?"outlined"!==e||t?"4px 8px":"3px 7px":"medium"===o?"outlined"!==e||t?"8px 12px":"7px 11px":"outlined"!==e||t?"10px 12px":"9px 11px",f=({kind:e,size:o,selected:t=!1})=>"small"===o?"outlined"!==e||t?"4px":"3px":"medium"===o?"outlined"!==e||t?"8px":"7px":"outlined"!==e||t?"12px":"11px",k=e=>({position:"relative",zIndex:0,backgroundColor:e}),v="8px",I=({size:e,kind:o,hasIconOnly:t,typography:n,selected:i=!1})=>({..."small"===e&&{...n.button2,padding:`${t?f({kind:o,size:e,selected:i}):_({kind:o,size:e,selected:i})}`,minWidth:"28px",height:"28px"},..."medium"===e&&{...n.button2,padding:`${t?f({kind:o,size:e,selected:i}):_({kind:o,size:e,selected:i})}`,minWidth:"36px",height:"36px"},..."large"===e&&{...n.button1,padding:`${t?f({kind:o,size:e,selected:i}):_({kind:o,size:e,selected:i})}`,minWidth:"44px",height:"44px"}}),j=({kind:e,color:o,lunit_token:t})=>({..."contained"===e&&"primary"===o&&{color:t.component.btn_primary_text_2,backgroundColor:t.component.btn_primary_bg,"&:hover":k(t.component.btn_primary_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:t.component.btn_primary_text_2}},..."contained"===e&&"secondary"===o&&{color:t.component.btn_secondary_text,backgroundColor:t.component.btn_secondary_bg,"&:hover":k(t.component.btn_secondary_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:t.component.btn_secondary_text}},..."contained"===e&&"error"===o&&{color:t.component.btn_primary_text_2,backgroundColor:t.component.btn_error_bg,"&:hover":k(t.component.btn_error_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:t.component.btn_primary_text_2}},..."ghost"===e&&"primary"===o&&{color:t.component.btn_primary_text_1,border:"none","&:hover":k("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:t.component.btn_primary_text_1}},..."ghost"===e&&"secondary"===o&&{color:t.component.btn_secondary_text,border:"none","&:hover":k("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:t.component.btn_secondary_text}},..."ghost"===e&&"error"===o&&{color:t.component.btn_error_text,"&:hover":k("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:t.component.btn_error_text}},..."outlined"===e&&"primary"===o&&{color:t.component.btn_primary_text_1,border:`1px solid ${t.component.btn_primary_border}`,"&:hover":k("none"),"&:hover:before":{content:"''",position:"absolute",left:"-1px",top:"-1px",width:"calc(100% + 2px)",height:"calc(100% + 2px)",zIndex:-1,backgroundColor:t.core.hover,borderRadius:v},"&.Mui-disabled":{opacity:.38,color:t.component.btn_primary_text_1}},..."outlined"===e&&"secondary"===o&&{color:t.component.btn_secondary_text,border:`1px solid ${t.core.border_medium}`,"&:hover":k("none"),"&:hover:before":{content:"''",position:"absolute",left:"-1px",top:"-1px",width:"calc(100% + 2px)",height:"calc(100% + 2px)",zIndex:-1,backgroundColor:t.core.hover,borderRadius:v},"&.Mui-disabled":{opacity:.38,color:t.component.btn_secondary_text}}}),z=({lunit_token:e})=>({fontWeight:"500",borderRadius:v,textTransform:"initial","&.Mui-focusVisible":{"&::after":{position:"absolute",width:"calc(100% + 6px)",height:"calc(100% + 6px)",content:'""',borderRadius:"11px",border:`1px solid ${e.core.focused}`,boxSizing:"border-box"}},"&:hover:before":{content:"''",position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:-1,backgroundColor:e.core.hover,borderRadius:v}}),w=({size:e,hasIconOnly:o})=>({"& .MuiButton-startIcon":{margin:0,marginRight:o?"0px":"large"===e?"8px":"4px","*:nth-of-type(1)":{fontSize:"20px"}}}),C=(0,l.styled)(y.Button,{shouldForwardProp:e=>!["kind","hasIconOnly","variant"].includes(e)})((({theme:{typography:e,palette:{lunit_token:o}},kind:t,size:n,color:i,hasIconOnly:r})=>({...z({lunit_token:o}),...w({size:n,hasIconOnly:r}),...I({size:n,kind:t,hasIconOnly:r,typography:e}),...j({kind:t,color:i,lunit_token:o})}))),O=(0,n.forwardRef)(((e,o)=>{const{kind:n,variant:i,icon:r,children:l,startIcon:a}=e,d=Boolean((a||r)&&!l);return"outlined"===n||"outlined"===i?(0,t.jsx)(R,{...e,ref:o,hasIconOnly:d}):"ghost"===n||"text"===i||"ghost"===i?(0,t.jsx)(M,{...e,ref:o,hasIconOnly:d}):(0,t.jsx)(N,{...e,kind:"contained",variant:"contained",ref:o,hasIconOnly:d})})),M=(0,n.forwardRef)(((e,o)=>{const{size:n="small",icon:i,className:r,children:l,startIcon:a,hasIconOnly:d,variant:s,...c}=e;return(0,t.jsx)(C,{...c,ref:o,className:`ghost ${r||""}`,kind:"ghost",color:e.color??"primary",size:n,startIcon:a||i,hasIconOnly:d,children:!d&&(0,t.jsx)(t.Fragment,{children:l})})})),R=(0,n.forwardRef)(((e,o)=>{const{size:n="small",icon:i,className:r,children:l,startIcon:a,hasIconOnly:d,variant:s,...c}=e;return(0,t.jsx)(C,{...c,ref:o,className:`outlined ${r||""}`,kind:"outlined",color:e.color??"primary",size:n,startIcon:a||i,hasIconOnly:d,children:!d&&(0,t.jsx)(t.Fragment,{children:l})})})),N=(0,n.forwardRef)(((e,o)=>{const{size:n="small",icon:i,className:r,children:l,startIcon:a,hasIconOnly:d,variant:s,...c}=e;return(0,t.jsx)(C,{...c,ref:o,className:`${e.kind??"contained"} ${r||""}`,kind:e.kind??"contained",color:e.color??"primary",size:n,startIcon:a||i,hasIconOnly:d,children:!d&&(0,t.jsx)(t.Fragment,{children:l})})})),$=O,S=require("@mui/material/Typography");var P=e.n(S);const B=e=>(0,t.jsx)(P(),{...e});function q({dialogProps:e}){const{nonModal:o=!1,onClose:n,title:i,titleIcon:l,titleVariant:a="headline5",children:s,actions:c,type:p,size:x="small",sx:m,style:y,className:_}=e;return(0,t.jsxs)(u,{role:"dialog","aria-labelledby":"dialog-title",size:x,nonModal:o,type:p,sx:{...m},style:y,className:`dialog elevation2 ${_??""}`,children:[(0,t.jsxs)(h,{id:"dialog-title",className:"dialog-title-wrapper",children:[l&&(0,t.jsx)(g,{className:"dialog-title-icon",children:l}),(0,t.jsx)(B,{component:"h2",id:"dialog-title-text",variant:a,children:i}),"passive"===p&&(0,t.jsx)($,{id:"dialog-title-close-button","data-testid":"dialog-title-close-button",kind:"ghost",color:"secondary",icon:(0,t.jsx)(r.Close,{}),onClick:n,sx:{marginRight:0,marginLeft:"auto"}})]}),(0,t.jsx)(b,{id:"dialog-content",children:s}),"action"===p&&null!==c?(0,t.jsx)(d,{children:c}):null]})}const T=function(e){const{isOpen:o,type:r,nonModal:l=!1,onClose:a}=e,d="action"===r&&!l,s="passive"===r&&!l;return(0,n.useEffect)((()=>{if(o&&s)return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&a()}}),[o,s,a]),o?(0,i.createPortal)(l?(0,t.jsx)(q,{dialogProps:{...e}}):(0,t.jsx)(m,{onClick:function(o){(s||d&&e.enableBackdropClose)&&o.target===o.currentTarget&&a()},"data-testid":"dialog-backdrop",children:(0,t.jsx)(q,{dialogProps:{...e}})}),document.body):null};module.exports=o})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/Dialog/index.js","mappings":"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","sources":["webpack://@lunit/design-system/webpack/bootstrap","webpack://@lunit/design-system/webpack/runtime/compat get default export","webpack://@lunit/design-system/webpack/runtime/define property getters","webpack://@lunit/design-system/webpack/runtime/hasOwnProperty shorthand","webpack://@lunit/design-system/webpack/runtime/make namespace object","webpack://@lunit/design-system/external commonjs \"react/jsx-runtime\"","webpack://@lunit/design-system/external commonjs \"react\"","webpack://@lunit/design-system/external commonjs \"react-dom\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons\"","webpack://@lunit/design-system/external commonjs \"@mui/material/styles\"","webpack://@lunit/design-system/./src/components/Dialog/components/DialogAction.tsx","webpack://@lunit/design-system/./src/components/Dialog/Dialog.styled.ts","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/./src/components/Button/utils/getButtonPaddingBySizeAndKind.ts","webpack://@lunit/design-system/./src/components/Button/utils/getIconButtonPaddingBySizeAndKind.ts","webpack://@lunit/design-system/./src/components/Button/utils/getHoverStyle.ts","webpack://@lunit/design-system/./src/components/Button/Button.styled.ts","webpack://@lunit/design-system/./src/components/Button/Button.tsx","webpack://@lunit/design-system/external commonjs \"@mui/material/Typography\"","webpack://@lunit/design-system/./src/components/Typography/Typography.tsx","webpack://@lunit/design-system/./src/components/Dialog/Dialog.tsx"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react/jsx-runtime\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react-dom\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material/styles\");","import React from \"react\";\nimport { styled } from \"@mui/material/styles\";\n\ninterface DialogActionProps {\n children: React.ReactNode;\n justifyContent?: React.CSSProperties[\"justifyContent\"];\n sx?: React.CSSProperties;\n}\n\nconst StyledDialogActions = styled(\"div\")({\n display: \"flex\",\n flex: \"0 0 auto\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n gap: 12,\n});\n\nexport function DialogAction(props: DialogActionProps) {\n const { children, justifyContent, sx } = props;\n\n return (\n <StyledDialogActions\n id=\"dialog-action\"\n data-testid=\"dialog-action\"\n className=\"dialog-action\"\n sx={{\n justifyContent,\n ...sx,\n }}\n >\n {children}\n </StyledDialogActions>\n );\n}\n\nexport default DialogAction;\n","import { styled } from \"@mui/material/styles\";\n\nimport type { DialogBase } from \"./Dialog\";\nimport type { CSSObject } from \"@mui/material/styles\";\n\nexport interface DialogElementStyle {\n [key: string]: CSSObject;\n}\n\nexport type DialogStyle = Pick<DialogBase, \"size\" | \"type\" | \"nonModal\">;\n\nconst DIALOG_WRAPPER_STYLE: DialogElementStyle = {\n small: {\n width: \"320px\",\n maxWidth: \"320px\",\n },\n medium: {\n width: \"500px\",\n maxWidth: \"840px\",\n },\n modal: {\n position: \"relative\",\n },\n nonModal: {\n position: \"fixed\",\n top: \"30px\",\n right: \"30px\",\n },\n};\n\nconst DIALOG_TITLE_STYLE: DialogElementStyle = {\n small: {\n display: \"flex\",\n alignItems: \"center\",\n height: \"52px\",\n maxHeight: \"100%\",\n padding: \"20px 20px 4px 20px\", // Title's X button pluses 2px to paddingTop and Bottom\n },\n medium: {\n display: \"flex\",\n alignItems: \"center\",\n height: \"64px\",\n maxHeight: \"100%\",\n padding: \"30px 32px 6px 32px\", // Title's X button pluses 2px to paddingTop and Bottom\n },\n};\n\nconst DIALOG_CONTENT_STYLE: DialogElementStyle = {\n small: {\n paddingInline: \"20px calc(20px - 10px)\",\n paddingTop: \"8px\",\n paddingBottom: \"28px\",\n },\n smallAction: {\n paddingInline: \"20px calc(20px - 10px)\",\n paddingBlock: \"8px\",\n },\n medium: {\n paddingInline: \"32px calc(32px - 14px)\",\n paddingTop: \"16px\",\n paddingBottom: \"32px\",\n },\n mediumAction: {\n paddingInline: \"32px calc(32px - 14px)\",\n paddingBlock: \"16px\",\n },\n};\n\nconst DIALOG_ACTION_STYLE: DialogElementStyle = {\n small: {\n height: \"64px\",\n padding: \"8px 20px 20px 20px\",\n },\n medium: {\n height: \"84px\",\n padding: \"16px 32px 32px 32px\",\n },\n};\n\nexport const StyledBackdrop = styled(\"div\")({\n position: \"fixed\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"rgba(17, 17, 19, 0.7)\",\n zIndex: 1000,\n display: \"grid\",\n placeItems: \"center\",\n});\n\nexport const StyledDialog = styled(\"div\")<DialogStyle>(\n ({ theme, size, nonModal, type }) => ({\n zIndex: 1001,\n maxHeight: \"80vh\",\n display: \"flex\",\n flexDirection: \"column\",\n boxSizing: \"border-box\",\n borderRadius: \"10px\",\n backgroundColor: theme.palette.lunit_token.core.bg_03,\n color: theme.palette.lunit_token.core.text_normal,\n\n ...DIALOG_WRAPPER_STYLE[size === \"small\" ? \"small\" : \"medium\"],\n ...DIALOG_WRAPPER_STYLE[nonModal ? \"nonModal\" : \"modal\"],\n\n \"& #dialog-title\": {\n ...DIALOG_TITLE_STYLE[size === \"small\" ? \"small\" : \"medium\"],\n },\n\n \"& #dialog-content\": {\n ...DIALOG_CONTENT_STYLE[\n size === \"small\" && type !== \"passive\"\n ? \"smallAction\"\n : size === \"small\"\n ? \"small\"\n : size === \"medium\" && type !== \"passive\"\n ? \"mediumAction\"\n : \"medium\"\n ],\n\n scrollbarGutter: \"stable\",\n \"::-webkit-scrollbar\": {\n width: size === \"small\" ? \"10px\" : \"14px\",\n },\n \"::webkit-scrollbar-track\": {\n background: \"transparent\",\n },\n \"::-webkit-scrollbar-thumb\": {\n backgroundClip: \"padding-box\",\n border: `2px solid transparent`,\n /**\n * Figma's border-radius is 6px, but actual border radius is 10px since padding 2px is added.\n */\n borderRadius: \"10px\",\n backgroundColor: theme.palette.lunit_token.component.scrollbars_bg,\n },\n },\n\n \"& #dialog-action\": {\n ...DIALOG_ACTION_STYLE[size === \"small\" ? \"small\" : \"medium\"],\n },\n })\n);\n\nexport const StyledDialogTitle = styled(\"header\")({\n display: \"flex\",\n width: \"100%\",\n flex: \"0 0 auto\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n gap: \"8px\",\n});\n\nexport const StyledDialogTitleIconWrapper = styled(\"div\")({\n display: \"flex\",\n justifyContent: \"center\",\n width: \"20px\",\n height: \"20px\",\n \"& .MuiSvgIcon-root\": {\n display: \"flex\",\n justifyContent: \"center\",\n width: \"20px\",\n height: \"20px\",\n fontSize: \"20px\",\n },\n});\n\nexport const StyledDialogContent = styled(\"div\")(({ theme }) => ({\n ...theme.typography.body2_14_regular,\n flex: \"1 1 auto\",\n overflowY: \"scroll\",\n}));\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","import { OUTLINED_BORDER_WIDTH } from \"../const\";\n\nimport type { ButtonProps } from \"../Button.types\";\nimport { ToggleButtonProps } from \"@/components/ToggleButton/ToggleButton.types\";\n\ntype GetButtonPaddingBySizeAndKindParams = Pick<ButtonProps, \"kind\" | \"size\"> &\n Pick<ToggleButtonProps, \"selected\">;\n\n/**\n * When kind is outlined,\n * the padding value must include the border width of outlined.\n * This function takes care of this.\n */\nexport const getButtonPaddingBySizeAndKind = ({\n kind,\n size,\n selected = false,\n}: GetButtonPaddingBySizeAndKindParams) => {\n if (size === \"small\") {\n return kind === \"outlined\" && !selected\n ? `${4 - OUTLINED_BORDER_WIDTH}px ${8 - OUTLINED_BORDER_WIDTH}px`\n : \"4px 8px\";\n }\n\n if (size === \"medium\") {\n return kind === \"outlined\" && !selected\n ? `${8 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`\n : \"8px 12px\";\n }\n\n // size === \"large\"\n return kind === \"outlined\" && !selected\n ? `${10 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`\n : \"10px 12px\";\n};\n","import { OUTLINED_BORDER_WIDTH } from \"../const\";\n\nimport type { ButtonProps } from \"../Button.types\";\nimport { ToggleButtonProps } from \"@/components/ToggleButton/ToggleButton.types\";\n\ntype GetIconButtonPaddingBySizeAndKindProps = Pick<\n ButtonProps,\n \"kind\" | \"size\"\n> &\n Pick<ToggleButtonProps, \"selected\">;\n\n/**\n * When kind is outlined,\n * the padding value must include the border width of outlined.\n * This function takes care of this.\n */\nexport const getIconButtonPaddingBySizeAndKind = ({\n kind,\n size,\n selected = false,\n}: GetIconButtonPaddingBySizeAndKindProps) => {\n if (size === \"small\") {\n return kind === \"outlined\" && !selected\n ? `${4 - OUTLINED_BORDER_WIDTH}px`\n : \"4px\";\n }\n\n if (size === \"medium\") {\n return kind === \"outlined\" && !selected\n ? `${8 - OUTLINED_BORDER_WIDTH}px`\n : \"8px\";\n }\n\n // size === \"large\"\n return kind === \"outlined\" && !selected\n ? `${12 - OUTLINED_BORDER_WIDTH}px`\n : \"12px\";\n};\n","const getHoverStyle = (backgroundColor: React.CSSProperties[\"color\"]) => ({\n position: \"relative\",\n zIndex: 0,\n backgroundColor,\n});\n\nexport default getHoverStyle;\n","import { styled } from \"@mui/material/styles\";\nimport { Button as MuiButton } from \"@mui/material\";\n\nimport { ColorToken } from \"@/foundation/colors/types\";\nimport { PADDING_OF_FOCUS, OUTLINED_BORDER_WIDTH } from \"./const\";\nimport { getButtonPaddingBySizeAndKind } from \"./utils/getButtonPaddingBySizeAndKind\";\nimport { getIconButtonPaddingBySizeAndKind } from \"./utils/getIconButtonPaddingBySizeAndKind\";\nimport getHoverStyle from \"./utils/getHoverStyle\";\n\nimport type { ButtonProps } from \"./Button.types\";\nimport type { ToggleButtonProps } from \"../ToggleButton/ToggleButton.types\";\nimport type { Typography } from \"@mui/material/styles/createTypography\";\n\ntype KindStyleParams = Pick<ButtonProps, \"kind\" | \"color\"> & {\n lunit_token: ColorToken;\n};\n\ntype CustomButtonProps = ButtonProps & { hasIconOnly: boolean };\n\ntype sizeStyleParams = Pick<\n CustomButtonProps,\n \"size\" | \"hasIconOnly\" | \"kind\"\n> &\n Pick<ToggleButtonProps, \"selected\"> & { typography: Typography };\n\nconst borderRadius = \"8px\";\n\nexport const sizeStyle = ({\n size,\n kind,\n hasIconOnly,\n typography,\n selected = false,\n}: sizeStyleParams) => ({\n ...(size === \"small\" && {\n ...typography.button2,\n padding: `${\n hasIconOnly\n ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })\n : getButtonPaddingBySizeAndKind({ kind, size, selected })\n }`,\n minWidth: \"28px\",\n height: \"28px\",\n }),\n ...(size === \"medium\" && {\n ...typography.button2,\n padding: `${\n hasIconOnly\n ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })\n : getButtonPaddingBySizeAndKind({ kind, size, selected })\n }`,\n minWidth: \"36px\",\n height: \"36px\",\n }),\n ...(size === \"large\" && {\n ...typography.button1,\n padding: `${\n hasIconOnly\n ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })\n : getButtonPaddingBySizeAndKind({ kind, size, selected })\n }`,\n minWidth: \"44px\",\n height: \"44px\",\n }),\n});\n\nexport const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({\n // kind: container\n ...(kind === \"contained\" &&\n color === \"primary\" && {\n color: lunit_token.component.btn_primary_text_2,\n backgroundColor: lunit_token.component.btn_primary_bg,\n \"&:hover\": getHoverStyle(lunit_token.component.btn_primary_bg),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_primary_text_2,\n },\n }),\n ...(kind === \"contained\" &&\n color === \"secondary\" && {\n color: lunit_token.component.btn_secondary_text,\n backgroundColor: lunit_token.component.btn_secondary_bg,\n \"&:hover\": getHoverStyle(lunit_token.component.btn_secondary_bg),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_secondary_text,\n },\n }),\n ...(kind === \"contained\" &&\n color === \"error\" && {\n color: lunit_token.component.btn_primary_text_2,\n backgroundColor: lunit_token.component.btn_error_bg,\n \"&:hover\": getHoverStyle(lunit_token.component.btn_error_bg),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_primary_text_2,\n },\n }),\n // kind: ghost\n ...(kind === \"ghost\" &&\n color === \"primary\" && {\n color: lunit_token.component.btn_primary_text_1,\n border: \"none\",\n \"&:hover\": getHoverStyle(\"none\"),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_primary_text_1,\n },\n }),\n ...(kind === \"ghost\" &&\n color === \"secondary\" && {\n color: lunit_token.component.btn_secondary_text,\n border: \"none\",\n \"&:hover\": getHoverStyle(\"none\"),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_secondary_text,\n },\n }),\n ...(kind === \"ghost\" &&\n color === \"error\" && {\n color: lunit_token.component.btn_error_text,\n \"&:hover\": getHoverStyle(\"none\"),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_error_text,\n },\n }),\n // kind: outlined\n ...(kind === \"outlined\" &&\n color === \"primary\" && {\n color: lunit_token.component.btn_primary_text_1,\n border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_primary_border}`,\n \"&:hover\": getHoverStyle(\"none\"),\n \"&:hover:before\": {\n content: \"''\",\n position: \"absolute\",\n left: \"-1px\",\n top: \"-1px\",\n width: \"calc(100% + 2px)\",\n height: \"calc(100% + 2px)\",\n zIndex: -1,\n backgroundColor: lunit_token.core.hover,\n borderRadius,\n },\n \"&.Mui-disabled\": {\n opacity: 0.38,\n color: lunit_token.component.btn_primary_text_1,\n },\n }),\n ...(kind === \"outlined\" &&\n color === \"secondary\" && {\n color: lunit_token.component.btn_secondary_text,\n border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.core.border_medium}`,\n \"&:hover\": getHoverStyle(\"none\"),\n \"&:hover:before\": {\n content: \"''\",\n position: \"absolute\",\n left: \"-1px\",\n top: \"-1px\",\n width: \"calc(100% + 2px)\",\n height: \"calc(100% + 2px)\",\n zIndex: -1,\n backgroundColor: lunit_token.core.hover,\n borderRadius,\n },\n \"&.Mui-disabled\": {\n opacity: 0.38,\n color: lunit_token.component.btn_secondary_text,\n },\n }),\n});\n\nexport const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) =>\n ({\n fontWeight: \"500\",\n borderRadius,\n textTransform: \"initial\",\n \"&.Mui-focusVisible\": {\n \"&::after\": {\n position: \"absolute\",\n width: `calc(100% + ${PADDING_OF_FOCUS}px)`,\n height: `calc(100% + ${PADDING_OF_FOCUS}px)`,\n content: '\"\"',\n borderRadius: \"11px\",\n border: `1px solid ${lunit_token.core.focused}`,\n boxSizing: \"border-box\",\n },\n },\n \"&:hover:before\": {\n content: \"''\",\n position: \"absolute\",\n left: 0,\n top: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: -1,\n backgroundColor: lunit_token.core.hover,\n borderRadius,\n },\n } as const);\n\nexport const iconStyle = ({\n size,\n hasIconOnly,\n}: Pick<CustomButtonProps, \"size\" | \"hasIconOnly\">) => ({\n \"& .MuiButton-startIcon\": {\n margin: 0,\n marginRight: hasIconOnly ? \"0px\" : size === \"large\" ? \"8px\" : \"4px\",\n\n \"*:nth-of-type(1)\": {\n fontSize: \"20px\",\n },\n },\n});\n\nexport const CustomButton = styled(MuiButton, {\n shouldForwardProp: (prop: string) => {\n return ![\"kind\", \"hasIconOnly\", \"variant\"].includes(prop);\n },\n})<CustomButtonProps>(\n ({\n theme: {\n typography,\n palette: { lunit_token },\n },\n kind,\n size,\n color,\n hasIconOnly,\n }) => ({\n ...commonStyle({ lunit_token }),\n ...iconStyle({ size, hasIconOnly }),\n ...sizeStyle({ size, kind, hasIconOnly, typography }),\n ...kindStyle({ kind, color, lunit_token }),\n })\n);\n","import React, { forwardRef } from \"react\";\n\nimport { CustomButton } from \"./Button.styled\";\n\nimport type {\n ButtonType,\n ButtonProps,\n GhostButtonProps,\n OutlinedButtonProps,\n ContainedButtonProps,\n} from \"./Button.types\";\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const { kind, variant, icon, children, startIcon } = props;\n const hasIconOnly = Boolean((startIcon || icon) && !children);\n\n if (kind === \"outlined\" || variant === \"outlined\") {\n return <OutlinedButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;\n }\n\n if (kind === \"ghost\" || variant === \"text\" || variant === \"ghost\") {\n return <GhostButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;\n }\n\n return (\n <ContainedButton\n {...props}\n kind=\"contained\"\n variant=\"contained\"\n ref={ref}\n hasIconOnly={hasIconOnly}\n />\n );\n\n /**\n * There is an issue between React 18, Mui's OverridableComponent type and the\n * type coercion to temporarily fix it.\n * https://github.com/lunit-io/design-system/pull/143#issuecomment-1831127232\n */\n}) as ButtonType;\n\nconst GhostButton = forwardRef<\n HTMLButtonElement,\n GhostButtonProps & { hasIconOnly: boolean }\n>((props, ref) => {\n const {\n size = \"small\",\n icon,\n className,\n children,\n startIcon,\n hasIconOnly,\n variant,\n ...restProps\n } = props;\n\n return (\n <CustomButton\n {...restProps}\n ref={ref}\n className={`ghost ${className ? className : \"\"}`}\n kind=\"ghost\"\n color={props.color ?? \"primary\"}\n size={size}\n startIcon={startIcon || icon}\n hasIconOnly={hasIconOnly}\n >\n {!hasIconOnly && <>{children}</>}\n </CustomButton>\n );\n});\n\nconst OutlinedButton = forwardRef<\n HTMLButtonElement,\n OutlinedButtonProps & { hasIconOnly: boolean }\n>((props, ref) => {\n const {\n size = \"small\",\n icon,\n className,\n children,\n startIcon,\n hasIconOnly,\n variant,\n ...restProps\n } = props;\n\n return (\n <CustomButton\n {...restProps}\n ref={ref}\n className={`outlined ${className ? className : \"\"}`}\n kind=\"outlined\"\n color={props.color ?? \"primary\"}\n size={size}\n startIcon={startIcon || icon}\n hasIconOnly={hasIconOnly}\n >\n {!hasIconOnly && <>{children}</>}\n </CustomButton>\n );\n});\n\nconst ContainedButton = forwardRef<\n HTMLButtonElement,\n ContainedButtonProps & { hasIconOnly: boolean }\n>((props, ref) => {\n const {\n size = \"small\",\n icon,\n className,\n children,\n startIcon,\n hasIconOnly,\n variant,\n ...restProps\n } = props;\n\n return (\n <CustomButton\n {...restProps}\n ref={ref}\n className={`${props.kind ?? \"contained\"} ${className ? className : \"\"}`}\n kind={props.kind ?? \"contained\"}\n color={props.color ?? \"primary\"}\n size={size}\n startIcon={startIcon || icon}\n hasIconOnly={hasIconOnly}\n >\n {!hasIconOnly && <>{children}</>}\n </CustomButton>\n );\n});\n\nexport default Button;\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material/Typography\");","import React from \"react\";\nimport MuiTypography from \"@mui/material/Typography\";\n\nimport type { TypographyProps } from \"@mui/material/Typography\";\nimport type { TypographyPropsVariantOverridesType } from \"../../foundation/Typography\";\n\ndeclare module \"@mui/material/Typography\" {\n interface TypographyPropsVariantOverrides\n extends TypographyPropsVariantOverridesType {}\n}\n\nconst Typography = <C extends React.ElementType>(\n props: TypographyProps<C, { component?: C }>\n) => {\n return <MuiTypography {...props} />;\n};\n\nexport default Typography;\n","import React, { useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Close } from \"@lunit/design-system-icons\";\n\nimport { DialogAction } from \"./components/DialogAction\";\nimport {\n StyledBackdrop,\n StyledDialog,\n StyledDialogContent,\n StyledDialogTitle,\n StyledDialogTitleIconWrapper,\n} from \"./Dialog.styled\";\nimport Button from \"../Button\";\nimport Typography from \"../Typography\";\n\nimport type { SxProps } from \"@mui/material/styles\";\nimport type { TypographyProps } from \"@mui/material\";\n\nexport interface DialogBase {\n isOpen: boolean;\n onClose(): void;\n type?: \"passive\" | \"action\"; // default passive\n nonModal?: boolean; // default false\n title: string;\n titleIcon?: React.ReactNode;\n titleVariant?: TypographyProps[\"variant\"];\n children: React.ReactNode;\n actions?: React.ReactNode;\n enableBackButtonClose?: boolean; // only for passive dialog\n enableBackdropClose?: boolean;\n size?: \"small\" | \"medium\"; // default \"small\"\n sx?: SxProps;\n style?: React.CSSProperties;\n className?: string;\n}\n\nexport interface PassiveDialogType extends DialogBase {\n type: \"passive\";\n actions?: undefined;\n enableBackButtonClose?: true;\n enableBackdropClose?: true;\n}\nexport interface ActionDialogType extends DialogBase {\n type: \"action\";\n actions: React.ReactNode;\n enableBackButtonClose?: false;\n enableBackdropClose?: boolean;\n}\n\nexport interface PassiveModalProps extends PassiveDialogType {\n nonModal?: false;\n}\nexport interface ActionModalProps extends ActionDialogType {\n nonModal?: false;\n}\nexport type ModalProps = PassiveModalProps | ActionModalProps;\n\nexport interface PassiveNonModalProps extends PassiveDialogType {\n nonModal?: true;\n}\nexport interface ActionNonModalProps extends ActionDialogType {\n nonModal?: true;\n enableBackdropClose?: false;\n}\nexport type NonModalProps = PassiveNonModalProps | ActionNonModalProps;\n\nexport type DialogProps = ModalProps | NonModalProps;\n\nfunction Dialog(props: DialogProps) {\n const { isOpen, type, nonModal = false, onClose } = props;\n\n const isActionModal = type === \"action\" && !nonModal;\n const isPassiveModal = type === \"passive\" && !nonModal;\n\n function handleBackdropClose(e: React.MouseEvent<HTMLDivElement>) {\n const isClosable =\n isPassiveModal || (isActionModal && props.enableBackdropClose);\n\n if (!isClosable) return;\n if (e.target !== e.currentTarget) return;\n\n onClose();\n }\n\n useEffect(() => {\n const isClosable = isOpen && isPassiveModal;\n if (!isClosable) return;\n\n function handleEscClose(event: KeyboardEvent) {\n if (event.key === \"Escape\") onClose();\n }\n function handleBackButtonClose(event: KeyboardEvent) {\n if (event.key === \"Backspace\") onClose();\n }\n\n document.addEventListener(\"keydown\", handleEscClose);\n document.addEventListener(\"keydown\", handleBackButtonClose);\n\n return () => {\n document.removeEventListener(\"keydown\", handleEscClose);\n document.removeEventListener(\"keydown\", handleBackButtonClose);\n };\n }, [isOpen, isPassiveModal, onClose]);\n\n if (!isOpen) return null;\n return createPortal(\n nonModal ? (\n <DialogBase dialogProps={{ ...props }} />\n ) : (\n <StyledBackdrop\n onClick={handleBackdropClose}\n data-testid=\"dialog-backdrop\"\n >\n <DialogBase dialogProps={{ ...props }} />\n </StyledBackdrop>\n ),\n\n document.body\n );\n}\n\nfunction DialogBase({ dialogProps }: { dialogProps: DialogBase }) {\n const {\n nonModal = false,\n onClose,\n title,\n titleIcon,\n titleVariant = \"headline5\",\n children,\n actions,\n type,\n size = \"small\",\n sx,\n style,\n className,\n } = dialogProps;\n\n return (\n <StyledDialog\n role=\"dialog\"\n aria-labelledby=\"dialog-title\"\n size={size}\n nonModal={nonModal}\n type={type}\n sx={{\n ...sx,\n }}\n style={style}\n className={`dialog elevation2 ${className ?? \"\"}`}\n >\n <StyledDialogTitle id=\"dialog-title\" className=\"dialog-title-wrapper\">\n {titleIcon && (\n <StyledDialogTitleIconWrapper className=\"dialog-title-icon\">\n {titleIcon}\n </StyledDialogTitleIconWrapper>\n )}\n <Typography\n component=\"h2\"\n id=\"dialog-title-text\"\n variant={titleVariant}\n >\n {title}\n </Typography>\n {type === \"passive\" && (\n <Button\n id=\"dialog-title-close-button\"\n data-testid=\"dialog-title-close-button\"\n kind=\"ghost\"\n color=\"secondary\"\n icon={<Close />}\n onClick={onClose}\n sx={{\n marginRight: 0,\n marginLeft: \"auto\",\n }}\n />\n )}\n </StyledDialogTitle>\n <StyledDialogContent id=\"dialog-content\">{children}</StyledDialogContent>\n {type === \"action\" && actions !== null ? (\n // `actions !== null` is used to not render DialogAction when actions is undefined\n // There was a case when actions is undefined, but DialogAction is rendered with null children\n <DialogAction>{actions}</DialogAction>\n ) : null}\n </StyledDialog>\n );\n}\n\nexport default Dialog;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","StyledDialogActions","styled","display","flex","alignItems","justifyContent","gap","DialogAction","props","children","sx","id","className","DIALOG_WRAPPER_STYLE","small","width","maxWidth","medium","modal","position","nonModal","top","right","DIALOG_TITLE_STYLE","height","maxHeight","padding","DIALOG_CONTENT_STYLE","paddingInline","paddingTop","paddingBottom","smallAction","paddingBlock","mediumAction","DIALOG_ACTION_STYLE","StyledBackdrop","left","backgroundColor","zIndex","placeItems","StyledDialog","theme","size","type","flexDirection","boxSizing","borderRadius","palette","lunit_token","core","bg_03","color","text_normal","scrollbarGutter","background","backgroundClip","border","component","scrollbars_bg","StyledDialogTitle","StyledDialogTitleIconWrapper","fontSize","StyledDialogContent","typography","body2_14_regular","overflowY","getButtonPaddingBySizeAndKind","kind","selected","getIconButtonPaddingBySizeAndKind","sizeStyle","hasIconOnly","button2","minWidth","button1","kindStyle","btn_primary_text_2","btn_primary_bg","opacity","btn_secondary_text","btn_secondary_bg","btn_error_bg","btn_primary_text_1","btn_error_text","btn_primary_border","content","hover","border_medium","commonStyle","fontWeight","textTransform","focused","iconStyle","margin","marginRight","CustomButton","shouldForwardProp","includes","Button","forwardRef","ref","variant","icon","startIcon","Boolean","OutlinedButton","GhostButton","ContainedButton","restProps","DialogBase","dialogProps","onClose","title","titleIcon","titleVariant","actions","style","role","Close","onClick","marginLeft","isOpen","isActionModal","isPassiveModal","useEffect","document","addEventListener","handleEscClose","handleBackButtonClose","removeEventListener","event","createPortal","e","enableBackdropClose","target","currentTarget","body"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/Dialog/index.js","mappings":"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","sources":["webpack://@lunit/design-system/webpack/bootstrap","webpack://@lunit/design-system/webpack/runtime/compat get default export","webpack://@lunit/design-system/webpack/runtime/define property getters","webpack://@lunit/design-system/webpack/runtime/hasOwnProperty shorthand","webpack://@lunit/design-system/webpack/runtime/make namespace object","webpack://@lunit/design-system/external commonjs \"react/jsx-runtime\"","webpack://@lunit/design-system/external commonjs \"react\"","webpack://@lunit/design-system/external commonjs \"react-dom\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons\"","webpack://@lunit/design-system/external commonjs \"@mui/material/styles\"","webpack://@lunit/design-system/./src/components/Dialog/components/DialogAction.tsx","webpack://@lunit/design-system/./src/components/Dialog/Dialog.styled.ts","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/./src/components/Button/utils/getButtonPaddingBySizeAndKind.ts","webpack://@lunit/design-system/./src/components/Button/utils/getIconButtonPaddingBySizeAndKind.ts","webpack://@lunit/design-system/./src/components/Button/utils/getHoverStyle.ts","webpack://@lunit/design-system/./src/components/Button/Button.styled.ts","webpack://@lunit/design-system/./src/components/Button/Button.tsx","webpack://@lunit/design-system/external commonjs \"@mui/material/Typography\"","webpack://@lunit/design-system/./src/components/Typography/Typography.tsx","webpack://@lunit/design-system/./src/components/Dialog/Dialog.tsx"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react/jsx-runtime\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react-dom\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material/styles\");","import React from \"react\";\nimport { styled } from \"@mui/material/styles\";\n\ninterface DialogActionProps {\n children: React.ReactNode;\n justifyContent?: React.CSSProperties[\"justifyContent\"];\n sx?: React.CSSProperties;\n}\n\nconst StyledDialogActions = styled(\"div\")({\n display: \"flex\",\n flex: \"0 0 auto\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n gap: 12,\n});\n\nexport function DialogAction(props: DialogActionProps) {\n const { children, justifyContent, sx } = props;\n\n return (\n <StyledDialogActions\n id=\"dialog-action\"\n data-testid=\"dialog-action\"\n className=\"dialog-action\"\n sx={{\n justifyContent,\n ...sx,\n }}\n >\n {children}\n </StyledDialogActions>\n );\n}\n\nexport default DialogAction;\n","import { styled } from \"@mui/material/styles\";\n\nimport type { DialogBase } from \"./Dialog\";\nimport type { CSSObject } from \"@mui/material/styles\";\n\nexport interface DialogElementStyle {\n [key: string]: CSSObject;\n}\n\nexport type DialogStyle = Pick<DialogBase, \"size\" | \"type\" | \"nonModal\">;\n\nconst DIALOG_WRAPPER_STYLE: DialogElementStyle = {\n small: {\n width: \"320px\",\n maxWidth: \"320px\",\n },\n medium: {\n width: \"500px\",\n maxWidth: \"840px\",\n },\n modal: {\n position: \"relative\",\n },\n nonModal: {\n position: \"fixed\",\n top: \"30px\",\n right: \"30px\",\n },\n};\n\nconst DIALOG_TITLE_STYLE: DialogElementStyle = {\n small: {\n display: \"flex\",\n alignItems: \"center\",\n height: \"52px\",\n maxHeight: \"100%\",\n padding: \"20px 20px 4px 20px\", // Title's X button pluses 2px to paddingTop and Bottom\n },\n medium: {\n display: \"flex\",\n alignItems: \"center\",\n height: \"64px\",\n maxHeight: \"100%\",\n padding: \"30px 32px 6px 32px\", // Title's X button pluses 2px to paddingTop and Bottom\n },\n};\n\nconst DIALOG_CONTENT_STYLE: DialogElementStyle = {\n small: {\n paddingInline: \"20px calc(20px - 10px)\",\n paddingTop: \"8px\",\n paddingBottom: \"28px\",\n },\n smallAction: {\n paddingInline: \"20px calc(20px - 10px)\",\n paddingBlock: \"8px\",\n },\n medium: {\n paddingInline: \"32px calc(32px - 14px)\",\n paddingTop: \"16px\",\n paddingBottom: \"32px\",\n },\n mediumAction: {\n paddingInline: \"32px calc(32px - 14px)\",\n paddingBlock: \"16px\",\n },\n};\n\nconst DIALOG_ACTION_STYLE: DialogElementStyle = {\n small: {\n height: \"64px\",\n padding: \"8px 20px 20px 20px\",\n },\n medium: {\n height: \"84px\",\n padding: \"16px 32px 32px 32px\",\n },\n};\n\nexport const StyledBackdrop = styled(\"div\")({\n position: \"fixed\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"rgba(17, 17, 19, 0.7)\",\n zIndex: 1000,\n display: \"grid\",\n placeItems: \"center\",\n});\n\nexport const StyledDialog = styled(\"div\")<DialogStyle>(\n ({ theme, size, nonModal, type }) => ({\n zIndex: 1001,\n maxHeight: \"80vh\",\n display: \"flex\",\n flexDirection: \"column\",\n boxSizing: \"border-box\",\n borderRadius: \"10px\",\n backgroundColor: theme.palette.lunit_token.core.bg_03,\n color: theme.palette.lunit_token.core.text_normal,\n\n ...DIALOG_WRAPPER_STYLE[size === \"small\" ? \"small\" : \"medium\"],\n ...DIALOG_WRAPPER_STYLE[nonModal ? \"nonModal\" : \"modal\"],\n\n \"& #dialog-title\": {\n ...DIALOG_TITLE_STYLE[size === \"small\" ? \"small\" : \"medium\"],\n },\n\n \"& #dialog-content\": {\n ...DIALOG_CONTENT_STYLE[\n size === \"small\" && type !== \"passive\"\n ? \"smallAction\"\n : size === \"small\"\n ? \"small\"\n : size === \"medium\" && type !== \"passive\"\n ? \"mediumAction\"\n : \"medium\"\n ],\n\n scrollbarGutter: \"stable\",\n \"::-webkit-scrollbar\": {\n width: size === \"small\" ? \"10px\" : \"14px\",\n },\n \"::webkit-scrollbar-track\": {\n background: \"transparent\",\n },\n \"::-webkit-scrollbar-thumb\": {\n backgroundClip: \"padding-box\",\n border: `2px solid transparent`,\n /**\n * Figma's border-radius is 6px, but actual border radius is 10px since padding 2px is added.\n */\n borderRadius: \"10px\",\n backgroundColor: theme.palette.lunit_token.component.scrollbars_bg,\n },\n },\n\n \"& #dialog-action\": {\n ...DIALOG_ACTION_STYLE[size === \"small\" ? \"small\" : \"medium\"],\n },\n })\n);\n\nexport const StyledDialogTitle = styled(\"header\")({\n display: \"flex\",\n width: \"100%\",\n flex: \"0 0 auto\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n gap: \"8px\",\n});\n\nexport const StyledDialogTitleIconWrapper = styled(\"div\")({\n display: \"flex\",\n justifyContent: \"center\",\n width: \"20px\",\n height: \"20px\",\n \"& .MuiSvgIcon-root\": {\n display: \"flex\",\n justifyContent: \"center\",\n width: \"20px\",\n height: \"20px\",\n fontSize: \"20px\",\n },\n});\n\nexport const StyledDialogContent = styled(\"div\")(({ theme }) => ({\n ...theme.typography.body2_14_regular,\n flex: \"1 1 auto\",\n overflowY: \"scroll\",\n}));\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","import { OUTLINED_BORDER_WIDTH } from \"../const\";\n\nimport type { ButtonProps } from \"../Button.types\";\nimport { ToggleButtonProps } from \"@/components/ToggleButton/ToggleButton.types\";\n\ntype GetButtonPaddingBySizeAndKindParams = Pick<ButtonProps, \"kind\" | \"size\"> &\n Pick<ToggleButtonProps, \"selected\">;\n\n/**\n * When kind is outlined,\n * the padding value must include the border width of outlined.\n * This function takes care of this.\n */\nexport const getButtonPaddingBySizeAndKind = ({\n kind,\n size,\n selected = false,\n}: GetButtonPaddingBySizeAndKindParams) => {\n if (size === \"small\") {\n return kind === \"outlined\" && !selected\n ? `${4 - OUTLINED_BORDER_WIDTH}px ${8 - OUTLINED_BORDER_WIDTH}px`\n : \"4px 8px\";\n }\n\n if (size === \"medium\") {\n return kind === \"outlined\" && !selected\n ? `${8 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`\n : \"8px 12px\";\n }\n\n // size === \"large\"\n return kind === \"outlined\" && !selected\n ? `${10 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`\n : \"10px 12px\";\n};\n","import { OUTLINED_BORDER_WIDTH } from \"../const\";\n\nimport type { ButtonProps } from \"../Button.types\";\nimport { ToggleButtonProps } from \"@/components/ToggleButton/ToggleButton.types\";\n\ntype GetIconButtonPaddingBySizeAndKindProps = Pick<\n ButtonProps,\n \"kind\" | \"size\"\n> &\n Pick<ToggleButtonProps, \"selected\">;\n\n/**\n * When kind is outlined,\n * the padding value must include the border width of outlined.\n * This function takes care of this.\n */\nexport const getIconButtonPaddingBySizeAndKind = ({\n kind,\n size,\n selected = false,\n}: GetIconButtonPaddingBySizeAndKindProps) => {\n if (size === \"small\") {\n return kind === \"outlined\" && !selected\n ? `${4 - OUTLINED_BORDER_WIDTH}px`\n : \"4px\";\n }\n\n if (size === \"medium\") {\n return kind === \"outlined\" && !selected\n ? `${8 - OUTLINED_BORDER_WIDTH}px`\n : \"8px\";\n }\n\n // size === \"large\"\n return kind === \"outlined\" && !selected\n ? `${12 - OUTLINED_BORDER_WIDTH}px`\n : \"12px\";\n};\n","const getHoverStyle = (backgroundColor: React.CSSProperties[\"color\"]) => ({\n position: \"relative\",\n zIndex: 0,\n backgroundColor,\n});\n\nexport default getHoverStyle;\n","import { styled } from \"@mui/material/styles\";\nimport { Button as MuiButton } from \"@mui/material\";\n\nimport { ColorToken } from \"@/foundation/colors/types\";\nimport { PADDING_OF_FOCUS, OUTLINED_BORDER_WIDTH } from \"./const\";\nimport { getButtonPaddingBySizeAndKind } from \"./utils/getButtonPaddingBySizeAndKind\";\nimport { getIconButtonPaddingBySizeAndKind } from \"./utils/getIconButtonPaddingBySizeAndKind\";\nimport getHoverStyle from \"./utils/getHoverStyle\";\n\nimport type { ButtonProps } from \"./Button.types\";\nimport type { ToggleButtonProps } from \"../ToggleButton/ToggleButton.types\";\nimport type { Typography } from \"@mui/material/styles/createTypography\";\n\ntype KindStyleParams = Pick<ButtonProps, \"kind\" | \"color\"> & {\n lunit_token: ColorToken;\n};\n\ntype CustomButtonProps = ButtonProps & { hasIconOnly: boolean };\n\ntype sizeStyleParams = Pick<\n CustomButtonProps,\n \"size\" | \"hasIconOnly\" | \"kind\"\n> &\n Pick<ToggleButtonProps, \"selected\"> & { typography: Typography };\n\nconst borderRadius = \"8px\";\n\nexport const sizeStyle = ({\n size,\n kind,\n hasIconOnly,\n typography,\n selected = false,\n}: sizeStyleParams) => ({\n ...(size === \"small\" && {\n ...typography.button2,\n padding: `${\n hasIconOnly\n ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })\n : getButtonPaddingBySizeAndKind({ kind, size, selected })\n }`,\n minWidth: \"28px\",\n height: \"28px\",\n }),\n ...(size === \"medium\" && {\n ...typography.button2,\n padding: `${\n hasIconOnly\n ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })\n : getButtonPaddingBySizeAndKind({ kind, size, selected })\n }`,\n minWidth: \"36px\",\n height: \"36px\",\n }),\n ...(size === \"large\" && {\n ...typography.button1,\n padding: `${\n hasIconOnly\n ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })\n : getButtonPaddingBySizeAndKind({ kind, size, selected })\n }`,\n minWidth: \"44px\",\n height: \"44px\",\n }),\n});\n\nexport const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({\n // kind: container\n ...(kind === \"contained\" &&\n color === \"primary\" && {\n color: lunit_token.component.btn_primary_text_2,\n backgroundColor: lunit_token.component.btn_primary_bg,\n \"&:hover\": getHoverStyle(lunit_token.component.btn_primary_bg),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_primary_text_2,\n },\n }),\n ...(kind === \"contained\" &&\n color === \"secondary\" && {\n color: lunit_token.component.btn_secondary_text,\n backgroundColor: lunit_token.component.btn_secondary_bg,\n \"&:hover\": getHoverStyle(lunit_token.component.btn_secondary_bg),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_secondary_text,\n },\n }),\n ...(kind === \"contained\" &&\n color === \"error\" && {\n color: lunit_token.component.btn_primary_text_2,\n backgroundColor: lunit_token.component.btn_error_bg,\n \"&:hover\": getHoverStyle(lunit_token.component.btn_error_bg),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_primary_text_2,\n },\n }),\n // kind: ghost\n ...(kind === \"ghost\" &&\n color === \"primary\" && {\n color: lunit_token.component.btn_primary_text_1,\n border: \"none\",\n \"&:hover\": getHoverStyle(\"none\"),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_primary_text_1,\n },\n }),\n ...(kind === \"ghost\" &&\n color === \"secondary\" && {\n color: lunit_token.component.btn_secondary_text,\n border: \"none\",\n \"&:hover\": getHoverStyle(\"none\"),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_secondary_text,\n },\n }),\n ...(kind === \"ghost\" &&\n color === \"error\" && {\n color: lunit_token.component.btn_error_text,\n \"&:hover\": getHoverStyle(\"none\"),\n \"&.Mui-disabled\": {\n opacity: 0.38,\n border: \"none\",\n color: lunit_token.component.btn_error_text,\n },\n }),\n // kind: outlined\n ...(kind === \"outlined\" &&\n color === \"primary\" && {\n color: lunit_token.component.btn_primary_text_1,\n border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_primary_border}`,\n \"&:hover\": getHoverStyle(\"none\"),\n \"&:hover:before\": {\n content: \"''\",\n position: \"absolute\",\n left: \"-1px\",\n top: \"-1px\",\n width: \"calc(100% + 2px)\",\n height: \"calc(100% + 2px)\",\n zIndex: -1,\n backgroundColor: lunit_token.core.hover,\n borderRadius,\n },\n \"&.Mui-disabled\": {\n opacity: 0.38,\n color: lunit_token.component.btn_primary_text_1,\n },\n }),\n ...(kind === \"outlined\" &&\n color === \"secondary\" && {\n color: lunit_token.component.btn_secondary_text,\n border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.core.border_medium}`,\n \"&:hover\": getHoverStyle(\"none\"),\n \"&:hover:before\": {\n content: \"''\",\n position: \"absolute\",\n left: \"-1px\",\n top: \"-1px\",\n width: \"calc(100% + 2px)\",\n height: \"calc(100% + 2px)\",\n zIndex: -1,\n backgroundColor: lunit_token.core.hover,\n borderRadius,\n },\n \"&.Mui-disabled\": {\n opacity: 0.38,\n color: lunit_token.component.btn_secondary_text,\n },\n }),\n});\n\nexport const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) =>\n ({\n fontWeight: \"500\",\n borderRadius,\n textTransform: \"initial\",\n \"&.Mui-focusVisible\": {\n \"&::after\": {\n position: \"absolute\",\n width: `calc(100% + ${PADDING_OF_FOCUS}px)`,\n height: `calc(100% + ${PADDING_OF_FOCUS}px)`,\n content: '\"\"',\n borderRadius: \"11px\",\n border: `1px solid ${lunit_token.core.focused}`,\n boxSizing: \"border-box\",\n },\n },\n \"&:hover:before\": {\n content: \"''\",\n position: \"absolute\",\n left: 0,\n top: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: -1,\n backgroundColor: lunit_token.core.hover,\n borderRadius,\n },\n } as const);\n\nexport const iconStyle = ({\n size,\n hasIconOnly,\n}: Pick<CustomButtonProps, \"size\" | \"hasIconOnly\">) => ({\n \"& .MuiButton-startIcon\": {\n margin: 0,\n marginRight: hasIconOnly ? \"0px\" : size === \"large\" ? \"8px\" : \"4px\",\n\n \"*:nth-of-type(1)\": {\n fontSize: \"20px\",\n },\n },\n});\n\nexport const CustomButton = styled(MuiButton, {\n shouldForwardProp: (prop: string) => {\n return ![\"kind\", \"hasIconOnly\", \"variant\"].includes(prop);\n },\n})<CustomButtonProps>(\n ({\n theme: {\n typography,\n palette: { lunit_token },\n },\n kind,\n size,\n color,\n hasIconOnly,\n }) => ({\n ...commonStyle({ lunit_token }),\n ...iconStyle({ size, hasIconOnly }),\n ...sizeStyle({ size, kind, hasIconOnly, typography }),\n ...kindStyle({ kind, color, lunit_token }),\n })\n);\n","import React, { forwardRef } from \"react\";\n\nimport { CustomButton } from \"./Button.styled\";\n\nimport type {\n ButtonType,\n ButtonProps,\n GhostButtonProps,\n OutlinedButtonProps,\n ContainedButtonProps,\n} from \"./Button.types\";\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const { kind, variant, icon, children, startIcon } = props;\n const hasIconOnly = Boolean((startIcon || icon) && !children);\n\n if (kind === \"outlined\" || variant === \"outlined\") {\n return <OutlinedButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;\n }\n\n if (kind === \"ghost\" || variant === \"text\" || variant === \"ghost\") {\n return <GhostButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;\n }\n\n return (\n <ContainedButton\n {...props}\n kind=\"contained\"\n variant=\"contained\"\n ref={ref}\n hasIconOnly={hasIconOnly}\n />\n );\n\n /**\n * There is an issue between React 18, Mui's OverridableComponent type and the\n * type coercion to temporarily fix it.\n * https://github.com/lunit-io/design-system/pull/143#issuecomment-1831127232\n */\n}) as ButtonType;\n\nconst GhostButton = forwardRef<\n HTMLButtonElement,\n GhostButtonProps & { hasIconOnly: boolean }\n>((props, ref) => {\n const {\n size = \"small\",\n icon,\n className,\n children,\n startIcon,\n hasIconOnly,\n variant,\n ...restProps\n } = props;\n\n return (\n <CustomButton\n {...restProps}\n ref={ref}\n className={`ghost ${className ? className : \"\"}`}\n kind=\"ghost\"\n color={props.color ?? \"primary\"}\n size={size}\n startIcon={startIcon || icon}\n hasIconOnly={hasIconOnly}\n >\n {!hasIconOnly && <>{children}</>}\n </CustomButton>\n );\n});\n\nconst OutlinedButton = forwardRef<\n HTMLButtonElement,\n OutlinedButtonProps & { hasIconOnly: boolean }\n>((props, ref) => {\n const {\n size = \"small\",\n icon,\n className,\n children,\n startIcon,\n hasIconOnly,\n variant,\n ...restProps\n } = props;\n\n return (\n <CustomButton\n {...restProps}\n ref={ref}\n className={`outlined ${className ? className : \"\"}`}\n kind=\"outlined\"\n color={props.color ?? \"primary\"}\n size={size}\n startIcon={startIcon || icon}\n hasIconOnly={hasIconOnly}\n >\n {!hasIconOnly && <>{children}</>}\n </CustomButton>\n );\n});\n\nconst ContainedButton = forwardRef<\n HTMLButtonElement,\n ContainedButtonProps & { hasIconOnly: boolean }\n>((props, ref) => {\n const {\n size = \"small\",\n icon,\n className,\n children,\n startIcon,\n hasIconOnly,\n variant,\n ...restProps\n } = props;\n\n return (\n <CustomButton\n {...restProps}\n ref={ref}\n className={`${props.kind ?? \"contained\"} ${className ? className : \"\"}`}\n kind={props.kind ?? \"contained\"}\n color={props.color ?? \"primary\"}\n size={size}\n startIcon={startIcon || icon}\n hasIconOnly={hasIconOnly}\n >\n {!hasIconOnly && <>{children}</>}\n </CustomButton>\n );\n});\n\nexport default Button;\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material/Typography\");","import React from \"react\";\nimport MuiTypography from \"@mui/material/Typography\";\n\nimport type { TypographyProps } from \"@mui/material/Typography\";\nimport type { TypographyPropsVariantOverridesType } from \"../../foundation/Typography\";\n\ndeclare module \"@mui/material/Typography\" {\n interface TypographyPropsVariantOverrides\n extends TypographyPropsVariantOverridesType {}\n}\n\nconst Typography = <C extends React.ElementType>(\n props: TypographyProps<C, { component?: C }>\n) => {\n return <MuiTypography {...props} />;\n};\n\nexport default Typography;\n","import React, { useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Close } from \"@lunit/design-system-icons\";\n\nimport { DialogAction } from \"./components/DialogAction\";\nimport {\n StyledBackdrop,\n StyledDialog,\n StyledDialogContent,\n StyledDialogTitle,\n StyledDialogTitleIconWrapper,\n} from \"./Dialog.styled\";\nimport Button from \"../Button\";\nimport Typography from \"../Typography\";\n\nimport type { SxProps } from \"@mui/material/styles\";\nimport type { TypographyProps } from \"@mui/material\";\n\nexport interface DialogBase {\n isOpen: boolean;\n onClose(): void;\n type?: \"passive\" | \"action\"; // default passive\n nonModal?: boolean; // default false\n title: string;\n titleIcon?: React.ReactNode;\n titleVariant?: TypographyProps[\"variant\"];\n children: React.ReactNode;\n actions?: React.ReactNode;\n enableBackdropClose?: boolean;\n size?: \"small\" | \"medium\"; // default \"small\"\n sx?: SxProps;\n style?: React.CSSProperties;\n className?: string;\n}\n\nexport interface PassiveDialogType extends DialogBase {\n type: \"passive\";\n actions?: undefined;\n enableBackdropClose?: true;\n}\nexport interface ActionDialogType extends DialogBase {\n type: \"action\";\n actions: React.ReactNode;\n enableBackdropClose?: boolean;\n}\n\nexport interface PassiveModalProps extends PassiveDialogType {\n nonModal?: false;\n}\nexport interface ActionModalProps extends ActionDialogType {\n nonModal?: false;\n}\nexport type ModalProps = PassiveModalProps | ActionModalProps;\n\nexport interface PassiveNonModalProps extends PassiveDialogType {\n nonModal?: true;\n}\nexport interface ActionNonModalProps extends ActionDialogType {\n nonModal?: true;\n enableBackdropClose?: false;\n}\nexport type NonModalProps = PassiveNonModalProps | ActionNonModalProps;\n\nexport type DialogProps = ModalProps | NonModalProps;\n\nfunction Dialog(props: DialogProps) {\n const { isOpen, type, nonModal = false, onClose } = props;\n\n const isActionModal = type === \"action\" && !nonModal;\n const isPassiveModal = type === \"passive\" && !nonModal;\n\n function handleBackdropClose(e: React.MouseEvent<HTMLDivElement>) {\n const isClosable =\n isPassiveModal || (isActionModal && props.enableBackdropClose);\n\n if (!isClosable) return;\n if (e.target !== e.currentTarget) return;\n\n onClose();\n }\n\n useEffect(() => {\n const isClosable = isOpen && isPassiveModal;\n if (!isClosable) return;\n\n function handleEscClose(event: KeyboardEvent) {\n if (event.key === \"Escape\") onClose();\n }\n\n document.addEventListener(\"keydown\", handleEscClose);\n\n return () => {\n document.removeEventListener(\"keydown\", handleEscClose);\n };\n }, [isOpen, isPassiveModal, onClose]);\n\n if (!isOpen) return null;\n return createPortal(\n nonModal ? (\n <DialogBase dialogProps={{ ...props }} />\n ) : (\n <StyledBackdrop\n onClick={handleBackdropClose}\n data-testid=\"dialog-backdrop\"\n >\n <DialogBase dialogProps={{ ...props }} />\n </StyledBackdrop>\n ),\n\n document.body\n );\n}\n\nfunction DialogBase({ dialogProps }: { dialogProps: DialogBase }) {\n const {\n nonModal = false,\n onClose,\n title,\n titleIcon,\n titleVariant = \"headline5\",\n children,\n actions,\n type,\n size = \"small\",\n sx,\n style,\n className,\n } = dialogProps;\n\n return (\n <StyledDialog\n role=\"dialog\"\n aria-labelledby=\"dialog-title\"\n size={size}\n nonModal={nonModal}\n type={type}\n sx={{\n ...sx,\n }}\n style={style}\n className={`dialog elevation2 ${className ?? \"\"}`}\n >\n <StyledDialogTitle id=\"dialog-title\" className=\"dialog-title-wrapper\">\n {titleIcon && (\n <StyledDialogTitleIconWrapper className=\"dialog-title-icon\">\n {titleIcon}\n </StyledDialogTitleIconWrapper>\n )}\n <Typography\n component=\"h2\"\n id=\"dialog-title-text\"\n variant={titleVariant}\n >\n {title}\n </Typography>\n {type === \"passive\" && (\n <Button\n id=\"dialog-title-close-button\"\n data-testid=\"dialog-title-close-button\"\n kind=\"ghost\"\n color=\"secondary\"\n icon={<Close />}\n onClick={onClose}\n sx={{\n marginRight: 0,\n marginLeft: \"auto\",\n }}\n />\n )}\n </StyledDialogTitle>\n <StyledDialogContent id=\"dialog-content\">{children}</StyledDialogContent>\n {type === \"action\" && actions !== null ? (\n // `actions !== null` is used to not render DialogAction when actions is undefined\n // There was a case when actions is undefined, but DialogAction is rendered with null children\n <DialogAction>{actions}</DialogAction>\n ) : null}\n </StyledDialog>\n );\n}\n\nexport default Dialog;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","StyledDialogActions","styled","display","flex","alignItems","justifyContent","gap","DialogAction","props","children","sx","id","className","DIALOG_WRAPPER_STYLE","small","width","maxWidth","medium","modal","position","nonModal","top","right","DIALOG_TITLE_STYLE","height","maxHeight","padding","DIALOG_CONTENT_STYLE","paddingInline","paddingTop","paddingBottom","smallAction","paddingBlock","mediumAction","DIALOG_ACTION_STYLE","StyledBackdrop","left","backgroundColor","zIndex","placeItems","StyledDialog","theme","size","type","flexDirection","boxSizing","borderRadius","palette","lunit_token","core","bg_03","color","text_normal","scrollbarGutter","background","backgroundClip","border","component","scrollbars_bg","StyledDialogTitle","StyledDialogTitleIconWrapper","fontSize","StyledDialogContent","typography","body2_14_regular","overflowY","getButtonPaddingBySizeAndKind","kind","selected","getIconButtonPaddingBySizeAndKind","sizeStyle","hasIconOnly","button2","minWidth","button1","kindStyle","btn_primary_text_2","btn_primary_bg","opacity","btn_secondary_text","btn_secondary_bg","btn_error_bg","btn_primary_text_1","btn_error_text","btn_primary_border","content","hover","border_medium","commonStyle","fontWeight","textTransform","focused","iconStyle","margin","marginRight","CustomButton","shouldForwardProp","includes","Button","forwardRef","ref","variant","icon","startIcon","Boolean","OutlinedButton","GhostButton","ContainedButton","restProps","DialogBase","dialogProps","onClose","title","titleIcon","titleVariant","actions","style","role","Close","onClick","marginLeft","isOpen","isActionModal","isPassiveModal","useEffect","document","addEventListener","handleEscClose","removeEventListener","event","createPortal","e","enableBackdropClose","target","currentTarget","body"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";var e={d:(
|
|
1
|
+
(()=>{"use strict";var e={n:t=>{var o=t&&t.__esModule?()=>t.default:()=>t;return e.d(o,{a:o}),o},d:(t,o)=>{for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{DropdownDivider:()=>L,DropdownItem:()=>z,DropdownSubtitle:()=>P,default:()=>b});const o=require("react/jsx-runtime"),i=require("react"),r=require("@lunit/design-system-icons/ArrowDownSm");var n=e.n(r);const l=require("@mui/material/styles"),d=require("@mui/material/Box");var a=e.n(d);const s=require("@mui/material/Select");var p=e.n(s);const c=require("@mui/material/MenuItem");var u=e.n(c);const x={small:{height:"28px",padding:"4px 12px",iconTop:"4px",iconRight:"12px"},medium:{height:"36px",padding:"8px 16px",iconTop:"8px",iconRight:"16px"},large:{height:"44px",padding:"10px 16px",iconTop:"12px",iconRight:"16px"}},h=(0,l.styled)(p(),{shouldForwardProp:e=>!["selectSize","select"].includes(e)})((({theme:e,selectSize:t})=>({..."large"===t?{...e.typography.body1_16_regular}:{...e.typography.body2_14_regular},height:x[t||"medium"].height,padding:x[t||"medium"].padding,backgroundColor:e.palette.lunit_token.component.textfield_bg,overflow:"hidden","& .MuiSelect-select":{paddingTop:0,paddingBottom:0,paddingRight:"28px !important",color:e.palette.lunit_token.core.text_normal},"&.MuiInputBase-root":{borderRadius:"8px",border:"none","&:hover:not(.Mui-disabled, .Mui-error):before":{border:"none"}},"& .MuiInput-input":{"&:focus":{backgroundColor:"transparent"}},"&::after":{border:"none"},"&::before":{border:"none"},"&:hover":{position:"relative",zIndex:0,backgroundColor:e.palette.lunit_token.component.textfield_bg,border:"none"},"&:hover::before":{content:'""',position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-1,backgroundColor:e.palette.lunit_token.core.hover,border:"none"},"&.Mui-focused::before":{border:`1px solid ${e.palette.lunit_token.core.focused}`,content:'""',position:"absolute",top:0,bottom:0,left:0,right:0,borderRadius:"8px",transition:"none"},"&.Mui-disabled":{opacity:.38},"&.Mui-disabled:before":{borderBottomStyle:"none"},"&.Mui-error::before":{border:`1px solid ${e.palette.lunit_token.component.textfield_border_error}`,content:'""',position:"absolute",top:0,bottom:0,left:0,right:0,borderRadius:"8px",transition:"none"},"& .MuiSvgIcon-root":{width:"20px",height:"20px",top:x[t||"medium"].iconTop,right:x[t||"medium"].iconRight,color:e.palette.lunit_token.core.text_normal,"&.Mui-disabled":{color:e.palette.lunit_token.core.text_normal}}}))),g=(0,l.styled)(u())((({theme:e})=>({...e.typography.body2_14_regular,padding:"8px",borderRadius:"8px",color:e.palette.lunit_token.core.text_normal,backgroundColor:"transparent",display:"flex",flexDirection:"row",justifyContent:"space-between",gap:"8px","&:hover":{backgroundColor:e.palette.lunit_token.core.hover},"&.Mui-focusVisible":{backgroundColor:"transparent","&:hover":{backgroundColor:e.palette.lunit_token.core.hover}},"& .multipleChecked":{display:"none"},"&.filledStyle":{backgroundColor:e.palette.lunit_token.core.selected}}))),m=(0,l.styled)(a())({width:"20px",height:"20px",marginRight:"8px"}),b=(0,i.forwardRef)(((e,t)=>{const{select:i="single",size:r="medium",className:l,children:d,sx:a,...s}=e;return(0,o.jsx)(h,{className:l,variant:"standard",multiple:"multiple"===i,IconComponent:e=>(0,o.jsx)(n(),{...e}),MenuProps:{anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},PaperProps:{sx:{marginTop:"4px",padding:"0px 8px",borderRadius:"8px",backgroundColor:e=>e.palette.lunit_token.core.bg_02},className:`elevation2 ${l||"light1"}`},MenuListProps:{sx:{"& .singleChecked":{display:"single"===i?"inherit":"none"},"& .multipleChecked":{display:"multiple"===i?"inherit !important":"none"}}}},sx:a,selectSize:r,...s,ref:t,children:d})})),f=require("@mui/material"),_=require("@lunit/design-system-icons/Check");var y=e.n(_);const v=require("@mui/material/Checkbox");var C=e.n(v);const k=(0,l.styled)(C())((({theme:e})=>({width:20,height:20,padding:0,"&.Mui-disabled":{opacity:.38},"&.Mui-focusVisible:after":{content:'""',position:"absolute",width:24,height:24,border:`1px solid ${e.palette.lunit_token.core.focused}`,borderRadius:"7px"}}))),w={width:18,height:18},j=(0,l.styled)("span")((({theme:e})=>({...w,borderRadius:"20%",boxShadow:`inset 0 0 0 1.5px ${e.palette.lunit_token.component.selectcontrol_off}`}))),M=()=>(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,o.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM15.2516 8.14413C15.6074 7.72168 15.5533 7.09083 15.1309 6.73508C14.7084 6.37933 14.0776 6.43341 13.7218 6.85586L9.31824 12.0851L6.14993 9.37556C5.7302 9.01661 5.09895 9.06588 4.74 9.48561C4.38105 9.90533 4.43032 10.5366 4.85005 10.8955L8.78416 14.26C8.98672 14.4332 9.25006 14.5184 9.51571 14.4967C9.78135 14.4749 10.0273 14.348 10.199 14.1441L15.2516 8.14413Z",fill:"#00C9EA"})}),S=()=>(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,o.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM5 9C4.44772 9 4 9.44771 4 10C4 10.5523 4.44771 11 5 11L15 11C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9L5 9Z",fill:"#00C9EA"})}),R=e=>(0,o.jsx)(k,{disableRipple:!0,icon:(0,o.jsx)(j,{}),checkedIcon:(0,o.jsx)(M,{}),indeterminateIcon:(0,o.jsx)(S,{}),...e}),q=require("@mui/material/Typography");var I=e.n(q);const T=e=>(0,o.jsx)(I(),{...e});function z(e){const{leftIcon:t,rightText:i,selected:r,isFilledStyle:n,children:l,sx:d,...a}=e;return(0,o.jsxs)(g,{className:n&&r?"filledStyle":void 0,sx:d,...a,children:[(0,o.jsxs)(f.Box,{sx:{display:"flex",flexDirection:"row",justifyContent:"flex-start"},children:[!n&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(m,{className:"singleChecked",children:r&&(0,o.jsx)(y(),{fontSize:"small"})}),(0,o.jsx)(R,{className:"multipleChecked",sx:{mr:2},checked:r})]}),t&&(0,o.jsx)(m,{children:t}),l]}),(0,o.jsx)(f.Box,{children:i&&(0,o.jsx)(T,{variant:"body2_14_medium",sx:{color:e=>e.palette.lunit_token.core.text_light},children:i})})]})}function L({sx:e}){return(0,o.jsx)(f.Divider,{sx:{margin:"8px -8px",borderColor:e=>e.palette.lunit_token.component.dropdown_divider_border,...e}})}function P({title:e,sx:t}){return(0,o.jsx)(f.ListSubheader,{sx:{typography:"body3_12_semibold",padding:"4px 8px",color:e=>e.palette.lunit_token.core.text_light,backgroundColor:"transparent",...t},children:e})}P.muiSkipListHighlight=!0,module.exports=t})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|