oolib 2.150.5 → 2.152.0

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.
Files changed (49) hide show
  1. package/dist/icons/custom/index.d.ts +1 -0
  2. package/dist/icons/custom/index.js +11 -2
  3. package/dist/icons/index.d.ts +2 -0
  4. package/dist/icons/index.js +1 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.js +1 -0
  7. package/dist/stories/Oolib/components/Icons.stories.js +5 -24
  8. package/dist/stories/v2/components/TextInputs.stories.d.ts +20 -7
  9. package/dist/stories/v2/components/TextInputs.stories.js +21 -8
  10. package/dist/v2/components/Buttons/derivedComps/ActionButton.d.ts +7 -0
  11. package/dist/v2/components/Buttons/derivedComps/ActionButton.js +43 -0
  12. package/dist/v2/components/Buttons/derivedComps/ClearButton.d.ts +6 -0
  13. package/dist/v2/components/Buttons/derivedComps/ClearButton.js +36 -0
  14. package/dist/v2/components/OKELink/comps/AvatarDisplay/index.d.ts +27 -0
  15. package/dist/v2/components/OKELink/comps/AvatarDisplay/index.js +29 -0
  16. package/dist/v2/components/OKELink/comps/AvatarDisplay/styled.d.ts +8 -0
  17. package/dist/v2/components/OKELink/comps/AvatarDisplay/styled.js +64 -0
  18. package/dist/v2/components/OKELink/index.d.ts +42 -0
  19. package/dist/v2/components/OKELink/index.js +128 -0
  20. package/dist/v2/components/OKELink/styled.d.ts +15 -0
  21. package/dist/v2/components/OKELink/styled.js +62 -0
  22. package/dist/v2/components/OKELink/utils/index.d.ts +11 -0
  23. package/dist/v2/components/OKELink/utils/index.js +20 -0
  24. package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts +1 -0
  25. package/dist/v2/components/Tags/Comps/TagDisplay/index.js +2 -2
  26. package/dist/v2/components/TextInputs/derivedComps/EmailInput.d.ts +5 -0
  27. package/dist/v2/components/TextInputs/derivedComps/EmailInput.js +45 -0
  28. package/dist/v2/components/TextInputs/derivedComps/NumberInput.d.ts +5 -0
  29. package/dist/v2/components/TextInputs/derivedComps/NumberInput.js +70 -0
  30. package/dist/v2/components/TextInputs/derivedComps/PasswordInput.d.ts +4 -0
  31. package/dist/v2/components/TextInputs/derivedComps/PasswordInput.js +63 -0
  32. package/dist/v2/components/TextInputs/derivedComps/PhoneInput.d.ts +5 -0
  33. package/dist/v2/components/TextInputs/derivedComps/PhoneInput.js +53 -0
  34. package/dist/v2/components/TextInputs/derivedComps/URLInput.d.ts +8 -0
  35. package/dist/v2/components/TextInputs/derivedComps/URLInput.js +129 -0
  36. package/dist/v2/components/TextInputs/index.d.ts +8 -23
  37. package/dist/v2/components/TextInputs/index.js +42 -187
  38. package/dist/v2/components/TextInputs/index.styled.js +5 -2
  39. package/dist/v2/components/Typo2/index.d.ts +1 -0
  40. package/dist/v2/components/Typo2/index.js +3 -1
  41. package/dist/v2/components/Typo2/index.styled.d.ts +1 -0
  42. package/dist/v2/components/Typo2/index.styled.js +18 -17
  43. package/dist/v2/components/cards/CardContent/index.js +11 -10
  44. package/dist/v2/components/cards/CardContent/styled.js +51 -11
  45. package/dist/v2/themes/globalStyles.d.ts +0 -1
  46. package/dist/v2/themes/globalStyles.js +1 -2
  47. package/dist/v2/themes/typo.d.ts +1 -0
  48. package/dist/v2/themes/typo.js +17 -15
  49. package/package.json +1 -1
package/dist/v2/components/cards/CardContent/index.js CHANGED
@@ -25,14 +25,14 @@ var ImagePlaceholder_1 = require("../../ImagePlaceholder");
25
25
  var Star = icons_1.icons.Star, CrownSimple = icons_1.icons.CrownSimple;
26
26
  var success = themes_1.colors.success, white = themes_1.colors.white;
