oolib 2.170.10 → 2.171.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 (32) hide show
  1. package/dist/assets/images/grainhomecover.png +0 -0
  2. package/dist/assets/images/homecoverimage.png +0 -0
  3. package/dist/globalStyles/index.js +1 -1
  4. package/dist/icons/index.d.ts +2 -0
  5. package/dist/icons/index.js +1 -0
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +3 -1
  8. package/dist/stories/v2/components/HomeCover.stories.d.ts +63 -0
  9. package/dist/stories/v2/components/HomeCover.stories.js +111 -0
  10. package/dist/stories/v2/themes/Typo.stories.js +1 -0
  11. package/dist/v2/components/Buttons/derivedComps/ButtonPrimaryCompact.js +1 -1
  12. package/dist/v2/components/Buttons/derivedComps/ButtonSecondaryCompact.js +1 -1
  13. package/dist/v2/components/Buttons/derivedComps/ButtonTertiaryCompact.js +1 -1
  14. package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.d.ts +4 -0
  15. package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.js +119 -0
  16. package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.d.ts +1 -0
  17. package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.js +13 -0
  18. package/dist/v2/components/HomeCover/comps/WrapperContentSection/index.d.ts +5 -0
  19. package/dist/v2/components/HomeCover/comps/WrapperContentSection/index.js +21 -0
  20. package/dist/v2/components/HomeCover/comps/WrapperContentSection/styled.d.ts +4 -0
  21. package/dist/v2/components/HomeCover/comps/WrapperContentSection/styled.js +58 -0
  22. package/dist/v2/components/HomeCover/index.d.ts +10 -0
  23. package/dist/v2/components/HomeCover/index.js +45 -0
  24. package/dist/v2/components/HomeCover/styled.d.ts +3 -0
  25. package/dist/v2/components/HomeCover/styled.js +15 -0
  26. package/dist/v2/components/Typo2/index.d.ts +1 -0
  27. package/dist/v2/components/Typo2/index.js +3 -1
  28. package/dist/v2/components/Typo2/index.styled.d.ts +1 -0
  29. package/dist/v2/components/Typo2/index.styled.js +43 -42
  30. package/dist/v2/themes/typo.d.ts +1 -0
  31. package/dist/v2/themes/typo.js +48 -46
  32. package/package.json +1 -1
package/dist/globalStyles/index.js CHANGED
@@ -11,5 +11,5 @@ var normalize_1 = require("./normalize");
11
11
  var mixins_1 = require("../themes/mixins");
12
12
  require("../assets/fonts/style.css");
13
13
  var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
14
- exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n// Fonts CDNs\n// Dm Sans\n@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');\n// Familjen Grotesk\n@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\na,\na:hover {\n text-decoration: none !important;\n color: ", ";\n cursor: pointer;\n}\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"], ["\n\n// Fonts CDNs\n// Dm Sans\n@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');\n// Familjen Grotesk\n@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\na,\na:hover {\n text-decoration: none !important;\n color: ", ";\n cursor: pointer;\n}\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for horizontal bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"], ["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for horizontal bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.colors.greyColor100, themes_1.typo.sansSerif, themes_1.typo.serif);
14
+ exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n// Fonts CDNs\n// Dm Sans\n@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');\n// Familjen Grotesk\n@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\nbody .sb-show-main .sb-main-padded{\n padding: 0rem !important;\n}\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\na,\na:hover {\n text-decoration: none !important;\n color: ", ";\n cursor: pointer;\n}\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"], ["\n\n// Fonts CDNs\n// Dm Sans\n@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');\n// Familjen Grotesk\n@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n\n", "\n\nhr {\n border: none;\n border-bottom: 0.1rem solid ", ";\n}\n\nbody .sb-show-main .sb-main-padded{\n padding: 0rem !important;\n}\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\na,\na:hover {\n text-decoration: none !important;\n color: ", ";\n cursor: pointer;\n}\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n\n \n"])), normalize_1.normalize, greyColor100, (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for horizontal bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"], ["\n ::-webkit-scrollbar { \n width: 0.7rem;// for vertical bars\n height: 0.5rem; //for horizontal bars \n }\n ::-webkit-scrollbar-track {background-color: ", ";}\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.4rem;\n }\n ::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n ", "{\n ::-webkit-scrollbar { \n width: 1rem;\n height: 0.7rem;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 0.5rem;\n }\n }"])), greyColor15, greyColor40, greyColor80, (0, mixins_1.mediaQuery)('md')), greyColor80, themes_1.typo.sansSerif, themes_1.colors.greyColor100, themes_1.typo.sansSerif, themes_1.typo.serif);
15
15
  var templateObject_1, templateObject_2;
