@axos-web-dev/shared-components 0.0.61 → 0.0.63

package/dist/HeroBanner/index.d.ts

@@ -1,3 +1,4 @@
-import { HeroBannerInterface } from './HeroBanner.interface';
-
-export declare const HeroBanner: ({ id, eyebrow, headline, bodyCopy, callToActionRow, bannerType, image, imagePlacement, variant, }: HeroBannerInterface) => import("react/jsx-runtime").JSX.Element;
+export * from './HeroBanner';
+export * from './HeroBanner.css';
+export * from './HeroBanner.interface';
+export * from './SelectionBanner.css';

package/dist/HeroBanner/index.js

@@ -1,83 +1,22 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react";
-import "react-use";
-import { Chevron } from "../Chevron/index.js";
-import { getVariant } from "../utils/getVariant.js";
-import { logout, hero_banner, hero_wrapper, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
-const HeroBanner = ({
-  id,
-  eyebrow,
-  headline,
-  bodyCopy,
-  callToActionRow,
-  bannerType = "Hero",
-  image,
-  imagePlacement = "Right",
-  variant
-}) => {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      id: `id_${id}`,
-      className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
-      children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: hero_text, children: [
-              eyebrow && /* @__PURE__ */ jsx("h1", { className: supertag({ variant: getVariant(variant) }), children: eyebrow }),
-              eyebrow ? /* @__PURE__ */ jsx("h2", { className: headline_text({ variant: getVariant(variant) }), children: headline }) : /* @__PURE__ */ jsx("h1", { className: headline_text({ variant: getVariant(variant) }), children: headline }),
-              /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
-              callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
-                ({
-                  id: id2,
-                  variant: variant2,
-                  displayText,
-                  targetUrl,
-                  type
-                }) => type === "Button" ? /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    targetUrl,
-                    color: getVariant(variant2),
-                    size: "large",
-                    rounded: "medium",
-                    children: displayText
-                  },
-                  id2
-                ) : /* @__PURE__ */ jsx(
-                  Chevron,
-                  {
-                    targetUrl,
-                    variant: getVariant(variant2),
-                    goBack: bannerType == "Logout",
-                    children: displayText
-                  },
-                  id2
-                )
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: hero_img, role: "presentation", children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                decoding: "async",
-                "data-nimg": 1,
-                className: "img_fluid",
-                style: { color: "transparent" },
-                src: `${image.src}?fm=webp&w=604&h=480&fit=fill`,
-                alt: image.alt
-              }
-            ) })
-          ]
-        }
-      ) })
-    },
-    id
-  );
-};
+import { HeroBanner } from "./HeroBanner.js";
+import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_img, hero_text, hero_wrapper, logout, reversed } from "./HeroBanner.css.js";
+import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./SelectionBanner.css.js";
 export {
-  HeroBanner
+  HeroBanner,
+  headline_text,
+  heroSupertag,
+  hero_banner,
+  hero_btns,
+  hero_content,
+  hero_img,
+  hero_text,
+  hero_wrapper,
+  logout,
+  reversed,
+  selection_headline_text,
+  selection_section,
+  selection_section_bg,
+  selection_section_content,
+  selection_section_icon,
+  selection_section_icon_img
 };

package/dist/Hyperlink/index.js

@@ -20,21 +20,11 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-/* empty css                                              */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -47,6 +37,19 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/ImageLink/ImageLink.js

@@ -20,18 +20,8 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
 /* empty css                                              */
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
+/* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -44,6 +34,19 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/ImageLink/ImageLinkSet.js

@@ -23,18 +23,8 @@ import "../AlertBanner/AlertBanner.css.js";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
 /* empty css                                              */
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
+/* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -47,6 +37,19 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import ImageLink from "./ImageLink.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/ImageLink/index.js

@@ -17,21 +17,11 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-/* empty css                                              */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -44,6 +34,19 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import { ImageLinkSet } from "./ImageLinkSet.js";

package/dist/Modal/Modal.js