27
27
  var CardLabelTag = function (_a) {
28
- var label = _a.label, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent;
29
- return label ? (react_1.default.createElement(styled_2.StyledCardLabelWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent },
30
- react_1.default.createElement(Tags_1.TagDisplay, { display: label.toUpperCase(), XS: true }))) : null;
28
+ var label = _a.label, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
29
+ return label ? (react_1.default.createElement(styled_2.StyledCardLabelWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent, bothTagsDisplayTogether: bothTagsDisplayTogether },
30
+ react_1.default.createElement(Tags_1.TagDisplay, { display: label.toUpperCase(), title: label, XS: true }))) : null;
31
31
  };
32
32
  var StatusTag = function (_a) {
33
- var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagVariant = _a.statusTagVariant;
34
- return display ? (react_1.default.createElement(styled_2.StyledStatusTagWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent },
35
- react_1.default.createElement(Tags_1.TagDisplay, { display: display, XS: true, variant: statusTagVariant || "positive" }))) : null;
33
+ var display = _a.display, isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, statusTagVariant = _a.statusTagVariant, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
34
+ return display ? (react_1.default.createElement(styled_2.StyledStatusTagWrapper, { isEmbedPresent: isEmbedPresent, isHighlightPresent: isHighlightPresent, bothTagsDisplayTogether: bothTagsDisplayTogether },
35
+ react_1.default.createElement(Tags_1.TagDisplay, { display: display, title: display, XS: true, variant: statusTagVariant || "positive" }))) : null;
36
36
  };
37
37
  var CardContent = function (_a) {
38
38
  var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, highlight = _a.highlight, // primary | secondary
@@ -46,6 +46,7 @@ var CardContent = function (_a) {
46
46
  data: data,
47
47
  parseSpecialSyntax: parseSpecialSyntax
48
48
  }), cardLabel = _b.cardLabel, title = _b.title, description = _b.desc, video = _b.video, image = _b.image, metaBlock = _b.metaBlock, tagDisplay = _b.tagDisplay;
49
+ var bothTagsDisplayTogether = cardLabel && tagDisplay && !showEmbedSection;
49
50
  var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
50
51
  if (dontRenderRes)
51
52
  return dontRenderRes;