package/dist/icons/index.d.ts CHANGED
@@ -118,6 +118,7 @@ export namespace icons {
118
118
  export { Warning };
119
119
  export { Star };
120
120
  export { ArrowsVertical };
121
+ export { CirclesFour };
121
122
  export { OkeGoogleIcon };
122
123
  export { LetterH };
123
124
  export { IndexIcon };
@@ -301,6 +302,7 @@ import { PaperPlaneRight } from 'phosphor-react';
301
302
  import { Warning } from 'phosphor-react';
302
303
  import { Star } from 'phosphor-react';
303
304
  import { ArrowsVertical } from 'phosphor-react';
305
+ import { CirclesFour } from 'phosphor-react';
304
306
  import { OkeGoogleIcon } from "./custom";
305
307
  import { LetterH } from "./custom";
306
308
  import { IndexIcon } from "./custom";
package/dist/icons/index.js CHANGED
@@ -123,6 +123,7 @@ exports.icons = {
123
123
  Warning: phosphor_react_1.Warning,
124
124
  Star: phosphor_react_1.Star,
125
125
  ArrowsVertical: phosphor_react_1.ArrowsVertical,
126
+ CirclesFour: phosphor_react_1.CirclesFour,
126
127
  //custom icons
127
128
  OkeGoogleIcon: custom_1.OkeGoogleIcon,
128
129
  LetterH: custom_1.LetterH,
package/dist/index.d.ts CHANGED
@@ -75,6 +75,7 @@ export { colors as colors2 } from "./v2/themes";
75
75
  export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
76
76
  export { HintsProvider } from "./v2/components/Hints/contextApi";
77
77
  export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
78
+ export { HomeCover as HomeCover2 } from "./v2/components/HomeCover";
78
79
  export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
79
80
  export { TagClear, TagLink, TagSelect } from "./components/Tags";
80
81
  export { BannerAlert, BannerInfo } from "./components/Banners";
package/dist/index.js CHANGED
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  };
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
20
  exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
21
- exports.DateRangePickerV2 = exports.HintsProvider = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
21
+ exports.HomeCover2 = exports.DateRangePickerV2 = exports.HintsProvider = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
22
22
  //css and styling related ( styled-components )
23
23
  var globalStyles_1 = require("./globalStyles");
24
24
  Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -194,5 +194,7 @@ var contextApi_1 = require("./v2/components/Hints/contextApi");
194
194
  Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
195
195
  var DateRangePicker_2 = require("./v2/components/DateRangePicker");
196
196
  Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
197
+ var HomeCover_2 = require("./v2/components/HomeCover");
198
+ Object.defineProperty(exports, "HomeCover2", { enumerable: true, get: function () { return HomeCover_2.HomeCover; } });
197
199
  // V2 new ready components
198
200
  // export * from './v2/components/TextInputs';
package/dist/stories/v2/components/HomeCover.stories.d.ts ADDED
@@ -0,0 +1,63 @@
1
+ declare namespace _default {
2
+ let title: string;
3
+ namespace argTypes {
4
+ export namespace title_1 {
5
+ let name: string;
6
+ }
7
+ export { title_1 as title };
8
+ export namespace subtitle {
9
+ let name_1: string;
10
+ export { name_1 as name };
11
+ }
12
+ export namespace desc {
13
+ let name_2: string;
14
+ export { name_2 as name };
15
+ }
16
+ export namespace variant {
17
+ let name_3: string;
18
+ export { name_3 as name };
19
+ export let options: string[];
20
+ export namespace mapping {
21
+ let Default: string;
22
+ let Small: string;
23
+ }
24
+ export namespace control {
25
+ let type: string;
26
+ }
27
+ export let defaultValue: string;
28
+ }
29
+ export namespace CTALink {
30
+ let name_4: string;
31
+ export { name_4 as name };
32
+ }
33
+ export namespace coverImagesConfig {
34
+ let name_5: string;
35
+ export { name_5 as name };
36
+ }
37
+ }
38
+ namespace args {
39
+ let title_2: string;
40
+ export { title_2 as title };
41
+ let subtitle_1: string;
42
+ export { subtitle_1 as subtitle };
43
+ let desc_1: string;
44
+ export { desc_1 as desc };
45
+ let variant_1: string;
46
+ export { variant_1 as variant };
47
+ let CTALink_1: string;
48
+ export { CTALink_1 as CTALink };
49
+ let coverImagesConfig_1: string[];
50
+ export { coverImagesConfig_1 as coverImagesConfig };
51
+ }
52
+ }
53
+ export default _default;
54
+ export function HomeCover_(args: any): React.JSX.Element;
55
+ export function HomeCover_Mobile_(args: any): React.JSX.Element;
56
+ export namespace HomeCover_Mobile_ {
57
+ namespace parameters {
58
+ namespace viewport {
59
+ let defaultViewport: string;
60
+ }
61
+ }
62
+ }
63
+ import React from "react";
package/dist/stories/v2/components/HomeCover.stories.js ADDED
@@ -0,0 +1,111 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || (function () {
30
+ var ownKeys = function(o) {
31
+ ownKeys = Object.getOwnPropertyNames || function (o) {
32
+ var ar = [];
33
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
+ return ar;
35
+ };
36
+ return ownKeys(o);
37
+ };
38
+ return function (mod) {
39
+ if (mod && mod.__esModule) return mod;
40
+ var result = {};
41
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
+ __setModuleDefault(result, mod);
43
+ return result;
44
+ };
45
+ })();
46
+ Object.defineProperty(exports, "__esModule", { value: true });
47
+ exports.HomeCover_Mobile_ = exports.HomeCover_ = void 0;
48
+ var react_1 = __importStar(require("react"));
49
+ var HomeCover_1 = require("../../../v2/components/HomeCover");
50
+ exports.default = {
51
+ title: "Oolib V 2.0/components/HomeCover",
52
+ argTypes: {
53
+ title: {
54
+ name: "Title"
55
+ },
56
+ subtitle: {
57
+ name: "Subtitle"
58
+ },
59
+ desc: {
60
+ name: "Description"
61
+ },
62
+ variant: {
63
+ name: "Size",
64
+ options: ['Default', 'Small'],
65
+ mapping: {
66
+ Default: 'default',
67
+ Small: 'small',
68
+ },
69
+ control: { type: 'inline-radio' },
70
+ defaultValue: 'Default'
71
+ },
72
+ CTALink: {
73
+ name: "CTA Link"
74
+ },
75
+ coverImagesConfig: {
76
+ name: "Conver Image",
77
+ }
78
+ },
79
+ args: {
80
+ title: "Clean River Initiative",
81
+ subtitle: "By Ooloi Labs",
82
+ desc: "This is the master instance that houses all the features and functionalities of Ooloi's open knowledge platform at any given point in time",
83
+ variant: "Default",
84
+ CTALink: '#',
85
+ coverImagesConfig: [
86
+ "https://storage.googleapis.com/wqn_staging__media/staticImages/8961f0af-b52d-4bed-9284-1c520d58a433.jpeg",
87
+ "https://storage.googleapis.com/wqn_staging__media/staticImages/50f2058e-9fbc-4278-ad9b-b5c641fba6b6.jpeg",
88
+ "https://storage.googleapis.com/wqn_staging__media/staticImages/a7ac5704-164f-45cb-a400-433c216ea37a.jpeg",
89
+ "https://storage.googleapis.com/wqn_staging__media/staticImages/2e15f8de-420f-4d45-bfe1-380f081609f9.jpeg",
90
+ ],
91
+ },
92
+ };
93
+ var HomeCover_ = function (args) {
94
+ var element = document.getElementsByClassName("sb-main-padded");
95
+ (0, react_1.useEffect)(function () {
96
+ if ((element === null || element === void 0 ? void 0 : element.length) > 1) {
97
+ element[0].style.padding = '0';
98
+ }
99
+ }, []);
100
+ return react_1.default.createElement(HomeCover_1.HomeCover, __assign({}, args));
101
+ };
102
+ exports.HomeCover_ = HomeCover_;
103
+ var HomeCover_Mobile_ = function (args) {
104
+ return (react_1.default.createElement(HomeCover_1.HomeCover, __assign({}, args)));
105
+ };
106
+ exports.HomeCover_Mobile_ = HomeCover_Mobile_;
107
+ exports.HomeCover_Mobile_.parameters = {
108
+ viewport: {
109
+ defaultViewport: 'mobile1'
110
+ }
111
+ };
package/dist/stories/v2/themes/Typo.stories.js CHANGED
@@ -78,6 +78,7 @@ var GenComp = function (_a) {
78
78
  };
79
79
  var UIFont = function (args) { return (react_1.default.createElement("div", { style: { width: '95vw', backgroundColor: args.invert ? greyColor100 : '' } },
80
80
  react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_DISPLAY, compName: "UI_DISPLAY" }),
81
+ react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_DISPLAY_SM, compName: "UI_DISPLAY_SM" }),
81
82
  react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_HEADLINE, compName: "UI_HEADLINE" }),
