@lunit/design-system 1.0.0-b.4 → 1.0.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/dist/cjs/components/Alert/index.js +1 -1
- package/dist/cjs/components/Alert/index.js.map +1 -1
- package/dist/cjs/components/Button/index.js +1 -1
- package/dist/cjs/components/Button/index.js.map +1 -1
- package/dist/cjs/components/Chip/index.js +1 -1
- package/dist/cjs/components/Chip/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/components/ToggleButton/index.js +1 -1
- package/dist/cjs/components/ToggleButton/index.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/components/Button/Button.js +21 -3
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.styled.js +2 -5
- package/dist/components/Button/Button.styled.js.map +1 -1
- package/dist/components/Chip/Chip.js +6 -5
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/TextField/TextField.js +4 -4
- package/dist/components/TextField/TextField.js.map +1 -1
- package/dist/components/ToggleButton/ToggleButton.styled.js +1 -2
- package/dist/components/ToggleButton/ToggleButton.styled.js.map +1 -1
- package/dist/foundation/Typography/index.js +18 -0
- package/dist/foundation/Typography/index.js.map +1 -1
- package/dist/foundation/Typography/tokens.js +0 -16
- package/dist/foundation/Typography/tokens.js.map +1 -1
- package/dist/foundation/colors/index.js +4 -0
- package/dist/foundation/colors/index.js.map +1 -1
- package/dist/foundation/index.js +1 -1
- package/dist/foundation/index.js.map +1 -1
- package/dist/types/components/Button/Button.styled.d.ts +0 -3
- package/dist/types/components/Button/Button.types.d.ts +8 -5
- package/dist/types/components/Chip/Chip.types.d.ts +7 -2
- package/dist/types/components/TextField/TextField.types.d.ts +8 -3
- package/dist/types/foundation/Typography/index.d.ts +18 -0
- package/dist/types/foundation/colors/index.d.ts +4 -0
- package/dist/types/foundation/index.d.ts +4 -0
- package/package.json +1 -1
- package/src/components/Button/Button.styled.ts +2 -5
- package/src/components/Button/Button.tsx +117 -42
- package/src/components/Button/Button.types.ts +8 -4
- package/src/components/Chip/Chip.tsx +15 -4
- package/src/components/Chip/Chip.types.ts +9 -2
- package/src/components/TextField/TextField.tsx +10 -10
- package/src/components/TextField/TextField.types.ts +11 -4
- package/src/components/ToggleButton/ToggleButton.styled.ts +1 -2
- package/src/foundation/Typography/index.ts +18 -0
- package/src/foundation/Typography/tokens.ts +0 -16
- package/src/foundation/colors/index.ts +4 -0
- package/src/foundation/index.ts +1 -1
- package/src/stories/components/Button/BasicButton.stories.tsx +11 -0
- package/src/stories/components/Button/IconButton.stories.tsx +11 -0
- package/src/stories/components/Button/Kind.stories.tsx +62 -25
- package/src/stories/components/Chip/Chip.stories.tsx +15 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";var e={n:o=>{var n=o&&o.__esModule?()=>o.default:()=>o;return e.d(n,{a:n}),n},d:(o,n)=>{for(var t in n)e.o(n,t)&&!e.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:n[t]})},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:()=>
|
|
1
|
+
(()=>{"use strict";var e={n:o=>{var n=o&&o.__esModule?()=>o.default:()=>o;return e.d(n,{a:n}),n},d:(o,n)=>{for(var t in n)e.o(n,t)&&!e.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:n[t]})},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:()=>B});const n=require("react/jsx-runtime"),t=require("@lunit/design-system-icons/Success16");var r=e.n(t);const i=require("@lunit/design-system-icons/Error16");var a=e.n(i);const l=require("@lunit/design-system-icons/Warning16");var c=e.n(l);const s=require("@lunit/design-system-icons/Information16");var d=e.n(s);const p=require("@lunit/design-system-icons/Close");var u=e.n(p);const m=require("react"),x=require("@mui/material"),_=(e,o)=>{switch(o){case"info":return e.palette.lunit_token.component.alert_info_bg;case"warning":return e.palette.lunit_token.component.alert_warning_bg;case"error":return e.palette.lunit_token.component.alert_error_bg;default:return e.palette.lunit_token.component.alert_success_bg}},b=(e,o)=>{switch(o){case"info":return e.palette.lunit_token.component.alert_info_border;case"warning":return e.palette.lunit_token.component.alert_warning_border;case"error":return e.palette.lunit_token.component.alert_error_border;default:return e.palette.lunit_token.component.alert_success_border}},h=(e,o)=>{switch(o){case"info":return e.palette.lunit_token.core.icon_info_02;case"warning":return e.palette.lunit_token.core.icon_warning_02;case"error":return e.palette.lunit_token.core.icon_error_02;default:return e.palette.lunit_token.core.icon_success_02}},g=(0,x.styled)(x.Alert)((({severity:e,theme:o})=>({"&.MuiAlert-root":{display:"flex",padding:"12px",borderRadius:"8px",border:`1px solid ${b(o,e)}`,backgroundColor:_(o,e),boxShadow:"none"},"& .MuiAlert-icon":{padding:"4px",marginRight:"0",fontSize:"20px",color:`${h(o,e)} !important`},"& .MuiAlert-message":{width:"100%",minHeight:"28px",padding:"4px 0 0",margin:"0 8px 0 8px"},"& .MuiAlert-action":{margin:0,padding:0},"& .MuiSvgIcon-root":{height:"20px",width:"20px"}}))),y=(0,x.styled)(x.AlertTitle)((({theme:e})=>({"&.MuiAlertTitle-root":{marginTop:0,marginBottom:8,fontWeight:700,fontSize:"14px",lineHeight:"20px",color:e.palette.lunit_token.core.text_normal}}))),f=(0,x.styled)("div")((({theme:e})=>({color:e.palette.lunit_token.core.text_normal}))),k=(0,x.styled)("div")({marginTop:"12px"}),v=require("@mui/material/styles"),I=({kind:e,size:o,selected:n=!1})=>"small"===o?"outlined"!==e||n?"4px 8px":"3px 7px":"medium"===o?"outlined"!==e||n?"8px 12px":"7px 11px":"outlined"!==e||n?"10px 12px":"9px 11px",z=({kind:e,size:o,selected:n=!1})=>"small"===o?"outlined"!==e||n?"4px":"3px":"medium"===o?"outlined"!==e||n?"8px":"7px":"outlined"!==e||n?"12px":"11px",j=e=>({position:"relative",zIndex:0,backgroundColor:e}),w="8px",M=({size:e,kind:o,hasIconOnly:n,typography:t,selected:r=!1})=>({..."small"===e&&{...t.button2,padding:`${n?z({kind:o,size:e,selected:r}):I({kind:o,size:e,selected:r})}`,minWidth:"28px",height:"28px"},..."medium"===e&&{...t.button2,padding:`${n?z({kind:o,size:e,selected:r}):I({kind:o,size:e,selected:r})}`,minWidth:"36px",height:"36px"},..."large"===e&&{...t.button1,padding:`${n?z({kind:o,size:e,selected:r}):I({kind:o,size:e,selected:r})}`,minWidth:"44px",height:"44px"}}),O=({kind:e,color:o,lunit_token:n})=>({..."contained"===e&&"primary"===o&&{color:n.component.btn_primary_text_2,backgroundColor:n.component.btn_primary_bg,"&:hover":j(n.component.btn_primary_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_primary_text_2}},..."contained"===e&&"secondary"===o&&{color:n.component.btn_secondary_text,backgroundColor:n.component.btn_secondary_bg,"&:hover":j(n.component.btn_secondary_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_secondary_text}},..."contained"===e&&"error"===o&&{color:n.component.btn_primary_text_2,backgroundColor:n.component.btn_error_bg,"&:hover":j(n.component.btn_error_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_primary_text_2}},..."ghost"===e&&"primary"===o&&{color:n.component.btn_primary_text_1,border:"none","&:hover":j("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_primary_text_1}},..."ghost"===e&&"secondary"===o&&{color:n.component.btn_secondary_text,border:"none","&:hover":j("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_secondary_text}},..."ghost"===e&&"error"===o&&{color:n.component.btn_error_text,"&:hover":j("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_error_text}},..."outlined"===e&&"primary"===o&&{color:n.component.btn_primary_text_1,border:`1px solid ${n.component.btn_primary_border}`,"&:hover":j("none"),"&:hover:before":{content:"''",position:"absolute",left:"-1px",top:"-1px",width:"calc(100% + 2px)",height:"calc(100% + 2px)",zIndex:-1,backgroundColor:n.core.hover,borderRadius:w},"&.Mui-disabled":{opacity:.38,color:n.component.btn_primary_text_1}},..."outlined"===e&&"secondary"===o&&{color:n.component.btn_secondary_text,border:`1px solid ${n.component.btn_secondary_border}`,"&:hover":j("none"),"&:hover:before":{content:"''",position:"absolute",left:"-1px",top:"-1px",width:"calc(100% + 2px)",height:"calc(100% + 2px)",zIndex:-1,backgroundColor:n.core.hover,borderRadius:w},"&.Mui-disabled":{opacity:.38,color:n.component.btn_secondary_text}}}),R=({lunit_token:e})=>({fontWeight:"500",borderRadius:w,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:w}}),C=({size:e,hasIconOnly:o})=>({"& .MuiButton-startIcon":{margin:0,marginRight:o?"0px":"large"===e?"8px":"4px","*:nth-of-type(1)":{fontSize:"20px"}}}),S=(0,v.styled)(x.Button,{shouldForwardProp:e=>!["kind","hasIconOnly","variant"].includes(e)})((({theme:{typography:e,palette:{lunit_token:o}},kind:n,size:t,color:r,hasIconOnly:i})=>({...R({lunit_token:o}),...C({size:t,hasIconOnly:i}),...M({size:t,kind:n,hasIconOnly:i,typography:e}),...O({kind:n,color:r,lunit_token:o})}))),$=(0,m.forwardRef)(((e,o)=>{const{kind:t,variant:r,icon:i,children:a,startIcon:l}=e,c=Boolean((l||i)&&!a);return"outlined"===t||"outlined"===r?(0,n.jsx)(A,{...e,ref:o,hasIconOnly:c}):"ghost"===t||"text"===r||"ghost"===r?(0,n.jsx)(q,{...e,ref:o,hasIconOnly:c}):(0,n.jsx)(T,{...e,kind:"contained",variant:"contained",ref:o,hasIconOnly:c})})),q=(0,m.forwardRef)(((e,o)=>{const{size:t="small",icon:r,className:i,children:a,startIcon:l,hasIconOnly:c,variant:s,...d}=e;return(0,n.jsx)(S,{...d,ref:o,className:`ghost ${i||""}`,kind:"ghost",color:e.color??"primary",size:t,startIcon:l||r,hasIconOnly:c,children:!c&&(0,n.jsx)(n.Fragment,{children:a})})})),A=(0,m.forwardRef)(((e,o)=>{const{size:t="small",icon:r,className:i,children:a,startIcon:l,hasIconOnly:c,variant:s,...d}=e;return(0,n.jsx)(S,{...d,ref:o,className:`outlined ${i||""}`,kind:"outlined",color:e.color??"primary",size:t,startIcon:l||r,hasIconOnly:c,children:!c&&(0,n.jsx)(n.Fragment,{children:a})})})),T=(0,m.forwardRef)(((e,o)=>{const{size:t="small",icon:r,className:i,children:a,startIcon:l,hasIconOnly:c,variant:s,...d}=e;return(0,n.jsx)(S,{...d,ref:o,className:`${e.kind??"contained"} ${i||""}`,kind:e.kind??"contained",color:e.color??"primary",size:t,startIcon:l||r,hasIconOnly:c,children:!c&&(0,n.jsx)(n.Fragment,{children:a})})})),N=$,W={success:(0,n.jsx)(r(),{variant:"filled"}),info:(0,n.jsx)(d(),{variant:"filled"}),warning:(0,n.jsx)(c(),{variant:"filled"}),error:(0,n.jsx)(a(),{variant:"filled"})},B=(0,m.forwardRef)(((e,o)=>{const{title:t,severity:r,children:i,bottomAction:a,onClose:l,...c}=e;return(0,n.jsxs)(g,{ref:o,severity:r,iconMapping:W,slots:{closeButton:()=>(0,n.jsx)(N,{kind:"ghost",size:"small",color:"secondary",icon:(0,n.jsx)(u(),{}),onClick:l})},onClose:l,...c,children:[t&&(0,n.jsx)(y,{children:t}),(0,n.jsx)(f,{children:i}),a&&(0,n.jsx)(k,{children:a})]})}));module.exports=o})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/Alert/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 \"@lunit/design-system-icons/Success16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Error16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Warning16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Information16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Close\"","webpack://@lunit/design-system/external commonjs \"react\"","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/./src/components/Alert/Alert.utils.ts","webpack://@lunit/design-system/./src/components/Alert/Alert.styled.ts","webpack://@lunit/design-system/external commonjs \"@mui/material/styles\"","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/./src/components/Alert/Alert.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(\"@lunit/design-system-icons/Success16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Error16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Warning16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Information16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Close\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","import { AlertColor, Theme } from \"@mui/material\";\n\nexport const getBackgroundColor = (\n theme: Theme,\n severity: AlertColor | undefined\n) => {\n switch (severity) {\n case \"info\":\n return theme.palette.lunit_token.component.alert_info_bg;\n case \"warning\":\n return theme.palette.lunit_token.component.alert_warning_bg;\n case \"error\":\n return theme.palette.lunit_token.component.alert_error_bg;\n default:\n return theme.palette.lunit_token.component.alert_success_bg;\n }\n};\n\nexport const getBorderColor = (\n theme: Theme,\n severity: AlertColor | undefined\n) => {\n switch (severity) {\n case \"info\":\n return theme.palette.lunit_token.component.alert_info_border;\n case \"warning\":\n return theme.palette.lunit_token.component.alert_warning_border;\n case \"error\":\n return theme.palette.lunit_token.component.alert_error_border;\n default:\n return theme.palette.lunit_token.component.alert_success_border;\n }\n};\n\nexport const getIconColor = (\n theme: Theme,\n severity: AlertColor | undefined\n) => {\n switch (severity) {\n case \"info\":\n return theme.palette.lunit_token.core.icon_info_02;\n case \"warning\":\n return theme.palette.lunit_token.core.icon_warning_02;\n case \"error\":\n return theme.palette.lunit_token.core.icon_error_02;\n default:\n return theme.palette.lunit_token.core.icon_success_02;\n }\n};\n","import {\n Alert as MuiAlert,\n AlertTitle as MuiAlertTitle,\n styled,\n} from \"@mui/material\";\nimport type { AlertProps } from \"./Alert.types\";\nimport {\n getBorderColor,\n getBackgroundColor,\n getIconColor,\n} from \"./Alert.utils\";\n\nexport const StyledAlert = styled(MuiAlert)<AlertProps>(\n ({ severity, theme }) => ({\n \"&.MuiAlert-root\": {\n display: \"flex\",\n padding: \"12px\",\n borderRadius: \"8px\",\n border: `1px solid ${getBorderColor(theme, severity)}`,\n backgroundColor: getBackgroundColor(theme, severity),\n boxShadow: \"none\",\n },\n \"& .MuiAlert-icon\": {\n padding: \"4px\",\n marginRight: \"0\",\n fontSize: \"20px\",\n color: `${getIconColor(theme, severity)} !important`,\n },\n \"& .MuiAlert-message\": {\n width: \"100%\",\n minHeight: \"28px\",\n padding: \"4px 0 0\",\n margin: \"0 8px 0 8px\",\n },\n \"& .MuiAlert-action\": {\n margin: 0,\n padding: 0,\n },\n \"& .MuiSvgIcon-root\": {\n height: \"20px\",\n width: \"20px\",\n },\n })\n);\n\nexport const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({\n \"&.MuiAlertTitle-root\": {\n marginTop: 0,\n marginBottom: 8,\n fontWeight: 700,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n color: theme.palette.lunit_token.core.text_normal,\n },\n}));\n\nexport const StyledAlertChildren = styled(\"div\")(({ theme }) => ({\n color: theme.palette.lunit_token.core.text_normal,\n}));\n\nexport const StyledBottomAction = styled(\"div\")({\n marginTop: \"12px\",\n});\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material/styles\");","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.component.btn_secondary_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_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 width: \"20px\",\n height: \"20px\",\n padding: \"1px\",\n margin: 0,\n marginRight: hasIconOnly ? \"0px\" : size === \"large\" ? \"8px\" : \"4px\",\n\n \"*:nth-of-type(1)\": {\n fontSize: \"18px\",\n },\n },\n});\n\nexport const CustomButton = styled(MuiButton, {\n shouldForwardProp: (prop: string) => {\n return ![\"kind\", \"hasIconOnly\"].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 { ButtonType, ButtonProps } from \"./Button.types\";\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const {\n size = \"small\",\n color = \"primary\",\n icon,\n className,\n children,\n startIcon,\n ...buttonProps\n } = props;\n const hasIconOnly = Boolean((startIcon || icon) && !children);\n\n return (\n <>\n {/** props.kind 사용 이유: props.color 내 타입 좁히기 활용을 위해 사용 */}\n {props.kind === \"outlined\" ? (\n <CustomButton\n {...buttonProps}\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 <CustomButton\n {...buttonProps}\n ref={ref}\n className={`${props.kind ?? \"contained\"} ${\n className ? className : \"\"\n }`}\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 );\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\nexport default Button;\n","import Success from \"@lunit/design-system-icons/Success16\";\nimport Error from \"@lunit/design-system-icons/Error16\";\nimport Warning from \"@lunit/design-system-icons/Warning16\";\nimport Information from \"@lunit/design-system-icons/Information16\";\nimport Close from \"@lunit/design-system-icons/Close\";\nimport React, { forwardRef } from \"react\";\nimport {\n StyledAlert,\n StyledAlertTitle,\n StyledAlertChildren,\n StyledBottomAction,\n} from \"./Alert.styled\";\nimport { AlertProps } from \"./Alert.types\";\nimport Button from \"../Button\";\n\nconst MAPPED_ICON = {\n success: <Success variant=\"filled\" />,\n info: <Information variant=\"filled\" />,\n warning: <Warning variant=\"filled\" />,\n error: <Error variant=\"filled\" />,\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const { title, severity, children, bottomAction, onClose, ...rest } = props;\n return (\n <StyledAlert\n ref={ref}\n severity={severity}\n iconMapping={MAPPED_ICON}\n slots={{\n closeButton: () => (\n <Button\n kind=\"ghost\"\n size=\"small\"\n color=\"secondary\"\n icon={<Close />}\n onClick={onClose}\n />\n ),\n }}\n onClose={onClose}\n {...rest}\n >\n {title && <StyledAlertTitle>{title}</StyledAlertTitle>}\n <StyledAlertChildren>{children}</StyledAlertChildren>\n {bottomAction && <StyledBottomAction>{bottomAction}</StyledBottomAction>}\n </StyledAlert>\n );\n});\n\nexport default Alert;\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","getBackgroundColor","theme","severity","palette","lunit_token","component","alert_info_bg","alert_warning_bg","alert_error_bg","alert_success_bg","getBorderColor","alert_info_border","alert_warning_border","alert_error_border","alert_success_border","getIconColor","core","icon_info_02","icon_warning_02","icon_error_02","icon_success_02","StyledAlert","styled","display","padding","borderRadius","border","backgroundColor","boxShadow","marginRight","fontSize","color","width","minHeight","margin","height","StyledAlertTitle","marginTop","marginBottom","fontWeight","lineHeight","text_normal","StyledAlertChildren","StyledBottomAction","getButtonPaddingBySizeAndKind","kind","size","selected","getIconButtonPaddingBySizeAndKind","position","zIndex","sizeStyle","hasIconOnly","typography","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","left","top","hover","btn_secondary_border","commonStyle","textTransform","focused","boxSizing","iconStyle","CustomButton","shouldForwardProp","includes","forwardRef","props","ref","icon","className","children","startIcon","buttonProps","Boolean","MAPPED_ICON","success","variant","info","warning","error","title","bottomAction","onClose","rest","iconMapping","slots","closeButton","onClick"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/Alert/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 \"@lunit/design-system-icons/Success16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Error16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Warning16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Information16\"","webpack://@lunit/design-system/external commonjs \"@lunit/design-system-icons/Close\"","webpack://@lunit/design-system/external commonjs \"react\"","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/./src/components/Alert/Alert.utils.ts","webpack://@lunit/design-system/./src/components/Alert/Alert.styled.ts","webpack://@lunit/design-system/external commonjs \"@mui/material/styles\"","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/./src/components/Alert/Alert.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(\"@lunit/design-system-icons/Success16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Error16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Warning16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Information16\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@lunit/design-system-icons/Close\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","import { AlertColor, Theme } from \"@mui/material\";\n\nexport const getBackgroundColor = (\n theme: Theme,\n severity: AlertColor | undefined\n) => {\n switch (severity) {\n case \"info\":\n return theme.palette.lunit_token.component.alert_info_bg;\n case \"warning\":\n return theme.palette.lunit_token.component.alert_warning_bg;\n case \"error\":\n return theme.palette.lunit_token.component.alert_error_bg;\n default:\n return theme.palette.lunit_token.component.alert_success_bg;\n }\n};\n\nexport const getBorderColor = (\n theme: Theme,\n severity: AlertColor | undefined\n) => {\n switch (severity) {\n case \"info\":\n return theme.palette.lunit_token.component.alert_info_border;\n case \"warning\":\n return theme.palette.lunit_token.component.alert_warning_border;\n case \"error\":\n return theme.palette.lunit_token.component.alert_error_border;\n default:\n return theme.palette.lunit_token.component.alert_success_border;\n }\n};\n\nexport const getIconColor = (\n theme: Theme,\n severity: AlertColor | undefined\n) => {\n switch (severity) {\n case \"info\":\n return theme.palette.lunit_token.core.icon_info_02;\n case \"warning\":\n return theme.palette.lunit_token.core.icon_warning_02;\n case \"error\":\n return theme.palette.lunit_token.core.icon_error_02;\n default:\n return theme.palette.lunit_token.core.icon_success_02;\n }\n};\n","import {\n Alert as MuiAlert,\n AlertTitle as MuiAlertTitle,\n styled,\n} from \"@mui/material\";\nimport type { AlertProps } from \"./Alert.types\";\nimport {\n getBorderColor,\n getBackgroundColor,\n getIconColor,\n} from \"./Alert.utils\";\n\nexport const StyledAlert = styled(MuiAlert)<AlertProps>(\n ({ severity, theme }) => ({\n \"&.MuiAlert-root\": {\n display: \"flex\",\n padding: \"12px\",\n borderRadius: \"8px\",\n border: `1px solid ${getBorderColor(theme, severity)}`,\n backgroundColor: getBackgroundColor(theme, severity),\n boxShadow: \"none\",\n },\n \"& .MuiAlert-icon\": {\n padding: \"4px\",\n marginRight: \"0\",\n fontSize: \"20px\",\n color: `${getIconColor(theme, severity)} !important`,\n },\n \"& .MuiAlert-message\": {\n width: \"100%\",\n minHeight: \"28px\",\n padding: \"4px 0 0\",\n margin: \"0 8px 0 8px\",\n },\n \"& .MuiAlert-action\": {\n margin: 0,\n padding: 0,\n },\n \"& .MuiSvgIcon-root\": {\n height: \"20px\",\n width: \"20px\",\n },\n })\n);\n\nexport const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({\n \"&.MuiAlertTitle-root\": {\n marginTop: 0,\n marginBottom: 8,\n fontWeight: 700,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n color: theme.palette.lunit_token.core.text_normal,\n },\n}));\n\nexport const StyledAlertChildren = styled(\"div\")(({ theme }) => ({\n color: theme.palette.lunit_token.core.text_normal,\n}));\n\nexport const StyledBottomAction = styled(\"div\")({\n marginTop: \"12px\",\n});\n","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material/styles\");","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.component.btn_secondary_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_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","import Success from \"@lunit/design-system-icons/Success16\";\nimport Error from \"@lunit/design-system-icons/Error16\";\nimport Warning from \"@lunit/design-system-icons/Warning16\";\nimport Information from \"@lunit/design-system-icons/Information16\";\nimport Close from \"@lunit/design-system-icons/Close\";\nimport React, { forwardRef } from \"react\";\nimport {\n StyledAlert,\n StyledAlertTitle,\n StyledAlertChildren,\n StyledBottomAction,\n} from \"./Alert.styled\";\nimport { AlertProps } from \"./Alert.types\";\nimport Button from \"../Button\";\n\nconst MAPPED_ICON = {\n success: <Success variant=\"filled\" />,\n info: <Information variant=\"filled\" />,\n warning: <Warning variant=\"filled\" />,\n error: <Error variant=\"filled\" />,\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const { title, severity, children, bottomAction, onClose, ...rest } = props;\n return (\n <StyledAlert\n ref={ref}\n severity={severity}\n iconMapping={MAPPED_ICON}\n slots={{\n closeButton: () => (\n <Button\n kind=\"ghost\"\n size=\"small\"\n color=\"secondary\"\n icon={<Close />}\n onClick={onClose}\n />\n ),\n }}\n onClose={onClose}\n {...rest}\n >\n {title && <StyledAlertTitle>{title}</StyledAlertTitle>}\n <StyledAlertChildren>{children}</StyledAlertChildren>\n {bottomAction && <StyledBottomAction>{bottomAction}</StyledBottomAction>}\n </StyledAlert>\n );\n});\n\nexport default Alert;\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","getBackgroundColor","theme","severity","palette","lunit_token","component","alert_info_bg","alert_warning_bg","alert_error_bg","alert_success_bg","getBorderColor","alert_info_border","alert_warning_border","alert_error_border","alert_success_border","getIconColor","core","icon_info_02","icon_warning_02","icon_error_02","icon_success_02","StyledAlert","styled","display","padding","borderRadius","border","backgroundColor","boxShadow","marginRight","fontSize","color","width","minHeight","margin","height","StyledAlertTitle","marginTop","marginBottom","fontWeight","lineHeight","text_normal","StyledAlertChildren","StyledBottomAction","getButtonPaddingBySizeAndKind","kind","size","selected","getIconButtonPaddingBySizeAndKind","position","zIndex","sizeStyle","hasIconOnly","typography","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","left","top","hover","btn_secondary_border","commonStyle","textTransform","focused","boxSizing","iconStyle","CustomButton","shouldForwardProp","includes","Button","forwardRef","props","ref","variant","icon","children","startIcon","Boolean","OutlinedButton","GhostButton","ContainedButton","className","restProps","MAPPED_ICON","success","info","warning","error","title","bottomAction","onClose","rest","iconMapping","slots","closeButton","onClick"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";var o={d:(e,n)=>{for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o:(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r:o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})}},e={};o.r(e),o.d(e,{default:()=>
|
|
1
|
+
(()=>{"use strict";var o={d:(e,n)=>{for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o:(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r:o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})}},e={};o.r(e),o.d(e,{default:()=>g});const n=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/styles"),i=require("@mui/material"),c=({kind:o,size:e,selected:n=!1})=>"small"===e?"outlined"!==o||n?"4px 8px":"3px 7px":"medium"===e?"outlined"!==o||n?"8px 12px":"7px 11px":"outlined"!==o||n?"10px 12px":"9px 11px",a=({kind:o,size:e,selected:n=!1})=>"small"===e?"outlined"!==o||n?"4px":"3px":"medium"===e?"outlined"!==o||n?"8px":"7px":"outlined"!==o||n?"12px":"11px",d=o=>({position:"relative",zIndex:0,backgroundColor:o}),l="8px",s=({size:o,kind:e,hasIconOnly:n,typography:t,selected:r=!1})=>({..."small"===o&&{...t.button2,padding:`${n?a({kind:e,size:o,selected:r}):c({kind:e,size:o,selected:r})}`,minWidth:"28px",height:"28px"},..."medium"===o&&{...t.button2,padding:`${n?a({kind:e,size:o,selected:r}):c({kind:e,size:o,selected:r})}`,minWidth:"36px",height:"36px"},..."large"===o&&{...t.button1,padding:`${n?a({kind:e,size:o,selected:r}):c({kind:e,size:o,selected:r})}`,minWidth:"44px",height:"44px"}}),p=({kind:o,color:e,lunit_token:n})=>({..."contained"===o&&"primary"===e&&{color:n.component.btn_primary_text_2,backgroundColor:n.component.btn_primary_bg,"&:hover":d(n.component.btn_primary_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_primary_text_2}},..."contained"===o&&"secondary"===e&&{color:n.component.btn_secondary_text,backgroundColor:n.component.btn_secondary_bg,"&:hover":d(n.component.btn_secondary_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_secondary_text}},..."contained"===o&&"error"===e&&{color:n.component.btn_primary_text_2,backgroundColor:n.component.btn_error_bg,"&:hover":d(n.component.btn_error_bg),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_primary_text_2}},..."ghost"===o&&"primary"===e&&{color:n.component.btn_primary_text_1,border:"none","&:hover":d("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_primary_text_1}},..."ghost"===o&&"secondary"===e&&{color:n.component.btn_secondary_text,border:"none","&:hover":d("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_secondary_text}},..."ghost"===o&&"error"===e&&{color:n.component.btn_error_text,"&:hover":d("none"),"&.Mui-disabled":{opacity:.38,border:"none",color:n.component.btn_error_text}},..."outlined"===o&&"primary"===e&&{color:n.component.btn_primary_text_1,border:`1px solid ${n.component.btn_primary_border}`,"&:hover":d("none"),"&:hover:before":{content:"''",position:"absolute",left:"-1px",top:"-1px",width:"calc(100% + 2px)",height:"calc(100% + 2px)",zIndex:-1,backgroundColor:n.core.hover,borderRadius:l},"&.Mui-disabled":{opacity:.38,color:n.component.btn_primary_text_1}},..."outlined"===o&&"secondary"===e&&{color:n.component.btn_secondary_text,border:`1px solid ${n.component.btn_secondary_border}`,"&:hover":d("none"),"&:hover:before":{content:"''",position:"absolute",left:"-1px",top:"-1px",width:"calc(100% + 2px)",height:"calc(100% + 2px)",zIndex:-1,backgroundColor:n.core.hover,borderRadius:l},"&.Mui-disabled":{opacity:.38,color:n.component.btn_secondary_text}}}),b=({lunit_token:o})=>({fontWeight:"500",borderRadius:l,textTransform:"initial","&.Mui-focusVisible":{"&::after":{position:"absolute",width:"calc(100% + 6px)",height:"calc(100% + 6px)",content:'""',borderRadius:"11px",border:`1px solid ${o.core.focused}`,boxSizing:"border-box"}},"&:hover:before":{content:"''",position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:-1,backgroundColor:o.core.hover,borderRadius:l}}),m=({size:o,hasIconOnly:e})=>({"& .MuiButton-startIcon":{margin:0,marginRight:e?"0px":"large"===o?"8px":"4px","*:nth-of-type(1)":{fontSize:"20px"}}}),x=(0,r.styled)(i.Button,{shouldForwardProp:o=>!["kind","hasIconOnly","variant"].includes(o)})((({theme:{typography:o,palette:{lunit_token:e}},kind:n,size:t,color:r,hasIconOnly:i})=>({...b({lunit_token:e}),...m({size:t,hasIconOnly:i}),...s({size:t,kind:n,hasIconOnly:i,typography:o}),...p({kind:n,color:r,lunit_token:e})}))),h=(0,t.forwardRef)(((o,e)=>{const{kind:t,variant:r,icon:i,children:c,startIcon:a}=o,d=Boolean((a||i)&&!c);return"outlined"===t||"outlined"===r?(0,n.jsx)(y,{...o,ref:e,hasIconOnly:d}):"ghost"===t||"text"===r||"ghost"===r?(0,n.jsx)(u,{...o,ref:e,hasIconOnly:d}):(0,n.jsx)(_,{...o,kind:"contained",variant:"contained",ref:e,hasIconOnly:d})})),u=(0,t.forwardRef)(((o,e)=>{const{size:t="small",icon:r,className:i,children:c,startIcon:a,hasIconOnly:d,variant:l,...s}=o;return(0,n.jsx)(x,{...s,ref:e,className:`ghost ${i||""}`,kind:"ghost",color:o.color??"primary",size:t,startIcon:a||r,hasIconOnly:d,children:!d&&(0,n.jsx)(n.Fragment,{children:c})})})),y=(0,t.forwardRef)(((o,e)=>{const{size:t="small",icon:r,className:i,children:c,startIcon:a,hasIconOnly:d,variant:l,...s}=o;return(0,n.jsx)(x,{...s,ref:e,className:`outlined ${i||""}`,kind:"outlined",color:o.color??"primary",size:t,startIcon:a||r,hasIconOnly:d,children:!d&&(0,n.jsx)(n.Fragment,{children:c})})})),_=(0,t.forwardRef)(((o,e)=>{const{size:t="small",icon:r,className:i,children:c,startIcon:a,hasIconOnly:d,variant:l,...s}=o;return(0,n.jsx)(x,{...s,ref:e,className:`${o.kind??"contained"} ${i||""}`,kind:o.kind??"contained",color:o.color??"primary",size:t,startIcon:a||r,hasIconOnly:d,children:!d&&(0,n.jsx)(n.Fragment,{children:c})})})),g=h;module.exports=e})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/Button/index.js","mappings":"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","sources":["webpack://@lunit/design-system/webpack/bootstrap","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 \"@mui/material/styles\"","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"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\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(\"@mui/material/styles\");","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.component.btn_secondary_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_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 width: \"20px\",\n height: \"20px\",\n padding: \"1px\",\n margin: 0,\n marginRight: hasIconOnly ? \"0px\" : size === \"large\" ? \"8px\" : \"4px\",\n\n \"*:nth-of-type(1)\": {\n fontSize: \"18px\",\n },\n },\n});\n\nexport const CustomButton = styled(MuiButton, {\n shouldForwardProp: (prop: string) => {\n return ![\"kind\", \"hasIconOnly\"].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 { ButtonType, ButtonProps } from \"./Button.types\";\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const {\n size = \"small\",\n color = \"primary\",\n icon,\n className,\n children,\n startIcon,\n ...buttonProps\n } = props;\n const hasIconOnly = Boolean((startIcon || icon) && !children);\n\n return (\n <>\n {/** props.kind 사용 이유: props.color 내 타입 좁히기 활용을 위해 사용 */}\n {props.kind === \"outlined\" ? (\n <CustomButton\n {...buttonProps}\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 <CustomButton\n {...buttonProps}\n ref={ref}\n className={`${props.kind ?? \"contained\"} ${\n className ? className : \"\"\n }`}\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 );\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\nexport default Button;\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","getButtonPaddingBySizeAndKind","kind","size","selected","getIconButtonPaddingBySizeAndKind","backgroundColor","position","zIndex","borderRadius","sizeStyle","hasIconOnly","typography","button2","padding","minWidth","height","button1","kindStyle","color","lunit_token","component","btn_primary_text_2","btn_primary_bg","opacity","border","btn_secondary_text","btn_secondary_bg","btn_error_bg","btn_primary_text_1","btn_error_text","btn_primary_border","content","left","top","width","core","hover","btn_secondary_border","commonStyle","fontWeight","textTransform","focused","boxSizing","iconStyle","margin","marginRight","fontSize","CustomButton","styled","shouldForwardProp","includes","theme","palette","forwardRef","props","ref","icon","className","children","startIcon","buttonProps","Boolean"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/Button/index.js","mappings":"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","sources":["webpack://@lunit/design-system/webpack/bootstrap","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 \"@mui/material/styles\"","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"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\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(\"@mui/material/styles\");","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.component.btn_secondary_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_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"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","getButtonPaddingBySizeAndKind","kind","size","selected","getIconButtonPaddingBySizeAndKind","backgroundColor","position","zIndex","borderRadius","sizeStyle","hasIconOnly","typography","button2","padding","minWidth","height","button1","kindStyle","color","lunit_token","component","btn_primary_text_2","btn_primary_bg","opacity","border","btn_secondary_text","btn_secondary_bg","btn_error_bg","btn_primary_text_1","btn_error_text","btn_primary_border","content","left","top","width","core","hover","btn_secondary_border","commonStyle","fontWeight","textTransform","focused","boxSizing","iconStyle","margin","marginRight","fontSize","CustomButton","styled","shouldForwardProp","includes","theme","palette","Button","forwardRef","props","ref","variant","icon","children","startIcon","Boolean","OutlinedButton","GhostButton","ContainedButton","className","restProps"],"sourceRoot":""}
|
|
@@ -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:()=>M});const o=require("react/jsx-runtime"),r=require("@mui/material"),n=require("@lunit/design-system-icons/Close16");var i=e.n(n);const l="primary",a="secondary",c="error",p="warning",s="success",u={"&.MuiChip-root":{height:"22px",width:"auto",minWidth:"22px",boxShadow:"none"},"&.Mui-disabled":{opacity:1},"& .MuiChip-label":{display:"flex",alignItems:"center",textAlign:"center",padding:0,marginInline:"8px"}},
|
|
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:()=>M});const o=require("react/jsx-runtime"),r=require("@mui/material"),n=require("@lunit/design-system-icons/Close16");var i=e.n(n);const l="primary",a="secondary",c="error",p="warning",s="success",u={"&.MuiChip-root":{height:"22px",width:"auto",minWidth:"22px",boxShadow:"none"},"&.Mui-disabled":{opacity:1},"& .MuiChip-label":{display:"flex",alignItems:"center",textAlign:"center",padding:0,marginInline:"8px"}},d=(e,t,o)=>{if("text"===e)switch(o){case l:return t.palette.lunit_token.component.chip_primary_text;case a: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 l:return t.palette.lunit_token.component.chip_primary_bg;case a: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})=>({"&.MuiChip-root":{position:"relative",left:0,right:0,zIndex:0},"&:hover":{backgroundColor:d("bg",e,t)},"&.MuiChip-root: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,...l}=e;return(0,o.jsx)(x,{...l,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:l,variant:a,...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:l,...a}=e;return(0,o.jsx)(m,{...a,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}})},M=e=>{const{kind:t,variant:r,onDelete:n,onClick:i,...l}=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,{...l})};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, onDelete, onClick, ...restProps } = props;\n if (kind === \"outlined\") 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, ...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 ...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 { color = \"primary\", thumbnail, onDelete, sx, ...restProps } = 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 \"&.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,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:()=>h});const o=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/TextField");var n=e.n(i);const l=require("@mui/material/styles"),a=({size:e,multiline:t,hasLeftIcon:o,hasRightIcon:r})=>t?(({size:e})=>{switch(e){case"small":return"4px 4px 4px 12px";case"medium":return"8px 4px 8px 16px";case"large":return"10px 4px 10px 16px"}})({size:e}):(({size:e,hasLeftIcon:t,hasRightIcon:o})=>{switch(e){case"small":return`4px ${o?"8px":"12px"} 4px ${t?"8px":"12px"}}`;case"medium":return`8px ${o?"12px":"16px"} 8px ${t?"12px":"16px"}}`;case"large":return`10px ${o?"12px":"16px"} 10px ${t?"12px":"16px"}}`}})({size:e,hasLeftIcon:o,hasRightIcon:r}),c=({lunit_token:e})=>({"& .MuiOutlinedInput-root":{borderRadius:"8px","& fieldset":{border:"none"},"&.Mui-error fieldset":{border:`1px solid ${e.component.textfield_border_error}`},"&.Mui-focused fieldset":{border:`1px solid ${e.core.focused}`},"&.Mui-error.Mui-focused fieldset":{border:`2px solid ${e.component.textfield_border_error}`},"&.Mui-disabled":{opacity:.38,"&:hover::before":{backgroundColor:e.component.textfield_bg}},"& input, textarea":{padding:0,textOverflow:"ellipsis","&::placeholder":{color:e.core.text_light,opacity:1,WebkitTextFillColor:e.core.text_light}},"& textarea":{height:"100% !important",overflowY:"scroll !important","&::-webkit-scrollbar":{width:"6px"},"&::-webkit-scrollbar-thumb":{borderRadius:"6px",backgroundColor:e.component.scrollbars_bg}},background:e.component.textfield_bg,color:e.core.text_normal,"&:hover":{position:"relative",zIndex:0,backgroundColor:e.component.textfield_bg},"&:hover::before":{content:'""',position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-1,backgroundColor:e.core.hover,borderRadius:"8px"},"&.Mui-focused":{"&:hover::before":{backgroundColor:e.component.textfield_bg}}},"& .MuiFormHelperText-root":{"&.Mui-disabled":{opacity:.38},"&.Mui-error":{color:e.core.text_error}}}),p=({lunit_token:e,textFieldSize:t,hasLeftIcon:o,hasRightIcon:r,typography:i,multiline:n})=>({..."small"===t&&{"& .MuiInputBase-root":{padding:a({size:t,hasLeftIcon:o,hasRightIcon:r,multiline:n}),"& input, textarea":{...i.body2_14_regular},"& input":{height:"20px"},"& textarea":{minHeight:"92px",paddingRight:"2px"}},"& .MuiFormHelperText-root":{...i.body2_14_regular,color:e.core.text_medium,margin:0,marginTop:"4px",paddingLeft:"4px","&.Mui-disabled":{color:e.core.text_medium,opacity:.38},"&.Mui-error":{color:e.core.text_error}}},..."medium"===t&&{"& .MuiInputBase-root":{padding:a({size:t,hasLeftIcon:o,hasRightIcon:r,multiline:n}),"& input, textarea":{...i.body2_14_regular},"& input":{height:"20px"},"& textarea":{minHeight:"84px",paddingRight:"6px"}},"& .MuiFormHelperText-root":{...i.body2_14_regular,color:e.core.text_medium,margin:0,marginTop:"4px",paddingLeft:"4px","&.Mui-disabled":{color:e.core.text_medium,opacity:.38},"&.Mui-error":{color:e.core.text_error}}},..."large"===t&&{"& .MuiInputBase-root":{padding:a({size:t,hasLeftIcon:o,hasRightIcon:r,multiline:n}),"& input, textarea":{...i.body1_16_regular},"& input":{height:"24px"},"& textarea":{minHeight:"80px",paddingRight:"6px"}},"& .MuiFormHelperText-root":{...i.body1_16_regular,color:e.core.text_medium,margin:0,marginTop:"4px",paddingLeft:"4px","&.Mui-disabled":{color:e.core.text_medium,opacity:.38},"&.Mui-error":{color:e.core.text_error}}}}),d=(0,l.styled)(n(),{shouldForwardProp:e=>!["leftIconSx","rightIconSx","leftIcon","rightIcon","textFieldSize","hasLeftIcon","hasRightIcon","onLeftIconClick","onRightIconClick"].includes(e)})((({theme:{typography:e,palette:{lunit_token:t}},multiline:o,textFieldSize:r,hasLeftIcon:i,hasRightIcon:n})=>({...c({lunit_token:t}),...p({lunit_token:t,textFieldSize:r,hasLeftIcon:i,hasRightIcon:n,typography:e,multiline:o})}))),x=(0,l.styled)("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"center",minWidth:"28px",minHeight:"28px",margin:"-4px 0","& svg":{width:"20px",height:"20px",color:e.palette.lunit_token.core.text_normal}}))),s=({sx:e,icon:t,onIconClick:r})=>(0,o.jsx)(x,{sx:{cursor:r?"pointer":"auto",...e},onClick:r,children:t}),u=(0,r.forwardRef)(((e,t)=>{const{size:r="small",leftIcon:i,rightIcon:n,leftIconSx:l,rightIconSx:a,onLeftIconClick:c,onRightIconClick:p,InputProps:x,...u}=e;return(0,o.jsx)(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 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:()=>h});const o=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/TextField");var n=e.n(i);const l=require("@mui/material/styles"),a=({size:e,multiline:t,hasLeftIcon:o,hasRightIcon:r})=>t?(({size:e})=>{switch(e){case"small":return"4px 4px 4px 12px";case"medium":return"8px 4px 8px 16px";case"large":return"10px 4px 10px 16px"}})({size:e}):(({size:e,hasLeftIcon:t,hasRightIcon:o})=>{switch(e){case"small":return`4px ${o?"8px":"12px"} 4px ${t?"8px":"12px"}}`;case"medium":return`8px ${o?"12px":"16px"} 8px ${t?"12px":"16px"}}`;case"large":return`10px ${o?"12px":"16px"} 10px ${t?"12px":"16px"}}`}})({size:e,hasLeftIcon:o,hasRightIcon:r}),c=({lunit_token:e})=>({"& .MuiOutlinedInput-root":{borderRadius:"8px","& fieldset":{border:"none"},"&.Mui-error fieldset":{border:`1px solid ${e.component.textfield_border_error}`},"&.Mui-focused fieldset":{border:`1px solid ${e.core.focused}`},"&.Mui-error.Mui-focused fieldset":{border:`2px solid ${e.component.textfield_border_error}`},"&.Mui-disabled":{opacity:.38,"&:hover::before":{backgroundColor:e.component.textfield_bg}},"& input, textarea":{padding:0,textOverflow:"ellipsis","&::placeholder":{color:e.core.text_light,opacity:1,WebkitTextFillColor:e.core.text_light}},"& textarea":{height:"100% !important",overflowY:"scroll !important","&::-webkit-scrollbar":{width:"6px"},"&::-webkit-scrollbar-thumb":{borderRadius:"6px",backgroundColor:e.component.scrollbars_bg}},background:e.component.textfield_bg,color:e.core.text_normal,"&:hover":{position:"relative",zIndex:0,backgroundColor:e.component.textfield_bg},"&:hover::before":{content:'""',position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-1,backgroundColor:e.core.hover,borderRadius:"8px"},"&.Mui-focused":{"&:hover::before":{backgroundColor:e.component.textfield_bg}}},"& .MuiFormHelperText-root":{"&.Mui-disabled":{opacity:.38},"&.Mui-error":{color:e.core.text_error}}}),p=({lunit_token:e,textFieldSize:t,hasLeftIcon:o,hasRightIcon:r,typography:i,multiline:n})=>({..."small"===t&&{"& .MuiInputBase-root":{padding:a({size:t,hasLeftIcon:o,hasRightIcon:r,multiline:n}),"& input, textarea":{...i.body2_14_regular},"& input":{height:"20px"},"& textarea":{minHeight:"92px",paddingRight:"2px"}},"& .MuiFormHelperText-root":{...i.body2_14_regular,color:e.core.text_medium,margin:0,marginTop:"4px",paddingLeft:"4px","&.Mui-disabled":{color:e.core.text_medium,opacity:.38},"&.Mui-error":{color:e.core.text_error}}},..."medium"===t&&{"& .MuiInputBase-root":{padding:a({size:t,hasLeftIcon:o,hasRightIcon:r,multiline:n}),"& input, textarea":{...i.body2_14_regular},"& input":{height:"20px"},"& textarea":{minHeight:"84px",paddingRight:"6px"}},"& .MuiFormHelperText-root":{...i.body2_14_regular,color:e.core.text_medium,margin:0,marginTop:"4px",paddingLeft:"4px","&.Mui-disabled":{color:e.core.text_medium,opacity:.38},"&.Mui-error":{color:e.core.text_error}}},..."large"===t&&{"& .MuiInputBase-root":{padding:a({size:t,hasLeftIcon:o,hasRightIcon:r,multiline:n}),"& input, textarea":{...i.body1_16_regular},"& input":{height:"24px"},"& textarea":{minHeight:"80px",paddingRight:"6px"}},"& .MuiFormHelperText-root":{...i.body1_16_regular,color:e.core.text_medium,margin:0,marginTop:"4px",paddingLeft:"4px","&.Mui-disabled":{color:e.core.text_medium,opacity:.38},"&.Mui-error":{color:e.core.text_error}}}}),d=(0,l.styled)(n(),{shouldForwardProp:e=>!["leftIconSx","rightIconSx","leftIcon","rightIcon","textFieldSize","hasLeftIcon","hasRightIcon","onLeftIconClick","onRightIconClick"].includes(e)})((({theme:{typography:e,palette:{lunit_token:t}},multiline:o,textFieldSize:r,hasLeftIcon:i,hasRightIcon:n})=>({...c({lunit_token:t}),...p({lunit_token:t,textFieldSize:r,hasLeftIcon:i,hasRightIcon:n,typography:e,multiline:o})}))),x=(0,l.styled)("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"center",minWidth:"28px",minHeight:"28px",margin:"-4px 0","& svg":{width:"20px",height:"20px",color:e.palette.lunit_token.core.text_normal}}))),s=({sx:e,icon:t,onIconClick:r})=>(0,o.jsx)(x,{sx:{cursor:r?"pointer":"auto",...e},onClick:r,children:t}),u=(0,r.forwardRef)(((e,t)=>{const{size:r="small",leftIcon:i,rightIcon:n,leftIconSx:l,rightIconSx:a,onLeftIconClick:c,onRightIconClick:p,InputProps:x,...u}=e;return(0,o.jsx)(d,{variant:"outlined",...u,ref:t,textFieldSize:r,hasLeftIcon:Boolean(i),hasRightIcon:Boolean(n),InputProps:{startAdornment:i&&(0,o.jsx)(s,{sx:{marginRight:"4px",...l},icon:i,onIconClick:c}),endAdornment:n&&(0,o.jsx)(s,{sx:{marginLeft:"4px",...a},icon:n,onIconClick:p}),...x}})})),g=(0,r.forwardRef)((({size:e="small",...t},r)=>(0,o.jsx)(d,{variant:"outlined",...t,ref:r,textFieldSize:e,multiline:!0}))),h=(0,r.forwardRef)(((e,t)=>{const{rows:r,size:i,multiline:n=!1,variant:l,...a}=e;return n?(0,o.jsx)(g,{...a,ref:t,maxRows:1/0,size:i,rows:r}):(0,o.jsx)(u,{...a,ref:t,size:i})}));module.exports=t})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|