@@ -59,16 +60,16 @@ var CardContent = function (_a) {
59
60
  (0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))) : (0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
60
61
  react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
61
62
  react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : (react_1.default.createElement(ImagePlaceholder_1.ImagePlaceholder, { title: title })))) : (react_1.default.createElement(styled_2.StyledCardLabelAndStatusTagWrapper, null,
62
- react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight }),
63
- react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant }))),
63
+ react_1.default.createElement(CardLabelTag, { label: cardLabel, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, bothTagsDisplayTogether: bothTagsDisplayTogether }),
64
+ react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant, bothTagsDisplayTogether: bothTagsDisplayTogether }))),
64
65
  highlight && react_1.default.createElement(styled_2.StyledStarWrapper, { highlight: highlight },
65
66
  react_1.default.createElement(HighLightIcon, { size: 18, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.50 ))" } })),
66
67
  showEmbedSection && (react_1.default.createElement(StatusTag, { display: tagDisplay, isEmbedPresent: showEmbedSection, isHighlightPresent: highlight, statusTagVariant: statusTagVariant })),
67
68
  title ? (react_1.default.createElement(styled_2.StyledTitleWrapper, { highlight: highlight, showEmbedSection: showEmbedSection },
68
- react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6 },
69
+ react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: title, noOfLines_M: 6 },
69
70
  react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" }, localize(title))))) : null,
70
71
  description ? (react_1.default.createElement(styled_2.StyledDescription, null,
71
- react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6 }, description))) : null),
72
+ react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { title: description, noOfLines_M: 6 }, description))) : null),
72
73
  react_1.default.createElement("div", null, (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (
73
74
  //show only two meta for cardContent
74
75
  react_1.default.createElement(styled_2.StyledMetaBlockWrapper, null,
package/dist/v2/components/cards/CardContent/styled.js CHANGED
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
6
17
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
19
  };
@@ -12,8 +23,9 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
23
  var colors_1 = require("../../../themes/colors");
13
24
  var Typo2_1 = require("../../Typo2");
14
25
  var white = colors_1.colors.white, grey10 = colors_1.colors.grey10, grey50 = colors_1.colors.grey50, grey60 = colors_1.colors.grey60, shadowDefault = colors_1.colors.shadowDefault, shadowHover = colors_1.colors.shadowHover, yellowBG = colors_1.colors.yellowBG, yellow = colors_1.colors.yellow, yellowStroke = colors_1.colors.yellowStroke, green = colors_1.colors.green, greenBG = colors_1.colors.greenBG, greenStroke = colors_1.colors.greenStroke;
26
+ var SIZE_OF_HIGHLIGHT = "3.6rem";
15
27
  exports.StyledEmbedSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-height: 182px;\n width: 100%;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n"], ["\n max-height: 182px;\n width: 100%;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n"])));
16
- exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n cursor: pointer;\n position: relative;\n padding: 12px;\n width: 100%;\n /* max-width: 450px; */\n border-radius: 8px;\n box-shadow: 0px 4px 10px 0px ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n \n &:hover {\n border: ", ";\n box-shadow: 0px 4px 10px 0px ", ";\n }\n"], ["\n height: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n cursor: pointer;\n position: relative;\n padding: 12px;\n width: 100%;\n /* max-width: 450px; */\n border-radius: 8px;\n box-shadow: 0px 4px 10px 0px ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n \n &:hover {\n border: ", ";\n box-shadow: 0px 4px 10px 0px ", ";\n }\n"])), function (_a) {
28
+ exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n cursor: pointer;\n position: relative;\n padding: 12px;\n width: 100%;\n border-radius: 8px;\n box-shadow: 0px 4px 10px 0px ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n \n &:hover {\n border: ", ";\n box-shadow: 0px 4px 10px 0px ", ";\n }\n"], ["\n height: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n cursor: pointer;\n position: relative;\n padding: 12px;\n width: 100%;\n border-radius: 8px;\n box-shadow: 0px 4px 10px 0px ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n \n &:hover {\n border: ", ";\n box-shadow: 0px 4px 10px 0px ", ";\n }\n"])), function (_a) {
17
29
  var highlight = _a.highlight;
18
30
  return highlight === "secondary" ? yellowStroke : highlight === "primary" ? greenStroke : grey10;
19
31
  }, function (_a) {
@@ -23,21 +35,49 @@ exports.StyledCardWrapper = styled_components_1.default.div(templateObject_2 ||
23
35
  var highlight = _a.highlight;
24
36
  return highlight === 'secondary' ? "1px solid ".concat(yellow) : highlight === 'primary' ? "1px solid ".concat(green) : "1px solid ".concat(grey50);
25
37
  }, shadowHover);
26
- exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n gap: 0.5rem;\n margin-bottom: 4px;\n width: ", " ; // 3.6rem is the width of the star wrapper, this condition avoids title from being cutoff\n"], ["\n display: flex;\n gap: 0.5rem;\n margin-bottom: 4px;\n width: ", " ; // 3.6rem is the width of the star wrapper, this condition avoids title from being cutoff\n"])), function (_a) {
38
+ exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n gap: 0.5rem;\n margin-bottom: 4px;\n width: ", " ; // 3.6rem is the width of the highlight wrapper, this condition avoids title from being cutoff\n"], ["\n display: flex;\n gap: 0.5rem;\n margin-bottom: 4px;\n width: ", " ; // 3.6rem is the width of the highlight wrapper, this condition avoids title from being cutoff\n"])), function (_a) {
27
39
  var highlight = _a.highlight, showEmbedSection = _a.showEmbedSection;
28
- return (highlight && !showEmbedSection) ? "calc(100% - 3.6rem)" : '100%';
40
+ return (highlight && !showEmbedSection) ? "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, ")") : '100%';
29
41
  });
30
42
  exports.StyledDescription = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 6px;\n color: ", ";\n"], ["\n margin-bottom: 6px;\n color: ", ";\n"])), grey60);