82
83
  react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_HEADLINE_SM, compName: "UI_HEADLINE_SM" }),
83
84
  react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_TITLE, compName: "UI_TITLE" }),
package/dist/v2/components/Buttons/derivedComps/ButtonPrimaryCompact.js CHANGED
@@ -41,6 +41,6 @@ var generateCompactButtonStyles = function (responsive, icon) {
41
41
  exports.generateCompactButtonStyles = generateCompactButtonStyles;
42
42
  var ButtonPrimaryCompact = function (props) {
43
43
  var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
44
- return (react_1.default.createElement(__1.ButtonPrimary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: (0, exports.generateCompactButtonStyles)(responsive, props.icon) })));
44
+ return (react_1.default.createElement(__1.ButtonPrimary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: __assign(__assign({}, (0, exports.generateCompactButtonStyles)(responsive, props.icon)), props.style) })));
45
45
  };
46
46
  exports.ButtonPrimaryCompact = ButtonPrimaryCompact;
package/dist/v2/components/Buttons/derivedComps/ButtonSecondaryCompact.js CHANGED
@@ -21,6 +21,6 @@ var ButtonPrimaryCompact_1 = require("./ButtonPrimaryCompact");
21
21
  var mixins_1 = require("../../../../themes/mixins");
22
22
  var ButtonSecondaryCompact = function (props) {
23
23
  var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
24
- return (react_1.default.createElement(__1.ButtonSecondary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
24
+ return (react_1.default.createElement(__1.ButtonSecondary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: __assign(__assign({}, (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon)), props.style) })));
25
25
  };
26
26
  exports.ButtonSecondaryCompact = ButtonSecondaryCompact;
package/dist/v2/components/Buttons/derivedComps/ButtonTertiaryCompact.js CHANGED
@@ -21,6 +21,6 @@ var ButtonPrimaryCompact_1 = require("./ButtonPrimaryCompact");
21
21
  var mixins_1 = require("../../../../themes/mixins");
22
22
  var ButtonTertiaryCompact = function (props) {
23
23
  var responsive = (0, mixins_1.useResponsiveMobileStyles)(props.responsive);
24
- return (react_1.default.createElement(__1.ButtonTertiary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon) })));
24
+ return (react_1.default.createElement(__1.ButtonTertiary, __assign({}, props, { typo: "UI_CAPTION_SEMIBOLD_DF", iconSize: responsive ? 16 : 14, style: __assign(__assign({}, (0, ButtonPrimaryCompact_1.generateCompactButtonStyles)(responsive, props.icon)), props.style) })));
25
25
  };
26
26
  exports.ButtonTertiaryCompact = ButtonTertiaryCompact;
