freemium-ui 1.0.217 → 1.0.220
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
Peer Dependencies to be installed
|
|
10
|
+
|
|
10
11
|
```
|
|
11
12
|
npm install styled-components
|
|
12
13
|
```
|
|
@@ -19,25 +20,20 @@ npm install @freshdesk/freemium-ui
|
|
|
19
20
|
|
|
20
21
|
Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
|
|
21
22
|
|
|
22
|
-
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
25
|
Here is a quick example to get you started, **it's all you need**:
|
|
26
26
|
|
|
27
27
|
```jsx
|
|
28
|
-
import React from 'react'
|
|
29
|
-
import ReactDOM from 'react-dom'
|
|
30
|
-
import {
|
|
28
|
+
import React from 'react'
|
|
29
|
+
import ReactDOM from 'react-dom'
|
|
30
|
+
import {Button} from 'freemium-ui'
|
|
31
31
|
|
|
32
32
|
function App() {
|
|
33
|
-
return
|
|
34
|
-
<Button>
|
|
35
|
-
Freemium Button
|
|
36
|
-
</Button>
|
|
37
|
-
);
|
|
33
|
+
return <Button>Freemium Button</Button>
|
|
38
34
|
}
|
|
39
35
|
|
|
40
|
-
ReactDOM.render(<App />, document.querySelector('#app'))
|
|
36
|
+
ReactDOM.render(<App />, document.querySelector('#app'))
|
|
41
37
|
```
|
|
42
38
|
|
|
43
39
|
## Contribution
|
|
@@ -47,11 +43,15 @@ Install Dependencies
|
|
|
47
43
|
```
|
|
48
44
|
npm install
|
|
49
45
|
```
|
|
46
|
+
|
|
50
47
|
Start the app using storybook
|
|
48
|
+
|
|
51
49
|
```
|
|
52
50
|
npm run storybook
|
|
53
51
|
```
|
|
52
|
+
|
|
54
53
|
Build Freemium Ui Core Components
|
|
54
|
+
|
|
55
55
|
```
|
|
56
56
|
npm run build
|
|
57
57
|
```
|
|
@@ -65,6 +65,7 @@ npm login --registry=https://registry.npmjs.org/
|
|
|
65
65
|
```
|
|
66
66
|
|
|
67
67
|
Publish the package to npm
|
|
68
|
+
|
|
68
69
|
```
|
|
69
70
|
npm publish
|
|
70
71
|
```
|
package/lib/index.cjs.js
CHANGED
|
@@ -352,7 +352,7 @@ object-assign
|
|
|
352
352
|
&.selected {
|
|
353
353
|
background-color: ${({theme:{colors:{components:{menu:{menuItem:{selected:e}}}}}})=>e.background};
|
|
354
354
|
}
|
|
355
|
-
`,Os=n.forwardRef(((e,t)=>{const{id:r,position:a="bottom",idAccessor:o="id",nameAccessor:c="name",inline:i=!0,defaultSelectedItem:s={},size:l
|
|
355
|
+
`,Os=n.forwardRef(((e,t)=>{const{id:r,position:a="bottom",idAccessor:o="id",nameAccessor:c="name",inline:i=!0,defaultSelectedItem:s={},size:l,disabled:h,type:u="primary",onClick:p=(()=>{}),items:d=[]}=e,[m,v]=n.useState(null);return n.createElement(Is,null,n.createElement(po,{overrideStyleClassName:"nopadding",ref:t,inline:i,size:l,disabled:h,type:u,onClick:e=>{h||p(s,e)}},n.createElement("div",null,s[c]),d&&d.length>1&&n.createElement(Rs,{"aria-describedby":r,onClick:e=>{h||(e.stopPropagation(),v(e.currentTarget))}},n.createElement(Vn,{size:"8",viewBox:"0 0 8 8",glyph:"top"===a?"chevron-up":"chevron-down"}))),n.createElement(dc,{id:r,anchorEl:m,onClose:()=>v(null),anchorOrigin:{vertical:"bottom"===a?"bottom":"top",horizontal:"right"},transformOrigin:{vertical:"bottom"===a?"top":"bottom",horizontal:"right"}},n.createElement(Ns,null,n.createElement(_s,{idAccessor:o,nameAccessor:c,options:d.filter((e=>e[o]!==s[o])),onSelect:e=>{p(e),v(null)}}))))})),Is=tt.div`
|
|
356
356
|
& > button.nopadding {
|
|
357
357
|
display: flex;
|
|
358
358
|
padding: 0 !important;
|
|
@@ -1051,7 +1051,7 @@ object-assign
|
|
|
1051
1051
|
padding: 8px;
|
|
1052
1052
|
cursor: pointer;
|
|
1053
1053
|
`,ph=Wl((({items:e,downshift:{isOpen:t,getMenuProps:r,getItemProps:a,selectedItem:o,inputValue:c,highlightedIndex:i,itemToString:s},overrideStyles:l={},itemComponent:h,type:u,filterKey:p,isMenuLoading:d,anchorRef:m,popoverRef:v})=>{let f=e;if(u===Yl.INPUT&&(null===o||"string"==typeof o&&o!==c||"object"==typeof o&&o&&o[p]&&o[p]!==c)&&("development"!==process.env.NODE_ENV||"string"==typeof e[0]||p||console.error("The 'items' you provided is of type Object, provide \n 'filterKey' prop to <Dropdown/> to specify which key has to be searched for."),p&&"object"==typeof e[0]&&(f=""!==c&&c?e.filter((e=>e&&e.ignoreFilter||p&&e&&e[p]&&c&&(e[p].toLowerCase().includes(c.toLowerCase())||s&&c.toLowerCase().includes(e[p].toLowerCase())))):e),"string"==typeof e[0]&&(f=ch(e,c))),0===f.length&&!d)return null;v.current&&m.current&&Sl(m.current.getBoundingClientRect(),v.current.getBoundingClientRect());return n.createElement(n.Fragment,null,n.createElement(Bo,{initialOffset:"-20px",timeout:200,in:t,unmountOnExit:!0},(e=>n.createElement("div",{style:{width:"100%",zIndex:1e3},id:"heloo"},n.createElement(hh,Object.assign({},r({onClick:e=>{e.stopPropagation()}}),{overrideStyles:l}),d?n.createElement("div",{className:"loader-wrapper"},n.createElement(Il,null)):n.createElement(n.Fragment,null,f.map(((e,t)=>{const r=f.indexOf(o)===t;return n.createElement(uh,Object.assign({},a({item:e,key:t,disabled:e.disabled}),{key:t,isSelectedIndex:r,canHighlight:i===t,disabled:e.disabled,showBorder:e.showBorder}),n.createElement(so.Flex,{justifyContent:"space-between",alignItems:"center"},n.createElement(so.Box,{width:"90%",style:{wordBreak:"break-word"}},h?h(e):s(e)),r?n.createElement(Vn,{glyph:"check",size:12,viewBox:"0 0 8 8"}):null))}))))))))})),dh=tt.div`
|
|
1054
|
-
${({isOpen:e,isErrored:t,disabled:n,theme:{palette:r,colors:a}})=>`\n position: relative;\n width: 100%;\n box-sizing: border-box;\n border-radius: 5px;\n border: 1px solid ${t?a.border.error:a.border.primary};\n background: white;\n appearance: none;\n padding: 4px 12px;\n display: flex;\n align-items: center;\n\n input {\n flex-grow: 1;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0px;\n min-height: 24px;\n background-color: #fff;\n min-width: 100px;\n box-sizing: border-box;\n border: none;\n overflow: hidden;\n padding : 0;\n margin : 2px;\n ::placeholder,\n ::-webkit-input-placeholder {\n color: ${r.S300}\n }\n :-ms-input-placeholder {\n color: ${r.S300}\n }\n
|
|
1054
|
+
${({isOpen:e,isErrored:t,disabled:n,theme:{palette:r,colors:a}})=>`\n position: relative;\n width: 100%;\n box-sizing: border-box;\n border-radius: 5px;\n border: 1px solid ${t?a.border.error:a.border.primary};\n background: white;\n appearance: none;\n padding: 4px 12px;\n display: flex;\n align-items: center;\n\n input {\n flex-grow: 1;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0px;\n min-height: 24px;\n background-color: #fff;\n min-width: 100px;\n box-sizing: border-box;\n border: none;\n overflow: hidden;\n padding : 0;\n margin : 2px;\n ::placeholder,\n ::-webkit-input-placeholder {\n color: ${r.S300}\n }\n :-ms-input-placeholder {\n color: ${r.S300}\n }\n }\n &[disabled] {\n filter : opacity(0.6);\n cursor : not-allowed;\n }\n ${e&&!t?`border: 1px solid transparent;\n box-shadow: 0 0 0 2px ${a.pseudo.focus}; \n transition: box-shadow 0.3s ease-in-out;`:""}\n \n \n\n\n .dropdown-status {\n transition: all ease-in 0.2s;\n pointer-events: ${n?"none":"all"};\n transform: ${e?"rotate(180deg)":"rotate(0deg)"};\n }\n `}
|
|
1055
1055
|
`,mh=n.forwardRef(((e,t)=>{const{downshift:{getInputProps:r,toggleMenu:a,isOpen:o},name:c,isErrored:i,disabled:s,placeholder:l="Enter input to get suggestions"}=e;return n.createElement(dh,{isErrored:i,isOpen:o,ref:t,disabled:s},n.createElement("input",Object.assign({},r({"data-testid":c}),{disabled:s,placeholder:l,onClick:a})),n.createElement("div",{className:"dropdown-status",onClick:s?()=>{}:a},n.createElement(Vn,{size:"8",viewBox:"0 0 8 8",glyph:"chevron-down"})))})),vh=Wl(mh),fh=tt.div`
|
|
1056
1056
|
display: block;
|
|
1057
1057
|
padding-left: 2px;
|
|
@@ -1261,7 +1261,7 @@ PERFORMANCE OF THIS SOFTWARE.
|
|
|
1261
1261
|
`,Wm=t.forwardRef(((e,t)=>n.createElement(Um,{checked:e.checked},n.createElement("label",null,n.createElement("input",{ref:t,type:"radio",name:e.name,value:e.value,readOnly:e.readOnly,checked:e.checked,onClick:e.onChange}),n.createElement("div",{className:"radio"}),n.createElement("div",null,e.children))))),Um=tt.div`
|
|
1262
1262
|
${({theme:{colors:{components:{radio:e},pseudo:t},typography:{body:n}},checked:r})=>`\n input {\n clip: rect(0,0,0,0);\n position : absolute;\n &:focus {\n & ~ .radio {\n box-shadow: ${t.focus} 0px 0px 0px 3px;\n border-color : transparent;\n }\n }\n }\n label {\n display: flex;\n align-items: center;\n user-select: none;\n }\n .radio {\n background-color: $fff;\n border: 1px solid;\n border-color: ${r?e.backgroundColor:e.borderColor};\n transition: background-color ease-in 0.2s;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px; \n &:before { \n left: 2px;\n top: 2px;\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n transition : all ease-in 0.2s;\n background-color: ${r?e.backgroundColor:"#fff"};\n }\n }\n font-size : ${n.label.fontSize};\n font-weight : ${n.label.fontWeight};\n &:hover {\n .radio {\n border-color : ${r?e.backgroundColor:e.hoverBorderColor}!important;\n \n box-shadow: ${t.hover} 0px 0px 0px 5px!important;\n }\n }\n`}
|
|
1263
1263
|
`,Km=ot(Wm,{checked:!1}),Gm=t.createContext({groupValue:null,groupDisabled:!1,updateGroupValue:null}),qm=tt.div`
|
|
1264
|
-
${({theme:{colors:{components:{checkbox:e,input:t},pseudo:n}},disabled:r,checked:a})=>`\n flex-grow : 1;\n flex-basis : 0;\n margin-right : 12px;\n margin-top: 12px;\n label.boxed-label {\n cursor : ${r?"
|
|
1264
|
+
${({theme:{colors:{components:{checkbox:e,input:t},pseudo:n}},disabled:r,checked:a})=>`\n flex-grow : 1;\n flex-basis : 0;\n margin-right : 12px;\n margin-top: 12px;\n pointer-events : ${r?"none":"initial"};\n label.boxed-label {\n cursor : ${r?"not-allowed":"pointer"};\n opacity : ${r?.75:1};\n white-space:nowrap;\n padding : 8px;\n padding-left : 16px;\n font-size : 14px;\n border : 1px solid red;\n border-radius : 4px;\n display:flex;\n align-items:center;\n justify-content : left;\n user-select:none;\n border: 1px solid;\n border-color: ${a?e.backgroundColor:t.primary.borderColor};\n text-shadow: ${a?"0 0 0 #000, 0 0 .45px #000":"none"};\n .hollow {\n background-color: ${a?e.backgroundColor:"#fff"};\n border: ${a?"none":"1px solid"};\n border-color: ${a?e.backgroundColor:e.borderColor};\n min-width: 16px;\n min-height: 16px;\n max-width: 16px;\n max-height: 16px;\n border-radius: 50%;\n margin-right : 8px;\n display : flex;\n align-items : center;\n justify-content : center;\n }\n &:focus-within {\n box-shadow: ${n.focus} 0px 0px 0px 2px;\n border-color : transparent;\n }\n input {\n position : absolute;\n clip : rect(0px 0px 0px 0px);\n }\n &:hover {\n ${r?"":`border-color : ${a?e.backgroundColor:t.primary.hoverBorderColor}!important`};\n box-shadow: ${r?"unset":`${n.hover} 0px 0px 0px 5px!important`}; \n }\n}\n`}
|
|
1265
1265
|
`;var Zm=ot((e=>{const{groupValue:r,groupDisabled:a,updateGroupValue:o}=t.useContext(Gm),c=r===e.value;if(null===o)throw new Error("freemium-ui : BoxedRadio should be used inside BoxedRadio.Group");return n.createElement(qm,{disabled:e.disabled||a,checked:c,className:e.className},n.createElement("label",{className:"boxed-label"},n.createElement("input",{type:"radio",checked:c,readOnly:e.readOnly,value:e.value,onChange:t=>{e.readOnly||t.target.checked&&o(e.value)}}),n.createElement("div",{className:"hollow"},c&&n.createElement(Vn,{size:"12",viewBox:"-1 -0.5 10 7",glyph:"tick"})),n.createElement("div",null,e.children)))}),{readOnly:!1,disabled:!1});const Xm=tt.div`
|
|
1266
1266
|
display: inline-flex;
|
|
1267
1267
|
align-items: center;
|
package/lib/index.esm.js
CHANGED
|
@@ -352,7 +352,7 @@ object-assign
|
|
|
352
352
|
&.selected {
|
|
353
353
|
background-color: ${({theme:{colors:{components:{menu:{menuItem:{selected:e}}}}}})=>e.background};
|
|
354
354
|
}
|
|
355
|
-
`,pl=e.forwardRef(((t,n)=>{const{id:r,position:a="bottom",idAccessor:o="id",nameAccessor:c="name",inline:i=!0,defaultSelectedItem:s={},size:l
|
|
355
|
+
`,pl=e.forwardRef(((t,n)=>{const{id:r,position:a="bottom",idAccessor:o="id",nameAccessor:c="name",inline:i=!0,defaultSelectedItem:s={},size:l,disabled:h,type:d="primary",onClick:p=(()=>{}),items:u=[]}=t,[m,v]=e.useState(null);return e.createElement(ul,null,e.createElement(Fo,{overrideStyleClassName:"nopadding",ref:n,inline:i,size:l,disabled:h,type:d,onClick:e=>{h||p(s,e)}},e.createElement("div",null,s[c]),u&&u.length>1&&e.createElement(vl,{"aria-describedby":r,onClick:e=>{h||(e.stopPropagation(),v(e.currentTarget))}},e.createElement(er,{size:"8",viewBox:"0 0 8 8",glyph:"top"===a?"chevron-up":"chevron-down"}))),e.createElement(Wc,{id:r,anchorEl:m,onClose:()=>v(null),anchorOrigin:{vertical:"bottom"===a?"bottom":"top",horizontal:"right"},transformOrigin:{vertical:"bottom"===a?"top":"bottom",horizontal:"right"}},e.createElement(ml,null,e.createElement(ll,{idAccessor:o,nameAccessor:c,options:u.filter((e=>e[o]!==s[o])),onSelect:e=>{p(e),v(null)}}))))})),ul=Et.div`
|
|
356
356
|
& > button.nopadding {
|
|
357
357
|
display: flex;
|
|
358
358
|
padding: 0 !important;
|
|
@@ -1051,7 +1051,7 @@ object-assign
|
|
|
1051
1051
|
padding: 8px;
|
|
1052
1052
|
cursor: pointer;
|
|
1053
1053
|
`,Uh=Vh((({items:t,downshift:{isOpen:n,getMenuProps:r,getItemProps:a,selectedItem:o,inputValue:c,highlightedIndex:i,itemToString:s},overrideStyles:l={},itemComponent:h,type:d,filterKey:p,isMenuLoading:u,anchorRef:m,popoverRef:v})=>{let f=t;if(d===wh.INPUT&&(null===o||"string"==typeof o&&o!==c||"object"==typeof o&&o&&o[p]&&o[p]!==c)&&("development"!==process.env.NODE_ENV||"string"==typeof t[0]||p||console.error("The 'items' you provided is of type Object, provide \n 'filterKey' prop to <Dropdown/> to specify which key has to be searched for."),p&&"object"==typeof t[0]&&(f=""!==c&&c?t.filter((e=>e&&e.ignoreFilter||p&&e&&e[p]&&c&&(e[p].toLowerCase().includes(c.toLowerCase())||s&&c.toLowerCase().includes(e[p].toLowerCase())))):t),"string"==typeof t[0]&&(f=Fh(t,c))),0===f.length&&!u)return null;v.current&&m.current&&lh(m.current.getBoundingClientRect(),v.current.getBoundingClientRect());return e.createElement(e.Fragment,null,e.createElement(vc,{initialOffset:"-20px",timeout:200,in:n,unmountOnExit:!0},(t=>e.createElement("div",{style:{width:"100%",zIndex:1e3},id:"heloo"},e.createElement($h,Object.assign({},r({onClick:e=>{e.stopPropagation()}}),{overrideStyles:l}),u?e.createElement("div",{className:"loader-wrapper"},e.createElement(mh,null)):e.createElement(e.Fragment,null,f.map(((t,n)=>{const r=f.indexOf(o)===n;return e.createElement(Wh,Object.assign({},a({item:t,key:n,disabled:t.disabled}),{key:n,isSelectedIndex:r,canHighlight:i===n,disabled:t.disabled,showBorder:t.showBorder}),e.createElement(No.Flex,{justifyContent:"space-between",alignItems:"center"},e.createElement(No.Box,{width:"90%",style:{wordBreak:"break-word"}},h?h(t):s(t)),r?e.createElement(er,{glyph:"check",size:12,viewBox:"0 0 8 8"}):null))}))))))))})),Kh=Et.div`
|
|
1054
|
-
${({isOpen:e,isErrored:t,disabled:n,theme:{palette:r,colors:a}})=>`\n position: relative;\n width: 100%;\n box-sizing: border-box;\n border-radius: 5px;\n border: 1px solid ${t?a.border.error:a.border.primary};\n background: white;\n appearance: none;\n padding: 4px 12px;\n display: flex;\n align-items: center;\n\n input {\n flex-grow: 1;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0px;\n min-height: 24px;\n background-color: #fff;\n min-width: 100px;\n box-sizing: border-box;\n border: none;\n overflow: hidden;\n padding : 0;\n margin : 2px;\n ::placeholder,\n ::-webkit-input-placeholder {\n color: ${r.S300}\n }\n :-ms-input-placeholder {\n color: ${r.S300}\n }\n
|
|
1054
|
+
${({isOpen:e,isErrored:t,disabled:n,theme:{palette:r,colors:a}})=>`\n position: relative;\n width: 100%;\n box-sizing: border-box;\n border-radius: 5px;\n border: 1px solid ${t?a.border.error:a.border.primary};\n background: white;\n appearance: none;\n padding: 4px 12px;\n display: flex;\n align-items: center;\n\n input {\n flex-grow: 1;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0px;\n min-height: 24px;\n background-color: #fff;\n min-width: 100px;\n box-sizing: border-box;\n border: none;\n overflow: hidden;\n padding : 0;\n margin : 2px;\n ::placeholder,\n ::-webkit-input-placeholder {\n color: ${r.S300}\n }\n :-ms-input-placeholder {\n color: ${r.S300}\n }\n }\n &[disabled] {\n filter : opacity(0.6);\n cursor : not-allowed;\n }\n ${e&&!t?`border: 1px solid transparent;\n box-shadow: 0 0 0 2px ${a.pseudo.focus}; \n transition: box-shadow 0.3s ease-in-out;`:""}\n \n \n\n\n .dropdown-status {\n transition: all ease-in 0.2s;\n pointer-events: ${n?"none":"all"};\n transform: ${e?"rotate(180deg)":"rotate(0deg)"};\n }\n `}
|
|
1055
1055
|
`,Gh=e.forwardRef(((t,n)=>{const{downshift:{getInputProps:r,toggleMenu:a,isOpen:o},name:c,isErrored:i,disabled:s,placeholder:l="Enter input to get suggestions"}=t;return e.createElement(Kh,{isErrored:i,isOpen:o,ref:n,disabled:s},e.createElement("input",Object.assign({},r({"data-testid":c}),{disabled:s,placeholder:l,onClick:a})),e.createElement("div",{className:"dropdown-status",onClick:s?()=>{}:a},e.createElement(er,{size:"8",viewBox:"0 0 8 8",glyph:"chevron-down"})))})),qh=Vh(Gh),Zh=Et.div`
|
|
1056
1056
|
display: block;
|
|
1057
1057
|
padding-left: 2px;
|
|
@@ -1261,7 +1261,7 @@ PERFORMANCE OF THIS SOFTWARE.
|
|
|
1261
1261
|
`,Cv=t=>{const{placeholder:n,isErrored:r,isRequired:a,errorText:o,name:c,label:i,id:s,disabled:l,displayFormat:h="YYYY-MM-DD hh:mm A",...d}=t;return e.createElement(Vv,{isErrored:r,id:`datetime-picker-container-${s||""}`},i&&e.createElement("label",null,i,a&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(Hv,Object.assign({canClearSelection:!0,closeOnSelection:!0,todayButtonText:"",disabled:l,showActionsBar:!0,highlightCurrentDay:!0,timePrecision:"minute",fill:!0,timePickerProps:{useAmPm:!0},inputProps:{placeholder:n||h,name:c,id:s,disabled:l},popoverProps:{minimal:!0,placement:"bottom-start",usePortal:!1},parseDate:e=>e?rd(e).toDate():new Date,formatDate:e=>e?rd(e).format(h):""},d)),r&&o&&e.createElement("span",{className:"error"},o))},kv=t=>{const{placeholder:n,name:r,isRequired:a,label:o,isErrored:c,errorText:i,id:s,monthYearLocation:l="start",disabled:h,displayFormat:d="YYYY-MM-DD",...p}=t;return e.createElement(Vv,{isErrored:c,id:`date-picker-container-${s||""}`},o&&e.createElement("label",null,o,a&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(Hv,Object.assign({canClearSelection:!0,closeOnSelection:!0,disabled:h,fill:!0,highlightCurrentDay:!0,inputProps:{placeholder:n||d,name:r,id:s,disabled:h},dayPickerProps:{},popoverProps:{minimal:!0,placement:"bottom-start",usePortal:!1},parseDate:e=>e?rd(e).toDate():new Date,formatDate:e=>e?rd(e).format(d):""},p)),c&&i&&e.createElement("span",{className:"error"},i))},Lv=t=>{const{placeholder:n,name:r,label:a,id:o,disabled:c,errorText:i,isErrored:s,isRequired:l,...h}=t;return e.createElement(Vv,{isErrored:s,id:`time-picker-container-${o||""}`},a&&e.createElement("label",null,a,l&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(yv,Object.assign({precision:"minute",useAmPm:!0,disabled:c},h)),s&&i&&e.createElement("span",{className:"error"},i))},Ev=s(((t,n)=>e.createElement(Sv,{checked:t.checked},e.createElement("label",null,e.createElement("input",{ref:n,type:"radio",name:t.name,value:t.value,readOnly:t.readOnly,checked:t.checked,onClick:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))))),Sv=Et.div`
|
|
1262
1262
|
${({theme:{colors:{components:{radio:e},pseudo:t},typography:{body:n}},checked:r})=>`\n input {\n clip: rect(0,0,0,0);\n position : absolute;\n &:focus {\n & ~ .radio {\n box-shadow: ${t.focus} 0px 0px 0px 3px;\n border-color : transparent;\n }\n }\n }\n label {\n display: flex;\n align-items: center;\n user-select: none;\n }\n .radio {\n background-color: $fff;\n border: 1px solid;\n border-color: ${r?e.backgroundColor:e.borderColor};\n transition: background-color ease-in 0.2s;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px; \n &:before { \n left: 2px;\n top: 2px;\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n transition : all ease-in 0.2s;\n background-color: ${r?e.backgroundColor:"#fff"};\n }\n }\n font-size : ${n.label.fontSize};\n font-weight : ${n.label.fontWeight};\n &:hover {\n .radio {\n border-color : ${r?e.backgroundColor:e.hoverBorderColor}!important;\n \n box-shadow: ${t.hover} 0px 0px 0px 5px!important;\n }\n }\n`}
|
|
1263
1263
|
`,_v=Dt(Ev,{checked:!1}),Av=p({groupValue:null,groupDisabled:!1,updateGroupValue:null}),Dv=Et.div`
|
|
1264
|
-
${({theme:{colors:{components:{checkbox:e,input:t},pseudo:n}},disabled:r,checked:a})=>`\n flex-grow : 1;\n flex-basis : 0;\n margin-right : 12px;\n margin-top: 12px;\n label.boxed-label {\n cursor : ${r?"
|
|
1264
|
+
${({theme:{colors:{components:{checkbox:e,input:t},pseudo:n}},disabled:r,checked:a})=>`\n flex-grow : 1;\n flex-basis : 0;\n margin-right : 12px;\n margin-top: 12px;\n pointer-events : ${r?"none":"initial"};\n label.boxed-label {\n cursor : ${r?"not-allowed":"pointer"};\n opacity : ${r?.75:1};\n white-space:nowrap;\n padding : 8px;\n padding-left : 16px;\n font-size : 14px;\n border : 1px solid red;\n border-radius : 4px;\n display:flex;\n align-items:center;\n justify-content : left;\n user-select:none;\n border: 1px solid;\n border-color: ${a?e.backgroundColor:t.primary.borderColor};\n text-shadow: ${a?"0 0 0 #000, 0 0 .45px #000":"none"};\n .hollow {\n background-color: ${a?e.backgroundColor:"#fff"};\n border: ${a?"none":"1px solid"};\n border-color: ${a?e.backgroundColor:e.borderColor};\n min-width: 16px;\n min-height: 16px;\n max-width: 16px;\n max-height: 16px;\n border-radius: 50%;\n margin-right : 8px;\n display : flex;\n align-items : center;\n justify-content : center;\n }\n &:focus-within {\n box-shadow: ${n.focus} 0px 0px 0px 2px;\n border-color : transparent;\n }\n input {\n position : absolute;\n clip : rect(0px 0px 0px 0px);\n }\n &:hover {\n ${r?"":`border-color : ${a?e.backgroundColor:t.primary.hoverBorderColor}!important`};\n box-shadow: ${r?"unset":`${n.hover} 0px 0px 0px 5px!important`}; \n }\n}\n`}
|
|
1265
1265
|
`;var Ov=Dt((n=>{const{groupValue:r,groupDisabled:a,updateGroupValue:o}=t(Av),c=r===n.value;if(null===o)throw new Error("freemium-ui : BoxedRadio should be used inside BoxedRadio.Group");return e.createElement(Dv,{disabled:n.disabled||a,checked:c,className:n.className},e.createElement("label",{className:"boxed-label"},e.createElement("input",{type:"radio",checked:c,readOnly:n.readOnly,value:n.value,onChange:e=>{n.readOnly||e.target.checked&&o(n.value)}}),e.createElement("div",{className:"hollow"},c&&e.createElement(er,{size:"12",viewBox:"-1 -0.5 10 7",glyph:"tick"})),e.createElement("div",null,n.children)))}),{readOnly:!1,disabled:!1});const Iv=Et.div`
|
|
1266
1266
|
display: inline-flex;
|
|
1267
1267
|
align-items: center;
|
|
@@ -10,4 +10,4 @@ export interface ModalProps {
|
|
|
10
10
|
customClass?: string;
|
|
11
11
|
customModalContentStyles?: {};
|
|
12
12
|
}
|
|
13
|
-
export declare const Modal: ({ children, isOpen, onDismiss, position, align, size, customModalContentStyles, customClass }: ModalProps) => JSX.Element;
|
|
13
|
+
export declare const Modal: ({ children, isOpen, onDismiss, position, align, size, customModalContentStyles, customClass, }: ModalProps) => JSX.Element;
|