31
- exports.StyledCardLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: 0 6px;\n margin-bottom: -2px;\n /* width: 100%; */\n /* overflow: hidden; */\n"], ["\n display: flex;\n gap: 0 6px;\n margin-bottom: -2px;\n /* width: 100%; */\n /* overflow: hidden; */\n"])));
32
- exports.StyledCardLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: ", ";\n margin-bottom: 8px;\n /* max-width: ", "; */\n top: 12px;\n left: 12px;\n z-index: 10;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n"], ["\n position: ", ";\n margin-bottom: 8px;\n /* max-width: ", "; */\n top: 12px;\n left: 12px;\n z-index: 10;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n"])), function (_a) {
43
+ exports.StyledCardLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: 0 6px;\n margin-bottom: -2px;\n"], ["\n display: flex;\n gap: 0 6px;\n margin-bottom: -2px;\n"])));
44
+ var calculateMaxWidthOfTags = function (_a) {
45
+ var isEmbedPresent = _a.isEmbedPresent, isHighlightPresent = _a.isHighlightPresent, bothTagsDisplayTogether = _a.bothTagsDisplayTogether, _b = _a.isCardLabel, isCardLabel = _b === void 0 ? false : _b;
46
+ var INLINE_PADDING = '24px'; // 24px is the total inline padding
47
+ var TAG_GAP = '6px'; // 6px gap between tag and highlight
48
+ var FULL_WIDTH = "100%";
49
+ var HALF_WIDTH = "50%";
50
+ if (isEmbedPresent) {
51
+ if (isCardLabel) {
52
+ if (isEmbedPresent && !isHighlightPresent) {
53
+ return "calc(".concat(FULL_WIDTH, " - ").concat(INLINE_PADDING, ")");
54
+ }
55
+ else if (isEmbedPresent && isHighlightPresent) {
56
+ return "calc(".concat(FULL_WIDTH, " - (").concat(INLINE_PADDING, " + ").concat(TAG_GAP, " + ").concat(SIZE_OF_HIGHLIGHT, "))");
57
+ }
58
+ }
59
+ else {
60
+ return "".concat(FULL_WIDTH);
61
+ }
62
+ }
63
+ else if (bothTagsDisplayTogether && !isHighlightPresent) {
64
+ return "calc(".concat(HALF_WIDTH, " - 3px)"); // 3px is the half of the gap between the tags
65
+ }
66
+ else if (bothTagsDisplayTogether && isHighlightPresent) {
67
+ return "calc(".concat(HALF_WIDTH, " - (1.8rem + ").concat(TAG_GAP, "))"); // 6px is the half of the total gap(12px) between tags and highlight, 1.8rem is the half of the width of the highlight
68
+ }
69
+ else if (isHighlightPresent) {
70
+ return "calc(".concat(FULL_WIDTH, " - (").concat(TAG_GAP, " + ").concat(SIZE_OF_HIGHLIGHT, "))");
71
+ }
72
+ else
73
+ return "".concat(FULL_WIDTH);
74
+ };
75
+ exports.StyledCardLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: ", ";\n margin-bottom: 8px;\n max-width: ", ";\n top: 12px;\n left: 12px;\n z-index: 10;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n"], ["\n position: ", ";\n margin-bottom: 8px;\n max-width: ", ";\n top: 12px;\n left: 12px;\n z-index: 10;\n backdrop-filter: blur(10px);\n border-radius: 4px;\n"])), function (_a) {
33
76
  var isEmbedPresent = _a.isEmbedPresent;
34
77
  return isEmbedPresent ? "absolute" : "static";
35
- }, function (_a) {
36
- var isEmbedPresent = _a.isEmbedPresent;
37
- return isEmbedPresent ? "38%" : "40%";
38
- });
39
- exports.StyledStatusTagWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 8px;\n /* max-width: 40%; */\n"], ["\n margin-bottom: 8px;\n /* max-width: 40%; */\n"])));
40
- exports.StyledStarWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 3.6rem;\n height: 3.6rem;\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"], ["\n width: 3.6rem;\n height: 3.6rem;\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"])), function (_a) {
78
+ }, function (props) { return calculateMaxWidthOfTags(__assign(__assign({}, props), { isCardLabel: true })); });
79
+ exports.StyledStatusTagWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 8px;\n max-width: ", ";\n"], ["\n margin-bottom: 8px;\n max-width: ", ";\n"])), function (props) { return calculateMaxWidthOfTags(__assign({}, props)); });
80
+ exports.StyledStarWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"], ["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 1.2rem;\n right: 1.2rem;\n z-index: 10;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 7px;\n background-color: ", "; \n border-radius: 4px;\n"])), SIZE_OF_HIGHLIGHT, SIZE_OF_HIGHLIGHT, function (_a) {
41
81
  var highlight = _a.highlight;
42
82
  return highlight === "secondary" ? yellow : highlight === "primary" ? green : white;
43
83
  });
package/dist/v2/themes/globalStyles.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- export declare const globalInputHeight = "36px";
2
1
  export declare const globalInputElemPadding_v2: import("styled-components").FlattenSimpleInterpolation;
3
2
  export declare const globalInputElemHover_v2: import("styled-components").FlattenSimpleInterpolation;
4
3
  export declare const globalInputElemFocused_v2: import("styled-components").FlattenSimpleInterpolation;
package/dist/v2/themes/globalStyles.js CHANGED
@@ -4,10 +4,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  return cooked;
5
5
  };
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 = exports.globalInputHeight = void 0;
7
+ exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
9
  var colors_1 = require("./colors");
10
- exports.globalInputHeight = '36px';
11
10
  exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 10px;\n"], ["\n padding: 0 10px;\n"])));
12
11
  exports.globalInputElemHover_v2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n &::before{\n border: 1.5px solid ", ";\n /* box-shadow: 0 4px 10px #00000012; */\n }\n }\n"], ["\n &:hover {\n &::before{\n border: 1.5px solid ", ";\n /* box-shadow: 0 4px 10px #00000012; */\n }\n }\n"])), colors_1.colors.grey30);
