@ap-gen/ui 1.0.5 → 1.0.6
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/components/date-picker/CalendarRangeSquare.d.ts +10 -0
- package/dist/components/date-picker/index.d.ts +14 -0
- package/dist/components/date-picker/input.d.ts +0 -0
- package/dist/components/date-picker/month.d.ts +14 -0
- package/dist/components/date-picker/single.d.ts +8 -0
- package/dist/components/date-picker/year.d.ts +3 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/hooks/useCalendar.d.ts +3 -0
- package/dist/index.js +201 -49
- package/dist/index.js.map +1 -1
- package/dist/provider/CalendarProvider.d.ts +1 -0
- package/esm/index.mjs +201 -51
- package/esm/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -49,7 +49,7 @@ const getTrueDarkTheme=brand=>{const theme$1=brand==="afin"?theme.afin:theme.sae
|
|
|
49
49
|
|
|
50
50
|
const ColorThemeContext=/*#__PURE__*/React.createContext({theme:"light",onChange:()=>{},brand:"afin"});const ColorThemeProvider=({children})=>{const{theme,onChange,brand}=React.useContext(ColorThemeContext);const colors=React.useMemo(()=>{return applyThemeColor(theme,brand)},[theme,brand]);return /*#__PURE__*/jsxRuntime.jsx(react.ThemeProvider,{theme:{colors:colors},children:children})};
|
|
51
51
|
|
|
52
|
-
const useCalendar=()=>{const today=new Date;const[month,setMonth]=React.useState(today.getMonth()+1);const[year,setYear]=React.useState(new Date().getFullYear());const[monthData,setMonthData]=React.useState(getMonthDays());const[yearData,setYearData]=React.useState(getYearMonths());const[weekData,setWeekData]=React.useState(getWeekDays());const prevMonth=()=>{if(month===1){setYear(year-1);setMonth(12);}else {setMonth(month-1);}};const nextMonth=()=>{if(month===12){setYear(year+1);setMonth(1);}else {setMonth(month+1);}};React.useEffect(()=>{setMonthData(getMonthDays(month));setYearData(getYearMonths());},[month,year]);function getMonthDays(targetMonth){const weeks=[];const firstDay=new Date(
|
|
52
|
+
const padStart=(str,length,pad)=>{return str.length>=length?str:padStart(pad+str,length,pad)};const useCalendar=()=>{const today=new Date;const[month,setMonth]=React.useState(today.getMonth()+1);const[year,setYear]=React.useState(new Date().getFullYear());const[monthData,setMonthData]=React.useState(getMonthDays());const[yearData,setYearData]=React.useState(getYearMonths());const[weekData,setWeekData]=React.useState(getWeekDays());const[nextMonthData,setNextMonthData]=React.useState(getMonthDays(month+1));const prevMonth=()=>{if(month===1){setYear(year-1);setMonth(12);}else {setMonth(month-1);}};const nextMonth=()=>{if(month===12){setYear(year+1);setMonth(1);}else {setMonth(month+1);}};React.useEffect(()=>{setMonthData(getMonthDays(month));setYearData(getYearMonths());setNextMonthData(getMonthDays(month===12?1:month+1));},[month,year]);function getMonthDays(targetMonth){const weeks=[];const targetYear=targetMonth===1&&month===12?year+1:year;const firstDay=new Date(targetYear,targetMonth?targetMonth-1:month-1,1);let start=1-firstDay.getDay();let end=7-firstDay.getDay();while(weeks.length<6){const week=[];for(let day=start;day<=end;day++){const currentDate=new Date(targetYear,targetMonth?targetMonth-1:month-1,day);const dayObj={isCurrentMonth:currentDate.getMonth()===(targetMonth?targetMonth-1:month-1),isToday:currentDate.toDateString()===new Date().toDateString(),day:currentDate.getDate(),week:weeks.length,date:currentDate.getFullYear()+"-"+padStart(currentDate.getMonth()+1+"",2,"0")+"-"+padStart(currentDate.getDate()+"",2,"0")};week.push(dayObj);}weeks.push(week);start=end+1;end=end+7;}return weeks}function getYearMonths(){const months=[];for(let i=1;i<=12;i++){months.push(getMonthDays(i));}return months}function getWeekDays(){const days=[];for(let i=1;i<=7;i++){const dayObj={isCurrentMonth:false,isToday:false,day:i,week:0,date:""};days.push(dayObj);}return days}return {month,setMonth,year,setYear,prevMonth,nextMonth,getMonthDays,getYearMonths,yearData,monthData,setMonthData,weekData,setWeekData,nextMonthData,setNextMonthData}};
|
|
53
53
|
|
|
54
54
|
const CalendarContext=/*#__PURE__*/React.createContext(null);const CalendarProvider=({children})=>{const calendar=useCalendar();return /*#__PURE__*/jsxRuntime.jsx(CalendarContext.Provider,{value:calendar,children:children})};
|
|
55
55
|
|
|
@@ -1485,7 +1485,7 @@ var v$2="4.8.0";var meta$1={g:"LottieFiles AE 2.0.4",a:"",k:"",d:"",tc:""};var f
|
|
|
1485
1485
|
|
|
1486
1486
|
var v$1="4.8.0";var meta={g:"LottieFiles AE 2.0.4",a:"",k:"",d:"",tc:""};var fr=30;var ip=0;var op=60;var w$1=100;var h$1=100;var nm="loading-white-spot";var ddd=0;var assets=[];var layers=[{ddd:0,ind:1,ty:4,nm:"blue Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:1,k:[{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:0,s:[0]},{t:60.060546875,s:[360]}],ix:10},p:{a:0,k:[50,50,0],ix:2},a:{a:0,k:[31,31,0],ix:1},s:{a:0,k:[147,147,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[0,-12.979],[12.979,0],[0,12.979],[-12.979,0]],o:[[0,12.979],[-12.979,0],[0,-12.979],[12.979,0]],v:[[23.5,0],[0,23.5],[-23.5,0],[0,-23.5]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false},{ty:"st",c:{a:0,k:[.1922,.5098,.9647,1],ix:3},o:{a:0,k:100,ix:4},w:{a:0,k:8,ix:5},lc:2,lj:1,ml:10,bm:0,nm:"Stroke 1",mn:"ADBE Vector Graphic - Stroke",hd:false},{ty:"tr",p:{a:0,k:[31,31],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false},{ty:"tm",s:{a:1,k:[{i:{x:[.799],y:[1]},o:{x:[.602],y:[0]},t:20.021,s:[0]},{t:60.060546875,s:[100]}],ix:1},e:{a:1,k:[{i:{x:[.414],y:[1]},o:{x:[.302],y:[0]},t:0,s:[.1]},{t:50.0498046875,s:[100]}],ix:2},o:{a:0,k:-90,ix:3},m:1,ix:2,nm:"Trim Paths 1",mn:"ADBE Vector Filter - Trim",hd:false}],ip:0,op:60.0600600600601,st:0,bm:0},{ddd:0,ind:2,ty:4,nm:"grey Outlines",sr:1,ks:{o:{a:0,k:30,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[50,50,0],ix:2},a:{a:0,k:[31,31,0],ix:1},s:{a:0,k:[147,147,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[0,-12.979],[12.979,0],[0,12.979],[-12.979,0]],o:[[0,12.979],[-12.979,0],[0,-12.979],[12.979,0]],v:[[23.5,0],[0,23.5],[-23.5,0],[0,-23.5]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false},{ty:"st",c:{a:0,k:[.1922,.5098,.9647,1],ix:3},o:{a:0,k:100,ix:4},w:{a:0,k:8,ix:5},lc:1,lj:1,ml:10,bm:0,nm:"Stroke 1",mn:"ADBE Vector Graphic - Stroke",hd:false},{ty:"tr",p:{a:0,k:[31,31],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false}],ip:0,op:60.0600600600601,st:0,bm:0}];var markers=[];var loadingCircleBlue = {v:v$1,meta:meta,fr:fr,ip:ip,op:op,w:w$1,h:h$1,nm:nm,ddd:ddd,assets:assets,layers:layers,markers:markers};
|
|
1487
1487
|
|
|
1488
|
-
const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.background.semantic.coreTranslucent",neutral:"color.background.surface.standard",neutralOutline:"transparent",warning:"color.background.semantic.status.warning",warningLight:"color.background.semantic.status.warningTranslucent"};const contents$1={core:"color.foreground.surface.static",coreLight:"color.foreground.semantic.core",neutral:"color.foreground.neutral.primary",neutralOutline:"color.foreground.neutral.primary",warning:"color.foreground.surface.static",warningLight:"color.foreground.semantic.status.warning"};const heights$1={large:40,medium:36,small:28};const paddings={large:"0px 8px",medium:"0px 8px",small:"0px 6px"};const gaps$1={large:"2px",medium:"2px",small:"2px"};const borderRadiuses={large:"8px",medium:"8px",small:"8px"};const iconSizes$1={large:24,medium:20,small:16};const textHorizontalPaddingVariations$1={large:"4px",medium:"4px",small:"2px"};const textVariants$4={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function Button$1({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){react.useTheme();const buttonRef=React.useRef(null);const[width,setWidth]=React__default["default"].useState(null);React.useEffect(()=>{if(buttonRef.current&&!width){setWidth(buttonRef.current.clientWidth);}},[]);return /*#__PURE__*/jsxRuntime.jsx(Container$
|
|
1488
|
+
const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.background.semantic.coreTranslucent",neutral:"color.background.surface.standard",neutralOutline:"transparent",warning:"color.background.semantic.status.warning",warningLight:"color.background.semantic.status.warningTranslucent"};const contents$1={core:"color.foreground.surface.static",coreLight:"color.foreground.semantic.core",neutral:"color.foreground.neutral.primary",neutralOutline:"color.foreground.neutral.primary",warning:"color.foreground.surface.static",warningLight:"color.foreground.semantic.status.warning"};const heights$1={large:40,medium:36,small:28};const paddings={large:"0px 8px",medium:"0px 8px",small:"0px 6px"};const gaps$1={large:"2px",medium:"2px",small:"2px"};const borderRadiuses={large:"8px",medium:"8px",small:"8px"};const iconSizes$1={large:24,medium:20,small:16};const textHorizontalPaddingVariations$1={large:"4px",medium:"4px",small:"2px"};const textVariants$4={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function Button$1({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){react.useTheme();const buttonRef=React.useRef(null);const[width,setWidth]=React__default["default"].useState(null);React.useEffect(()=>{if(buttonRef.current&&!width){setWidth(buttonRef.current.clientWidth);}},[]);return /*#__PURE__*/jsxRuntime.jsx(Container$t,{ref:buttonRef,"data-variant":variant,"data-size":size,"data-fullwidth":fullWidth,onClick:disabled||loading?undefined:onClick,style:{cursor:disabled||loading?"not-allowed":"pointer",opacity:disabled||loading?.3:1,width:loading?width||"auto":"auto"},whileHover:disabled||loading?{opacity:.3}:{opacity:.8},whileTap:disabled||loading?{opacity:.3}:{opacity:.6},...props,children:loading?/*#__PURE__*/jsxRuntime.jsxs(LoadingWrapper,{children:[/*#__PURE__*/jsxRuntime.jsx(Lottie,{json:JSON.stringify(variant==="neutral"||variant==="neutralOutline"?loadingCircleBlack:variant==="coreLight"?loadingCircleBlue:variant==="warningLight"?loadingCircleRed:loadingCircle),loop:true,height:iconSizes$1[size],width:iconSizes$1[size]}),/*#__PURE__*/jsxRuntime.jsxs("div",{style:{opacity:0,visibility:"hidden",display:"flex",alignItems:"center",width:"100%",gap:gaps$1[size]},children:[iconLeading&&/*#__PURE__*/jsxRuntime.jsx("div",{style:{width:iconSizes$1[size],height:iconSizes$1[size]}}),children&&/*#__PURE__*/jsxRuntime.jsx(Text,{style:{padding:`0px ${textHorizontalPaddingVariations$1[size]}`},variant:textVariants$4[size],color:contents$1[variant],children:children}),iconTrailing&&/*#__PURE__*/jsxRuntime.jsx("div",{style:{width:iconSizes$1[size],height:iconSizes$1[size]}})]})]}):/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[iconLeading&&/*#__PURE__*/jsxRuntime.jsx(Icon,{name:iconLeading,size:iconSizes$1[size],fill:iconAutoFill?contents$1[variant]:undefined,stroke:iconAutoStroke?contents$1[variant]:undefined}),children&&/*#__PURE__*/jsxRuntime.jsx(Text,{style:{padding:`0px ${textHorizontalPaddingVariations$1[size]}`},variant:textVariants$4[size],color:contents$1[variant],children:children}),iconTrailing&&/*#__PURE__*/jsxRuntime.jsx(Icon,{name:iconTrailing,size:iconSizes$1[size],fill:iconAutoFill?contents$1[variant]:undefined,stroke:iconAutoStroke?contents$1[variant]:undefined})]})})}const LoadingWrapper=styled__default["default"].div`
|
|
1489
1489
|
position: relative;
|
|
1490
1490
|
display: flex;
|
|
1491
1491
|
align-items: center;
|
|
@@ -1495,7 +1495,7 @@ const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.backgr
|
|
|
1495
1495
|
> :first-of-type {
|
|
1496
1496
|
position: absolute;
|
|
1497
1497
|
}
|
|
1498
|
-
`;const Container$
|
|
1498
|
+
`;const Container$t=styled__default["default"](MotionPressable)`
|
|
1499
1499
|
display: inline-flex;
|
|
1500
1500
|
justify-content: center;
|
|
1501
1501
|
align-items: center;
|
|
@@ -1519,10 +1519,10 @@ const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.backgr
|
|
|
1519
1519
|
}
|
|
1520
1520
|
`;
|
|
1521
1521
|
|
|
1522
|
-
function Date$2({selected,disabled,today,modifier,dayoff,date,body}){return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
1522
|
+
function Date$2({selected,disabled,today,modifier,dayoff,date,body}){return /*#__PURE__*/jsxRuntime.jsxs(Container$s,{selected:selected,disabled:disabled,children:[/*#__PURE__*/jsxRuntime.jsxs(DateArea$1,{children:[/*#__PURE__*/jsxRuntime.jsx(DateItem,{today:today,dayoff:dayoff,children:/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyM",color:dayoff&&!today?"color.foreground.semantic.status.warning":dayoff&&today||today?"color.foreground.surface.static":"color.foreground.neutral.primary",children:date})}),modifier&&/*#__PURE__*/jsxRuntime.jsx(Label,{variant:"BodyS",color:dayoff?"color.foreground.semantic.status.warning":"color.foreground.neutral.secondary",children:modifier})]}),body&&/*#__PURE__*/jsxRuntime.jsx(Body,{children:body})]})}const Label=styled__default["default"](Text)`
|
|
1523
1523
|
flex: 1 0 0;
|
|
1524
1524
|
height: 18px;
|
|
1525
|
-
`;const Container$
|
|
1525
|
+
`;const Container$s=styled__default["default"].div`
|
|
1526
1526
|
box-sizing: border-box;
|
|
1527
1527
|
display: flex;
|
|
1528
1528
|
flex: 1;
|
|
@@ -1558,13 +1558,13 @@ function Date$2({selected,disabled,today,modifier,dayoff,date,body}){return /*#_
|
|
|
1558
1558
|
align-self: stretch;
|
|
1559
1559
|
`;
|
|
1560
1560
|
|
|
1561
|
-
function Month(){const{monthData}=React.useContext(CalendarContext);const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsxRuntime.jsxs(CalendarArea,{children:[/*#__PURE__*/jsxRuntime.jsx(DowArea,{children:days.map((dow,index)=>/*#__PURE__*/jsxRuntime.jsx(Dow$
|
|
1561
|
+
function Month$1(){const{monthData}=React.useContext(CalendarContext);const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsxRuntime.jsxs(CalendarArea$1,{children:[/*#__PURE__*/jsxRuntime.jsx(DowArea$1,{children:days.map((dow,index)=>/*#__PURE__*/jsxRuntime.jsx(Dow$2,{children:/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyM",color:index===0?"color.foreground.semantic.status.warning":"color.foreground.neutral.secondary",children:dow})},index))}),/*#__PURE__*/jsxRuntime.jsx(CalendarColumn$1,{children:monthData.map((week,index)=>{return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment,{children:[/*#__PURE__*/jsxRuntime.jsx(CalendarRow$1,{children:week.map((day,index)=>/*#__PURE__*/jsxRuntime.jsx(Date$2,{disabled:!day.isCurrentMonth,dayoff:index===0,today:day.isToday,date:day.day},index))},index),index!==monthData.length-1&&/*#__PURE__*/jsxRuntime.jsx(CalendarDivider,{})]},index)})})]})}const CalendarRow$1=styled__default["default"].div`
|
|
1562
1562
|
display: flex;
|
|
1563
1563
|
align-items: flex-start;
|
|
1564
1564
|
gap: 8px;
|
|
1565
1565
|
flex: 1 0 0;
|
|
1566
1566
|
align-self: stretch;
|
|
1567
|
-
`;const CalendarColumn=styled__default["default"].div`
|
|
1567
|
+
`;const CalendarColumn$1=styled__default["default"].div`
|
|
1568
1568
|
display: flex;
|
|
1569
1569
|
flex-direction: column;
|
|
1570
1570
|
justify-content: center;
|
|
@@ -1576,19 +1576,19 @@ function Month(){const{monthData}=React.useContext(CalendarContext);const days=[
|
|
|
1576
1576
|
height: 1px;
|
|
1577
1577
|
align-self: stretch;
|
|
1578
1578
|
background-color: ${({theme})=>theme.colors.color.stroke.separator.standard};
|
|
1579
|
-
`;const DowArea=styled__default["default"].div`
|
|
1579
|
+
`;const DowArea$1=styled__default["default"].div`
|
|
1580
1580
|
display: flex;
|
|
1581
1581
|
align-items: flex-start;
|
|
1582
1582
|
gap: 8px;
|
|
1583
1583
|
align-self: stretch;
|
|
1584
|
-
`;const CalendarArea=styled__default["default"].div`
|
|
1584
|
+
`;const CalendarArea$1=styled__default["default"].div`
|
|
1585
1585
|
display: flex;
|
|
1586
1586
|
height: 842px;
|
|
1587
1587
|
flex-direction: column;
|
|
1588
1588
|
align-items: flex-start;
|
|
1589
1589
|
gap: 12px;
|
|
1590
1590
|
align-self: stretch;
|
|
1591
|
-
`;const Dow$
|
|
1591
|
+
`;const Dow$2=styled__default["default"].div`
|
|
1592
1592
|
display: flex;
|
|
1593
1593
|
height: 28px;
|
|
1594
1594
|
flex-direction: column;
|
|
@@ -1597,7 +1597,7 @@ function Month(){const{monthData}=React.useContext(CalendarContext);const days=[
|
|
|
1597
1597
|
flex: 1 0 0;
|
|
1598
1598
|
`;
|
|
1599
1599
|
|
|
1600
|
-
function Year({onChange}){const{yearData}=React.useContext(CalendarContext);const months=["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"];const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsxRuntime.jsx(Container$
|
|
1600
|
+
function Year$1({onChange}){const{yearData}=React.useContext(CalendarContext);const months=["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"];const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsxRuntime.jsx(Container$r,{children:yearData.map((month,index)=>{return /*#__PURE__*/jsxRuntime.jsxs(MonthContainer$1,{onClick:()=>{onChange(index+1);},children:[/*#__PURE__*/jsxRuntime.jsx(MonthArea,{children:/*#__PURE__*/jsxRuntime.jsx(Text,{color:"color.foreground.neutral.secondary",variant:"BodyM_Bold",children:months[index]})}),/*#__PURE__*/jsxRuntime.jsx(WeekArea,{children:days.map((day,index)=>{return /*#__PURE__*/jsxRuntime.jsx(Dow$1,{children:/*#__PURE__*/jsxRuntime.jsx(Text,{color:"color.foreground.neutral.secondary",variant:"Caption",children:day})},index)})}),/*#__PURE__*/jsxRuntime.jsx(DateArea,{children:month.map((week,index)=>{return /*#__PURE__*/jsxRuntime.jsx(Week,{children:week.map((day,index)=>{return /*#__PURE__*/jsxRuntime.jsx(Date$1,{disabled:!day.isCurrentMonth,children:/*#__PURE__*/jsxRuntime.jsx(Text,{color:"color.foreground.neutral.primary",variant:"BodyS",children:day.day})},index)})},index)})})]},index)})})}const Container$r=styled__default["default"].div`
|
|
1601
1601
|
display: flex;
|
|
1602
1602
|
align-items: flex-start;
|
|
1603
1603
|
align-content: flex-start;
|
|
@@ -1605,7 +1605,7 @@ function Year({onChange}){const{yearData}=React.useContext(CalendarContext);cons
|
|
|
1605
1605
|
flex: 1 0 0;
|
|
1606
1606
|
align-self: stretch;
|
|
1607
1607
|
flex-wrap: wrap;
|
|
1608
|
-
`;const MonthContainer=styled__default["default"](MotionPressable)`
|
|
1608
|
+
`;const MonthContainer$1=styled__default["default"](MotionPressable)`
|
|
1609
1609
|
display: flex;
|
|
1610
1610
|
min-width: 200px;
|
|
1611
1611
|
padding: 12px;
|
|
@@ -1613,7 +1613,7 @@ function Year({onChange}){const{yearData}=React.useContext(CalendarContext);cons
|
|
|
1613
1613
|
align-items: flex-start;
|
|
1614
1614
|
gap: 12px;
|
|
1615
1615
|
flex: 1 0 0;
|
|
1616
|
-
`;const Dow=styled__default["default"].div`
|
|
1616
|
+
`;const Dow$1=styled__default["default"].div`
|
|
1617
1617
|
display: flex;
|
|
1618
1618
|
flex-direction: column;
|
|
1619
1619
|
justify-content: center;
|
|
@@ -1652,7 +1652,7 @@ function Year({onChange}){const{yearData}=React.useContext(CalendarContext);cons
|
|
|
1652
1652
|
align-items: center;
|
|
1653
1653
|
`;
|
|
1654
1654
|
|
|
1655
|
-
function Calendar(){const{month,setMonth,year,prevMonth,nextMonth,monthData}=React.useContext(CalendarContext);const[isMonth,setIsMonth]=React.useState(true);return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
1655
|
+
function Calendar(){const{month,setMonth,year,prevMonth,nextMonth,monthData}=React.useContext(CalendarContext);const[isMonth,setIsMonth]=React.useState(true);return /*#__PURE__*/jsxRuntime.jsxs(Container$q,{children:[/*#__PURE__*/jsxRuntime.jsxs(HeaderArea$1,{children:[/*#__PURE__*/jsxRuntime.jsx(MotionPressable,{onClick:()=>{setIsMonth(!isMonth);},children:/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:isMonth?`${year}년 ${month}월`:`${year}년`})}),isMonth&&/*#__PURE__*/jsxRuntime.jsxs(MonthControl,{children:[/*#__PURE__*/jsxRuntime.jsx(MonthButton,{onClick:prevMonth,children:/*#__PURE__*/jsxRuntime.jsx(Icon,{size:12,fill:"color.foreground.neutral.secondary",name:"arrowBackIos"})}),/*#__PURE__*/jsxRuntime.jsx(MonthButton,{onClick:nextMonth,children:/*#__PURE__*/jsxRuntime.jsx(Icon,{size:12,fill:"color.foreground.neutral.secondary",name:"arrowForwardIos"})})]})]}),isMonth?/*#__PURE__*/jsxRuntime.jsx(Month$1,{}):/*#__PURE__*/jsxRuntime.jsx(Year$1,{onChange:month=>{setMonth(month);setIsMonth(true);console.log(monthData);}})]})}const Container$q=styled__default["default"].div`
|
|
1656
1656
|
display: flex;
|
|
1657
1657
|
flex:1 0 0;
|
|
1658
1658
|
height: 890px;
|
|
@@ -1679,14 +1679,14 @@ function Calendar(){const{month,setMonth,year,prevMonth,nextMonth,monthData}=Rea
|
|
|
1679
1679
|
background: ${({theme})=>theme.colors.color.background.surface.standard};
|
|
1680
1680
|
`;
|
|
1681
1681
|
|
|
1682
|
-
function Card({collapsible,wide,children,containerStyle,surface,headline}){const[isCollapsed,setIsCollapsed]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
1682
|
+
function Card({collapsible,wide,children,containerStyle,surface,headline}){const[isCollapsed,setIsCollapsed]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$p,{style:containerStyle,wide:wide,collapsible:collapsible,collapsed:isCollapsed,surface:surface,children:[collapsible&&/*#__PURE__*/jsxRuntime.jsxs(Top,{children:[/*#__PURE__*/jsxRuntime.jsx(Text,{style:{flex:1},variant:"BodyM",color:"color.foreground.neutral.primary",children:headline}),/*#__PURE__*/jsxRuntime.jsx(MotionPressable,{onClick:()=>setIsCollapsed(!isCollapsed),style:{rotate:isCollapsed?"180deg":"0deg",display:"flex",alignItems:"center",justifyContent:"center",padding:0,margin:0},children:/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"expandMore",size:20,fill:"color.foreground.neutral.tertiary"})})]}),collapsible?!isCollapsed?children:null:children]})}const Top=styled__default["default"].div`
|
|
1683
1683
|
display: flex;
|
|
1684
1684
|
padding: 8px;
|
|
1685
1685
|
justify-content: flex-end;
|
|
1686
1686
|
align-items: center;
|
|
1687
1687
|
gap: 8px;
|
|
1688
1688
|
align-self: stretch;
|
|
1689
|
-
`;const Container$
|
|
1689
|
+
`;const Container$p=styled__default["default"].div`
|
|
1690
1690
|
display: flex;
|
|
1691
1691
|
width: 100%;
|
|
1692
1692
|
padding: ${({wide,collapsible,collapsed})=>{if(collapsible){if(collapsed){return wide?"4px 12px":"4px 8px"}return wide?"4px 12px 8px 12px":"4px 8px 8px 8px"}return wide?"12px":"8px"}};
|
|
@@ -1698,7 +1698,7 @@ function Card({collapsible,wide,children,containerStyle,surface,headline}){const
|
|
|
1698
1698
|
background-color: ${({surface,theme})=>surface?theme.colors.color.background.surface.standard:"transparent"};
|
|
1699
1699
|
`;
|
|
1700
1700
|
|
|
1701
|
-
function Item$3({active,label,subLabel,onClick,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onClick(!active);return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
1701
|
+
function Item$3({active,label,subLabel,onClick,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onClick(!active);return /*#__PURE__*/jsxRuntime.jsxs(Container$o,{style:{opacity:disabled?.4:1},initial:"off",animate:active?"on":"off","data-isOn":active,onClick:toggleSwitch,disabled:disabled,variants:{on:{boxShadow:`inset 0 0 0 0.6px ${theme.colors.color.stroke.semantic.core}`,backgroundColor:theme.colors.color.background.semantic.coreTranslucent},off:{boxShadow:`inset 0 0 0 1px ${theme.colors.color.stroke.outline.standard}`,backgroundColor:"transparent"}},children:[subLabel&&/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"Caption",color:"color.foreground.neutral.secondary",children:subLabel}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyL",color:"color.foreground.neutral.primary",children:label})]})}const Container$o=styled__default["default"](MotionPressable)`
|
|
1702
1702
|
display: flex;
|
|
1703
1703
|
width: 100%;
|
|
1704
1704
|
flex: 1;
|
|
@@ -1718,7 +1718,7 @@ const CellPickerContainer=styled__default["default"].div`
|
|
|
1718
1718
|
gap: 6px;
|
|
1719
1719
|
`;function CellPicker({items,columns=2,minCellWidth=120,className="",onOptionChange}){const handleChange=id=>value=>{onOptionChange===null||onOptionChange===void 0?void 0:onOptionChange(id,value);};return /*#__PURE__*/jsxRuntime.jsx(CellPickerContainer,{className:`grid auto-rows-auto ${className}`,style:{gridTemplateColumns:`repeat(${columns}, minmax(${minCellWidth}px, 1fr))`},children:items.map(option=>/*#__PURE__*/jsxRuntime.jsx(Item$3,{active:option.active,label:option.label,subLabel:option.subLabel,disabled:option.disabled,onClick:handleChange(option.id)},option.id))})}
|
|
1720
1720
|
|
|
1721
|
-
function Checkbox({type="check",value,onChange,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsxRuntime.jsx(Container$
|
|
1721
|
+
function Checkbox({type="check",value,onChange,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsxRuntime.jsx(Container$n,{style:{opacity:disabled?.4:1},"data-isOn":value,onClick:toggleSwitch,variants:{on:{backgroundColor:theme.colors.color.foreground.semantic.core,borderColor:theme.colors.color.foreground.semantic.core},off:{backgroundColor:"transparent",borderColor:theme.colors.color.stroke.outline.intense}},initial:value?"on":"off",animate:value?"on":"off",children:value&&/*#__PURE__*/jsxRuntime.jsx(Icon,{name:type==="check"?"check":"remove",fill:"color.stroke.surface.static"})})}const Container$n=styled__default["default"](framerMotion.motion.div)`
|
|
1722
1722
|
display: flex;
|
|
1723
1723
|
justify-content: center;
|
|
1724
1724
|
align-items: center;
|
|
@@ -1774,7 +1774,7 @@ function Default({align,leadingNumber,headline,description,leadingArea,subHeadli
|
|
|
1774
1774
|
gap: 2px;
|
|
1775
1775
|
`;
|
|
1776
1776
|
|
|
1777
|
-
function Radio({value,onChange,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsxRuntime.jsx(Container$
|
|
1777
|
+
function Radio({value,onChange,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsxRuntime.jsx(Container$m,{style:{opacity:disabled?.4:1},"data-isOn":value,onClick:toggleSwitch,variants:{on:{boxShadow:`inset 0px 0px 0px 6px ${theme.colors.color.foreground.semantic.core}`,backgroundColor:theme.colors.color.foreground.surface.static},off:{backgroundColor:"transparent",boxShadow:`inset 0px 0px 0px 2px ${theme.colors.color.stroke.outline.intense}`}},initial:"off",animate:value?"on":"off"})}const Container$m=styled__default["default"](framerMotion.motion.div)`
|
|
1778
1778
|
display: flex;
|
|
1779
1779
|
justify-content: center;
|
|
1780
1780
|
align-items: center;
|
|
@@ -1836,7 +1836,7 @@ function Tab$1({minimized=false,activated=false,description,tabName,iconName,onC
|
|
|
1836
1836
|
|
|
1837
1837
|
const List$1={Default,Compact,Tab: Tab$1};
|
|
1838
1838
|
|
|
1839
|
-
function Popover({children,type,options,headline,primaryButton,secondaryButton,onChange,value}){return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
1839
|
+
function Popover({children,type,options,headline,primaryButton,secondaryButton,onChange,value}){return /*#__PURE__*/jsxRuntime.jsxs(Container$l,{type:type,children:[headline&&/*#__PURE__*/jsxRuntime.jsx(HeaderArea,{type:type,children:/*#__PURE__*/jsxRuntime.jsx(Text,{color:"color.foreground.neutral.secondary",variant:type==="component"?"BodyM":"BodyS",children:headline})}),options&&type!=="component"&&/*#__PURE__*/jsxRuntime.jsx(ItemArea,{children:options.map((option,index)=>/*#__PURE__*/jsxRuntime.jsx(List$1.Compact,{type:type==="shortcut"?"icon":"radio",label:option.label,activated:option.value===value,iconName:type==="shortcut"?"add":undefined,onChange:()=>onChange===null||onChange===void 0?void 0:onChange(option.value)},index))}),children&&type==="component"&&/*#__PURE__*/jsxRuntime.jsx(ComnponentArea,{children:/*#__PURE__*/jsxRuntime.jsx(ComponentPlaceHolder,{children:children})}),type==="component"&&(primaryButton||secondaryButton)&&/*#__PURE__*/jsxRuntime.jsxs(ButtonArea,{children:[primaryButton&&primaryButton,secondaryButton&&secondaryButton]})]})}const Container$l=styled__default["default"].div`
|
|
1840
1840
|
display: flex;
|
|
1841
1841
|
width: 100%;
|
|
1842
1842
|
${({type})=>type!=="component"&&"max-height: 400px;"}
|
|
@@ -1891,9 +1891,9 @@ function Popover({children,type,options,headline,primaryButton,secondaryButton,o
|
|
|
1891
1891
|
*/const useClickOutside$1=(ref,handler,enabled=true,ignoreIds=[])=>{React.useEffect(()=>{if(!enabled)return;const listener=event=>{// Do nothing if clicking ref's element or descendent elements
|
|
1892
1892
|
if(!ref.current||ref.current.contains(event.target)){return}if(ignoreIds.includes(event.target.id)){return}handler(event);};document.addEventListener("mousedown",listener);document.addEventListener("touchstart",listener);return ()=>{document.removeEventListener("mousedown",listener);document.removeEventListener("touchstart",listener);}},[ref,handler,enabled]);};var useClickOutside$2 = useClickOutside$1;
|
|
1893
1893
|
|
|
1894
|
-
const heightVariants$1={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants$1={small:16,medium:20,large:20};const textSizeVariants$2={small:"BodyS",medium:"BodyM",large:"BodyL"};const horizontalPaddingVariants={small:"6px",medium:"8px",large:"8px"};function ComboBox({size,disabled,placeholder,value,containerStyle,options=[],onChange,icon,showDropdownIcon=true}){var _options_find;const[open,setOpen]=React.useState(false);const containerRef=React.useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);setOpen(false);};return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
1894
|
+
const heightVariants$1={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants$1={small:16,medium:20,large:20};const textSizeVariants$2={small:"BodyS",medium:"BodyM",large:"BodyL"};const horizontalPaddingVariants={small:"6px",medium:"8px",large:"8px"};function ComboBox({size,disabled,placeholder,value,containerStyle,options=[],onChange,icon,showDropdownIcon=true}){var _options_find;const[open,setOpen]=React.useState(false);const containerRef=React.useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);setOpen(false);};return /*#__PURE__*/jsxRuntime.jsxs(Container$k,{ref:containerRef,children:[/*#__PURE__*/jsxRuntime.jsxs(Wrapper$l,{size:size,disabled:disabled,style:containerStyle,onClick:()=>setOpen(!open),children:[icon&&/*#__PURE__*/jsxRuntime.jsx(Icon,{name:icon,size:iconSizeVariants$1[size],fill:"color.foreground.neutral.tertiary"}),/*#__PURE__*/jsxRuntime.jsx(SelectWrapper$1,{children:/*#__PURE__*/jsxRuntime.jsx(PlaceholderText,{color:value?"color.foreground.neutral.primary":"color.foreground.neutral.tertiary",variant:textSizeVariants$2[size],children:value?(_options_find=options.find(option=>option.value===value))===null||_options_find===void 0?void 0:_options_find.label:placeholder})}),showDropdownIcon&&/*#__PURE__*/jsxRuntime.jsx(Icon,{style:{transform:open?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease-in-out"},name:"expandMore",size:iconSizeVariants$1[size],fill:"color.foreground.neutral.tertiary"})]}),open?/*#__PURE__*/jsxRuntime.jsx(PopoverWrapper$2,{children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence,{mode:"wait",children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},style:{paddingBottom:"20px"},children:/*#__PURE__*/jsxRuntime.jsx(Popover,{type:"list",options:options.map(option=>({label:option.label,value:option.value})),value:value,onChange:handleSelect})},"popover")})}):null]})}const Container$k=styled__default["default"].div`
|
|
1895
1895
|
position: relative;
|
|
1896
|
-
`;const PopoverWrapper$
|
|
1896
|
+
`;const PopoverWrapper$2=styled__default["default"].div`
|
|
1897
1897
|
position: absolute;
|
|
1898
1898
|
top: 100%;
|
|
1899
1899
|
padding-top: 4px;
|
|
@@ -1952,13 +1952,13 @@ function Description$1({label,labelProps,subValue,subValueProps,value,valueProps
|
|
|
1952
1952
|
flex: 1 0 0;
|
|
1953
1953
|
`;
|
|
1954
1954
|
|
|
1955
|
-
const dividerSizes={line:"1px",fill:"8px"};function Divider$1({type,padding}){return /*#__PURE__*/jsxRuntime.jsx(Wrapper$j,{padding:padding,children:/*#__PURE__*/jsxRuntime.jsx(Container$
|
|
1955
|
+
const dividerSizes={line:"1px",fill:"8px"};function Divider$1({type,padding}){return /*#__PURE__*/jsxRuntime.jsx(Wrapper$j,{padding:padding,children:/*#__PURE__*/jsxRuntime.jsx(Container$j,{type:type})})}const Wrapper$j=styled__default["default"].div`
|
|
1956
1956
|
display: flex;
|
|
1957
1957
|
width: 100%;
|
|
1958
1958
|
padding: ${p=>p.padding?"8px 0px":"0px"};
|
|
1959
1959
|
flex-direction: column;
|
|
1960
1960
|
align-items: flex-start;
|
|
1961
|
-
`;const Container$
|
|
1961
|
+
`;const Container$j=styled__default["default"].div`
|
|
1962
1962
|
width: 100%;
|
|
1963
1963
|
height: ${p=>dividerSizes[p.type]};
|
|
1964
1964
|
background: ${({theme})=>theme.colors.color.stroke.separator.standard};
|
|
@@ -1981,7 +1981,7 @@ function Empty({type}){return /*#__PURE__*/jsxRuntime.jsxs(Wrapper$i,{type:type,
|
|
|
1981
1981
|
flex: 1;
|
|
1982
1982
|
`;
|
|
1983
1983
|
|
|
1984
|
-
const headlineTextVariants={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};const descriptionTextVariants={large:"BodyS",medium:"Caption",small:"Caption"};const trailingTextVariants={large:"BodyS",medium:"BodyS",small:"Caption"};const headlineTextColors={primary:"color.foreground.neutral.primary",secondary:"color.foreground.neutral.secondary"};function List({size="large",color="primary",leading=null,headline,description,traillingText,trailling=null}){return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
1984
|
+
const headlineTextVariants={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};const descriptionTextVariants={large:"BodyS",medium:"Caption",small:"Caption"};const trailingTextVariants={large:"BodyS",medium:"BodyS",small:"Caption"};const headlineTextColors={primary:"color.foreground.neutral.primary",secondary:"color.foreground.neutral.secondary"};function List({size="large",color="primary",leading=null,headline,description,traillingText,trailling=null}){return /*#__PURE__*/jsxRuntime.jsxs(Container$i,{children:[leading,/*#__PURE__*/jsxRuntime.jsxs(TextArea$1,{children:[headline&&/*#__PURE__*/jsxRuntime.jsx(Headline,{variant:headlineTextVariants[size],color:headlineTextColors[color],children:headline}),description&&/*#__PURE__*/jsxRuntime.jsx(Description,{variant:descriptionTextVariants[size],color:"color.foreground.neutral.tertiary",children:description})]}),traillingText&&/*#__PURE__*/jsxRuntime.jsx(Text,{variant:trailingTextVariants[size],color:"color.foreground.neutral.secondary",children:traillingText}),trailling]})}const Container$i=styled__default["default"].div`
|
|
1985
1985
|
display: flex;
|
|
1986
1986
|
padding: 8px;
|
|
1987
1987
|
align-self: stretch;
|
|
@@ -2011,7 +2011,7 @@ const headlineTextVariants={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_
|
|
|
2011
2011
|
text-overflow: ellipsis;
|
|
2012
2012
|
`;
|
|
2013
2013
|
|
|
2014
|
-
const subHeadlineTextVariant={large:"BodyM",small:"BodyS"};const headlineTextVariant={large:"TitleL",small:"TitleS"};const descriptionTextVariant={large:"BodyM",small:"BodyS"};const valueTextVariant={large:"ValueXL",small:"ValueL"};function Section(props){const{size="large",type,subHeadline,subValue,description,trailling=null}=props;const headlineOrValue=type==="default"?props.headline:props.value;const variant=type==="default"?headlineTextVariant[size]:valueTextVariant[size];return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2014
|
+
const subHeadlineTextVariant={large:"BodyM",small:"BodyS"};const headlineTextVariant={large:"TitleL",small:"TitleS"};const descriptionTextVariant={large:"BodyM",small:"BodyS"};const valueTextVariant={large:"ValueXL",small:"ValueL"};function Section(props){const{size="large",type,subHeadline,subValue,description,trailling=null}=props;const headlineOrValue=type==="default"?props.headline:props.value;const variant=type==="default"?headlineTextVariant[size]:valueTextVariant[size];return /*#__PURE__*/jsxRuntime.jsxs(Container$h,{children:[/*#__PURE__*/jsxRuntime.jsxs(TextArea,{children:[subHeadline&&/*#__PURE__*/jsxRuntime.jsx(Text,{color:"color.foreground.neutral.secondary",variant:subHeadlineTextVariant[size],children:subHeadline}),/*#__PURE__*/jsxRuntime.jsxs(HeadlineArea,{children:[/*#__PURE__*/jsxRuntime.jsx(Text,{variant:variant,color:"color.foreground.neutral.primary",children:headlineOrValue}),subValue&&/*#__PURE__*/jsxRuntime.jsx(SubValueArea,{children:/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"ValueS",color:"color.foreground.neutral.secondary",children:subValue})})]}),description&&/*#__PURE__*/jsxRuntime.jsx(Text,{variant:descriptionTextVariant[size],color:"color.foreground.neutral.secondary",children:description})]}),trailling]})}const Container$h=styled__default["default"].div`
|
|
2015
2015
|
display: flex;
|
|
2016
2016
|
align-items: flex-end;
|
|
2017
2017
|
gap: 8px;
|
|
@@ -2048,7 +2048,7 @@ const textVariants$3={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"}
|
|
|
2048
2048
|
|
|
2049
2049
|
const Header={Section,List,Tab};
|
|
2050
2050
|
|
|
2051
|
-
const inputContainerPaddingAndGap={small:"2px",medium:"4px",large:"4px"};const inputBoxPaddingAndGap={small:"6px",medium:"8px",large:"8px"};const inputTextVariant={small:"BodyS",medium:"BodyM",large:"BodyL"};const inputBoxHeight={small:"28px",medium:"36px",large:"40px"};const inputBoxRadius={small:"10px",medium:"11px",large:"12px"};const inputIconSize={small:16,medium:20,large:24};const Input$5=/*#__PURE__*/React__default["default"].forwardRef(function InputComponent({size,placeholder,value,onChange,leadingArea,trailingArea,icon,align,as="input",rows=4,...props},ref){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2051
|
+
const inputContainerPaddingAndGap={small:"2px",medium:"4px",large:"4px"};const inputBoxPaddingAndGap={small:"6px",medium:"8px",large:"8px"};const inputTextVariant={small:"BodyS",medium:"BodyM",large:"BodyL"};const inputBoxHeight={small:"28px",medium:"36px",large:"40px"};const inputBoxRadius={small:"10px",medium:"11px",large:"12px"};const inputIconSize={small:16,medium:20,large:24};const Input$5=/*#__PURE__*/React__default["default"].forwardRef(function InputComponent({size,placeholder,value,onChange,leadingArea,trailingArea,icon,align,as="input",rows=4,...props},ref){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$g,{className:"input-container",size:size,isFocused:isFocused,mode:as,"data-mode":as,children:[leadingArea,/*#__PURE__*/jsxRuntime.jsxs(InputWrapper,{size:size,mode:as,rows:rows,variant:inputTextVariant[size],children:[icon&&align==="left"&&/*#__PURE__*/jsxRuntime.jsx(Icon,{fill:"color.foreground.neutral.tertiary",name:icon,size:inputIconSize[size]}),/*#__PURE__*/jsxRuntime.jsx(InputBox,{ref:ref,...props,color:"color.foreground.neutral.primary",style:{textAlign:align},variant:inputTextVariant[size],as:as,placeholder:placeholder,value:value,onChange:onChange,onFocus:e=>{var _props_onFocus;setIsFocused(true);(_props_onFocus=props.onFocus)===null||_props_onFocus===void 0?void 0:_props_onFocus.call(props,e);},onBlur:e=>{var _props_onBlur;setIsFocused(false);(_props_onBlur=props.onBlur)===null||_props_onBlur===void 0?void 0:_props_onBlur.call(props,e);},rows:as==="textarea"?rows:undefined,baseSize:size})]}),trailingArea===null||trailingArea===void 0?void 0:trailingArea.map(area=>area)]})});const Container$g=styled__default["default"].div`
|
|
2052
2052
|
box-sizing: border-box;
|
|
2053
2053
|
width: 100%;
|
|
2054
2054
|
display: flex;
|
|
@@ -2238,7 +2238,7 @@ const textSizeVariants$1={small:"TextualS",medium:"TextualM",large:"TextualL"};c
|
|
|
2238
2238
|
background-color: ${props=>props.theme.colors.color.foreground.neutral[props.color]};
|
|
2239
2239
|
`;
|
|
2240
2240
|
|
|
2241
|
-
function ProgressBar({type="basic",value,defaultValue=0,padding=false,containerStyle={}}){return /*#__PURE__*/jsxRuntime.jsx(RealContainer,{"data-padding":padding,style:containerStyle,children:/*#__PURE__*/jsxRuntime.jsx(Container$
|
|
2241
|
+
function ProgressBar({type="basic",value,defaultValue=0,padding=false,containerStyle={}}){return /*#__PURE__*/jsxRuntime.jsx(RealContainer,{"data-padding":padding,style:containerStyle,children:/*#__PURE__*/jsxRuntime.jsx(Container$f,{"data-type":type,children:/*#__PURE__*/jsxRuntime.jsx(Fill,{initial:{width:`${defaultValue}%`},animate:{width:`${value}%`}})})})}const RealContainer=styled__default["default"].div`
|
|
2242
2242
|
display: flex;
|
|
2243
2243
|
align-items: center;
|
|
2244
2244
|
align-self: stretch;
|
|
@@ -2246,7 +2246,7 @@ function ProgressBar({type="basic",value,defaultValue=0,padding=false,containerS
|
|
|
2246
2246
|
&[data-padding='true'] {
|
|
2247
2247
|
padding: 8px 0px;
|
|
2248
2248
|
}
|
|
2249
|
-
`;const Container$
|
|
2249
|
+
`;const Container$f=styled__default["default"].div`
|
|
2250
2250
|
display: flex;
|
|
2251
2251
|
align-items: center;
|
|
2252
2252
|
border-radius: var(--CornerRadius-Full, 999px);
|
|
@@ -2328,14 +2328,14 @@ function SearchBox({value,onChange,...rest}){return /*#__PURE__*/jsxRuntime.jsxs
|
|
|
2328
2328
|
}
|
|
2329
2329
|
`;
|
|
2330
2330
|
|
|
2331
|
-
const segmentedControlItemPadding={small:"2px 6px",medium:"4px 6px",large:"6px 8px"};const segmentedControlItemTextVariant={small:"BodyS_Bold",medium:"BodyM_Bold",large:"BodyM_Bold"};const segmentedControlContainerPaddingAndGap={small:"3px",medium:"4px",large:"4px"};const iconSize={small:14,medium:16,large:20};function SegmentedControl({value,options,onChange,size,fullWidth=false,paddingDisabled=false}){const theme=react.useTheme();const groupId=React.useId();const barId=React.useId();return /*#__PURE__*/jsxRuntime.jsx(Wrapper$9,{paddingDisabled:paddingDisabled,fullWidth:fullWidth,children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.LayoutGroup,{id:groupId,children:/*#__PURE__*/jsxRuntime.jsx(Container$
|
|
2331
|
+
const segmentedControlItemPadding={small:"2px 6px",medium:"4px 6px",large:"6px 8px"};const segmentedControlItemTextVariant={small:"BodyS_Bold",medium:"BodyM_Bold",large:"BodyM_Bold"};const segmentedControlContainerPaddingAndGap={small:"3px",medium:"4px",large:"4px"};const iconSize={small:14,medium:16,large:20};function SegmentedControl({value,options,onChange,size,fullWidth=false,paddingDisabled=false}){const theme=react.useTheme();const groupId=React.useId();const barId=React.useId();return /*#__PURE__*/jsxRuntime.jsx(Wrapper$9,{paddingDisabled:paddingDisabled,fullWidth:fullWidth,children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.LayoutGroup,{id:groupId,children:/*#__PURE__*/jsxRuntime.jsx(Container$e,{style:{gap:segmentedControlContainerPaddingAndGap[size],padding:segmentedControlContainerPaddingAndGap[size]},children:options.map(option=>/*#__PURE__*/jsxRuntime.jsxs(ItemContainer,{onClick:()=>onChange===null||onChange===void 0?void 0:onChange(option.value),style:{padding:segmentedControlItemPadding[size]},children:[option.leadingIcon&&/*#__PURE__*/jsxRuntime.jsx(Icon,{style:{zIndex:2},name:option.leadingIcon,size:iconSize[size],fill:value===option.value?"color.foreground.neutral.primary":"color.foreground.neutral.secondary"}),/*#__PURE__*/jsxRuntime.jsx(ItemText,{variants:{on:{color:theme.colors.color.foreground.neutral.primary},off:{color:theme.colors.color.foreground.neutral.secondary}},initial:"off",animate:value===option.value?"on":"off",variant:segmentedControlItemTextVariant[size],color:"color.foreground.neutral.secondary",children:option.label}),option.trailingIcon&&/*#__PURE__*/jsxRuntime.jsx(Icon,{style:{zIndex:2},name:option.trailingIcon,size:iconSize[size],fill:value===option.value?"color.foreground.neutral.primary":"color.foreground.neutral.secondary"}),value===option.value&&/*#__PURE__*/jsxRuntime.jsx(Bar,{layoutId:barId})]},option.value))})})})}const Wrapper$9=styled__default["default"].div`
|
|
2332
2332
|
display: flex;
|
|
2333
2333
|
padding: ${p=>p.paddingDisabled?"0px":"8px 16px"};
|
|
2334
2334
|
flex-direction: column;
|
|
2335
2335
|
justify-content: center;
|
|
2336
2336
|
align-items: center;
|
|
2337
2337
|
width: ${p=>p.fullWidth?"100%":"auto"};
|
|
2338
|
-
`;const Container$
|
|
2338
|
+
`;const Container$e=styled__default["default"].div`
|
|
2339
2339
|
display: inline-flex;
|
|
2340
2340
|
padding: 4px;
|
|
2341
2341
|
align-items: center;
|
|
@@ -2455,7 +2455,7 @@ const handleDragEnd=index=>()=>{if(options.length>0){var _normalizedValue_index;
|
|
|
2455
2455
|
}
|
|
2456
2456
|
`;
|
|
2457
2457
|
|
|
2458
|
-
const contents={core:"color.foreground.semantic.core",warning:"color.foreground.semantic.status.warning",mono:"color.foreground.neutral.primary"};const heights={large:40,medium:36,small:28};const gaps={large:"4px",medium:"2px",small:"2px"};const iconSizes={large:24,medium:20,small:16};const textVariants$2={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function TextButton({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2458
|
+
const contents={core:"color.foreground.semantic.core",warning:"color.foreground.semantic.status.warning",mono:"color.foreground.neutral.primary"};const heights={large:40,medium:36,small:28};const gaps={large:"4px",medium:"2px",small:"2px"};const iconSizes={large:24,medium:20,small:16};const textVariants$2={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function TextButton({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){return /*#__PURE__*/jsxRuntime.jsxs(Container$d,{variant:variant,size:size,"data-fullwidth":fullWidth,onClick:disabled?undefined:onClick,style:{cursor:disabled?"not-allowed":"pointer",opacity:disabled?.3:1},whileHover:disabled?{opacity:.3}:{opacity:.8},whileTap:disabled?{opacity:.3}:{opacity:.6},...props,children:[iconLeading&&/*#__PURE__*/jsxRuntime.jsx(Icon,{name:iconLeading,size:iconSizes[size],fill:iconAutoFill?contents[variant]:undefined,stroke:iconAutoStroke?contents[variant]:undefined}),children&&/*#__PURE__*/jsxRuntime.jsx(Text,{variant:textVariants$2[size],color:contents[variant],children:children}),iconTrailing&&/*#__PURE__*/jsxRuntime.jsx(Icon,{name:iconTrailing,size:iconSizes[size],fill:iconAutoFill?contents[variant]:undefined,stroke:iconAutoStroke?contents[variant]:undefined})]})}const Container$d=styled__default["default"](MotionPressable)`
|
|
2459
2459
|
display: inline-flex;
|
|
2460
2460
|
justify-content: center;
|
|
2461
2461
|
align-items: center;
|
|
@@ -2491,7 +2491,7 @@ const defaultButtonProps={variant:"mono",size:"small"};function Snackbar({label,
|
|
|
2491
2491
|
align-self: ${props=>props.compact?"stretch":"center"};
|
|
2492
2492
|
`;
|
|
2493
2493
|
|
|
2494
|
-
function Switch({value,onChange,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsxRuntime.jsx(Container$
|
|
2494
|
+
function Switch({value,onChange,disabled=false}){const theme=react.useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsxRuntime.jsx(Container$c,{style:{opacity:disabled?.4:1},"data-isOn":value,onClick:toggleSwitch,variants:{on:{backgroundColor:theme.colors.color.foreground.semantic.core},off:{backgroundColor:theme.colors.color.background.surface.intense}},initial:"off",animate:value?"on":"off",children:/*#__PURE__*/jsxRuntime.jsx(Handle,{layout:true,transition:{type:"spring",stiffness:700,damping:30}})})}const Container$c=styled__default["default"](framerMotion.motion.div)`
|
|
2495
2495
|
width: 48px;
|
|
2496
2496
|
height: 28px;
|
|
2497
2497
|
display: flex;
|
|
@@ -2543,7 +2543,7 @@ const horizontalPaddings={large:16,medium:12,small:10};const textVariants$1={lar
|
|
|
2543
2543
|
|
|
2544
2544
|
const debounce=(fn,delay)=>{let timeout;return (...args)=>{let result;if(timeout)clearTimeout(timeout);timeout=setTimeout(()=>{result=fn(...args);},delay);return result}};
|
|
2545
2545
|
|
|
2546
|
-
function HeadColumn({collapsable=false,expanded=false,spacingLevel=0,onChange,editable=false,value}){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2546
|
+
function HeadColumn({collapsable=false,expanded=false,spacingLevel=0,onChange,editable=false,value}){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$b,{isFocused:isFocused,children:[new Array(spacingLevel).fill(null).map((_,index)=>/*#__PURE__*/jsxRuntime.jsx(Spacing,{},index)),collapsable&&/*#__PURE__*/jsxRuntime.jsx(CollapseButton,{children:/*#__PURE__*/jsxRuntime.jsx(Icon,{style:{transform:!expanded?"rotate(0deg)":"rotate(90deg)"},name:"expandMore",size:12,fill:"color.foreground.neutral.secondary"})}),editable&&onChange&&/*#__PURE__*/jsxRuntime.jsx(Input$2,{variant:"TableM",color:"color.foreground.neutral.primary",as:"input",onChange:debounce(onChange,1e3),defaultValue:value,onBlur:e=>{setIsFocused(false);},onFocus:()=>setIsFocused(true)}),!editable&&value&&/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"TableM",color:"color.foreground.neutral.primary",children:value})]})}const Container$b=styled__default["default"].div`
|
|
2547
2547
|
display: flex;
|
|
2548
2548
|
width: 100%;
|
|
2549
2549
|
height: 40px;
|
|
@@ -2577,7 +2577,7 @@ function HeadColumn({collapsable=false,expanded=false,spacingLevel=0,onChange,ed
|
|
|
2577
2577
|
background: ${({theme})=>theme.colors.color.background.surface.standard};
|
|
2578
2578
|
`;
|
|
2579
2579
|
|
|
2580
|
-
function HeadRow({align="left",onChange,value,editable,sortable,sortDirection="none",fullWidth,width}){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2580
|
+
function HeadRow({align="left",onChange,value,editable,sortable,sortDirection="none",fullWidth,width}){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$a,{width:width,fullWidth:fullWidth,isFocused:isFocused,align:align,children:[sortable&&/*#__PURE__*/jsxRuntime.jsxs(SortButton,{align:align,children:[/*#__PURE__*/jsxRuntime.jsx(Text,{align:align,variant:"TableS_Bold",color:sortDirection==="none"?"color.foreground.neutral.secondary":"color.foreground.semantic.core",children:value}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:sortDirection==="asc"?"arrowUpward":sortDirection==="desc"?"arrowDownward":"switchIcon",fill:sortDirection==="none"?"color.foreground.neutral.quarternary":"color.foreground.semantic.core",size:16})]}),editable&&onChange&&/*#__PURE__*/jsxRuntime.jsx(Input$1,{align:align,variant:"TableS_Bold",color:"color.foreground.neutral.secondary",as:"input",onChange:debounce(onChange,1e3),defaultValue:value,onBlur:_=>{setIsFocused(false);},onFocus:()=>setIsFocused(true)}),!sortable&&!editable&&/*#__PURE__*/jsxRuntime.jsx(Text,{align:align,variant:"TableS_Bold",color:"color.foreground.neutral.secondary",children:value})]})}const Container$a=styled__default["default"].div`
|
|
2581
2581
|
box-sizing: border-box;
|
|
2582
2582
|
display: flex;
|
|
2583
2583
|
min-width: 100px;
|
|
@@ -2612,7 +2612,7 @@ function HeadRow({align="left",onChange,value,editable,sortable,sortDirection="n
|
|
|
2612
2612
|
justify-content: ${({align})=>align==="right"?"flex-end":align==="center"?"center":"flex-start"};
|
|
2613
2613
|
`;
|
|
2614
2614
|
|
|
2615
|
-
function Item$1({children,align="left",onChange,value,editable,fullWidth,width}){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2615
|
+
function Item$1({children,align="left",onChange,value,editable,fullWidth,width}){const[isFocused,setIsFocused]=React.useState(false);return /*#__PURE__*/jsxRuntime.jsxs(Container$9,{width:width,fullWidth:fullWidth,isFocused:isFocused,align:align,children:[editable&&onChange&&/*#__PURE__*/jsxRuntime.jsx(Input,{variant:"TableM",color:"color.foreground.neutral.primary",as:editable?"input":"div",onChange:debounce(onChange,1e3),defaultValue:typeof value==="string"?value:undefined,onBlur:e=>{setIsFocused(false);},onFocus:()=>setIsFocused(true)}),!editable&&value&&/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"TableM",color:"color.foreground.neutral.primary",children:value}),children&&children]})}const Container$9=styled__default["default"].div`
|
|
2616
2616
|
box-sizing: border-box;
|
|
2617
2617
|
display: flex;
|
|
2618
2618
|
width: ${({width,fullWidth})=>width||fullWidth?"100%":"auto"};
|
|
@@ -2637,7 +2637,7 @@ function Item$1({children,align="left",onChange,value,editable,fullWidth,width})
|
|
|
2637
2637
|
caret-color: ${({theme})=>theme.colors.color.foreground.semantic.core};
|
|
2638
2638
|
`;
|
|
2639
2639
|
|
|
2640
|
-
function Table(){return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2640
|
+
function Table(){return /*#__PURE__*/jsxRuntime.jsxs(Container$8,{children:[/*#__PURE__*/jsxRuntime.jsxs(RowFixed,{children:[/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"항목"}),/*#__PURE__*/jsxRuntime.jsx(Divider,{}),/*#__PURE__*/jsxRuntime.jsxs(BodyGroup,{border:true,children:[/*#__PURE__*/jsxRuntime.jsx(HeadColumn,{value:"금융수익",collapsable:true}),/*#__PURE__*/jsxRuntime.jsx(HeadColumn,{value:"이자수익",spacingLevel:1}),/*#__PURE__*/jsxRuntime.jsx(HeadColumn,{value:"배당금수익",spacingLevel:1}),/*#__PURE__*/jsxRuntime.jsx(HeadColumn,{value:"외환거래이익",spacingLevel:1,collapsable:true}),/*#__PURE__*/jsxRuntime.jsx(HeadColumn,{value:"기타수익",spacingLevel:2})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row$1,{children:[/*#__PURE__*/jsxRuntime.jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsxRuntime.jsx(Divider,{}),/*#__PURE__*/jsxRuntime.jsxs(BodyGroup,{children:[/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row$1,{children:[/*#__PURE__*/jsxRuntime.jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsxRuntime.jsx(Divider,{}),/*#__PURE__*/jsxRuntime.jsxs(BodyGroup,{children:[/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row$1,{children:[/*#__PURE__*/jsxRuntime.jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsxRuntime.jsx(Divider,{}),/*#__PURE__*/jsxRuntime.jsxs(BodyGroup,{children:[/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row$1,{children:[/*#__PURE__*/jsxRuntime.jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsxRuntime.jsx(Divider,{}),/*#__PURE__*/jsxRuntime.jsxs(BodyGroup,{children:[/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row$1,{children:[/*#__PURE__*/jsxRuntime.jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsxRuntime.jsx(Divider,{}),/*#__PURE__*/jsxRuntime.jsxs(BodyGroup,{children:[/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row$1,{children:[/*#__PURE__*/jsxRuntime.jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsxRuntime.jsx(Divider,{}),/*#__PURE__*/jsxRuntime.jsxs(BodyGroup,{children:[/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{align:"right",value:"25,620억"})]})]})]})}const Container$8=styled__default["default"].div`
|
|
2641
2641
|
display: flex;
|
|
2642
2642
|
align-items: flex-start;
|
|
2643
2643
|
align-self: stretch;
|
|
@@ -2686,7 +2686,7 @@ const textVariants={large:"TitleM",medium:"BodyL_Bold"};function Tabs({value,onC
|
|
|
2686
2686
|
transition: transform 0.3s ease;
|
|
2687
2687
|
`;
|
|
2688
2688
|
|
|
2689
|
-
function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/jsxRuntime.jsxs(Wrapper$4,{type:type,children:[/*#__PURE__*/jsxRuntime.jsxs(DateWrapper,{type:type,children:[/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyM_Bold",color:"color.foreground.neutral.secondary",children:MainDate}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubDate})]}),/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper,{type:type,children:[/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:Label}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubLabel})]})]})}const Wrapper$4=styled__default["default"].div`
|
|
2689
|
+
function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/jsxRuntime.jsxs(Wrapper$4,{type:type,children:[/*#__PURE__*/jsxRuntime.jsxs(DateWrapper$1,{type:type,children:[/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyM_Bold",color:"color.foreground.neutral.secondary",children:MainDate}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubDate})]}),/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper,{type:type,children:[/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:Label}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubLabel})]})]})}const Wrapper$4=styled__default["default"].div`
|
|
2690
2690
|
display: flex;
|
|
2691
2691
|
width: 380px;
|
|
2692
2692
|
height: 60px;
|
|
@@ -2696,7 +2696,7 @@ function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/js
|
|
|
2696
2696
|
flex-shrink: 0;
|
|
2697
2697
|
flex-direction: ${({type})=>type==="main"?"row":"column"};
|
|
2698
2698
|
justify-content: ${({type})=>type==="main"?"flex-start":"center"};
|
|
2699
|
-
`;const DateWrapper=styled__default["default"].div`
|
|
2699
|
+
`;const DateWrapper$1=styled__default["default"].div`
|
|
2700
2700
|
display: flex;
|
|
2701
2701
|
width: ${({type})=>type==="main"?"120px":"auto"};
|
|
2702
2702
|
padding: 2px 0px;
|
|
@@ -2714,13 +2714,13 @@ function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/js
|
|
|
2714
2714
|
width: ${({type})=>type==="main"?"auto":"232px"};
|
|
2715
2715
|
`;
|
|
2716
2716
|
|
|
2717
|
-
const backgroundColor={mono:"color.background.overlay.static",standard:"color.background.overlay.standard"};const contentColor={mono:"color.foreground.surface.static",standard:"color.foreground.neutral.primary"};function Tooltip({variant,tail,description,headline,closeIcon}){const TopTailSVG=()=>/*#__PURE__*/jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsxRuntime.jsx("path",{d:"M3.58579 0.561693C4.36684 -0.187232 5.63317 -0.18723 6.41421 0.561694L10 5H0L3.58579 0.561693Z"})});const BottomTailSVG=()=>/*#__PURE__*/jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsxRuntime.jsx("path",{d:"M3.58579 4.43831C4.36684 5.18723 5.63317 5.18723 6.41421 4.43831L10 0H0L3.58579 4.43831Z"})});return /*#__PURE__*/jsxRuntime.jsxs(TooltipContainer,{tail:tail,children:[tail.startsWith("top")&&/*#__PURE__*/jsxRuntime.jsx(Tail,{variant:variant,tail:tail,children:/*#__PURE__*/jsxRuntime.jsx(TopTailSVG,{})}),/*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2717
|
+
const backgroundColor={mono:"color.background.overlay.static",standard:"color.background.overlay.standard"};const contentColor={mono:"color.foreground.surface.static",standard:"color.foreground.neutral.primary"};function Tooltip({variant,tail,description,headline,closeIcon}){const TopTailSVG=()=>/*#__PURE__*/jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsxRuntime.jsx("path",{d:"M3.58579 0.561693C4.36684 -0.187232 5.63317 -0.18723 6.41421 0.561694L10 5H0L3.58579 0.561693Z"})});const BottomTailSVG=()=>/*#__PURE__*/jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsxRuntime.jsx("path",{d:"M3.58579 4.43831C4.36684 5.18723 5.63317 5.18723 6.41421 4.43831L10 0H0L3.58579 4.43831Z"})});return /*#__PURE__*/jsxRuntime.jsxs(TooltipContainer,{tail:tail,children:[tail.startsWith("top")&&/*#__PURE__*/jsxRuntime.jsx(Tail,{variant:variant,tail:tail,children:/*#__PURE__*/jsxRuntime.jsx(TopTailSVG,{})}),/*#__PURE__*/jsxRuntime.jsxs(Container$7,{variant:variant,children:[/*#__PURE__*/jsxRuntime.jsxs(TextGroup,{children:[headline&&/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyM_Bold",color:contentColor[variant],children:headline}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:contentColor[variant],children:description})]}),closeIcon&&/*#__PURE__*/jsxRuntime.jsx(CloseIconWrapper,{children:/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"close",size:16,fill:variant==="standard"?"color.foreground.neutral.secondary":contentColor[variant]})})]}),tail.startsWith("bottom")&&/*#__PURE__*/jsxRuntime.jsx(Tail,{variant:variant,tail:tail,children:/*#__PURE__*/jsxRuntime.jsx(BottomTailSVG,{})})]})}const TooltipContainer=styled__default["default"].div`
|
|
2718
2718
|
position: relative; // absolute에서 relative로 변경
|
|
2719
2719
|
display: flex;
|
|
2720
2720
|
max-width: 217px;
|
|
2721
2721
|
width: max-content;
|
|
2722
2722
|
flex-direction: column;
|
|
2723
|
-
`;const Container$
|
|
2723
|
+
`;const Container$7=styled__default["default"].div`
|
|
2724
2724
|
position: relative; // absolute에서 relative로 변경
|
|
2725
2725
|
max-width: 217px;
|
|
2726
2726
|
width: max-content;
|
|
@@ -2770,7 +2770,7 @@ function File({status,name,size,error}){return /*#__PURE__*/jsxRuntime.jsxs(Wrap
|
|
|
2770
2770
|
align-items: flex-start;
|
|
2771
2771
|
`;
|
|
2772
2772
|
|
|
2773
|
-
function Image({onRemove,status,image}){return /*#__PURE__*/jsxRuntime.jsxs(Wrapper$2,{children:[status==="error"?/*#__PURE__*/jsxRuntime.jsxs(ErrorContainer,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"error",size:20,fill:"color.foreground.semantic.status.warning"}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.semantic.status.warning",children:"Error"})]}):status==="uploading"?/*#__PURE__*/jsxRuntime.jsx(Container$
|
|
2773
|
+
function Image({onRemove,status,image}){return /*#__PURE__*/jsxRuntime.jsxs(Wrapper$2,{children:[status==="error"?/*#__PURE__*/jsxRuntime.jsxs(ErrorContainer,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"error",size:20,fill:"color.foreground.semantic.status.warning"}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.semantic.status.warning",children:"Error"})]}):status==="uploading"?/*#__PURE__*/jsxRuntime.jsx(Container$6,{children:/*#__PURE__*/jsxRuntime.jsx(ProgressBar,{value:50})}):status==="uploaded"?/*#__PURE__*/jsxRuntime.jsx(ImageContainer,{src:image}):status==="await"?/*#__PURE__*/jsxRuntime.jsxs(Container$6,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"addPhotoAlternate",size:20,fill:"color.foreground.neutral.tertiary"}),/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.tertiary",children:"Add"})]}):null,(status==="uploaded"||status==="error")&&/*#__PURE__*/jsxRuntime.jsx(RemoveButton,{whileTap:{scale:.9},onPress:onRemove,children:/*#__PURE__*/jsxRuntime.jsx(Icon,{fill:"color.foreground.surface.static",name:"close",size:16})})]})}const Wrapper$2=styled__default["default"].div`
|
|
2774
2774
|
position: relative;
|
|
2775
2775
|
display: inline-flex;
|
|
2776
2776
|
padding: 4px;
|
|
@@ -2779,7 +2779,7 @@ function Image({onRemove,status,image}){return /*#__PURE__*/jsxRuntime.jsxs(Wrap
|
|
|
2779
2779
|
align-items: flex-start;
|
|
2780
2780
|
gap: 12px;
|
|
2781
2781
|
border: 0;
|
|
2782
|
-
`;const Container$
|
|
2782
|
+
`;const Container$6=styled__default["default"].div`
|
|
2783
2783
|
box-sizing: border-box;
|
|
2784
2784
|
display: flex;
|
|
2785
2785
|
width: 80px;
|
|
@@ -2798,7 +2798,7 @@ function Image({onRemove,status,image}){return /*#__PURE__*/jsxRuntime.jsxs(Wrap
|
|
|
2798
2798
|
background-position: center;
|
|
2799
2799
|
background-size: cover;
|
|
2800
2800
|
background-repeat: no-repeat;
|
|
2801
|
-
`;const ErrorContainer=styled__default["default"](Container$
|
|
2801
|
+
`;const ErrorContainer=styled__default["default"](Container$6)`
|
|
2802
2802
|
background: none;
|
|
2803
2803
|
border-radius: 8px;
|
|
2804
2804
|
box-shadow: inset 0 0 0 1px
|
|
@@ -2848,7 +2848,7 @@ function Dropbox({size,value,onChange,accept="image/jpeg,image/png,image/webp",m
|
|
|
2848
2848
|
|
|
2849
2849
|
const Upload={File,Image,Dropbox};
|
|
2850
2850
|
|
|
2851
|
-
function FrontCheckbox({...props}){return /*#__PURE__*/jsxRuntime.jsx(Container$
|
|
2851
|
+
function FrontCheckbox({...props}){return /*#__PURE__*/jsxRuntime.jsx(Container$5,{children:/*#__PURE__*/jsxRuntime.jsx(Checkbox,{...props})})}const Container$5=styled__default["default"].div`
|
|
2852
2852
|
display: inline-flex;
|
|
2853
2853
|
height: 40px;
|
|
2854
2854
|
min-width: 40px;
|
|
@@ -2861,7 +2861,7 @@ function FrontCheckbox({...props}){return /*#__PURE__*/jsxRuntime.jsx(Container$
|
|
|
2861
2861
|
gap: 4px;
|
|
2862
2862
|
`;
|
|
2863
2863
|
|
|
2864
|
-
function TableColumn(){return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2864
|
+
function TableColumn(){return /*#__PURE__*/jsxRuntime.jsxs(Container$4,{children:[/*#__PURE__*/jsxRuntime.jsxs(Row,{head:true,children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"구분"}),/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"핀코드",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"핀코드2"}),/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"핀잔액",sortable:true,align:"left"}),/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"핀상태"}),/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"메모",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(HeadRow,{value:"핀코드 관리"})]}),/*#__PURE__*/jsxRuntime.jsxs(Row,{children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{children:/*#__PURE__*/jsxRuntime.jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsxs(Item$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row,{children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"TPDFASAF3K143231",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{children:/*#__PURE__*/jsxRuntime.jsx(Badge,{variant:"warning",children:"사용불가"})}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsxs(Item$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row,{children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"TPDFASAF3K143231",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{children:/*#__PURE__*/jsxRuntime.jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsxs(Item$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row,{children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"TPDFASAF3K143231",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{children:/*#__PURE__*/jsxRuntime.jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsxs(Item$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row,{children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{children:/*#__PURE__*/jsxRuntime.jsx(Badge,{variant:"flat",children:"사용완료"})}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsxs(Item$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row,{children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{children:/*#__PURE__*/jsxRuntime.jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsxs(Item$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxRuntime.jsxs(Row,{children:[/*#__PURE__*/jsxRuntime.jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{children:/*#__PURE__*/jsxRuntime.jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsxRuntime.jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxRuntime.jsxs(Item$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsxRuntime.jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]})]})}const Container$4=styled__default["default"].div`
|
|
2865
2865
|
display: flex;
|
|
2866
2866
|
width: 100%;
|
|
2867
2867
|
flex-direction: column;
|
|
@@ -2874,7 +2874,7 @@ function TableColumn(){return /*#__PURE__*/jsxRuntime.jsxs(Container$2,{children
|
|
|
2874
2874
|
border-color: ${({theme,head})=>head?theme.colors.color.stroke.separator.intense:theme.colors.color.stroke.separator.standard};
|
|
2875
2875
|
`;
|
|
2876
2876
|
|
|
2877
|
-
const heightVariants={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants={small:16,medium:20,large:24};const textSizeVariants={small:"BodyS",medium:"BodyM",large:"BodyL"};function TextComboBox({size,disabled,placeholder,value,options=[],onChange,icon,showDropdownIcon=true}){const[open,setOpen]=React.useState(false);const containerRef=React.useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);};return /*#__PURE__*/jsxRuntime.jsxs(Container$
|
|
2877
|
+
const heightVariants={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants={small:16,medium:20,large:24};const textSizeVariants={small:"BodyS",medium:"BodyM",large:"BodyL"};function TextComboBox({size,disabled,placeholder,value,options=[],onChange,icon,showDropdownIcon=true}){const[open,setOpen]=React.useState(false);const containerRef=React.useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);};return /*#__PURE__*/jsxRuntime.jsxs(Container$3,{ref:containerRef,children:[/*#__PURE__*/jsxRuntime.jsxs(Wrapper,{size:size,disabled:disabled,onClick:()=>setOpen(!open),children:[icon&&/*#__PURE__*/jsxRuntime.jsx(Icon,{name:icon,size:iconSizeVariants[size],fill:"color.foreground.neutral.tertiary"}),/*#__PURE__*/jsxRuntime.jsx(SelectWrapper,{children:/*#__PURE__*/jsxRuntime.jsx(Text,{style:{flex:1,userSelect:"none",padding:`0 4px`,pointerEvents:"none"},color:value?"color.foreground.neutral.primary":"color.foreground.neutral.tertiary",variant:textSizeVariants[size],children:value||placeholder})}),showDropdownIcon&&/*#__PURE__*/jsxRuntime.jsx(Icon,{style:{transform:open?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease-in-out"},name:"expandMore",size:iconSizeVariants[size],fill:"color.foreground.neutral.tertiary"})]}),open?/*#__PURE__*/jsxRuntime.jsx(PopoverWrapper$1,{children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence,{mode:"wait",children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},children:/*#__PURE__*/jsxRuntime.jsx(Popover,{type:"list",options:options.map(option=>({label:option.label,value:option.value})),value:value,onChange:handleSelect})},"popover")})}):null]})}const PopoverWrapper$1=styled__default["default"].div`
|
|
2878
2878
|
position: absolute;
|
|
2879
2879
|
top: 100%;
|
|
2880
2880
|
padding-top: 4px;
|
|
@@ -2883,7 +2883,7 @@ const heightVariants={small:"28px",medium:"36px",large:"40px"};const iconSizeVar
|
|
|
2883
2883
|
height: 100%;
|
|
2884
2884
|
min-width: 200px;
|
|
2885
2885
|
z-index: 9;
|
|
2886
|
-
`;const Container$
|
|
2886
|
+
`;const Container$3=styled__default["default"].div`
|
|
2887
2887
|
position: relative;
|
|
2888
2888
|
`;const SelectWrapper=styled__default["default"].div`
|
|
2889
2889
|
position: relative;
|
|
@@ -2922,7 +2922,7 @@ function u(){return (u=Object.assign||function(e){for(var r=1;r<arguments.length
|
|
|
2922
2922
|
const useClickOutside=(ref,handler,enabled=true,ignoreIds=[])=>{React.useEffect(()=>{if(!enabled)return;const listener=event=>{// Do nothing if clicking ref's element or descendent elements
|
|
2923
2923
|
if(!ref.current||ref.current.contains(event.target)){return}if(ignoreIds.includes(event.target.id)){return}handler(event);};document.addEventListener("mousedown",listener);document.addEventListener("touchstart",listener);return ()=>{document.removeEventListener("mousedown",listener);document.removeEventListener("touchstart",listener);}},[ref,handler,enabled]);};function ColorPicker(props){const{color,onColorChange}=props;const[active,setActive]=React.useState(false);const[showPicker,setShowPicker]=React.useState(false);const pickerRef=React.useRef(null);useClickOutside(pickerRef,()=>{setShowPicker(false);},showPicker);const handleEyeDropper=async()=>{try{// @ts-ignore
|
|
2924
2924
|
const eyeDropper=new window.EyeDropper;const result=await eyeDropper.open();// Just use the color from eyedropper without opacity
|
|
2925
|
-
onColorChange(result.sRGBHex);}catch(err){console.log("Browser does not support the EyeDropper API");}};const handleColorChange=e=>{const newValue=e.target.value;onColorChange(newValue);};return /*#__PURE__*/jsxRuntime.jsxs(Container,{ref:pickerRef,children:[/*#__PURE__*/jsxRuntime.jsxs(LeftInputGroup,{active:active,children:[/*#__PURE__*/jsxRuntime.jsxs(ColorPreviewContainer,{children:[/*#__PURE__*/jsxRuntime.jsx(ColorPreview,{style:{backgroundColor:color},onClick:()=>setShowPicker(!showPicker)}),showPicker&&/*#__PURE__*/jsxRuntime.jsx(PickerPopover,{children:/*#__PURE__*/jsxRuntime.jsx(Z,{color:color,onChange:newColor=>{onColorChange(`${newColor}`);}})})]}),/*#__PURE__*/jsxRuntime.jsx(ColorLabelInput,{as:"input",variant:"BodyS",color:"color.foreground.neutral.primary",value:color,onFocus:()=>{setActive(true);setShowPicker(true);},onBlur:()=>setActive(false),onChange:handleColorChange,placeholder:"#RRGGBB"})]}),/*#__PURE__*/jsxRuntime.jsx(EyeDropperButton,{onClick:handleEyeDropper,children:/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"colorize",size:24})})]})}const Container=styled__default["default"].div`
|
|
2925
|
+
onColorChange(result.sRGBHex);}catch(err){console.log("Browser does not support the EyeDropper API");}};const handleColorChange=e=>{const newValue=e.target.value;onColorChange(newValue);};return /*#__PURE__*/jsxRuntime.jsxs(Container$2,{ref:pickerRef,children:[/*#__PURE__*/jsxRuntime.jsxs(LeftInputGroup,{active:active,children:[/*#__PURE__*/jsxRuntime.jsxs(ColorPreviewContainer,{children:[/*#__PURE__*/jsxRuntime.jsx(ColorPreview,{style:{backgroundColor:color},onClick:()=>setShowPicker(!showPicker)}),showPicker&&/*#__PURE__*/jsxRuntime.jsx(PickerPopover,{children:/*#__PURE__*/jsxRuntime.jsx(Z,{color:color,onChange:newColor=>{onColorChange(`${newColor}`);}})})]}),/*#__PURE__*/jsxRuntime.jsx(ColorLabelInput,{as:"input",variant:"BodyS",color:"color.foreground.neutral.primary",value:color,onFocus:()=>{setActive(true);setShowPicker(true);},onBlur:()=>setActive(false),onChange:handleColorChange,placeholder:"#RRGGBB"})]}),/*#__PURE__*/jsxRuntime.jsx(EyeDropperButton,{onClick:handleEyeDropper,children:/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"colorize",size:24})})]})}const Container$2=styled__default["default"].div`
|
|
2926
2926
|
display: flex;
|
|
2927
2927
|
width: 100%;
|
|
2928
2928
|
justify-content: center;
|
|
@@ -3038,6 +3038,156 @@ onColorChange(result.sRGBHex);}catch(err){console.log("Browser does not support
|
|
|
3038
3038
|
}
|
|
3039
3039
|
`;
|
|
3040
3040
|
|
|
3041
|
+
const CalendarRangeSquare=/*#__PURE__*/React.memo(function CalendarRangeSquare({startDate,endDate,hoveredStartDate,hoveredEndDate,currentDate}){const CALENDAR_WIDTH=384;const DAYS_PER_WEEK=7;const DAY_WIDTH=40;const calculateDayPosition=dayIndex=>{const remainingSpace=CALENDAR_WIDTH-DAYS_PER_WEEK*DAY_WIDTH;const gap=remainingSpace/(DAYS_PER_WEEK-1);return dayIndex*(DAY_WIDTH+gap)};const normalizeDate=date=>{return new Date(date.getFullYear(),date.getMonth(),date.getDate())};// 범위 계산에 사용할 실제 start/end
|
|
3042
|
+
const effectiveStartDate=hoveredStartDate||hoveredEndDate?hoveredStartDate!==null&&hoveredStartDate!==void 0?hoveredStartDate:startDate:startDate;const effectiveEndDate=hoveredStartDate||hoveredEndDate?hoveredEndDate!==null&&hoveredEndDate!==void 0?hoveredEndDate:endDate:endDate;const isDateInRange=date=>{if(!effectiveStartDate||!effectiveEndDate||!date)return false;const normalizedDate=normalizeDate(date);const normalizedStart=normalizeDate(effectiveStartDate);const normalizedEnd=normalizeDate(effectiveEndDate);const start=normalizedStart.getTime();const end=normalizedEnd.getTime();const current=normalizedDate.getTime();return current>=Math.min(start,end)&¤t<=Math.max(start,end)};const calculateRangeSegments=()=>{if(!effectiveStartDate||!effectiveEndDate)return [];const segments=[];// 주별로 그룹화
|
|
3043
|
+
const weeks=[];for(let i=0;i<currentDate.length;i+=DAYS_PER_WEEK){weeks.push(currentDate.slice(i,i+DAYS_PER_WEEK));}weeks.forEach((week,weekIndex)=>{let rangeStartIndex=-1;let rangeEndIndex=-1;week.forEach((day,dayIndex)=>{if(day.date&&day.isCurrentMonth&&isDateInRange(new Date(day.date))){if(rangeStartIndex===-1)rangeStartIndex=dayIndex;rangeEndIndex=dayIndex;}else if(day.date&&!day.isCurrentMonth&&rangeStartIndex!==-1){const startPos=calculateDayPosition(rangeStartIndex);const endPos=calculateDayPosition(rangeEndIndex);segments.push({row:weekIndex,left:startPos,width:endPos-startPos+DAY_WIDTH});rangeStartIndex=-1;rangeEndIndex=-1;}});if(rangeStartIndex!==-1&&rangeEndIndex!==-1){const startPos=calculateDayPosition(rangeStartIndex);const endPos=calculateDayPosition(rangeEndIndex);segments.push({row:weekIndex,left:startPos,width:endPos-startPos+DAY_WIDTH});}});return segments};const segments=React.useMemo(calculateRangeSegments,[effectiveStartDate,effectiveEndDate,currentDate]);const isRangeStart=date=>{if(!effectiveStartDate||!date)return false;return date.getTime()===effectiveStartDate.getTime()};const isRangeEnd=date=>{if(!effectiveEndDate||!date)return false;return date.getTime()===effectiveEndDate.getTime()};return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment,{children:segments.map((segment,index)=>/*#__PURE__*/jsxRuntime.jsx(RangeContainer,{style:{top:`${segment.row*40}px`,left:`${segment.left}px`,width:`${segment.width}px`},borderLeft:currentDate.filter(day=>day.date&&day.isCurrentMonth&&isRangeStart(new Date(day.date))).length>0,borderRight:currentDate.filter(day=>day.date&&day.isCurrentMonth&&isRangeEnd(new Date(day.date))).length>0},index))})});const RangeContainer=styled__default["default"].div`
|
|
3044
|
+
position: absolute;
|
|
3045
|
+
height: 40px;
|
|
3046
|
+
z-index: 1;
|
|
3047
|
+
border-radius: ${({borderLeft,borderRight})=>`${borderLeft?"8px":"0"} ${borderRight?"8px":"0"} ${borderRight?"8px":"0"} ${borderLeft?"8px":"0"}`};
|
|
3048
|
+
|
|
3049
|
+
background-color: ${({theme})=>theme.colors.color.background.semantic.coreTranslucent};
|
|
3050
|
+
`;
|
|
3051
|
+
|
|
3052
|
+
function Month(props){const{isNextMonth,type,hoveredStartDate,hoveredEndDate,setSelectedDates,setHoveredStartDate,setHoveredEndDate}=props;// single/double 분기쳐보자....
|
|
3053
|
+
const selectedDates=type==="double"?props.selectedDates:[];const startDate=type==="double"?selectedDates[0]:undefined;const endDate=type==="double"?selectedDates[1]:undefined;const selectedDate=type==="single"?props.selectedDate:undefined;const onChange=type==="single"?props.onChange:undefined;const{monthData,nextMonthData}=React.useContext(CalendarContext);const days=["일","월","화","수","목","금","토"];const[lastClicked,setLastClicked]=React.useState(null);const[hoveredDate,setHoveredDate]=React.useState(null);const currentMonthData=isNextMonth?nextMonthData:monthData;const normalizeDate=date=>{return new Date(date.getFullYear(),date.getMonth(),date.getDate())};const compareDates=(date1,date2)=>{const normalized1=normalizeDate(date1);const normalized2=normalizeDate(date2);return normalized1.getTime()===normalized2.getTime()};const isInRange=date=>{if(!date)return false;if(type==="single"){if(!selectedDate)return false;return compareDates(date,selectedDate)}if(!startDate||!endDate)return false;const effectiveStartDate=hoveredStartDate||startDate;const effectiveEndDate=hoveredEndDate||endDate;const current=normalizeDate(date).getTime();const start=normalizeDate(effectiveStartDate).getTime();const end=normalizeDate(effectiveEndDate).getTime();return current>=Math.min(start,end)&¤t<=Math.max(start,end)};const checkRangeEdge=(date,edgeDate,hoveredEdgeDate)=>{if(!date||!edgeDate)return false;if(type==="single")return isInRange(date);const isHoveredEdge=hoveredEdgeDate&&compareDates(date,hoveredEdgeDate);const isActualEdge=compareDates(date,edgeDate);return isHoveredEdge||isActualEdge};const isRangeStart=date=>type==="double"?checkRangeEdge(date,startDate,hoveredStartDate):false;const isRangeEnd=date=>type==="double"?checkRangeEdge(date,endDate,hoveredEndDate):false;const handleDateSelection=(date,isHover)=>{if(!date)return;if(type==="single"){if(!isHover&&onChange)onChange(date);return}if(!startDate||!endDate||!lastClicked){if(isHover){setHoveredStartDate(date);setHoveredEndDate(date);}else {setSelectedDates([date,date]);setHoveredStartDate(date);setHoveredEndDate(date);setLastClicked("start");}return}if(lastClicked==="start"){if(isHover){setHoveredStartDate(startDate);setHoveredEndDate(date);}else {const newDates=[startDate,date].sort((a,b)=>a.getTime()-b.getTime());setSelectedDates(newDates);setHoveredStartDate(newDates[0]);setHoveredEndDate(newDates[1]);setLastClicked("end");}}else {if(isHover){setHoveredStartDate(date);setHoveredEndDate(endDate);}else {const newDates=[date,endDate].sort((a,b)=>a.getTime()-b.getTime());setSelectedDates(newDates);setHoveredStartDate(newDates[0]);setHoveredEndDate(newDates[1]);setLastClicked("start");}}};const handleMouseOver=date=>{if(type==="double"){setHoveredDate(date);handleDateSelection(date,true);}};const handleClick=date=>{handleDateSelection(date,false);};return /*#__PURE__*/jsxRuntime.jsxs(CalendarArea,{children:[/*#__PURE__*/jsxRuntime.jsx(DowArea,{children:days.map((dow,index)=>/*#__PURE__*/jsxRuntime.jsx(Dow,{children:/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:dow})},index))}),/*#__PURE__*/jsxRuntime.jsx(CalendarColumn,{children:currentMonthData.map((week,index)=>{return /*#__PURE__*/jsxRuntime.jsxs(CalendarRow,{children:[type==="double"&&startDate&&endDate&&/*#__PURE__*/jsxRuntime.jsx(CalendarRangeSquare,{startDate:startDate,endDate:endDate,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,currentDate:week}),week.map((day,index)=>{const date=new Date(day.date);const isSelected=date?isInRange(date):false;const isStart=date?isRangeStart(date):false;const isEnd=date?isRangeEnd(date):false;const isHighlighted=type==="single"?selectedDate&&compareDates(date,selectedDate):isStart||isEnd;return /*#__PURE__*/jsxRuntime.jsx(DateWrapper,{isCurrentMonth:day.isCurrentMonth,isSelected:day.isCurrentMonth?isSelected:false,isInRange:day.isCurrentMonth?isInRange(date):false,isStart:day.isCurrentMonth?isStart:false,isEnd:day.isCurrentMonth?isEnd:false,isHighlighted:day.isCurrentMonth?isHighlighted:false,onMouseOver:()=>handleMouseOver(date),onMouseLeave:()=>{if(type==="double"){setHoveredDate(null);if(startDate&&endDate){setHoveredStartDate(startDate);setHoveredEndDate(endDate);}}},onClick:()=>handleClick(date),children:/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyL",color:!day.isCurrentMonth?"color.foreground.neutral.primary":isHighlighted?"color.foreground.surface.static":isInRange(date)?"color.foreground.semantic.core":"color.foreground.neutral.primary",children:day.day})},index)})]},index)})})]})}const DateWrapper=styled__default["default"](MotionPressableDiv)`
|
|
3054
|
+
border-radius: 8px;
|
|
3055
|
+
display: flex;
|
|
3056
|
+
width: 40px;
|
|
3057
|
+
height: 40px;
|
|
3058
|
+
flex-direction: column;
|
|
3059
|
+
justify-content: center;
|
|
3060
|
+
align-items: center;
|
|
3061
|
+
opacity: ${({isCurrentMonth})=>isCurrentMonth?1:.3};
|
|
3062
|
+
background-color: ${({isHighlighted,isInRange,isStart,isEnd,theme})=>isHighlighted||isStart||isEnd?theme.colors.color.foreground.semantic.core:"transparent"};
|
|
3063
|
+
cursor: pointer;
|
|
3064
|
+
z-index: 2;
|
|
3065
|
+
border: none;
|
|
3066
|
+
`;const CalendarRow=styled__default["default"].div`
|
|
3067
|
+
display: flex;
|
|
3068
|
+
justify-content: space-between;
|
|
3069
|
+
align-items: center;
|
|
3070
|
+
flex: 1 0 0;
|
|
3071
|
+
align-self: stretch;
|
|
3072
|
+
position: relative;
|
|
3073
|
+
`;const CalendarColumn=styled__default["default"].div`
|
|
3074
|
+
display: flex;
|
|
3075
|
+
flex-direction: column;
|
|
3076
|
+
justify-content: center;
|
|
3077
|
+
align-items: center;
|
|
3078
|
+
gap: 8px;
|
|
3079
|
+
flex: 1 0 0;
|
|
3080
|
+
align-self: stretch;
|
|
3081
|
+
`;const DowArea=styled__default["default"].div`
|
|
3082
|
+
display: flex;
|
|
3083
|
+
justify-content: space-between;
|
|
3084
|
+
align-items: flex-start;
|
|
3085
|
+
align-self: stretch;
|
|
3086
|
+
`;const CalendarArea=styled__default["default"].div`
|
|
3087
|
+
display: flex;
|
|
3088
|
+
padding: 8px;
|
|
3089
|
+
flex-direction: column;
|
|
3090
|
+
align-items: flex-start;
|
|
3091
|
+
gap: 12px;
|
|
3092
|
+
flex: 1 0 0;
|
|
3093
|
+
align-self: stretch;
|
|
3094
|
+
`;const Dow=styled__default["default"].div`
|
|
3095
|
+
display: flex;
|
|
3096
|
+
width: 36px;
|
|
3097
|
+
height: 28px;
|
|
3098
|
+
flex-direction: column;
|
|
3099
|
+
justify-content: center;
|
|
3100
|
+
align-items: center;
|
|
3101
|
+
`;
|
|
3102
|
+
|
|
3103
|
+
function Year({onChange}){const{yearData,month}=React.useContext(CalendarContext);return /*#__PURE__*/jsxRuntime.jsx(Container$1,{children:yearData.map((_,index)=>{return /*#__PURE__*/jsxRuntime.jsx(MonthContainer,{onClick:()=>{onChange(index+1);},isSelected:index===month-1,children:/*#__PURE__*/jsxRuntime.jsxs(Text,{color:index===month-1?"color.foreground.semantic.core":"color.foreground.neutral.primary",variant:"BodyL",children:[index+1,"월"]})},index)})})}const Container$1=styled__default["default"].div`
|
|
3104
|
+
display: flex;
|
|
3105
|
+
padding: 8px;
|
|
3106
|
+
align-items: flex-start;
|
|
3107
|
+
gap: 12px 8px;
|
|
3108
|
+
flex: 1;
|
|
3109
|
+
align-self: stretch;
|
|
3110
|
+
flex-wrap: wrap;
|
|
3111
|
+
height: 100%;
|
|
3112
|
+
`;const MonthContainer=styled__default["default"](MotionPressableDiv)`
|
|
3113
|
+
display: flex;
|
|
3114
|
+
min-width: 90px;
|
|
3115
|
+
flex-direction: column;
|
|
3116
|
+
justify-content: center;
|
|
3117
|
+
align-items: center;
|
|
3118
|
+
flex: 1;
|
|
3119
|
+
align-self: stretch;
|
|
3120
|
+
border-radius: 8px;
|
|
3121
|
+
background: ${({isSelected,theme})=>isSelected?theme.colors.color.background.semantic.coreTranslucent:"transparent"};
|
|
3122
|
+
`;
|
|
3123
|
+
|
|
3124
|
+
const DatePicker=({selectedDates,setSelectedDates,selectedDate,type,showNextMonth,onChange,headline,size="medium",placeholder="날짜 선택",popoverWrapperStyle={}})=>{const[open,setOpen]=React.useState(false);const containerRef=React.useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const{month,setMonth,year,prevMonth,nextMonth}=React.useContext(CalendarContext);const[isMonth,setIsMonth]=React.useState(true);const[hoveredDates,setHoveredDates]=React.useState([undefined,undefined]);const hoveredStartDate=hoveredDates[0];const hoveredEndDate=hoveredDates[1];const handleSetSelectedDates=dates=>{setSelectedDates(dates);setHoveredDates([dates[0],dates[1]]);};var _selectedDate_toLocaleDateString;return /*#__PURE__*/jsxRuntime.jsxs(Container,{ref:containerRef,children:[/*#__PURE__*/jsxRuntime.jsx(Input$5,{style:{width:"100%"},value:type==="single"?(_selectedDate_toLocaleDateString=selectedDate===null||selectedDate===void 0?void 0:selectedDate.toLocaleDateString("ko-KR",{year:"numeric",month:"2-digit",day:"2-digit"}))!==null&&_selectedDate_toLocaleDateString!==void 0?_selectedDate_toLocaleDateString:"":selectedDates.length>0?selectedDates.map(date=>date.toLocaleDateString("ko-KR",{year:"numeric",month:"2-digit",day:"2-digit"})).join(" ~ "):"",onChange:()=>{},size:size,placeholder:placeholder,type:"text",readOnly:true,align:"left",onClick:()=>{setOpen(!open);},icon:"calendar"}),open?/*#__PURE__*/jsxRuntime.jsx(PopoverWrapper,{style:popoverWrapperStyle,children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence,{mode:"wait",children:/*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},style:{paddingBottom:"20px"},children:/*#__PURE__*/jsxRuntime.jsx(Popover,{type:"component",headline:headline,children:/*#__PURE__*/jsxRuntime.jsx(DatePickerContainer$1,{children:isMonth?/*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarContainer$1,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarHeader$1,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthArea$1,{onClick:()=>setIsMonth(false),children:[/*#__PURE__*/jsxRuntime.jsxs(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:[year,"년 ",month,"월"]}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.neutral.tertiary"})]}),/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthControl$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core",onClick:prevMonth}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core",onClick:nextMonth})]})]}),/*#__PURE__*/jsxRuntime.jsx(Month,{selectedDates:selectedDates,setSelectedDates:handleSetSelectedDates,selectedDate:selectedDate,type:type,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,setHoveredStartDate:date=>setHoveredDates([date,hoveredEndDate]),setHoveredEndDate:date=>setHoveredDates([hoveredStartDate,date]),onChange:onChange})]}),showNextMonth&&/*#__PURE__*/jsxRuntime.jsxs(CalendarContainer$1,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarHeader$1,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthArea$1,{onClick:()=>setIsMonth(false),children:[/*#__PURE__*/jsxRuntime.jsxs(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:[month+1>12?year+1:year,"년"," ",month+1>12?1:month+1,"월"]}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.neutral.tertiary"})]}),/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthControl$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core",onClick:prevMonth}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core",onClick:nextMonth})]})]}),/*#__PURE__*/jsxRuntime.jsx(Month,{selectedDates:selectedDates,setSelectedDates:handleSetSelectedDates,selectedDate:selectedDate,isNextMonth:true,type:type,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,setHoveredStartDate:date=>setHoveredDates([date,hoveredEndDate]),setHoveredEndDate:date=>setHoveredDates([hoveredStartDate,date]),onChange:onChange})]})]}):/*#__PURE__*/jsxRuntime.jsxs(CalendarContainer$1,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarHeader$1,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthArea$1,{onClick:()=>setIsMonth(true),children:[/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.semantic.core",children:year}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.semantic.core"})]}),/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthControl$1,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core"}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core"})]})]}),/*#__PURE__*/jsxRuntime.jsx(Year,{onChange:month=>{setMonth(month);setIsMonth(true);}})]})})})},"popover")})}):null]})};const Container=styled__default["default"].div`
|
|
3125
|
+
position: relative;
|
|
3126
|
+
width: 100%;
|
|
3127
|
+
`;const PopoverWrapper=styled__default["default"].div`
|
|
3128
|
+
position: absolute;
|
|
3129
|
+
top: 100%;
|
|
3130
|
+
padding-top: 4px;
|
|
3131
|
+
left: 0;
|
|
3132
|
+
width: fit-content;
|
|
3133
|
+
z-index: 9;
|
|
3134
|
+
`;const DatePickerContainer$1=styled__default["default"].div`
|
|
3135
|
+
display: flex;
|
|
3136
|
+
align-items: center;
|
|
3137
|
+
gap: 12px;
|
|
3138
|
+
align-self: stretch;
|
|
3139
|
+
`;const CalendarContainer$1=styled__default["default"].div`
|
|
3140
|
+
display: flex;
|
|
3141
|
+
width: 400px;
|
|
3142
|
+
height: 380px;
|
|
3143
|
+
flex-direction: column;
|
|
3144
|
+
align-items: flex-start;
|
|
3145
|
+
`;const CalendarHeader$1=styled__default["default"].div`
|
|
3146
|
+
display: flex;
|
|
3147
|
+
padding: 4px;
|
|
3148
|
+
justify-content: space-between;
|
|
3149
|
+
align-items: center;
|
|
3150
|
+
align-self: stretch;
|
|
3151
|
+
`;const CalendarMonthArea$1=styled__default["default"](MotionPressableDiv)`
|
|
3152
|
+
display: flex;
|
|
3153
|
+
padding: 4px 8px;
|
|
3154
|
+
align-items: center;
|
|
3155
|
+
gap: 4px;
|
|
3156
|
+
`;const CalendarMonthControl$1=styled__default["default"].div`
|
|
3157
|
+
display: flex;
|
|
3158
|
+
align-items: center;
|
|
3159
|
+
gap: 16px;
|
|
3160
|
+
`;
|
|
3161
|
+
|
|
3162
|
+
const DatePickerSingle=({selectedDates,setSelectedDates,selectedDate,type,onChange})=>{const[open,setOpen]=React.useState(false);const containerRef=React.useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const{month,setMonth,year,prevMonth,nextMonth}=React.useContext(CalendarContext);const[isMonth,setIsMonth]=React.useState(true);const[hoveredDates,setHoveredDates]=React.useState([undefined,undefined]);const hoveredStartDate=hoveredDates[0];const hoveredEndDate=hoveredDates[1];const handleSetSelectedDates=dates=>{setSelectedDates(dates);setHoveredDates([dates[0],dates[1]]);};return /*#__PURE__*/jsxRuntime.jsx(DatePickerContainer,{children:isMonth?/*#__PURE__*/jsxRuntime.jsxs(CalendarContainer,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarHeader,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthArea,{onClick:()=>setIsMonth(false),children:[/*#__PURE__*/jsxRuntime.jsxs(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:[year,"년 ",month,"월"]}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.neutral.tertiary"})]}),/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthControl,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core",onClick:prevMonth}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core",onClick:nextMonth})]})]}),/*#__PURE__*/jsxRuntime.jsx(Month,{selectedDates:selectedDates,setSelectedDates:handleSetSelectedDates,selectedDate:selectedDate,type:type,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,setHoveredStartDate:date=>setHoveredDates([date,hoveredEndDate]),setHoveredEndDate:date=>setHoveredDates([hoveredStartDate,date]),onChange:onChange})]}):/*#__PURE__*/jsxRuntime.jsxs(CalendarContainer,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarHeader,{children:[/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthArea,{onClick:()=>setIsMonth(true),children:[/*#__PURE__*/jsxRuntime.jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.semantic.core",children:year}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.semantic.core"})]}),/*#__PURE__*/jsxRuntime.jsxs(CalendarMonthControl,{children:[/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core"}),/*#__PURE__*/jsxRuntime.jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core"})]})]}),/*#__PURE__*/jsxRuntime.jsx(Year,{onChange:month=>{setMonth(month);setIsMonth(true);}})]})})};const DatePickerContainer=styled__default["default"].div`
|
|
3163
|
+
display: flex;
|
|
3164
|
+
align-items: center;
|
|
3165
|
+
gap: 12px;
|
|
3166
|
+
align-self: stretch;
|
|
3167
|
+
justify-content: center;
|
|
3168
|
+
`;const CalendarContainer=styled__default["default"].div`
|
|
3169
|
+
display: flex;
|
|
3170
|
+
width: 400px;
|
|
3171
|
+
height: 380px;
|
|
3172
|
+
flex-direction: column;
|
|
3173
|
+
align-items: flex-start;
|
|
3174
|
+
`;const CalendarHeader=styled__default["default"].div`
|
|
3175
|
+
display: flex;
|
|
3176
|
+
padding: 4px;
|
|
3177
|
+
justify-content: space-between;
|
|
3178
|
+
align-items: center;
|
|
3179
|
+
align-self: stretch;
|
|
3180
|
+
`;const CalendarMonthArea=styled__default["default"](MotionPressable)`
|
|
3181
|
+
display: flex;
|
|
3182
|
+
padding: 4px 8px;
|
|
3183
|
+
align-items: center;
|
|
3184
|
+
gap: 4px;
|
|
3185
|
+
`;const CalendarMonthControl=styled__default["default"].div`
|
|
3186
|
+
display: flex;
|
|
3187
|
+
align-items: center;
|
|
3188
|
+
gap: 16px;
|
|
3189
|
+
`;
|
|
3190
|
+
|
|
3041
3191
|
exports.Alert = Alert;
|
|
3042
3192
|
exports.Badge = Badge;
|
|
3043
3193
|
exports.Breadcrumb = Breadcrumb;
|
|
@@ -3050,6 +3200,8 @@ exports.Chip = Chip;
|
|
|
3050
3200
|
exports.ClientProvider = ClientProvider;
|
|
3051
3201
|
exports.ColorPicker = ColorPicker;
|
|
3052
3202
|
exports.ComboBox = ComboBox;
|
|
3203
|
+
exports.DatePicker = DatePicker;
|
|
3204
|
+
exports.DatePickerSingle = DatePickerSingle;
|
|
3053
3205
|
exports.Description = Description$1;
|
|
3054
3206
|
exports.Divider = Divider$1;
|
|
3055
3207
|
exports.Empty = Empty;
|