package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export function ImageSwitcher({ images, isDesktop }: {
2
+ images: any;
3
+ isDesktop?: boolean;
4
+ }): any;
package/dist/v2/components/HomeCover/comps/ImageSwitcher/index.js ADDED
@@ -0,0 +1,119 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || (function () {
30
+ var ownKeys = function(o) {
31
+ ownKeys = Object.getOwnPropertyNames || function (o) {
32
+ var ar = [];
33
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
+ return ar;
35
+ };
36
+ return ownKeys(o);
37
+ };
38
+ return function (mod) {
39
+ if (mod && mod.__esModule) return mod;
40
+ var result = {};
41
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
+ __setModuleDefault(result, mod);
43
+ return result;
44
+ };
45
+ })();
46
+ Object.defineProperty(exports, "__esModule", { value: true });
47
+ exports.ImageSwitcher = void 0;
48
+ var react_1 = __importStar(require("react"));
49
+ var styled_1 = require("./styled");
50
+ var ImageSwitcher = function (_a) {
51
+ var images = _a.images, _b = _a.isDesktop, isDesktop = _b === void 0 ? true : _b;
52
+ // Desktop state structure
53
+ var initDesktopState = {
54
+ currLayer: "layer1",
55
+ layer1: [0, 1],
56
+ layer2: [2, 3],
57
+ };
58
+ // Mobile state structure
59
+ var initMobileState = {
60
+ currentIndex: 0,
61
+ };
62
+ var _c = (0, react_1.useState)(isDesktop ? initDesktopState : initMobileState), coverImageIdx = _c[0], setCoverImageIdx = _c[1];
63
+ // Reset state when desktop/mobile mode changes
64
+ (0, react_1.useEffect)(function () {
65
+ setCoverImageIdx(isDesktop ? initDesktopState : initMobileState);
66
+ }, [isDesktop]);
67
+ (0, react_1.useEffect)(function () {
68
+ var interval, timeout;
69
+ var intervalFlag = isDesktop ? 4 : 2;
70
+ if (images.length >= intervalFlag) {
71
+ if (isDesktop) {
72
+ // Desktop animation logic
73
+ interval = setInterval(function () {
74
+ setCoverImageIdx(function (prev) { return (__assign(__assign({}, prev), { currLayer: prev.currLayer === "layer1" ? "layer2" : "layer1" })); });
75
+ timeout = setTimeout(function () {
76
+ setCoverImageIdx(function (prev) {
77
+ var _a;
78
+ var layerToSwitch = prev.currLayer === "layer1" ? "layer2" : "layer1";
79
+ return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = [
80
+ (prev[layerToSwitch][0] + 4) % images.length,
81
+ (prev[layerToSwitch][1] + 4) % images.length,
82
+ ], _a));
83
+ });
84
+ }, 300);
85
+ }, 3000);
86
+ }
87
+ else {
88
+ // Mobile random switching logic
89
+ interval = setInterval(function () {
90
+ setCoverImageIdx(function (prev) {
91
+ var newIndex;
92
+ // Ensure new index is different from current
93
+ do {
94
+ newIndex = Math.floor(Math.random() * images.length);
95
+ } while (newIndex === prev.currentIndex);
96
+ return { currentIndex: newIndex };
97
+ });
98
+ }, 3000);
99
+ }
100
+ }
101
+ return function () {
102
+ clearTimeout(timeout);
103
+ clearInterval(interval);
104
+ };
105
+ }, [isDesktop, images.length]);
106
+ return isDesktop ? (
107
+ // Desktop render - two images in layered animation
108
+ coverImageIdx[coverImageIdx.currLayer].map(function (imageIndex, index) { return (react_1.default.createElement(styled_1.StyledContentWrapper, { key: index, style: {
109
+ backgroundImage: "url(".concat(images[imageIndex], ")"),
110
+ } })); })) : (
111
+ // Mobile render - single image with random switching
112
+ react_1.default.createElement(styled_1.StyledContentWrapper, { style: {
113
+ backgroundImage: "url(".concat(images[coverImageIdx.currentIndex], ")"),
114
+ height: "inherit",
115
+ width: "100%",
116
+ borderRadius: "1.6rem",
117
+ } }));
118
+ };
119
+ exports.ImageSwitcher = ImageSwitcher;
package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.d.ts ADDED
@@ -0,0 +1 @@
1
+ export const StyledContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/v2/components/HomeCover/comps/ImageSwitcher/styled.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.StyledContentWrapper = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.StyledContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-repeat: no-repeat;\n background-clip: border-box;\n border-radius: 1rem;\n background-size: cover;\n background-position: center;\n mix-blend-mode: color;\n transition: background-image 0.8s ease-in-out, opacity 1s ease-in-out;\n"], ["\n background-repeat: no-repeat;\n background-clip: border-box;\n border-radius: 1rem;\n background-size: cover;\n background-position: center;\n mix-blend-mode: color;\n transition: background-image 0.8s ease-in-out, opacity 1s ease-in-out;\n"])));
13
+ var templateObject_1;
package/dist/v2/components/HomeCover/comps/WrapperContentSection/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export function WrapperContentSection({ children, theme }: {
2
+ children: any;
3
+ theme: any;
4
+ }): React.JSX.Element;
5
+ import React from "react";
package/dist/v2/components/HomeCover/comps/WrapperContentSection/index.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.WrapperContentSection = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var grainhomecover_png_1 = __importDefault(require("../../../../../assets/images/grainhomecover.png"));
9
+ var homecoverimage_png_1 = __importDefault(require("../../../../../assets/images/homecoverimage.png"));
10
+ var styled_1 = require("./styled");
11
+ var WrapperContentSection = function (_a) {
12
+ var children = _a.children, theme = _a.theme;
13
+ return (react_1.default.createElement(styled_1.StyledContentWrapperCover, null,
14
+ react_1.default.createElement(styled_1.StyledImageLayer, { style: { borderRadius: '1rem' } },
15
+ react_1.default.createElement(styled_1.StyledImage, { src: grainhomecover_png_1.default, style: { borderRadius: '1rem', mixBlendMode: "multiply", opacity: "1" } })),
16
+ react_1.default.createElement(styled_1.StyledColorOverlay, { theme: theme }),
17
+ react_1.default.createElement(styled_1.StyledImageLayer, { style: { borderRadius: '1rem' } },
18
+ react_1.default.createElement(styled_1.StyledImage, { src: homecoverimage_png_1.default, style: { borderRadius: '1rem', mixBlendMode: "lighten", opacity: "0.6" } })),
19
+ react_1.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, width: '100%', height: '100%' } }, children)));
20
+ };
21
+ exports.WrapperContentSection = WrapperContentSection;
package/dist/v2/components/HomeCover/comps/WrapperContentSection/styled.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export const StyledImage: import("styled-components").StyledComponent<"img", any, {}, never>;
2
+ export const StyledImageLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export const StyledContentWrapperCover: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export const StyledColorOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/v2/components/HomeCover/comps/WrapperContentSection/styled.js ADDED
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
+ if (k2 === undefined) k2 = k;
8
+ var desc = Object.getOwnPropertyDescriptor(m, k);
9
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
10
+ desc = { enumerable: true, get: function() { return m[k]; } };
11
+ }
12
+ Object.defineProperty(o, k2, desc);
13
+ }) : (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ o[k2] = m[k];
16
+ }));
17
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
18
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
19
+ }) : function(o, v) {
20
+ o["default"] = v;
21
+ });
22
+ var __importStar = (this && this.__importStar) || (function () {
23
+ var ownKeys = function(o) {
24
+ ownKeys = Object.getOwnPropertyNames || function (o) {
25
+ var ar = [];
26
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
27
+ return ar;
28
+ };
29
+ return ownKeys(o);
30
+ };
31
+ return function (mod) {
32
+ if (mod && mod.__esModule) return mod;
33
+ var result = {};
34
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
35
+ __setModuleDefault(result, mod);
36
+ return result;
37
+ };
38
+ })();
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.StyledColorOverlay = exports.StyledContentWrapperCover = exports.StyledImageLayer = exports.StyledImage = void 0;
41
+ var styled_components_1 = __importStar(require("styled-components"));
42
+ var utils_1 = require("../../../../themes/utils");
43
+ var hexToRgb = function (hex) {
44
+ var parsedHex = hex.replace('#', '');
45
+ var bigint = parseInt(parsedHex, 16);
46
+ var r = (bigint >> 16) & 255;
47
+ var g = (bigint >> 8) & 255;
48
+ var b = bigint & 255;
49
+ return "".concat(r, ", ").concat(g, ", ").concat(b);
50
+ };
51
+ exports.StyledImage = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
52
+ exports.StyledImageLayer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n inset: 0;\n overflow: hidden;\n"], ["\n position: absolute;\n inset: 0;\n overflow: hidden;\n"])));
53
+ exports.StyledContentWrapperCover = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 1rem;\n position: relative;\n overflow: hidden;\n"], ["\n border-radius: 1rem;\n position: relative;\n overflow: hidden;\n"])));
54
+ exports.StyledColorOverlay = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n inset: 0;\n ", "\n mix-blend-mode: normal;\n border-radius: 1rem;\n"], ["\n position: absolute;\n inset: 0;\n ", "\n mix-blend-mode: normal;\n border-radius: 1rem;\n"])), function (_a) {
55
+ var colors = _a.theme.colors;
56
+ return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: rgba(", ", 0.3);\n "], ["\n background-color: rgba(", ", 0.3);\n "])), hexToRgb((0, utils_1.getPrimaryContainer)(colors)));
57
+ });
58
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/v2/components/HomeCover/index.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ export function HomeCover({ title, subtitle, desc, CTALink, customComp, coverImagesConfig, variant, }: {
2
+ title: any;
3
+ subtitle: any;
4
+ desc: any;
5
+ CTALink: any;
6
+ customComp: any;
7
+ coverImagesConfig: any;
8
+ variant?: string;
9
+ }): React.JSX.Element;
10
+ import React from "react";
package/dist/v2/components/HomeCover/index.js ADDED
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.HomeCover = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var react_router_dom_1 = require("react-router-dom");
9
+ var mixins_1 = require("../../../themes/mixins");
10
+ var styled_1 = require("./styled");
11
+ var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
12
+ var Typo2_1 = require("../Typo2");
13
+ var Buttons_1 = require("../Buttons");
14
+ var themes_1 = require("../../themes");
15
+ var ImageSwitcher_1 = require("./comps/ImageSwitcher");
16
+ var WrapperContentSection_1 = require("./comps/WrapperContentSection");
17
+ var styled_components_1 = require("styled-components");
18
+ var HomeCover = function (_a) {
19
+ var title = _a.title, subtitle = _a.subtitle, desc = _a.desc, CTALink = _a.CTALink, customComp = _a.customComp, coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
20
+ var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
21
+ var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
22
+ var navigate = (0, react_router_dom_1.useNavigate)();
23
+ var theme = (0, styled_components_1.useTheme)();
24
+ var _CoverImages = coverImagesConfig.every(function (c) { return typeof c === "string"; })
25
+ ? coverImagesConfig
26
+ : coverImagesConfig.map(function (c) { return c.publicUrl; });
27
+ var deskTop = react_1.default.createElement(styled_1.StyledHomeCover, { variant: variant },
28
+ react_1.default.createElement(WrapperContentSection_1.WrapperContentSection, { theme: theme },
29
+ react_1.default.createElement("div", { style: { position: "relative", height: '100%', borderRadius: '1rem', display: 'flex', alignItems: 'center', padding: '1.6rem' } },
30
+ react_1.default.createElement("div", null,
31
+ react_1.default.createElement(Typo2_1.UI_DISPLAY_SM, null, title),
32
+ react_1.default.createElement(Typo2_1.UI_TITLE, { style: { color: themes_1.colors.grey80 } }, desc)),
33
+ CTALink && react_1.default.createElement(Buttons_1.ButtonTertiary, { style: { position: "absolute", bottom: "1.6rem", left: "1.6rem" }, iconSize: "S", icon: (CTALink === null || CTALink === void 0 ? void 0 : CTALink.icon) || "ArrowRight", onClick: function () { return navigate((CTALink === null || CTALink === void 0 ? void 0 : CTALink.url) || CTALink); } }, CTALink === null || CTALink === void 0 ? void 0 : CTALink.text))),
34
+ react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages }));
35
+ var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover, null,
36
+ react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, isDesktop: false }),
37
+ react_1.default.createElement(styled_1.StyledMobileContentWrapper, null,
38
+ react_1.default.createElement("div", { style: { alignContent: "end", height: '100%', gap: "1.6rem" } },
39
+ react_1.default.createElement("div", { style: { color: "white" } },
40
+ react_1.default.createElement(Typo2_1.UI_DISPLAY_SM, null, title),
41
+ react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM_DF, { style: { textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)" } }, desc)),
42
+ CTALink && react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { responsive: true, style: { marginTop: '1.6rem' }, iconSize: "S", icon: (CTALink === null || CTALink === void 0 ? void 0 : CTALink.icon) || "ArrowRight", onClick: function () { return navigate((CTALink === null || CTALink === void 0 ? void 0 : CTALink.url) || CTALink); } }, CTALink === null || CTALink === void 0 ? void 0 : CTALink.text))));
43
+ return (isDesktop ? deskTop : mobile);
44
+ };
45
+ exports.HomeCover = HomeCover;
package/dist/v2/components/HomeCover/styled.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export const StyledHomeCover: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export const StyledMobileHomeCover: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export const StyledMobileContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/v2/components/HomeCover/styled.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.StyledMobileContentWrapper = exports.StyledMobileHomeCover = exports.StyledHomeCover = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.StyledHomeCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 98svw;\n height: 40rem;\n display: grid;\n margin: 1rem auto;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0.8rem;\n"], ["\n width: 98svw;\n height: 40rem;\n display: grid;\n margin: 1rem auto;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0.8rem;\n"])));
13
+ exports.StyledMobileHomeCover = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 96svw;\n height: 40rem;\n margin: 1rem auto;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.06%, rgba(0, 0, 0, 0.60) 68.69%);\n border-radius: 1.6rem;\n gap: 0.8rem;\n position: relative;\n"], ["\n width: 96svw;\n height: 40rem;\n margin: 1rem auto;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.06%, rgba(0, 0, 0, 0.60) 68.69%);\n border-radius: 1.6rem;\n gap: 0.8rem;\n position: relative;\n"])));
14
+ exports.StyledMobileContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 1.6rem;\n padding: 1.6rem;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 1.6rem;\n padding: 1.6rem;\n"])));
15
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/v2/components/Typo2/index.d.ts CHANGED
@@ -25,6 +25,7 @@ export interface TypoCompProps {
25
25
  [key: string]: any;
26
26
  }
