@desynova-digital/components 9.1.15 → 9.1.17

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.
@@ -26,8 +26,12 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (
26
26
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
27
27
  //'@desynova-digital/tokens'
28
28
 
29
- var DatePickerInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & div.form-input > input {\n display: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: 'SFUIText-Medium';\n color: ", ";\n cursor: ", ";\n pointer-events: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n\n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items: center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule: evenodd;\n clip-rule: evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: 'SFUIText-Regular';\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: 'SFUIText-Regular';\n box-sizing: border-box;\n position: relative;\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: ' ';\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text > .month-text {\n font-family: 'SFUIText-Medium';\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month.disabled > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today.disabled > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.today > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"])), function (props) {
29
+ var DatePickerInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & div.form-input > input {\n display: ", ";\n }\n .label-text{\n cursor: ", ";\n pointer-events: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: 'SFUIText-Medium';\n color: ", ";\n cursor: ", ";\n pointer-events: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n\n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items: center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule: evenodd;\n clip-rule: evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: 'SFUIText-Regular';\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: 'SFUIText-Regular';\n box-sizing: border-box;\n position: relative;\n }\n .calendar{\n position: ", ";\n left: ", ";\n top: ", ";\n right: ", ";\n bottom: ", ";\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: ' ';\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text > .month-text {\n font-family: 'SFUIText-Medium';\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month.disabled > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today.disabled > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.today > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"])), function (props) {
30
30
  return props.inline ? 'none' : 'block';
31
+ }, function (props) {
32
+ return props.readOnly ? 'not-allowed' : 'pointer';
33
+ }, function (props) {
34
+ return props.readOnly ? 'none' : 'all';
31
35
  }, function (props) {
32
36
  return _tokens.colors[props.theme].inputCommon.background;
33
37
  }, function (props) {
@@ -76,6 +80,16 @@ var DatePickerInput = _styledComponents["default"].div(_templateObject || (_temp
76
80
  return props.inline ? '0px' : '-10px;';
77
81
  }, function (props) {
78
82
  return _tokens.colors[props.theme].inputLabel.colorOnFocus;
83
+ }, function (props) {
84
+ return props.baseStyles && props.baseStyles.position ? props.baseStyles.position : '';
85
+ }, function (props) {
86
+ return props.baseStyles && props.baseStyles.left ? props.baseStyles.left : '';
87
+ }, function (props) {
88
+ return props.baseStyles && props.baseStyles.top ? props.baseStyles.top : '';
89
+ }, function (props) {
90
+ return props.baseStyles && props.baseStyles.right ? props.baseStyles.right : '';
91
+ }, function (props) {
92
+ return props.baseStyles && props.baseStyles.bottom ? props.baseStyles.bottom : '';
79
93
  }, function (props) {
80
94
  return props.inline ? 'relative' : 'absolute';
81
95
  }, function (props) {
@@ -1680,6 +1680,13 @@
1680
1680
  ],
1681
1681
  "width": 12,
1682
1682
  "height": 13
1683
+ },
1684
+ "history": {
1685
+ "paths": [
1686
+ "M6.66667 0C3.90556 0 1.66667 2.23889 1.66667 5H0L2.16111 7.16111L2.2 7.23889L4.44444 5H2.77778C2.77778 2.85 4.51667 1.11111 6.66667 1.11111C8.81667 1.11111 10.5556 2.85 10.5556 5C10.5556 7.15 8.81667 8.88889 6.66667 8.88889C5.59444 8.88889 4.62222 8.45 3.92222 7.74445L3.13333 8.53333C4.03889 9.43889 5.28333 10 6.66667 10C9.42778 10 11.6667 7.76111 11.6667 5C11.6667 2.23889 9.42778 0 6.66667 0ZM6.11111 2.77778V5.55556L8.47222 6.95556L8.9 6.24444L6.94444 5.08333V2.77778H6.11111Z"
1687
+ ],
1688
+ "width": 12,
1689
+ "height": 10
1683
1690
  }
1684
1691
  }
1685
1692
  }
@@ -50,7 +50,9 @@ var PopupBlock = _styledComponents["default"].div(_templateObject3 || (_template
50
50
  var PopupOverlay = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n width: 100%;\n height: 100%;\n"])), function (props) {
51
51
  return _tokens.colors[props.theme].popup.overlayColor;
52
52
  });
53
- var PopupBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n z-index: 3;\n max-width: 650px;\n min-width: 440px;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n\n width: 440px;\n border-radius: 10px;\n background: ", ";\n\n .popup-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n box-sizing: border-box;\n padding: 40px;\n\n .header-title {\n font-family: SFUIText-Light;\n font-size: 18px;\n line-height: 1;\n color: ", ";\n }\n .display-flex {\n display: flex;\n .pr-20 {\n padding-right: 20px;\n }\n }\n .cursor-p {\n cursor: pointer;\n }\n\n .count-wrapper {\n font-size: 14px;\n line-height: 24px;\n color: #afb2ba;\n font-family: 'SFUIText-Light';\n }\n ", " {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n path {\n fill: ", ";\n }\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n .popup-body {\n padding: 0 40px 40px 40px;\n .popup-action-block {\n margin: 0 auto;\n display: flex;\n justify-content: center;\n\n button {\n padding: 10px 0;\n margin: 0 10px;\n min-width: 150px;\n }\n }\n .popup-message {\n font-family: SFUIText-Light;\n font-size: 14px;\n line-height: 1.5;\n text-align: center;\n color: ", ";\n margin-bottom: 40px;\n }\n }\n\n .loading-box {\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: wait;\n background-color: rgb(21 21 21 / 60%);\n border-radius: 10px;\n }\n"])), function (props) {
53
+ var PopupBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n z-index: 3;\n max-width: 650px;\n min-width: 440px;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n\n width: ", ";\n border-radius: 10px;\n background: ", ";\n\n .popup-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n box-sizing: border-box;\n padding: 40px;\n\n .header-title {\n font-family: SFUIText-Light;\n font-size: 18px;\n line-height: 1;\n color: ", ";\n }\n .display-flex {\n display: flex;\n .pr-20 {\n padding-right: 20px;\n }\n }\n .cursor-p {\n cursor: pointer;\n }\n\n .count-wrapper {\n font-size: 14px;\n line-height: 24px;\n color: #afb2ba;\n font-family: 'SFUIText-Light';\n }\n ", " {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n path {\n fill: ", ";\n }\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n .popup-body {\n padding: 0 40px 40px 40px;\n .popup-action-block {\n margin: 0 auto;\n display: flex;\n justify-content: center;\n\n button {\n padding: 10px 0;\n margin: 0 10px;\n min-width: 150px;\n }\n }\n .popup-message {\n font-family: SFUIText-Light;\n font-size: 14px;\n line-height: 1.5;\n text-align: center;\n color: ", ";\n margin-bottom: 40px;\n }\n }\n\n .loading-box {\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: wait;\n background-color: rgb(21 21 21 / 60%);\n border-radius: 10px;\n }\n"])), function (props) {
54
+ return props.width ? props.width : "440px";
55
+ }, function (props) {
54
56
  return _tokens.colors[props.theme].popup.popupBoxBackground;
55
57
  }, function (props) {
56
58
  return _tokens.colors[props.theme].popup.messageText;
@@ -91,13 +93,15 @@ var Popup = /*#__PURE__*/function (_Component) {
91
93
  loaderName = _this$props.loaderName,
92
94
  showSharedUsers = _this$props.showSharedUsers,
93
95
  sharedUserCount = _this$props.sharedUserCount,
94
- openPopup = _this$props.openPopup;
96
+ openPopup = _this$props.openPopup,
97
+ customWidth = _this$props.customWidth;
95
98
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showPopup ? /*#__PURE__*/_react["default"].createElement(PopupBlock, {
96
- theme: this.props.theme
99
+ theme: theme
97
100
  }, /*#__PURE__*/_react["default"].createElement(PopupOverlay, {
98
- theme: this.props.theme
101
+ theme: theme
99
102
  }), /*#__PURE__*/_react["default"].createElement(PopupBox, {
100
- theme: this.props.theme
103
+ theme: theme,
104
+ width: customWidth
101
105
  }, /*#__PURE__*/_react["default"].createElement("div", {
102
106
  className: "popup-header"
103
107
  }, /*#__PURE__*/_react["default"].createElement("p", {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.1.15",
3
+ "version": "9.1.17",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.1.15",
10
+ "@desynova-digital/tokens": "9.1.17",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },