@xfers/design-system 7.1.0 → 8.0.0-dev.dfd424f601
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/cjs/index.js +6 -6
- package/cjs/index.js.map +1 -1
- package/dist/components/Carousel/index.js +7 -2
- package/dist/components/Carousel/index.js.map +1 -1
- package/dist/components/Select/index.js +2 -2
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Steps/DesktopSteps.js +20 -35
- package/dist/components/Steps/DesktopSteps.js.map +1 -1
- package/dist/components/Tabs/index.js +21 -2
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/Timeline/index.js +11 -30
- package/dist/components/Timeline/index.js.map +1 -1
- package/dist/components/Tooltip/index.js +1 -1
- package/dist/types/components/Tabs/index.d.ts +4 -2
- package/es/index.js +6 -6
- package/es/index.js.map +1 -1
- package/package.json +3 -3
package/cjs/index.js
CHANGED
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
color: ${Le.text.white};
|
|
288
288
|
box-shadow: none;
|
|
289
289
|
|
|
290
|
-
.ant-tooltip-
|
|
290
|
+
.ant-tooltip-container {
|
|
291
291
|
padding: 12px;
|
|
292
292
|
border-radius: 8px;
|
|
293
293
|
box-shadow: none;
|
|
@@ -403,7 +403,7 @@
|
|
|
403
403
|
${qc}
|
|
404
404
|
${Zc}
|
|
405
405
|
padding-bottom: 8px;
|
|
406
|
-
`,Jc={padding:0,paddingBottom:"4px",borderRadius:"12px"},Qc={sm:"md",lg:"lg"},td={sm:"md",lg:"lg"},ed=t=>s.default.createElement(s.default.Fragment,null,t&&s.default.createElement(bt.Body,{color:Le.color.base.onNeutralSecondary,size:"sm"},t),s.default.createElement(Tc,{icon:"keyboard_arrow_down"})),nd=(t,e)=>e?s.default.createElement(bt.Body,{size:Qc[t]},e):null,id=(t,e,n)=>"multiple"===t?({label:t,onClose:i})=>s.default.createElement(Ic,{type:e?"disabled":"positive",variant:"removable",size:n,onClick:e?void 0:i},t):void 0,od=function(n){var{children:i,disabled:o=!1,size:r="sm",mode:a,label:l,labelTooltip:c,selectRef:h,placeholder:u,error:p=!1,secondaryText:f,helperText:g,options:m}=n,b=d(n,["children","disabled","size","mode","label","labelTooltip","selectRef","placeholder","error","secondaryText","helperText","options"]);const x=t.useRef(null),y=h||x;return s.default.createElement(Hc,null,l&&((t,e)=>t?s.default.createElement(Bc,null,s.default.createElement(bt.Body,{size:"md"},t),e?s.default.createElement(wc,{placement:"top",title:"I'm Tooltip Component",content:e},s.default.createElement("span",null,s.default.createElement(Tc,{icon:"info",size:"xs"}))):null):null)(l,c),s.default.createElement(jc,Object.assign({disabled:o,mode:a,ref:y,$size:r,$mode:a,getPopupContainer:()=>document.body},b,{error:p,
|
|
406
|
+
`,Jc={padding:0,paddingBottom:"4px",borderRadius:"12px"},Qc={sm:"md",lg:"lg"},td={sm:"md",lg:"lg"},ed=t=>s.default.createElement(s.default.Fragment,null,t&&s.default.createElement(bt.Body,{color:Le.color.base.onNeutralSecondary,size:"sm"},t),s.default.createElement(Tc,{icon:"keyboard_arrow_down"})),nd=(t,e)=>e?s.default.createElement(bt.Body,{size:Qc[t]},e):null,id=(t,e,n)=>"multiple"===t?({label:t,onClose:i})=>s.default.createElement(Ic,{type:e?"disabled":"positive",variant:"removable",size:n,onClick:e?void 0:i},t):void 0,od=function(n){var{children:i,disabled:o=!1,size:r="sm",mode:a,label:l,labelTooltip:c,selectRef:h,placeholder:u,error:p=!1,secondaryText:f,helperText:g,options:m}=n,b=d(n,["children","disabled","size","mode","label","labelTooltip","selectRef","placeholder","error","secondaryText","helperText","options"]);const x=t.useRef(null),y=h||x;return s.default.createElement(Hc,null,l&&((t,e)=>t?s.default.createElement(Bc,null,s.default.createElement(bt.Body,{size:"md"},t),e?s.default.createElement(wc,{placement:"top",title:"I'm Tooltip Component",content:e},s.default.createElement("span",null,s.default.createElement(Tc,{icon:"info",size:"xs"}))):null):null)(l,c),s.default.createElement(jc,Object.assign({disabled:o,mode:a,ref:y,$size:r,$mode:a,getPopupContainer:()=>document.body},b,{error:p,popupRender:t=>s.default.createElement(Kc,{$size:r},s.default.createElement(bt.Body,{size:"sm"===r?"md":"lg"},t)),popupStyle:Jc,suffixIcon:ed(f),placeholder:nd(r,u),tagRender:id(a,o,r),maxTagCount:999}),m?((t,n)=>t.map(({value:t,label:i,icon:o,disabled:r})=>s.default.createElement(e.Select.Option,{key:t,value:t,disabled:r},s.default.createElement(Yc,null,o&&s.default.createElement(o,{style:{width:"16px",height:"16px"}}),s.default.createElement(bt.Body,{size:td[n]},i)))))(m,r):i),(t=>t?s.default.createElement(bt.Body,{color:Le.color.base.onNeutralSecondary,size:"sm"},t):null)(g))};od.Option=e.Select.Option;const rd=(t,{iconSrc:e=null,extraText:i="",extraAction:o=()=>{},isAddItemBarVisible:r=!0,topContent:a,bottomContent:l,actionContent:c})=>s.default.createElement(sd,null,a,t,c||(({iconSrc:t=null,extraText:e="",extraAction:i=()=>{},isAddItemBarVisible:o=!0})=>o?s.default.createElement(cd,{onMouseDown:()=>{i()}},t?s.default.createElement(ld,{src:t}):s.default.createElement(n.SvgAdd,null),e):null)({iconSrc:e,extraText:i,extraAction:o,isAddItemBarVisible:r}),l),ad=t=>{var{className:e="",children:n,disabled:i=!1,mode:o,label:r,iconSrc:a="",extraText:l="",extraAction:c=()=>{},isAddItemBarVisible:h=!0,topContent:u=null,bottomContent:p=null,actionContent:f=null}=t,g=d(t,["className","children","disabled","mode","label","iconSrc","extraText","extraAction","isAddItemBarVisible","topContent","bottomContent","actionContent"]);return s.default.createElement(od,Object.assign({className:e,disabled:i,mode:o,label:r,dropdownRender:t=>rd(t,{iconSrc:a,extraText:l,extraAction:c,isAddItemBarVisible:h,topContent:u,bottomContent:p,actionContent:f})},g),n)};ad.Option=od.Option;const sd=ie.div`
|
|
407
407
|
padding-top: 15px;
|
|
408
408
|
`,ld=ie.img`
|
|
409
409
|
margin-right: 5px;
|
|
@@ -803,7 +803,7 @@ padding-top:
|
|
|
803
803
|
${ue} {
|
|
804
804
|
display: ${t=>"lg"===t.only?"none":"block"};
|
|
805
805
|
}
|
|
806
|
-
`,Eh=t=>{var{className:n,children:i}=t,o=d(t,["className","children"]);const r=`\n & .ant-steps-item-title {\n padding-right: 0;\n }\n \n & .ant-steps-item-finish
|
|
806
|
+
`,Eh=t=>{var{className:n,children:i}=t,o=d(t,["className","children"]);const r=`\n & .ant-steps-item-title {\n padding-right: 0;\n }\n \n & .ant-steps-item-finish .ant-steps-item-title {\n ${me}\n ${Oe}\n }\n \n & .ant-steps-item-process .ant-steps-item-title {\n ${me}\n ${Ee}\n }\n\n & .ant-steps-item-wait .ant-steps-item-title {\n ${me}\n ${Oe}\n color: #777777;\n }\n \n & .ant-steps-item-finish .ant-steps-item-icon {\n background: #43CC32;\n }\n \n &.ant-steps-dot .ant-steps-item-icon {\n width: 13px;\n height: 13px;\n }\n \n &.ant-steps-dot .ant-steps-item-section {\n width: unset;\n max-width: 100%;\n }\n \n &.ant-steps-vertical.ant-steps-dot .ant-steps-item-icon {\n margin-top: 6px;\n }\n \n &.ant-steps-dot .ant-steps-item-rail {\n margin-left: 15px;\n top: 4px;\n left: -9px;\n }\n \n & .ant-steps-item-finish .ant-steps-item-rail {\n border-color: #CACACA;\n }\n\n & .ant-steps-item-process .ant-steps-item-rail {\n background: #CACACA;\n }\n \n &.ant-steps-vertical.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon {\n top: 0;\n left: 0;\n }\n \n &.ant-steps-vertical .ant-steps-item-icon {\n margin-right: 10px;\n }\n `,a=pt`
|
|
807
807
|
& .ant-steps-item-title {
|
|
808
808
|
white-space: nowrap;
|
|
809
809
|
width: 100%;
|
|
@@ -852,7 +852,7 @@ padding-top:
|
|
|
852
852
|
.ant-table-tbody > tr:hover > td {
|
|
853
853
|
background: ${st.HOVER_SURFACE};
|
|
854
854
|
}
|
|
855
|
-
`,Ch=t=>{var{children:n}=t,
|
|
855
|
+
`,Ch=t=>{var{children:n,items:i}=t,o=d(t,["children","items"]);const{brand:r}=Fe(),a=`\n font-family: ${qe};\n font-size: 16px;\n font-weight: 400;\n\n &.ant-tabs {\n width: 100%;\n }\n\n .ant-tabs-ink-bar {\n z-index: 0;\n }\n\n .ant-tabs-nav .ant-tabs-tab {\n margin-right: 20px;\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .ant-tabs-nav .ant-tabs-tab:hover,\n .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {\n color: ${r.primary.default};\n }\n\n .ant-tabs-nav .ant-tabs-tab-active {\n font-weight: 700;\n font-size: 16px;\n font-family: Red Hat Display;\n }\n \n .ant-tabs-ink-bar {\n background-color: ${r.primary.default}; \n }\n `,l=null!=i?i:n?(()=>{const t=[];return s.default.Children.forEach(n,e=>{var n,i;if(!s.default.isValidElement(e))return;const o=e.props,{tab:r,key:a,children:l}=o,c=d(o,["tab","key","children"]);t.push(Object.assign({key:String(null!==(i=null!==(n=e.key)&&void 0!==n?n:a)&&void 0!==i?i:""),label:r,children:l},c))}),t})():void 0;return s.default.createElement(e.Tabs,Object.assign({className:`${pt(a)}`,items:l},o))};Ch.TabPane=e.Tabs.TabPane;var Dh={Group:function(t){var{className:n=""}=t,i=d(t,["className"]);const o=`\n &.ant-checkbox-group {\n width: 100% !important;\n }\n\n & .ant-checkbox-group-item {\n display: flex !important;\n align-items: flex-start !important;\n\n border: 1px solid ${Le.brand.line.base} !important;\n border-radius: 5px !important;\n\n &:hover {\n border: 1px solid ${Le.brand.primary.default} !important;\n }\n\n &:focus-within {\n border: 1px solid ${Le.brand.primary.default} !important;\n }\n\n &:not(:last-child) {\n margin-bottom: 10px !important;\n width: 100% !important;\n }\n }\n\n & .ant-checkbox-wrapper-checked {\n border: 1px solid ${Le.brand.primary.default} !important;\n }\n\n & .ant-checkbox-wrapper {\n padding-left: 16px !important;\n padding-top: 11px !important;\n padding-bottom: 11px !important;\n line-height: 1.6 !important;\n color: ${exports.NEUTRAL_COLORS.BLACK} !important;\n font-family: ${qe} !important;\n }\n\n & .ant-checkbox {\n margin-top: 4px !important;\n }\n\n & .ant-checkbox + span {\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n\n & .ant-checkbox-checked .ant-checkbox-inner {\n background-color: ${Le.brand.primary.illustration} !important;\n border-color: ${Le.brand.primary.default} !important;\n }\n\n & .ant-checkbox-inner {\n border-radius: 5px !important;\n border: 1px solid ${Le.brand.primary.default} !important;\n }\n `;return s.default.createElement(e.Checkbox.Group,Object.assign({className:`${pt(o)} ${n}`},i))}};const Mh=ie.div`
|
|
856
856
|
width: 100%;
|
|
857
857
|
padding-top: 4px;
|
|
858
858
|
display: block;
|
|
@@ -989,7 +989,7 @@ padding-top:
|
|
|
989
989
|
--antd-wave-shadow-color: ${Le.brand.primary.default};
|
|
990
990
|
}
|
|
991
991
|
}
|
|
992
|
-
`,Xh=t=>{var{className:n}=t,i=d(t,["className"]);return s.default.createElement(e.Timeline,Object.assign({},i,{className:ut(pt("\n
|
|
992
|
+
`,Xh=t=>{var{className:n}=t,i=d(t,["className"]);return s.default.createElement(e.Timeline,Object.assign({},i,{className:ut(pt("\n &.ant-timeline .ant-timeline-item {\n .ant-timeline-item-icon {\n top: 40px;\n }\n\n .ant-timeline-item-rail {\n top: 40px;\n bottom: -40px;\n }\n\n .ant-timeline-item-content {\n margin-left: 20px;\n }\n }\n "),n)}))};Xh.Item=e.Timeline.Item;const qh=ie.div`
|
|
993
993
|
background-color: ${Le.color.surface.secondaryNeutral};
|
|
994
994
|
border-radius: 8px;
|
|
995
995
|
display: flex;
|
|
@@ -1138,7 +1138,7 @@ padding-top:
|
|
|
1138
1138
|
`,m=pt`
|
|
1139
1139
|
display: block;
|
|
1140
1140
|
margin: 1px 6px auto 0;
|
|
1141
|
-
`;return s.default.createElement(g,Object.assign({},r),e&&("primary"===o?s.default.createElement(n.SvgInfoFilled,{style:{minHeight:"18px",minWidth:"18px"},color:a.primary.emphasis,className:ut(m)}):"success"===o?s.default.createElement(n.SvgTick,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.positive,className:ut(m)}):"warning"===o?s.default.createElement(n.SvgWarningFilled,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.warning,className:ut(m)}):"error"===o?s.default.createElement(n.SvgCrossMini,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.critical,className:ut(m)}):"notification"===o?s.default.createElement(n.SvgInfoFilled,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.info,className:ut(m)}):s.default.createElement(s.default.Fragment,null)),s.default.createElement(bt.Body,{size:"md"},i))},exports.Button=Xe,exports.Card=Je,exports.Carousel=function(t){var{children:
|
|
1141
|
+
`;return s.default.createElement(g,Object.assign({},r),e&&("primary"===o?s.default.createElement(n.SvgInfoFilled,{style:{minHeight:"18px",minWidth:"18px"},color:a.primary.emphasis,className:ut(m)}):"success"===o?s.default.createElement(n.SvgTick,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.positive,className:ut(m)}):"warning"===o?s.default.createElement(n.SvgWarningFilled,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.warning,className:ut(m)}):"error"===o?s.default.createElement(n.SvgCrossMini,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.critical,className:ut(m)}):"notification"===o?s.default.createElement(n.SvgInfoFilled,{style:{minHeight:"18px",minWidth:"18px"},color:Le.color.status.info,className:ut(m)}):s.default.createElement(s.default.Fragment,null)),s.default.createElement(bt.Body,{size:"md"},i))},exports.Button=Xe,exports.Card=Je,exports.Carousel=function(t){var{children:e,activeKey:n,width:i=250}=t,o=d(t,["children","activeKey","width"]);const{brand:r}=Fe(),a=e.map((t,e)=>({key:String(e),label:null,children:t,forceRender:!0})),l=e.map((t,e)=>s.default.createElement(_c,{key:e,isActive:e===n,activeColor:r.primary.default}));return s.default.createElement(xc,null,s.default.createElement(yc,Object.assign({renderTabBar:()=>s.default.createElement("div",null),width:i,activeKey:n.toString(),animated:!0,items:a},o)),s.default.createElement(vc,null,l))},exports.Chart=({xValues:e,yValues:n,dataPrefix:i,dataPostfix:o,straitsXStyle:r,height:a=40})=>{const l=t.useRef(null),[c,d]=t.useState({datasets:[]}),h={labels:e,datasets:[{data:n}]},u=i||"",p=o||"";t.useEffect(()=>{const t=l.current;if(!t)return;const e=t.ctx,n=e.createLinearGradient(0,0,0,280);n.addColorStop(.3,"rgba(47, 141, 238, 0.08)"),n.addColorStop(.6,"rgba(47, 141, 238, 0.0002)"),n.addColorStop(1,"rgba(47, 141, 238, 0");const i=e.createLinearGradient(0,0,0,280);i.addColorStop(0,"rgba(0, 211, 126, 0.2)"),i.addColorStop(.1,"rgba(0, 211, 126, 0.1)"),i.addColorStop(1,"rgba(0, 211, 126, 0)");const o=Object.assign(Object.assign({},h),{datasets:h.datasets.map(t=>Object.assign(Object.assign({},t),{backgroundColor:r?i:n,fill:!0,borderColor:r?"#00D37E":"#2E8DEE",pointRadius:0}))});d(o)},[r,e,n]);const f={maintainAspectRatio:!1,plugins:{legend:{display:!1,labels:{font:{family:"'Inter', 'Arial', sans-serif"}}},tooltip:{intersect:!1,padding:15,displayColors:!1,borderColor:"rgba(0, 211, 126, 1)",borderWidth:r?1:0,backgroundColor:r?"#ffffff":"#000000",titleColor:r?"#1B2736":"#fff",bodyColor:r?"#1B2736":"#fff",titleAlign:"center",bodyAlign:"center",titleFont:{size:14},bodyFont:{size:14},callbacks:{title:t=>r?`${u}${t[0].parsed.y}${p}`:t[0].label,label:t=>r?t.label:`${u}${t.parsed.y}${p}`}}},scales:{x:{ticks:{color:r?"#1B2736":"rgba(0, 0, 0, 0.4)",font:{weight:"500",size:13}},grid:{display:!1}},y:{ticks:{beginAtZero:!0,padding:18,maxTicksLimit:3,color:r?"#1B2736":"rgba(0, 0, 0, 0.4)",callback:t=>`${u}${t}${p}`},grid:{display:!1,drawBorder:!1}}}};return s.default.createElement("div",{style:{position:"relative",height:`${a}vh`,width:"99%"}},s.default.createElement(bc,{id:"chart",ref:l,type:"line",data:c,options:f}))},exports.Checkbox=Dh,exports.Coachmark=function({index:t,primaryProps:e,size:n,skipProps:i,step:o,tooltipProps:r,backProps:a}){const{title:l,content:c,data:d}=o;return s.default.createElement(qh,{role:r.role},s.default.createElement(Zh,null,s.default.createElement(Kh,null,s.default.createElement(bt.Label,{size:"md"},l),s.default.createElement(Jh,{role:i.role,onClick:i.onClick},s.default.createElement(Tc,{icon:"close",size:"m"}))),s.default.createElement(bt.Body,{size:"md"},c)),s.default.createElement(Qh,null,s.default.createElement(tu,null,Array.from({length:n},(e,n)=>0===t&&!0===(null==d?void 0:d.skipZeroIndex)?s.default.createElement(s.default.Fragment,null):s.default.createElement(eu,{key:n,isActive:n===t}))),s.default.createElement(iu,null,a&&s.default.createElement(nu,{typographyType:"label",size:"md",role:null==a?void 0:a.role,isDisabled:0===t,onClick:a.onClick,isUnderlined:!1},"Back"),s.default.createElement(Rh,{typographyType:"label",size:"md",role:e.role,onClick:e.onClick,isUnderlined:!1},"Next"))))},exports.ContentBreakdown=({title:t,children:e})=>{const{spacing:n,neutral:i}=Fe(),o=ie.div`
|
|
1142
1142
|
margin-top: ${n.sm};
|
|
1143
1143
|
padding: ${n.md};
|
|
1144
1144
|
background: ${i.background};
|