27
27
  export declare const UI_DISPLAY: React.FunctionComponent<TypoCompProps>;
28
+ export declare const UI_DISPLAY_SM: React.FunctionComponent<TypoCompProps>;
28
29
  export declare const UI_HEADLINE: React.FunctionComponent<TypoCompProps>;
29
30
  export declare const UI_HEADLINE_SM: React.FunctionComponent<TypoCompProps>;
30
31
  export declare const UI_TITLE: React.FunctionComponent<TypoCompProps>;
package/dist/v2/components/Typo2/index.js CHANGED
@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
25
25
  return (mod && mod.__esModule) ? mod : { "default": mod };
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
- exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY_SM = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION_SEMIBOLD = exports.UI_CAPTION_SEMIBOLD_DF = exports.UI_CAPTION_BOLD_DF = exports.UI_CAPTION_DF = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM_DF = exports.UI_BODY_BOLD_DF = exports.UI_BODY_SEMIBOLD_SM_DF = exports.UI_BODY_SEMIBOLD_DF = exports.UI_BODY_SM_DF = exports.UI_BODY_DF = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
28
+ exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY_SM = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION_SEMIBOLD = exports.UI_CAPTION_SEMIBOLD_DF = exports.UI_CAPTION_BOLD_DF = exports.UI_CAPTION_DF = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM_DF = exports.UI_BODY_BOLD_DF = exports.UI_BODY_SEMIBOLD_SM_DF = exports.UI_BODY_SEMIBOLD_DF = exports.UI_BODY_SM_DF = exports.UI_BODY_DF = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY_SM = exports.UI_DISPLAY = void 0;
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var index_styled_1 = require("./index.styled");
31
31
  var utilsOolib_1 = require("../../../utilsOolib");
