@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/ActionList/styled.js

@@ -27,40 +27,57 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionNodeWrapper = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
+exports.StyledHintText = exports.StyledTextWrapper = exports.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionNodeWrapper = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
 var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
+var HintText_1 = require("../HintText");
 var Icon_1 = require("../Icon");
 var StyledList = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), (0, element_core_1.numToPx)(smallAndUp ? core.space[3] : core.space[2]), (0, element_core_1.numToPx)(smallAndUp ? core.space[3] : core.space[2]));
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), (0, element_core_1.numToPx)(smallAndUp ? theme.space[300] : theme.space[200]), (0, element_core_1.numToPx)(smallAndUp ? theme.space[300] : theme.space[200]));
 });
 exports.StyledActionList = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
 exports.StyledActionWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inverted = _a.inverted;
-    return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? (0, element_core_1.numToPx)(core.borderWidth.small) : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+    var theme = _a.theme, hasBorder = _a.hasBorder, inverted = _a.inverted, inList = _a.inList, hint = _a.hint, badgeText = _a.badgeText;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "], ["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "])), hasBorder ? (0, element_core_1.numToPx)(theme.border.width.sm) : 0, inverted
+        ? theme.color.surface.dim
+        : theme.color.brand.fixed.onBrand, inList && (hint || badgeText) ? (0, element_core_1.numToPx)(theme.space[200]) : 0);
 });
 exports.StyledActionInner = styled_native_1.default.View(function (_a) {
-    var fullWidth = _a.fullWidth, inline = _a.inline, standalone = _a.standalone;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', inline || standalone ? '' : '44px');
+    var fullWidth = _a.fullWidth, standalone = _a.standalone;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "], ["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', standalone ? '' : '44px');
 });
 exports.StyledActionText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
-        ? semantic.inverted.message.base
-        : semantic.message.base, core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(core.lineHeight.body.small), inList ? 1 : 'none');
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, theme.native.font.family.bold, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm));
 });
-exports.StyledActionNodeWrapper = styled_native_1.default.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"])));
+exports.StyledActionNodeWrapper = styled_native_1.default.View(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"])));
 exports.StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, (0, element_core_1.numToPx)(core.space[1]));
+    var theme = _a.theme, inverted = _a.inverted;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, (0, element_core_1.numToPx)(theme.space[100]));
 });
 exports.StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, (0, element_core_1.numToPx)(core.space[1]), (0, element_core_1.numToPx)(core.space[1]));
+    var theme = _a.theme, inverted = _a.inverted;
+    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, (0, element_core_1.numToPx)(theme.space[100]));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+exports.StyledTextWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[200]));
+});
+exports.StyledHintText = (0, styled_native_1.default)(HintText_1.HintText)(function (_a) {
+    var theme = _a.theme, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
+    return (0, styled_native_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurfaceVariant);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;