@axos-web-dev/shared-components 2.0.0-dev.18-apy.1 → 2.0.0-dev.18-apy.3

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.
@@ -32,8 +32,6 @@ export declare const field_error: string;
32
32
  export declare const relative: string;
33
33
  export declare const label_symbol: string;
34
34
  export declare const percent: string;
35
- export declare const prefix_pad: string;
36
- export declare const submit_section: string;
37
35
  export declare const span_12: string;
38
36
  export declare const form_disclosure: string;
39
37
  export declare const marketing: string;
@@ -69,5 +67,15 @@ export declare const result_value: string;
69
67
  export declare const result_item: string;
70
68
  export declare const result_item_label: string;
71
69
  export declare const result_item_value: string;
70
+ export declare const result_image: string;
71
+ export declare const definitions_accordion: string;
72
+ export declare const definitions_button: string;
73
+ export declare const definitions_h2: string;
74
+ export declare const definitions_panel: string;
75
+ export declare const definitions_columns: string;
76
+ export declare const definitions_column: string;
77
+ export declare const definitions_item: string;
78
+ export declare const definitions_term: string;
79
+ export declare const definitions_text: string;
72
80
  export declare const marketingTile: string;
73
81
  export declare const bodyContent: string;
@@ -20,30 +20,38 @@ var field_error = "_1vox1xjf";
20
20
  var relative = "_1vox1xjg";
21
21
  var label_symbol = "_1vox1xjh";
22
22
  var percent = "_1vox1xji";