13
12
  exports.globalInputElemFocused_v2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n&:focus-within {\n &::before{\n border: 1.5px solid ", ";\n box-shadow: 0 4px 10px #00000012;\n }\n }\n"], ["\n&:focus-within {\n &::before{\n border: 1.5px solid ", ";\n box-shadow: 0 4px 10px #00000012;\n }\n }\n"])), colors_1.colors.grey80);
package/dist/v2/themes/typo.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare const typo: {
13
13
  UI_PARAGRAPH: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
14
14
  UI_PARAGRAPH_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
15
15
  UI_CAPTION: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
16
+ UI_CAPTION_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
16
17
  UI_TAG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
17
18
  UI_HELPTEXT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
18
19
  UI_STAT_LG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
package/dist/v2/themes/typo.js CHANGED
@@ -34,23 +34,24 @@ var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templat
34
34
  var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n ", ";\n"])), uiFont, fontCss);
35
35
  var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 130%;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 130%;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
36
36
  var UI_CAPTION = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400;\n ", ";\n ", ";\n"])), uiFont, fontCss);
37
- var UI_TAG = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 13px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"], ["\n font-size: 10px;\n line-height: 13px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
38
- var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400; \n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400; \n ", ";\n ", ";\n"])), uiFont, fontCss);
39
- var UI_STAT_LG = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
40
- var UI_STAT_SM = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 18px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
41
- var CONTENT_H1 = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-size: 36px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 36px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
42
- var CONTENT_H2 = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font-size: 25px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 25px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
43
- var CONTENT_H3 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 18px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n"])), contentFont, fontCss);
44
- var CONTENT_BODY = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n font-size: 15px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"])), contentFont, fontCss);
45
- var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n ", ";\n ", ";\n"])), contentFont, fontCss);
46
- var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
47
- var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
48
- var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"], ["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"])), function (_a) {
37
+ var UI_CAPTION_BOLD = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
38
+ var UI_TAG = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 13px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"], ["\n font-size: 10px;\n line-height: 13px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
39
+ var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400; \n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400; \n ", ";\n ", ";\n"])), uiFont, fontCss);
40
+ var UI_STAT_LG = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
41
+ var UI_STAT_SM = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 18px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
42
+ var CONTENT_H1 = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font-size: 36px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 36px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
43
+ var CONTENT_H2 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n font-size: 25px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 25px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
44
+ var CONTENT_H3 = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 18px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n"])), contentFont, fontCss);
45
+ var CONTENT_BODY = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n font-size: 15px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"])), contentFont, fontCss);
46
+ var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n ", ";\n ", ";\n"])), contentFont, fontCss);
47
+ var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
48
+ var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
49
+ var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"], ["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"])), function (_a) {
49
50
  var invert = _a.invert, colors = _a.theme.colors;
50
51
  return invert ? colors.greyColor40 : (0, utilsOolib_1.getPrimaryColor100)(colors);
51
52
  }, contentFont, fontCss);
52
- var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 130%;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 130%;\n ", ";\n ", ";\n"])), contentFont, fontCss);
53
- var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 130%;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 130%;\n ", ";\n ", ";\n"])), contentFont, fontCss);
53
+ var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 130%;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 130%;\n ", ";\n ", ";\n"])), contentFont, fontCss);
54
+ var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 130%;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 130%;\n ", ";\n ", ";\n"])), contentFont, fontCss);
54
55
  exports.typo = {
55
56
  UI_DISPLAY: UI_DISPLAY,
56
57
  UI_HEADLINE: UI_HEADLINE,
@@ -66,6 +67,7 @@ exports.typo = {
66
67
  UI_PARAGRAPH: UI_PARAGRAPH,
67
68
  UI_PARAGRAPH_BOLD: UI_PARAGRAPH_BOLD,
68
69
  UI_CAPTION: UI_CAPTION,
70
+ UI_CAPTION_BOLD: UI_CAPTION_BOLD,
69
71
  UI_TAG: UI_TAG,
70
72
  UI_HELPTEXT: UI_HELPTEXT,
71
73
  UI_STAT_LG: UI_STAT_LG,
@@ -81,4 +83,4 @@ exports.typo = {
81
83
  CONTENT_TITLE_POSTIT: CONTENT_TITLE_POSTIT,
82
84
  CONTENT_BODY_POSTIT: CONTENT_BODY_POSTIT
83
85
  };
84
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
86
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.150.5",
3
+ "version": "2.152.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",