@@ -71,6 +71,8 @@ var GenComp = function (_a) {
71
71
  };
72
72
  var UI_DISPLAY = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_DISPLAY_STYLED }); };
73
73
  exports.UI_DISPLAY = UI_DISPLAY;
74
+ var UI_DISPLAY_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_DISPLAY_SM_STYLED }); };
75
+ exports.UI_DISPLAY_SM = UI_DISPLAY_SM;
74
76
  var UI_HEADLINE = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_HEADLINE_STYLED }); };
75
77
  exports.UI_HEADLINE = UI_HEADLINE;
76
78
  var UI_HEADLINE_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_HEADLINE_SM_STYLED }); };
package/dist/v2/components/Typo2/index.styled.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const UI_DISPLAY_STYLED: import("styled-components").StyledComponent<"h6", any, {}, never>;
2
+ export declare const UI_DISPLAY_SM_STYLED: import("styled-components").StyledComponent<"h6", any, {}, never>;
2
3
  export declare const UI_HEADLINE_STYLED: import("styled-components").StyledComponent<"h5", any, {}, never>;
3
4
  export declare const UI_HEADLINE_SM_STYLED: import("styled-components").StyledComponent<"h4", any, {}, never>;
4
5
  export declare const UI_TITLE_STYLED: import("styled-components").StyledComponent<"h3", any, {}, never>;
package/dist/v2/components/Typo2/index.styled.js CHANGED
@@ -7,52 +7,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_SM_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_SEMIBOLD_DF_STYLED = exports.UI_CAPTION_SEMIBOLD_STYLED = exports.UI_CAPTION_BOLD_DF_STYLED = exports.UI_CAPTION_DF_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_DF_STYLED = exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = exports.UI_BODY_SM_DF_STYLED = exports.UI_BODY_DF_STYLED = exports.UI_BODY_BOLD_DF_STYLED = exports.UI_BODY_SEMIBOLD_DF_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
10
+ exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_SM_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_SEMIBOLD_DF_STYLED = exports.UI_CAPTION_SEMIBOLD_STYLED = exports.UI_CAPTION_BOLD_DF_STYLED = exports.UI_CAPTION_DF_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_DF_STYLED = exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = exports.UI_BODY_SM_DF_STYLED = exports.UI_BODY_DF_STYLED = exports.UI_BODY_BOLD_DF_STYLED = exports.UI_BODY_SEMIBOLD_DF_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_SM_STYLED = exports.UI_DISPLAY_STYLED = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var typo_1 = require("../../themes/typo");
13
13
  // UI Fonts
14
14
  exports.UI_DISPLAY_STYLED = styled_components_1.default.h6(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_DISPLAY);
15
- exports.UI_HEADLINE_STYLED = styled_components_1.default.h5(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HEADLINE);
16
- exports.UI_HEADLINE_SM_STYLED = styled_components_1.default.h4(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HEADLINE_SM);
17
- exports.UI_TITLE_STYLED = styled_components_1.default.h3(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TITLE);
18
- exports.UI_TITLE_SM_STYLED = styled_components_1.default.h1(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TITLE_SM);
19
- exports.UI_BODY_STYLED = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY);
20
- exports.UI_BODY_SM_STYLED = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SM);
21
- exports.UI_BODY_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD);
22
- exports.UI_BODY_SEMIBOLD_SM_STYLED = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_SM);
23
- exports.UI_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typo_1.typo.UI_BODY_BOLD);
24
- exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM);
25
- exports.UI_BODY_SEMIBOLD_DF_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_DF);
26
- exports.UI_BODY_BOLD_DF_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_DF);
27
- exports.UI_BODY_DF_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_DF);
28
- exports.UI_BODY_SM_DF_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SM_DF);
29
- exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_SM_DF);
30
- exports.UI_BODY_BOLD_SM_DF_STYLED = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM_DF);
31
- exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH);
32
- exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
33
- exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION);
34
- exports.UI_CAPTION_BOLD_STYLED = styled_components_1.default.p(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_BOLD);
35
- exports.UI_CAPTION_DF_STYLED = styled_components_1.default.p(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_DF);
36
- exports.UI_CAPTION_BOLD_DF_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_BOLD_DF);
37
- exports.UI_CAPTION_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD);
38
- exports.UI_CAPTION_SEMIBOLD_DF_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD_DF);
39
- exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TAG);
40
- exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HELPTEXT);
41
- exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_STAT_LG);
42
- exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
15
+ exports.UI_DISPLAY_SM_STYLED = styled_components_1.default.h6(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_DISPLAY_SM);
16
+ exports.UI_HEADLINE_STYLED = styled_components_1.default.h5(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HEADLINE);
17
+ exports.UI_HEADLINE_SM_STYLED = styled_components_1.default.h4(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HEADLINE_SM);
18
+ exports.UI_TITLE_STYLED = styled_components_1.default.h3(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TITLE);
19
+ exports.UI_TITLE_SM_STYLED = styled_components_1.default.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TITLE_SM);
20
+ exports.UI_BODY_STYLED = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY);
21
+ exports.UI_BODY_SM_STYLED = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SM);
22
+ exports.UI_BODY_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD);
23
+ exports.UI_BODY_SEMIBOLD_SM_STYLED = styled_components_1.default.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_SM);
24
+ exports.UI_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typo_1.typo.UI_BODY_BOLD);
25
+ exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM);
26
+ exports.UI_BODY_SEMIBOLD_DF_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_DF);
27
+ exports.UI_BODY_BOLD_DF_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_DF);
28
+ exports.UI_BODY_DF_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_DF);
29
+ exports.UI_BODY_SM_DF_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SM_DF);
30
+ exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_SM_DF);
31
+ exports.UI_BODY_BOLD_SM_DF_STYLED = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM_DF);
32
+ exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH);
33
+ exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
34
+ exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION);
35
+ exports.UI_CAPTION_BOLD_STYLED = styled_components_1.default.p(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_BOLD);
36
+ exports.UI_CAPTION_DF_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_DF);
37
+ exports.UI_CAPTION_BOLD_DF_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_BOLD_DF);
38
+ exports.UI_CAPTION_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD);
39
+ exports.UI_CAPTION_SEMIBOLD_DF_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD_DF);
40
+ exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TAG);
41
+ exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HELPTEXT);
42
+ exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_STAT_LG);
43
+ exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
43
44
  // Content Fonts