@@ -16,22 +16,11 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
-/* empty css                                              */
 import "../IconBillboard/IconBillboard.css.js";
 /* empty css                                          */
-import "clsx";
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -41,9 +30,23 @@ import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
+import "clsx";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/NavigationMenu/AxosAdvisor/NavBar.module.js

@@ -1,56 +1,56 @@
-const header = "_header_1i6pg_1";
-const wrapper = "_wrapper_1i6pg_5";
-const header_main_row = "_header_main_row_1i6pg_11";
-const mobile_header = "_mobile_header_1i6pg_12";
-const logo_wrap = "_logo_wrap_1i6pg_18";
-const primary_links = "_primary_links_1i6pg_22";
-const main_nav_link = "_main_nav_link_1i6pg_26";
-const sub_nav_link = "_sub_nav_link_1i6pg_48";
-const signin_wrap = "_signin_wrap_1i6pg_50";
-const signin_btn = "_signin_btn_1i6pg_51";
-const sub_nav = "_sub_nav_1i6pg_48";
-const header_sub_row = "_header_sub_row_1i6pg_93";
-const signin_dropdown = "_signin_dropdown_1i6pg_109";
-const shadow = "_shadow_1i6pg_119";
-const signin_header = "_signin_header_1i6pg_127";
-const signin_subheader = "_signin_subheader_1i6pg_134";
-const opacity = "_opacity_1i6pg_156";
-const fadeInDown = "_fadeInDown_1i6pg_1";
-const footer = "_footer_1i6pg_162";
-const open = "_open_1i6pg_178";
-const dd_wrapper = "_dd_wrapper_1i6pg_190";
-const dd_media = "_dd_media_1i6pg_195";
-const dd_media_img = "_dd_media_img_1i6pg_200";
-const dd_site_navs = "_dd_site_navs_1i6pg_204";
-const dd_media_header = "_dd_media_header_1i6pg_211";
-const mt_8 = "_mt_8_1i6pg_220";
-const mt_16 = "_mt_16_1i6pg_224";
-const ml_8 = "_ml_8_1i6pg_228";
-const dd_media_cta = "_dd_media_cta_1i6pg_232";
-const reversed_row = "_reversed_row_1i6pg_246";
-const headline = "_headline_1i6pg_262";
-const nav_anchor = "_nav_anchor_1i6pg_268";
-const headline_cta = "_headline_cta_1i6pg_276";
-const site_lists = "_site_lists_1i6pg_291";
-const hamburger = "_hamburger_1i6pg_326";
-const mobile_only = "_mobile_only_1i6pg_340";
-const mobile_logo = "_mobile_logo_1i6pg_346";
-const highlight = "_highlight_1i6pg_351";
-const mobile_nav = "_mobile_nav_1i6pg_387";
-const mobile_opened = "_mobile_opened_1i6pg_398";
-const mobile_nav_item = "_mobile_nav_item_1i6pg_402";
-const has_dropdown = "_has_dropdown_1i6pg_417";
-const icon_wrap = "_icon_wrap_1i6pg_438";
-const mobile_footer = "_mobile_footer_1i6pg_443";
-const mobile_footer_content = "_mobile_footer_content_1i6pg_448";
-const mobile_footer_media = "_mobile_footer_media_1i6pg_462";
-const footer_cta = "_footer_cta_1i6pg_468";
-const inner_wrapper = "_inner_wrapper_1i6pg_496";
-const btn = "_btn_1i6pg_501";
-const sub_menu = "_sub_menu_1i6pg_506";
-const main = "_main_1i6pg_26";
-const dd_footer = "_dd_footer_1i6pg_531";
-const desktop_only = "_desktop_only_1i6pg_550";
+const header = "_header_s8el6_1";
+const wrapper = "_wrapper_s8el6_5";
+const header_main_row = "_header_main_row_s8el6_11";
+const mobile_header = "_mobile_header_s8el6_12";
+const logo_wrap = "_logo_wrap_s8el6_18";
+const primary_links = "_primary_links_s8el6_22";
+const main_nav_link = "_main_nav_link_s8el6_26";
+const sub_nav_link = "_sub_nav_link_s8el6_48";
+const signin_wrap = "_signin_wrap_s8el6_50";
+const signin_btn = "_signin_btn_s8el6_51";
+const sub_nav = "_sub_nav_s8el6_48";
+const header_sub_row = "_header_sub_row_s8el6_94";
+const signin_dropdown = "_signin_dropdown_s8el6_110";
+const shadow = "_shadow_s8el6_120";
+const signin_header = "_signin_header_s8el6_128";
+const signin_subheader = "_signin_subheader_s8el6_135";
+const opacity = "_opacity_s8el6_157";
+const fadeInDown = "_fadeInDown_s8el6_1";
+const footer = "_footer_s8el6_163";
+const open = "_open_s8el6_179";
+const dd_wrapper = "_dd_wrapper_s8el6_191";
+const dd_media = "_dd_media_s8el6_196";
+const dd_media_img = "_dd_media_img_s8el6_201";
+const dd_site_navs = "_dd_site_navs_s8el6_205";
+const dd_media_header = "_dd_media_header_s8el6_212";
+const mt_8 = "_mt_8_s8el6_221";
+const mt_16 = "_mt_16_s8el6_225";
+const ml_8 = "_ml_8_s8el6_229";
+const dd_media_cta = "_dd_media_cta_s8el6_233";
+const reversed_row = "_reversed_row_s8el6_247";
+const headline = "_headline_s8el6_263";
+const nav_anchor = "_nav_anchor_s8el6_269";
+const headline_cta = "_headline_cta_s8el6_277";
+const site_lists = "_site_lists_s8el6_292";
+const hamburger = "_hamburger_s8el6_327";
+const mobile_only = "_mobile_only_s8el6_341";
+const mobile_logo = "_mobile_logo_s8el6_347";
+const highlight = "_highlight_s8el6_352";
+const mobile_nav = "_mobile_nav_s8el6_388";
+const mobile_opened = "_mobile_opened_s8el6_399";
+const mobile_nav_item = "_mobile_nav_item_s8el6_403";
+const has_dropdown = "_has_dropdown_s8el6_418";
+const icon_wrap = "_icon_wrap_s8el6_439";
+const mobile_footer = "_mobile_footer_s8el6_444";
+const mobile_footer_content = "_mobile_footer_content_s8el6_449";
+const mobile_footer_media = "_mobile_footer_media_s8el6_463";
+const footer_cta = "_footer_cta_s8el6_469";
+const inner_wrapper = "_inner_wrapper_s8el6_497";
+const btn = "_btn_s8el6_502";
+const sub_menu = "_sub_menu_s8el6_507";
+const main = "_main_s8el6_26";
+const dd_footer = "_dd_footer_s8el6_532";
+const desktop_only = "_desktop_only_s8el6_551";
 const styles = {
   header,
   wrapper,

package/dist/SetContainer/SetContainer.js

@@ -20,18 +20,8 @@ import "react-use";
 /* empty css                                                */
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
-/* empty css                                          */
 /* empty css                                              */
-/* empty css                                                    */
-import "../Carousel/index.js";
-/* empty css                                                                    */
-import "../HeroBanner/HeroBanner.css.js";
-import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                              */
-import "../ExecutiveBio/ExecutiveBio.css.js";
-import "../FaqAccordion/index.js";
-import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                         */
+/* empty css                                          */
 import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
@@ -44,6 +34,19 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import "../HeroBanner/HeroBanner.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../HeroBanner/SelectionBanner.css.js";
 import { set_container, inline_container } from "./SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/StepItem/StepItem.d.ts

@@ -3,6 +3,7 @@ import { ReactNode, FC } from 'react';
 
 export interface StepItemProps {
     id: string;
+    counter: number;
     title?: string | ReactNode;
     description?: string | ReactNode;
     variant?: QuaternaryTypes;

package/dist/StepItem/StepItem.js

@@ -3,16 +3,16 @@ import { getVariant } from "../utils/getVariant.js";
 import { li, line_points, point, step_num, bullet_details, bs_topic, bs_copy } from "./StepItem.css.js";
 const StepItem = ({
   id,
+  counter,
   title,
   description,
   variant: fullVariant = "primary"
 }) => {
   const variant = getVariant(fullVariant);
-  let counter = 0;
   return /* @__PURE__ */ jsxs("li", { className: `flex ${li}`, id: `id_${id}`, children: [
     /* @__PURE__ */ jsx("div", { className: `${line_points({ variant })}`, children: /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
       /* @__PURE__ */ jsx("div", { className: `${point({ variant })}`, children: " " }),
-      /* @__PURE__ */ jsx("div", { className: `flex center middle ${step_num({ variant })}`, children: ++counter })
+      /* @__PURE__ */ jsx("div", { className: `flex center middle ${step_num({ variant })}`, children: counter })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: bullet_details, children: [
       /* @__PURE__ */ jsx("span", { className: `${bs_topic({ variant })}`, role: "heading", children: title }),

package/dist/StepItemSet/StepItemSet.css.d.ts

@@ -39,10 +39,38 @@ export declare const modifier: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    textShadow: "0px 0px #00000000";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                    textShadow?: undefined;
+                };
+            };
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    textShadow: "0px 0px #00000000";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                    textShadow?: undefined;
+                };
+            };
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/StepItemSet/StepItemSet.js

@@ -65,7 +65,8 @@ const StepItemSet = ({
       /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems?.map((step, index) => /* @__PURE__ */ jsx(
         StepItem,
         {
-          id: `id_${id}`,
+          id: `id_${step.id}`,
+          counter: index + 1,
           title: step?.title,
           description: step?.description,
           variant: step?.variant

package/dist/assets/Button/Button.css

@@ -90,48 +90,67 @@
   border-radius: 16px;
 }
 ._13pdpujd {
+  width: 160px;
+  min-height: 160px;
+  white-space: break-spaces;
+  text-align: center;
+  padding: 0 1em;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: #fff;
+  color: #333D46;
+  border: 1px solid #EBEBEB;
+  align-items: center;
+  gap: 8px;
+}
+._13pdpujd:hover {
+  background: #EBEBEB;
+  color: #333D46;
+}
+._13pdpuje {
   color: #5E6A74;
   background: transparent;
   cursor: not-allowed;
 }
-._13pdpujd:hover {
+._13pdpuje:hover {
   cursor: not-allowed;
   background: transparent;
   text-decoration: none;
   color: #5E6A74;
   border-color: transparent;
 }
-._13pdpuje {
+._13pdpujf {
   background: #8F8F8F;
   color: #FFFFFF;
 }
-._13pdpuje:hover {
+._13pdpujf:hover {
   cursor: not-allowed;
   background: #8F8F8F;
   text-decoration: none;
   color: #FFFFFF;
   border-color: #8F8F8F;
 }
-._13pdpujf {
+._13pdpujg {
   background: #8F8F8F;
   color: #FFFFFF;
 }
-._13pdpujf:hover {
+._13pdpujg:hover {
   cursor: not-allowed;
   background: #8F8F8F;
   text-decoration: none;
   color: #FFFFFF;
   border-color: #8F8F8F;
 }
-._13pdpujg {
+._13pdpujh {
   height: 50px;
   padding: 12px 64px 12px 64px;
 }
-._13pdpujh {
+._13pdpuji {
   height: 40px;
   padding: 8px 48px 8px 48px;
 }
-._13pdpuji {
+._13pdpujj {
   height: 28px;
   padding: 4px 32px 4px 32px;
 }
@@ -145,4 +164,10 @@
   ._13pdpuj7 {
     padding: 11px 1.5rem;
   }
+}
+@media screen and (max-width:768px) {
+  ._13pdpujd {
+    width: 120px;
+    min-height: 120px;
+  }
 }