@lanaco/lnc-react-ui 3.11.9 → 3.11.10
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/lib/index.esm.js +41 -6
- package/lib/index.js +41 -6
- package/package.json +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -13440,7 +13440,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
|
|
|
13440
13440
|
var getCheckSize = function getCheckSize(theme, size) {
|
|
13441
13441
|
return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
|
|
13442
13442
|
};
|
|
13443
|
-
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13443
|
+
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:checked ~ .checkbox-label {\n color: ", ";\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:indeterminate ~ .checkbox-label {\n color: ", ";\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:disabled ~ .checkbox-label {\n color: ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13444
13444
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
13445
13445
|
}, function (props) {
|
|
13446
13446
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -13454,6 +13454,8 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13454
13454
|
return getComponentTypographyCss(props.theme, "Checkbox", props.size, "enabled");
|
|
13455
13455
|
}, function (props) {
|
|
13456
13456
|
return !props.disabled && props.readOnly == false && "cursor: pointer;";
|
|
13457
|
+
}, function (props) {
|
|
13458
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13457
13459
|
}, function (props) {
|
|
13458
13460
|
return props.theme.components.Checkbox["default"].enabled.sizes[props.size];
|
|
13459
13461
|
}, function (props) {
|
|
@@ -13478,14 +13480,20 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13478
13480
|
return getCheckSize(props.theme, props.size);
|
|
13479
13481
|
}, function (props) {
|
|
13480
13482
|
return getCheckSize(props.theme, props.size);
|
|
13483
|
+
}, function (props) {
|
|
13484
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "text");
|
|
13481
13485
|
}, function (props) {
|
|
13482
13486
|
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
|
|
13483
13487
|
}, function (props) {
|
|
13484
13488
|
return getCheckSize(props.theme, props.size);
|
|
13485
13489
|
}, function (props) {
|
|
13486
13490
|
return getCheckSize(props.theme, props.size);
|
|
13491
|
+
}, function (props) {
|
|
13492
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13487
13493
|
}, function (props) {
|
|
13488
13494
|
return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n ");
|
|
13495
|
+
}, function (props) {
|
|
13496
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "text");
|
|
13489
13497
|
}, function (props) {
|
|
13490
13498
|
return getOutlineCss(props.theme);
|
|
13491
13499
|
}, function (props) {
|
|
@@ -14316,10 +14324,8 @@ Icon.propTypes = {
|
|
|
14316
14324
|
};
|
|
14317
14325
|
|
|
14318
14326
|
var _templateObject$1n;
|
|
14319
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n
|
|
14327
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n top: 1.3rem;\n font-size: 1rem;\n width: 100%;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n padding: 0.875rem 0 0 0;\n font-size: 1rem;\n font-weight: 400;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n color: transparent;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--keyboard-selected {\n background-color: transparent;\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
14320
14328
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14321
|
-
}, function (props) {
|
|
14322
|
-
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
14323
14329
|
}, function (props) {
|
|
14324
14330
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
14325
14331
|
}, function (props) {
|
|
@@ -45818,7 +45824,7 @@ var getLabelDirection$1 = function getLabelDirection(direction) {
|
|
|
45818
45824
|
if (direction == "left") return "row-reverse";
|
|
45819
45825
|
return "row";
|
|
45820
45826
|
};
|
|
45821
|
-
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n"])), function (props) {
|
|
45827
|
+
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n\n \n & input:checked ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n\n & input:disabled ~ .lnc-radio-input-label {\n color: ", ";\n }\n \n & input[disabled]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n\n & input[disabled] ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input[hover]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n"])), function (props) {
|
|
45822
45828
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
45823
45829
|
}, function (props) {
|
|
45824
45830
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -45844,15 +45850,43 @@ var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _t
|
|
|
45844
45850
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45845
45851
|
}, function (props) {
|
|
45846
45852
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45853
|
+
}, function (props) {
|
|
45854
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45855
|
+
}, function (props) {
|
|
45856
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "text");
|
|
45847
45857
|
}, function (props) {
|
|
45848
45858
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "background", "backgroundOpacity");
|
|
45849
45859
|
}, function (props) {
|
|
45850
45860
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45851
45861
|
}, function (props) {
|
|
45852
45862
|
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45863
|
+
}, function (props) {
|
|
45864
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "text");
|
|
45865
|
+
}, function (props) {
|
|
45866
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45867
|
+
}, function (props) {
|
|
45868
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45869
|
+
}, function (props) {
|
|
45870
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45871
|
+
}, function (props) {
|
|
45872
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45873
|
+
}, function (props) {
|
|
45874
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45875
|
+
}, function (props) {
|
|
45876
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45877
|
+
}, function (props) {
|
|
45878
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45879
|
+
}, function (props) {
|
|
45880
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "background", "backgroundOpacity");
|
|
45881
|
+
}, function (props) {
|
|
45882
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45883
|
+
}, function (props) {
|
|
45884
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45853
45885
|
});
|
|
45854
|
-
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
45886
|
+
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n"])), function (props) {
|
|
45855
45887
|
return !props.disabled && props.readOnly == false && "cursor: pointer";
|
|
45888
|
+
}, function (props) {
|
|
45889
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "text");
|
|
45856
45890
|
});
|
|
45857
45891
|
var RadioInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
45858
45892
|
var id = props.id,
|
|
@@ -45956,6 +45990,7 @@ var RadioInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
45956
45990
|
className: "inner-circle",
|
|
45957
45991
|
strokeWidth: "0"
|
|
45958
45992
|
}))), /*#__PURE__*/React__default.createElement(Label$3, _extends$4({}, themeProps, {
|
|
45993
|
+
className: "lnc-radio-input-label",
|
|
45959
45994
|
disalbed: disabled,
|
|
45960
45995
|
readOnly: readOnly,
|
|
45961
45996
|
title: label,
|
package/lib/index.js
CHANGED
|
@@ -13489,7 +13489,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
|
|
|
13489
13489
|
var getCheckSize = function getCheckSize(theme, size) {
|
|
13490
13490
|
return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
|
|
13491
13491
|
};
|
|
13492
|
-
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral__default["default"](["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13492
|
+
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral__default["default"](["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:checked ~ .checkbox-label {\n color: ", ";\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:indeterminate ~ .checkbox-label {\n color: ", ";\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:disabled ~ .checkbox-label {\n color: ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13493
13493
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
13494
13494
|
}, function (props) {
|
|
13495
13495
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -13503,6 +13503,8 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13503
13503
|
return getComponentTypographyCss(props.theme, "Checkbox", props.size, "enabled");
|
|
13504
13504
|
}, function (props) {
|
|
13505
13505
|
return !props.disabled && props.readOnly == false && "cursor: pointer;";
|
|
13506
|
+
}, function (props) {
|
|
13507
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13506
13508
|
}, function (props) {
|
|
13507
13509
|
return props.theme.components.Checkbox["default"].enabled.sizes[props.size];
|
|
13508
13510
|
}, function (props) {
|
|
@@ -13527,14 +13529,20 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13527
13529
|
return getCheckSize(props.theme, props.size);
|
|
13528
13530
|
}, function (props) {
|
|
13529
13531
|
return getCheckSize(props.theme, props.size);
|
|
13532
|
+
}, function (props) {
|
|
13533
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "text");
|
|
13530
13534
|
}, function (props) {
|
|
13531
13535
|
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
|
|
13532
13536
|
}, function (props) {
|
|
13533
13537
|
return getCheckSize(props.theme, props.size);
|
|
13534
13538
|
}, function (props) {
|
|
13535
13539
|
return getCheckSize(props.theme, props.size);
|
|
13540
|
+
}, function (props) {
|
|
13541
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13536
13542
|
}, function (props) {
|
|
13537
13543
|
return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n ");
|
|
13544
|
+
}, function (props) {
|
|
13545
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "text");
|
|
13538
13546
|
}, function (props) {
|
|
13539
13547
|
return getOutlineCss(props.theme);
|
|
13540
13548
|
}, function (props) {
|
|
@@ -14365,10 +14373,8 @@ Icon.propTypes = {
|
|
|
14365
14373
|
};
|
|
14366
14374
|
|
|
14367
14375
|
var _templateObject$1n;
|
|
14368
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n
|
|
14376
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n top: 1.3rem;\n font-size: 1rem;\n width: 100%;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n padding: 0.875rem 0 0 0;\n font-size: 1rem;\n font-weight: 400;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n color: transparent;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--keyboard-selected {\n background-color: transparent;\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
14369
14377
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14370
|
-
}, function (props) {
|
|
14371
|
-
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
14372
14378
|
}, function (props) {
|
|
14373
14379
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
14374
14380
|
}, function (props) {
|
|
@@ -45867,7 +45873,7 @@ var getLabelDirection$1 = function getLabelDirection(direction) {
|
|
|
45867
45873
|
if (direction == "left") return "row-reverse";
|
|
45868
45874
|
return "row";
|
|
45869
45875
|
};
|
|
45870
|
-
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral__default["default"](["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n"])), function (props) {
|
|
45876
|
+
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral__default["default"](["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n\n \n & input:checked ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n\n & input:disabled ~ .lnc-radio-input-label {\n color: ", ";\n }\n \n & input[disabled]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n\n & input[disabled] ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input[hover]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n"])), function (props) {
|
|
45871
45877
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
45872
45878
|
}, function (props) {
|
|
45873
45879
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -45893,15 +45899,43 @@ var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _t
|
|
|
45893
45899
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45894
45900
|
}, function (props) {
|
|
45895
45901
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45902
|
+
}, function (props) {
|
|
45903
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45904
|
+
}, function (props) {
|
|
45905
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "text");
|
|
45896
45906
|
}, function (props) {
|
|
45897
45907
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "background", "backgroundOpacity");
|
|
45898
45908
|
}, function (props) {
|
|
45899
45909
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45900
45910
|
}, function (props) {
|
|
45901
45911
|
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45912
|
+
}, function (props) {
|
|
45913
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "text");
|
|
45914
|
+
}, function (props) {
|
|
45915
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45916
|
+
}, function (props) {
|
|
45917
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45918
|
+
}, function (props) {
|
|
45919
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45920
|
+
}, function (props) {
|
|
45921
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45922
|
+
}, function (props) {
|
|
45923
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45924
|
+
}, function (props) {
|
|
45925
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45926
|
+
}, function (props) {
|
|
45927
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45928
|
+
}, function (props) {
|
|
45929
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "background", "backgroundOpacity");
|
|
45930
|
+
}, function (props) {
|
|
45931
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45932
|
+
}, function (props) {
|
|
45933
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45902
45934
|
});
|
|
45903
|
-
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
45935
|
+
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n"])), function (props) {
|
|
45904
45936
|
return !props.disabled && props.readOnly == false && "cursor: pointer";
|
|
45937
|
+
}, function (props) {
|
|
45938
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "text");
|
|
45905
45939
|
});
|
|
45906
45940
|
var RadioInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
45907
45941
|
var id = props.id,
|
|
@@ -46005,6 +46039,7 @@ var RadioInput = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
46005
46039
|
className: "inner-circle",
|
|
46006
46040
|
strokeWidth: "0"
|
|
46007
46041
|
}))), /*#__PURE__*/React__default["default"].createElement(Label$3, _extends__default$1["default"]({}, themeProps, {
|
|
46042
|
+
className: "lnc-radio-input-label",
|
|
46008
46043
|
disalbed: disabled,
|
|
46009
46044
|
readOnly: readOnly,
|
|
46010
46045
|
title: label,
|