44
45
  ])), typo_1.typo.UI_STAT_SM);
45
46
  // Content Fonts
46
- exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", " \n "], ["\n ", " \n "])), typo_1.typo.CONTENT_H1);
47
- exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H2);
48
- exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H3);
49
- exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY);
50
- exports.CONTENT_BODY_SM_STYLED = styled_components_1.default.p(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_SM);
51
- exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
52
- exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
53
- exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
54
- exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
55
- exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
56
- exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
57
- exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"], ["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD_DF, typo_1.typo.UI_BODY_BOLD_SM_DF, typo_1.typo.UI_BODY_DF, typo_1.typo.UI_BODY_SM_DF, typo_1.typo.UI_BODY_SEMIBOLD_DF, typo_1.typo.UI_BODY_SEMIBOLD_SM_DF, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_CAPTION_BOLD, typo_1.typo.UI_CAPTION_DF, typo_1.typo.UI_CAPTION_BOLD_DF, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
58
- 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, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41;
47
+ exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n ", " \n "], ["\n ", " \n "])), typo_1.typo.CONTENT_H1);
48
+ exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H2);
49
+ exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H3);
50
+ exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY);
51
+ exports.CONTENT_BODY_SM_STYLED = styled_components_1.default.p(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_SM);
52
+ exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
53
+ exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
54
+ exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
55
+ exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
56
+ exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
57
+ exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
58
+ exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"], ["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\n ", "\n } \n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\n ", "\n }\n\n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD_DF, typo_1.typo.UI_BODY_BOLD_SM_DF, typo_1.typo.UI_BODY_DF, typo_1.typo.UI_BODY_SM_DF, typo_1.typo.UI_BODY_SEMIBOLD_DF, typo_1.typo.UI_BODY_SEMIBOLD_SM_DF, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_CAPTION_BOLD, typo_1.typo.UI_CAPTION_DF, typo_1.typo.UI_CAPTION_BOLD_DF, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
59
+ 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, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42;
package/dist/v2/themes/typo.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export declare const typo: {
2
2
  UI_DISPLAY: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
3
+ UI_DISPLAY_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
3
4
  UI_HEADLINE: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
4
5
  UI_HEADLINE_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
5
6
  UI_TITLE: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
package/dist/v2/themes/typo.js CHANGED
@@ -21,56 +21,58 @@ var fontCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
21
21
  var uiFont = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: 'DM Sans', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n font-family: 'DM Sans', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
22
22
  var contentFont = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
23
23
  var UI_DISPLAY = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 40px;\n line-height: 52px;\n font-weight: 700;\n"], ["\n ", ";\n ", ";\n font-size: 40px;\n line-height: 52px;\n font-weight: 700;\n"])), uiFont, fontCss);
24
- var UI_HEADLINE = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 42px;\n font-weight: 500;\n"], ["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 42px;\n font-weight: 500;\n"])), uiFont, fontCss);
25
- var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 36px;\n font-weight: 600;\n"], ["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 36px;\n font-weight: 600;\n"])), uiFont, fontCss);
26
- var UI_TITLE = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 20px;\n line-height: 26px;\n font-weight: 700;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"], ["\n font-size: 20px;\n line-height: 26px;\n font-weight: 700;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
27
- var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 21px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 16px;\n line-height: 21px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
28
- var UI_BODY_SM_DESKTOP = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n"], ["\n font-size: 14px;\n line-height: 18px;\n"])));
29
- var UI_BODY_SM_MOBILE = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 21px;\n"], ["\n font-size: 16px;\n line-height: 21px;\n"])));
30
- var UI_BODY_DESKTOP = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 21px;\n"], ["\n font-size: 16px;\n line-height: 21px;\n"])));
31
- var UI_BODY_MOBILE = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 23px;\n\n"], ["\n font-size: 18px;\n line-height: 23px;\n\n"])));
32
- var UI_BODY_SM = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"])), uiFont, fontCss, UI_BODY_SM_DESKTOP);
33
- var UI_BODY_SEMIBOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n"], ["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n"])), uiFont, fontCss, UI_BODY_SM_DESKTOP);
34
- var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n"])), uiFont, fontCss, UI_BODY_SM_DESKTOP);
35
- var UI_BODY = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n \n ", ";\n\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n \n ", ";\n\n"])), uiFont, fontCss, UI_BODY_DESKTOP);
36
- var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n"], ["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n"])), uiFont, fontCss, UI_BODY_DESKTOP);
37
- var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n"])), uiFont, fontCss, UI_BODY_DESKTOP);
38
- var UI_BODY_SM_DF = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_SM_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_SM_DESKTOP);
39
- var UI_BODY_SEMIBOLD_SM_DF = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_SM_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_SM_DESKTOP);
40
- var UI_BODY_BOLD_SM_DF = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_SM_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_SM_DESKTOP);
41
- var UI_BODY_DF = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_DESKTOP);
42
- var UI_BODY_SEMIBOLD_DF = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_DESKTOP);
43
- var UI_BODY_BOLD_DF = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_DESKTOP);
44
- var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __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);
45
- var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __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);
46
- var UI_CAPTION_DESKTOP = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n"], ["\n font-size: 12px;\n line-height: 16px;\n"])));
47
- var UI_CAPTION_MOBILE = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n"], ["\n font-size: 14px;\n line-height: 18px;\n"])));
48
- var UI_CAPTION = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
49
- var UI_CAPTION_BOLD = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n\n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
50
- var UI_CAPTION_SEMIBOLD = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n"], ["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
51
- var UI_CAPTION_DF = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
52
- var UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
53
- var UI_CAPTION_BOLD_DF = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
54
- var UI_TAG = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __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);
55
- var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __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);
56
- var UI_STAT_LG = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __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);
57
- var UI_STAT_SM = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __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);
58
- var CONTENT_H1 = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __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);
59
- var CONTENT_H2 = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __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);
60
- var CONTENT_H3 = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __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);
61
- var CONTENT_BODY_SM = (0, styled_components_1.css)(templateObject_42 || (templateObject_42 = __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);
62
- var CONTENT_BODY = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"])), contentFont, fontCss);
63
- var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __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);
64
- var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __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);
65
- var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __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);
66
- var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __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) {
24
+ var UI_DISPLAY_SM = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 32px;\n line-height: 42px;\n font-weight: 700;\n"], ["\n ", ";\n ", ";\n font-size: 32px;\n line-height: 42px;\n font-weight: 700;\n"])), uiFont, fontCss);
25
+ var UI_HEADLINE = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 42px;\n font-weight: 500;\n"], ["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 42px;\n font-weight: 500;\n"])), uiFont, fontCss);
26
+ var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 36px;\n font-weight: 600;\n"], ["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 36px;\n font-weight: 600;\n"])), uiFont, fontCss);
27
+ var UI_TITLE = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 20px;\n line-height: 26px;\n font-weight: 500;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"], ["\n font-size: 20px;\n line-height: 26px;\n font-weight: 500;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
28
+ var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 21px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 16px;\n line-height: 21px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
29
+ var UI_BODY_SM_DESKTOP = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n"], ["\n font-size: 14px;\n line-height: 18px;\n"])));
30
+ var UI_BODY_SM_MOBILE = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 21px;\n"], ["\n font-size: 16px;\n line-height: 21px;\n"])));
31
+ var UI_BODY_DESKTOP = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 21px;\n"], ["\n font-size: 16px;\n line-height: 21px;\n"])));
32
+ var UI_BODY_MOBILE = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 23px;\n\n"], ["\n font-size: 18px;\n line-height: 23px;\n\n"])));
33
+ var UI_BODY_SM = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"])), uiFont, fontCss, UI_BODY_SM_DESKTOP);
34
+ var UI_BODY_SEMIBOLD_SM = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n"], ["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n"])), uiFont, fontCss, UI_BODY_SM_DESKTOP);
35
+ var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n"])), uiFont, fontCss, UI_BODY_SM_DESKTOP);
36
+ var UI_BODY = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n \n ", ";\n\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n \n ", ";\n\n"])), uiFont, fontCss, UI_BODY_DESKTOP);
37
+ var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n"], ["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n"])), uiFont, fontCss, UI_BODY_DESKTOP);
38
+ var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n"])), uiFont, fontCss, UI_BODY_DESKTOP);
39
+ var UI_BODY_SM_DF = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_SM_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_SM_DESKTOP);
40
+ var UI_BODY_SEMIBOLD_SM_DF = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 500;\n ", "\n ", "\n\n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_SM_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_SM_DESKTOP);
41
+ var UI_BODY_BOLD_SM_DF = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_SM_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_SM_DESKTOP);
42
+ var UI_BODY_DF = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_DESKTOP);
43
+ var UI_BODY_SEMIBOLD_DF = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 500;\n ", "\n ", "\n \n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_DESKTOP);
44
+ var UI_BODY_BOLD_DF = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n ", "{\n ", ";\n }\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n \n ", ";\n\n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_BODY_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_BODY_DESKTOP);
45
+ var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __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);
46
+ var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __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);
47
+ var UI_CAPTION_DESKTOP = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n"], ["\n font-size: 12px;\n line-height: 16px;\n"])));
48
+ var UI_CAPTION_MOBILE = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n"], ["\n font-size: 14px;\n line-height: 18px;\n"])));
49
+ var UI_CAPTION = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
50
+ var UI_CAPTION_BOLD = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n\n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
51
+ var UI_CAPTION_SEMIBOLD = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n"], ["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n"])), uiFont, fontCss, UI_CAPTION_DESKTOP);
52
+ var UI_CAPTION_DF = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 400;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
53
+ var UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 500;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
54
+ var UI_CAPTION_BOLD_DF = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"], ["\n font-weight: 700;\n ", ";\n ", ";\n\n ", ";\n \n ", "{\n ", ";\n }\n"])), uiFont, fontCss, UI_CAPTION_MOBILE, (0, mixins_1.mediaQuery)("md"), UI_CAPTION_DESKTOP);
55
+ var UI_TAG = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __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);
56
+ var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __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);
57
+ var UI_STAT_LG = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __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);
58
+ var UI_STAT_SM = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __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);
59
+ var CONTENT_H1 = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __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);
60
+ var CONTENT_H2 = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __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);
61
+ var CONTENT_H3 = (0, styled_components_1.css)(templateObject_42 || (templateObject_42 = __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);
62
+ var CONTENT_BODY_SM = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __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);
63
+ var CONTENT_BODY = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"])), contentFont, fontCss);
64
+ var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __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);
65
+ var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __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);
66
+ var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __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);
67
+ var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __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) {
67
68
  var invert = _a.invert, colors = _a.theme.colors;
68
69
  return invert ? colors.greyColor40 : (0, utilsOolib_1.getPrimaryColor100)(colors);
69
70
  }, contentFont, fontCss);
70
- var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __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);
71
- var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __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);
71
+ var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __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);
72
+ var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __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);
72
73
  exports.typo = {
73
74
  UI_DISPLAY: UI_DISPLAY,
75
+ UI_DISPLAY_SM: UI_DISPLAY_SM,
74
76
  UI_HEADLINE: UI_HEADLINE,
75
77
  UI_HEADLINE_SM: UI_HEADLINE_SM,
76
78
  UI_TITLE: UI_TITLE,
@@ -113,4 +115,4 @@ exports.typo = {
113
115
  CONTENT_TITLE_POSTIT: CONTENT_TITLE_POSTIT,
114
116
  CONTENT_BODY_POSTIT: CONTENT_BODY_POSTIT
115
117
  };
116
- 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, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
118
+ 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, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.170.10",
3
+ "version": "2.171.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",