23
- var prefix_pad = "_1vox1xjj";
24
- var submit_section = "_1vox1xjk";
25
- var span_12 = "_1vox1xjl";
26
- var form_disclosure = "_1vox1xjm";
27
- var marketing = "_1vox1xjn";
28
- var header_theme = createRuntimeFn({ defaultClassName: "_1vox1xjo", variantClassNames: { variant: { primary: "_1vox1xjp", secondary: "_1vox1xjq", tertiary: "_1vox1xjr", quaternary: "_1vox1xjs" } }, defaultVariants: {}, compoundVariants: [] });
29
- var mt_8 = "_1vox1xjt";
30
- var pis_0 = "_1vox1xju";
31
- var listbox_button = "_1vox1xjv";
32
- var chevron_icon = "_1vox1xjw";
33
- var listbox_options = "_1vox1xjx";
34
- var listbox_option = "_1vox1xjy";
35
- var results_wrapper = "_1vox1xjz";
36
- var optional_badge = "_1vox1xj10";
37
- var scrambling = "_1vox1xj12";
38
- var result_card = "_1vox1xj13";
39
- var result_section = "_1vox1xj14";
40
- var result_value_label = "_1vox1xj15";
41
- var result_value = "_1vox1xj16";
42
- var result_item = "_1vox1xj17";
43
- var result_item_label = "_1vox1xj18";
44
- var result_item_value = "_1vox1xj19";
45
- var marketingTile = "_1vox1xj1a";
46
- var bodyContent = "_1vox1xj1b";
23
+ var span_12 = "_1vox1xjj";
24
+ var form_disclosure = "_1vox1xjk";
25
+ var marketing = "_1vox1xjl";
26
+ var header_theme = createRuntimeFn({ defaultClassName: "_1vox1xjm", variantClassNames: { variant: { primary: "_1vox1xjn", secondary: "_1vox1xjo", tertiary: "_1vox1xjp", quaternary: "_1vox1xjq" } }, defaultVariants: {}, compoundVariants: [] });
27
+ var mt_8 = "_1vox1xjr";
28
+ var pis_0 = "_1vox1xjs";
29
+ var listbox_button = "_1vox1xjt";
30
+ var chevron_icon = "_1vox1xju";
31
+ var listbox_options = "_1vox1xjv";
32
+ var listbox_option = "_1vox1xjw";
33
+ var results_wrapper = "_1vox1xjx";
34
+ var optional_badge = "_1vox1xjy";
35
+ var scrambling = "_1vox1xj10";
36
+ var result_card = "_1vox1xj11";
37
+ var result_section = "_1vox1xj12";
38
+ var result_value_label = "_1vox1xj13";
39
+ var result_value = "_1vox1xj14";
40
+ var result_item = "_1vox1xj15";
41
+ var result_item_label = "_1vox1xj16";
42
+ var result_item_value = "_1vox1xj17";
43
+ var result_image = "_1vox1xj18";
44
+ var definitions_accordion = "_1vox1xj19";
45
+ var definitions_button = "_1vox1xj1a";
46
+ var definitions_h2 = "_1vox1xj1b";
47
+ var definitions_panel = "_1vox1xj1c";
48
+ var definitions_columns = "_1vox1xj1d";
49
+ var definitions_column = "_1vox1xj1e";
50
+ var definitions_item = "_1vox1xj1f";
51
+ var definitions_term = "_1vox1xj1g";
52
+ var definitions_text = "_1vox1xj1h";
53
+ var marketingTile = "_1vox1xj1i";
54
+ var bodyContent = "_1vox1xj1j";
47
55
  export {
48
56
  apy_calculator,
49
57
  apy_calculator_form,
@@ -51,6 +59,15 @@ export {
51
59
  calculator_section,
52
60
  chevron_icon,
53
61
  container,
62
+ definitions_accordion,
63
+ definitions_button,
64
+ definitions_column,
65
+ definitions_columns,
66
+ definitions_h2,
67
+ definitions_item,
68
+ definitions_panel,
69
+ definitions_term,
70
+ definitions_text,
54
71
  errorTag,
55
72
  field_error,
56
73
  field_label,
@@ -70,9 +87,9 @@ export {
70
87
  optional_badge,
71
88
  percent,
72
89
  pis_0,
73
- prefix_pad,
74
90
  relative,
75
91
  result_card,
92
+ result_image,
76
93
  result_item,
77
94
  result_item_label,
78
95
  result_item_value,
@@ -82,6 +99,5 @@ export {
82
99
  results_wrapper,
83
100
  scrambling,
84
101
  section_header,
85
- span_12,
86
- submit_section
102
+ span_12
87
103
  };
@@ -1,11 +1,12 @@
1
1
  "use client";
2
- import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
3
3
  import { useGlobalContext } from "../../Modal/contextApi/store.js";
4
4
  import { getVariant } from "../../utils/getVariant.js";
5
5
  import Image from "next/image.js";
6
- import { Field, Label, Input, Description, Listbox, ListboxButton, ListboxOptions, ListboxOption } from "@headlessui/react";
6
+ import { Field, Label, Input, Description, Listbox, ListboxButton, ListboxOptions, ListboxOption, Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
7
+ import { AnimatePresence, motion } from "framer-motion";
7
8
  import { useState, useCallback, useEffect, useRef } from "react";
8
- import { apy_calculator, section_header, header_theme, mt_8, calculator_section, apy_calculator_form, fieldset, field_row, relative, field_label, field_row_input, field_row_input_error, field_error, label_symbol, percent, listbox_button, chevron_icon, listbox_options, listbox_option, optional_badge, form_disclosure, results_wrapper, result_card, result_section, result_value, scrambling, result_value_label, result_item, result_item_label, result_item_value, container } from "./ApyCalculator.css.js";
9
+ import { apy_calculator, section_header, header_theme, mt_8, calculator_section, apy_calculator_form, fieldset, field_row, relative, field_label, field_row_input, field_row_input_error, field_error, label_symbol, percent, listbox_button, chevron_icon, listbox_options, listbox_option, optional_badge, form_disclosure, results_wrapper, result_card, result_section, result_image, result_value, scrambling, result_value_label, result_item, result_item_label, result_item_value, definitions_accordion, definitions_button, definitions_h2, definitions_panel, definitions_columns, definitions_column, definitions_item, definitions_term, definitions_text, container } from "./ApyCalculator.css.js";
9
10
  const COMPOUNDING_OPTIONS = [
10
11
  { value: 360, label: "Daily" },
11
12
  { value: 12, label: "Monthly" },
@@ -13,7 +14,45 @@ const COMPOUNDING_OPTIONS = [
13
14
  { value: 2, label: "Semi-Annual" },
14
15
  { value: 1, label: "Yearly" }
15
16
  ];
17
+ const CALCULATOR_DEFINITIONS = [
18
+ {
19
+ term: "Initial deposit",
20
+ description: "The amount of money you're starting with."
21
+ },
22
+ {
23
+ term: "APY (Annual Percentage Yield)",
24
+ description: "The rate your money earns in a year, with compounding included."
25
+ },
26
+ {
27
+ term: "Months",
28
+ description: "How long you plan to keep your money in the account."
29
+ },
30
+ {
31
+ term: "Compounding",
32
+ description: "How often interest is calculated and added to your balance. APY on bank accounts usually compounds monthly."
33
+ },
34
+ {
35
+ term: "Monthly deposits",
36
+ description: "Any additional amount you plan to contribute each month."
37
+ },
38
+ {
39
+ term: "Interest earned",
40
+ description: "The amount gained from interest over the selected time period."
41
+ },
42
+ {
43
+ term: "Ending balance",
44
+ description: "Your projected balance at the end of the selected time period, based on the inputs above."
45
+ },
46
+ {
47
+ term: "Total deposits",
48
+ description: "The total money you contribute, including your initial and monthly deposits."
49
+ }
50
+ ];
16
51
  const SCRAMBLE_CHARS = "0123456789";
52
+ const DEFINITIONS_ITEM_TRANSITION = {
53
+ duration: 0.35,
54
+ ease: [0.22, 1, 0.36, 1]
55
+ };
17
56
  function scrambleCurrency(target, progress) {
18
57
  const formatted = target.toLocaleString("en-US", {
19
58
  style: "currency",
@@ -99,7 +138,9 @@ const ApyCalculator = ({
99
138
  formatWithCommas(1e4)
100
139
  );
101
140
  const [APY, setAPY] = useState(AXOS_ONE_APY);
141
+ const [APYDisplay, setAPYDisplay] = useState(APY.toString());
102
142
  const [months, setMonths] = useState(12);
143
+ const [monthsDisplay, setMonthsDisplay] = useState(months.toString());
103
144
  const [monthlyDeposits, setMonthlyDeposits] = useState(100);
104
145
  const [monthlyDepositsDisplay, setMonthlyDepositsDisplay] = useState(
105
146
  formatWithCommas(100)
@@ -122,12 +163,27 @@ const ApyCalculator = ({
122
163
  setMonthlyDeposits(num);
123
164
  setMonthlyDepositsDisplay(formatWithCommas(num));
124
165
  };
166
+ const handleMonthsChange = (e) => {
167
+ const raw = e.target.value;
168
+ const num = parseInt(raw.replace(/[^0-9]/g, ""), 10);
169
+ setMonths(num);
170
+ setMonthsDisplay(num > 0 ? num.toString() : "");
171
+ };
172
+ const handleAPYChange = (e) => {
173
+ const raw = e.target.value;
174
+ const num = parseFloat(raw.replace(/[^0-9.]/g, ""));
175
+ setAPY(num);
176
+ setAPYDisplay(raw);
177
+ };
125
178
  const [endingBalanceRaw, setEndingBalanceRaw] = useState(0);
126
179
  const [totalDepositsRaw, setTotalDepositsRaw] = useState(0);
127
180
  const [interestEarnedRaw, setInterestEarnedRaw] = useState(0);
128
181
  const { display: endingBalanceDisplay, isScrambling: balanceScrambling } = useScramble(endingBalanceRaw);
129
182
  const { display: totalDepositsDisplay, isScrambling: depositsScrambling } = useScramble(totalDepositsRaw);
130
183
  const { display: interestEarnedDisplay, isScrambling: interestScrambling } = useScramble(interestEarnedRaw);
184
+ const midPoint = Math.ceil(CALCULATOR_DEFINITIONS.length / 2);
185
+ const leftDefinitions = CALCULATOR_DEFINITIONS.slice(0, midPoint);
186
+ const rightDefinitions = CALCULATOR_DEFINITIONS.slice(midPoint);
131
187
  const calculate = useCallback(() => {
132
188
  const newErrors = {};
133
189
  if (!initialDeposit || initialDeposit <= 0 || Number.isNaN(initialDeposit)) {
@@ -191,10 +247,10 @@ const ApyCalculator = ({
191
247
  /* @__PURE__ */ jsxs(
192
248
  "div",
193
249
  {
194
- className: `${apy_calculator} containment flex between gap_24`,
250
+ className: `${apy_calculator} flex between`,
195
251
  style: { paddingBlock: "0px" },
196
252
  children: [
197
- /* @__PURE__ */ jsx("div", { className: `${calculator_section}`, children: /* @__PURE__ */ jsx("form", { id: "calculator_form", className: `${apy_calculator_form}`, children: /* @__PURE__ */ jsxs("div", { className: `${fieldset}`, children: [
253
+ /* @__PURE__ */ jsx("div", { className: calculator_section, children: /* @__PURE__ */ jsx("form", { id: "calculator_form", className: apy_calculator_form, children: /* @__PURE__ */ jsxs("div", { className: fieldset, children: [
198
254
  /* @__PURE__ */ jsxs(
199
255
  Field,
200
256
  {
@@ -244,11 +300,12 @@ const ApyCalculator = ({
244
300
  {
245
301
  className: `${field_row_input} ${fieldErrors.APY ? ` ${field_row_input_error}` : ""}`,
246
302
  id: "apy",
247
- type: "number",
303
+ type: "text",
304
+ inputMode: "numeric",
248
305
  name: "apy",
249
306
  min: 0,
250
- value: APY,
251
- onChange: (e) => setAPY(parseFloat(e.target.value)),
307
+ value: APYDisplay,
308
+ onChange: handleAPYChange,
252
309
  "aria-invalid": !!fieldErrors.APY,
253
310
  "aria-describedby": fieldErrors.APY ? "apy-error" : void 0
254
311
  }
@@ -272,10 +329,11 @@ const ApyCalculator = ({
272
329
  className: `${field_row_input}${fieldErrors.months ? ` ${field_row_input_error}` : ""}`,
273
330
  id: "months",
274
331
  min: 1,
275
- type: "number",
332
+ type: "text",
333
+ inputMode: "numeric",
276
334
  name: "months",
277
- value: months,
278
- onChange: (e) => setMonths(parseInt(e.target.value)),
335
+ value: monthsDisplay,
336
+ onChange: handleMonthsChange,
279
337
  "aria-invalid": !!fieldErrors.months,
280
338
  "aria-describedby": fieldErrors.months ? "months-error" : void 0
281
339
  }
@@ -395,9 +453,9 @@ const ApyCalculator = ({
395
453
  {
396
454
  src: "https://www.axos.com/images/5IyqVlv7El9K7hAX0vIGWG/axb-25th-growth-lg.png",
397
455
  alt: "",
398
- height: 135,
399
- width: 165,
400
- className: "img_fluid",
456
+ height: 173,
457
+ width: 202,
458
+ className: `img_fluid ${result_image}`,
401
459
  priority: true
402
460
  }
403
461
  ),
@@ -414,7 +472,7 @@ const ApyCalculator = ({
414
472
  ),
415
473
  /* @__PURE__ */ jsxs("div", { "aria-live": "polite", "aria-atomic": "true", children: [
416
474
  /* @__PURE__ */ jsxs("div", { className: result_item, children: [
417
- /* @__PURE__ */ jsx("span", { className: result_item_label, children: "Ending Balance" }),
475
+ /* @__PURE__ */ jsx("span", { className: result_item_label, children: "Ending Balance:" }),
418
476
  /* @__PURE__ */ jsx(
419
477
  "span",
420
478
  {
@@ -424,7 +482,7 @@ const ApyCalculator = ({
424
482
  )
425
483
  ] }),
426
484
  /* @__PURE__ */ jsxs("div", { className: result_item, children: [
427
- /* @__PURE__ */ jsx("span", { className: result_item_label, children: "Total Deposits" }),
485
+ /* @__PURE__ */ jsx("span", { className: result_item_label, children: "Total Deposits:" }),
428
486
  /* @__PURE__ */ jsx(
429
487
  "span",
430
488
  {
@@ -437,7 +495,88 @@ const ApyCalculator = ({
437
495
  ] }) })
438
496
  ]
439
497
  }
440
- )
498
+ ),
499
+ /* @__PURE__ */ jsx("div", { id: "definitions", className: "push_up_24", children: /* @__PURE__ */ jsx(
500
+ "div",
501
+ {
502
+ className: `${definitions_accordion} ${apy_calculator}`,
503
+ "aria-label": "Calculator definitions",
504
+ style: { paddingBlock: "0px" },
505
+ children: /* @__PURE__ */ jsx(Disclosure, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
506
+ /* @__PURE__ */ jsxs(DisclosureButton, { className: definitions_button, children: [
507
+ /* @__PURE__ */ jsx("h2", { className: definitions_h2, children: "Calculator definitions" }),
508
+ /* @__PURE__ */ jsx(
509
+ "svg",
510
+ {
511
+ xmlns: "http://www.w3.org/2000/svg",
512
+ width: "20",
513
+ height: "20",
514
+ viewBox: "0 0 20 20",
515
+ fill: "none",
516
+ "aria-hidden": "true",
517
+ children: /* @__PURE__ */ jsx(
518
+ "path",
519
+ {
520
+ d: "M10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM10.625 8.75V14.375H9.375V8.75H10.625ZM10 5.625C10.5178 5.625 10.9375 6.04473 10.9375 6.5625C10.9375 7.08027 10.5178 7.5 10 7.5C9.48223 7.5 9.0625 7.08027 9.0625 6.5625C9.0625 6.04473 9.48223 5.625 10 5.625Z",
521
+ fill: "#435164"
522
+ }
523
+ )
524
+ }
525
+ )
526
+ ] }),
527
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
528
+ DisclosurePanel,
529
+ {
530
+ static: true,
531
+ as: motion.div,
532
+ className: definitions_panel,
533
+ initial: { opacity: 0, height: 0, y: -6 },
534
+ animate: { opacity: 1, height: "auto", y: 0 },
535
+ exit: { opacity: 0, height: 0, y: -4 },
536
+ style: { overflow: "hidden" },
537
+ children: /* @__PURE__ */ jsxs("div", { className: definitions_columns, children: [
538
+ /* @__PURE__ */ jsx("div", { className: definitions_column, children: leftDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
539
+ motion.div,
540
+ {
541
+ className: definitions_item,
542
+ initial: { opacity: 0, y: 8 },
543
+ animate: { opacity: 1, y: 0 },
544
+ exit: { opacity: 0, y: 6 },
545
+ transition: {
546
+ ...DEFINITIONS_ITEM_TRANSITION,
547
+ delay: index * 0.045
548
+ },
549
+ children: [
550
+ /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
551
+ /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
552
+ ]
553
+ },
554
+ definition.term
555
+ )) }),
556
+ /* @__PURE__ */ jsx("div", { className: definitions_column, children: rightDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
557
+ motion.div,
558
+ {
559
+ className: definitions_item,
560
+ initial: { opacity: 0, y: 8 },
561
+ animate: { opacity: 1, y: 0 },
562
+ exit: { opacity: 0, y: 6 },
563
+ transition: {
564
+ ...DEFINITIONS_ITEM_TRANSITION,
565
+ delay: (leftDefinitions.length + index) * 0.045
566
+ },
567
+ children: [
568
+ /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
569
+ /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
570
+ ]
571
+ },
572
+ definition.term
573
+ )) })
574
+ ] })
575
+ }
576
+ ) })
577
+ ] }) })
578
+ }
579
+ ) })
441
580
  ]
442
581
  }
443
582
  );
@@ -1,42 +1,42 @@
1
- import '../../assets/NavigationMenu/AxosBank/NavBar.css';const header = "_header_1epiq_1";
2
- const wrapper = "_wrapper_1epiq_9";
3
- const header_main_row = "_header_main_row_1epiq_21";
4
- const logo_wrap = "_logo_wrap_1epiq_33";
5
- const primary_links = "_primary_links_1epiq_41";
6
- const main_nav_link = "_main_nav_link_1epiq_49";
7
- const sub_nav_link = "_sub_nav_link_1epiq_113";
8
- const signin_wrap = "_signin_wrap_1epiq_117";
9
- const signin_btn = "_signin_btn_1epiq_119";
10
- const header_sub_row = "_header_sub_row_1epiq_195";
11
- const signin_dropdown = "_signin_dropdown_1epiq_261";
12
- const shadow = "_shadow_1epiq_281";
13
- const signin_header = "_signin_header_1epiq_301";
14
- const signin_subheader = "_signin_subheader_1epiq_315";
15
- const opacity = "_opacity_1epiq_357";
16
- const fadeInDown = "_fadeInDown_1epiq_1";
17
- const signin_footer = "_signin_footer_1epiq_369";
18
- const open = "_open_1epiq_411";
19
- const dd_wrapper = "_dd_wrapper_1epiq_435";
20
- const dd_media = "_dd_media_1epiq_453";
21
- const dd_media_img = "_dd_media_img_1epiq_463";
22
- const dd_site_navs = "_dd_site_navs_1epiq_471";
23
- const dd_media_header = "_dd_media_header_1epiq_485";
24
- const mt_8 = "_mt_8_1epiq_507";
25
- const mt_16 = "_mt_16_1epiq_515";
26
- const ml_8 = "_ml_8_1epiq_523";
27
- const reversed_row = "_reversed_row_1epiq_531";
28
- const headline = "_headline_1epiq_539";
29
- const nav_anchor = "_nav_anchor_1epiq_555";
30
- const headline_cta = "_headline_cta_1epiq_571";
31
- const site_lists = "_site_lists_1epiq_603";
32
- const modify_fit = "_modify_fit_1epiq_643";
33
- const mobile_only = "_mobile_only_1epiq_693";
34
- const mobile_logo = "_mobile_logo_1epiq_705";
35
- const highlight = "_highlight_1epiq_719";
36
- const mobile_opened = "_mobile_opened_1epiq_731";
37
- const dd_footer = "_dd_footer_1epiq_747";
38
- const skip_btn = "_skip_btn_1epiq_763";
39
- const desktop_only = "_desktop_only_1epiq_835";
1
+ import '../../assets/NavigationMenu/AxosBank/NavBar.css';const header = "_header_4c252_1";
2
+ const wrapper = "_wrapper_4c252_5";
3
+ const header_main_row = "_header_main_row_4c252_11";
4
+ const logo_wrap = "_logo_wrap_4c252_17";
5
+ const primary_links = "_primary_links_4c252_21";
6
+ const main_nav_link = "_main_nav_link_4c252_25";
7
+ const sub_nav_link = "_sub_nav_link_4c252_57";
8
+ const signin_wrap = "_signin_wrap_4c252_59";
9
+ const signin_btn = "_signin_btn_4c252_60";
10
+ const header_sub_row = "_header_sub_row_4c252_98";
11
+ const signin_dropdown = "_signin_dropdown_4c252_131";
12
+ const shadow = "_shadow_4c252_141";
13
+ const signin_header = "_signin_header_4c252_151";
14
+ const signin_subheader = "_signin_subheader_4c252_158";
15
+ const opacity = "_opacity_4c252_179";
16
+ const fadeInDown = "_fadeInDown_4c252_1";
17
+ const signin_footer = "_signin_footer_4c252_185";
18
+ const open = "_open_4c252_206";
19
+ const dd_wrapper = "_dd_wrapper_4c252_218";
20
+ const dd_media = "_dd_media_4c252_227";
21
+ const dd_media_img = "_dd_media_img_4c252_232";
22
+ const dd_site_navs = "_dd_site_navs_4c252_236";
23
+ const dd_media_header = "_dd_media_header_4c252_243";
24
+ const mt_8 = "_mt_8_4c252_254";
25
+ const mt_16 = "_mt_16_4c252_258";
26
+ const ml_8 = "_ml_8_4c252_262";
27
+ const reversed_row = "_reversed_row_4c252_266";
28
+ const headline = "_headline_4c252_270";
29
+ const nav_anchor = "_nav_anchor_4c252_278";
30
+ const headline_cta = "_headline_cta_4c252_286";
31
+ const site_lists = "_site_lists_4c252_302";
32
+ const modify_fit = "_modify_fit_4c252_322";
33
+ const mobile_only = "_mobile_only_4c252_347";
34
+ const mobile_logo = "_mobile_logo_4c252_353";
35
+ const highlight = "_highlight_4c252_360";
36
+ const mobile_opened = "_mobile_opened_4c252_366";
37
+ const dd_footer = "_dd_footer_4c252_374";
38
+ const skip_btn = "_skip_btn_4c252_382";
39
+ const desktop_only = "_desktop_only_4c252_418";
40
40
  const styles = {
41
41
  header,
42
42
  wrapper,