@axos-web-dev/shared-components 0.0.107 → 0.0.108

package/dist/assets/Insight/Featured/CategorySelector.css

@@ -0,0 +1,55 @@
+._13y9ptj0 {
+  padding: 24px 0;
+}
+._13y9ptj1 {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  align-items: center;
+}
+._13y9ptj2 {
+  font-size: 24px;
+  color: var(--_1073cm83);
+  text-decoration: none;
+  font-family: var(--header-font-family);
+  text-transform: capitalize;
+  font-weight: 600;
+}
+._13y9ptj3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 24px;
+  overflow: hidden;
+}
+._13y9ptj4 {
+  max-width: 370px;
+  grid-template-rows: 1fr 1fr;
+}
+._13y9ptj5 {
+  font-size: 28px;
+  padding-bottom: 10px;
+  -webkit-line-clamp: 4;
+  box-orient: vertical;
+}
+._13y9ptj6 {
+  padding: 24px;
+  color: #333D46;
+  font-family: var(--main-font-family);
+  min-height: 182px;
+  display: grid;
+  grid-template-rows: 120px 30px;
+}
+._13y9ptj7 {
+  aspect-ratio: 16 / 9;
+}
+@media screen and (max-width:1024px) {
+  ._13y9ptj3 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+@media screen and (max-width:768px) {
+  ._13y9ptj3 {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}

package/dist/assets/Insight/Featured/Featured.css

@@ -0,0 +1,87 @@
+._1sr2o6v0 {
+  min-height: 725px;
+  width: 100%;
+  padding: 48px 0;
+}
+._1sr2o6v1 {
+  color: #ffffff;
+  padding-bottom: 24px;
+}
+._1sr2o6v2 {
+  font-size: 14px;
+}
+._1sr2o6v3 {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  min-height: 525px;
+  gap: 25px;
+}
+._1sr2o6v4 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+._1sr2o6v5 {
+  flex: 1 1 100%;
+  cursor: pointer;
+  text-decoration: none;
+}
+._1sr2o6v6 {
+  margin-bottom: 8px;
+}
+._1sr2o6v7 {
+  margin: 38px 0;
+  color: #D4D4D4;
+}
+._1sr2o6v8 {
+  display: inline-block;
+  vertical-align: middle;
+}
+._1sr2o6v9 {
+  display: grid;
+  grid-template-rows: 65% 35%;
+  background: #ffffff;
+  border-radius: 16px;
+  height: 100%;
+  cursor: pointer;
+  border: 1px solid #D4D4D4;
+  text-decoration: none;
+  overflow: hidden;
+  max-height: 525px;
+}
+._1sr2o6va {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+._1sr2o6vb {
+  padding: 24px;
+  color: #333D46;
+  font-family: var(--main-font-family);
+  min-height: 170px;
+}
+._1sr2o6vc {
+  font-size: 40px;
+  line-height: 50px;
+  margin-bottom: 8px;
+}
+@media screen and (max-width:1024px) {
+  ._1sr2o6v9 {
+    grid-template-rows: 2fr 1fr;
+  }
+}
+@media screen and (max-width:768px) {
+  ._1sr2o6v3 {
+    grid-template-columns: 1fr;
+  }
+  ._1sr2o6v7 {
+    margin: 24px 0;
+  }
+  ._1sr2o6v9 {
+    grid-template-rows: 1fr .5fr;
+  }
+  ._1sr2o6vc {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}

package/dist/main.d.ts

@@ -33,6 +33,7 @@ export * from './icons';
 export * from './ImageBillboard';
 export * from './ImageLink';
 export * from './Input';
+export * from './Insight';
 export * from './Interstitial/Interstitial';
 export * from './LandingPageHeader';
 export * from './LoadingIndicator';

package/dist/main.js

@@ -107,6 +107,9 @@ import { container, helperText, iconContainer, iconContainerBase, iconInput, inp
 import { InputAmount } from "./Input/InputAmount.js";
 import { InputPhone } from "./Input/InputPhone.js";
 import { InputTextArea } from "./Input/InputTextArea.js";
+import { CategorySelector, InsightItem } from "./Insight/Featured/CategorySelector.js";
+import { Featured, FeaturedItem } from "./Insight/Featured/Featured.js";
+import { featured_center_vertical, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";
 import { Interstitial } from "./Interstitial/Interstitial.js";
 import { LandingPageHeader } from "./LandingPageHeader/LandingPageHeader.js";
 import { lp_container, lp_hover, lp_theme, svg_fill } from "./LandingPageHeader/LandingPageHeader.css.js";
@@ -185,6 +188,7 @@ export {
   CallToActionBar,
   Carousel,
   CarouselSlide,
+  CategorySelector,
   default5 as CheckCircle,
   default6 as CheckCircleLight,
   default7 as CheckIcon,
@@ -214,6 +218,8 @@ export {
   ExecutiveBio,
   ExecutiveBioSet,
   FaqAccordion,
+  Featured,
+  FeaturedItem,
   default13 as FollowIcon,
   FooterContent,
   FooterDisclosure,
@@ -233,6 +239,7 @@ export {
   InputAmount,
   InputPhone,
   InputTextArea,
+  InsightItem,
   Interstitial,
   LandingPageHeader,
   LoadingIndicator,
@@ -357,6 +364,19 @@ export {
   expand_icon,
   feature_header,
   feature_title,
+  featured_center_vertical,
+  featured_grid,
+  featured_maingrid,
+  featured_maingrid_img,
+  featured_maingrid_item,
+  featured_maingrid_title,
+  featured_section,
+  featured_subgrid,
+  featured_subgrid_divider,
+  featured_subgrid_item,
+  featured_subgrid_title,
+  featured_supertag,
+  featured_title,
   findMoreAxosDomains,
   footerDisclosure,
   footerLink,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.107",
+  "version": "0.0.108",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/Input/DatePicker.css.d.ts

@@ -1 +0,0 @@
-export declare const datePicker: string;

package/dist/Input/DatePicker.css.js

@@ -1,6 +0,0 @@
-/* empty css                                              */
-/* empty css                                         */
-var datePicker = "_1oit9ls0";
-export {
-  datePicker
-};

package/dist/Input/Datepicker.d.ts

@@ -1,3 +0,0 @@
-import { DatepickerInputProps } from './InputProps';
-
-export declare const DatePickerInput: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/Datepicker.js

@@ -1,47 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import DatePicker from "react-date-picker";
-import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
-const DatePickerInput = (props) => {
-  const {
-    disabled,
-    label,
-    iconLeft,
-    iconRight,
-    sizes,
-    error = false,
-    helperText: helper,
-    variant
-  } = props;
-  const [value, onChange] = useState();
-  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
-    label && /* @__PURE__ */ jsx(
-      "label",
-      {
-        className: labelClassName({ error, variant }),
-        htmlFor: props.name,
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
-      iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
-      /* @__PURE__ */ jsx(
-        DatePicker,
-        {
-          dayPlaceholder: "dd",
-          monthPlaceholder: "mm",
-          yearPlaceholder: "yyyy",
-          minDate: /* @__PURE__ */ new Date(),
-          onChange,
-          value
-        }
-      ),
-      iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
-  ] });
-};
-export {
-  DatePickerInput
-};

package/dist/Input/InputDate.css.d.ts

@@ -1,6 +0,0 @@
-export declare const calendarContainer: string;
-export declare const calendarIcon: string;
-export declare const inputDate: string;
-export declare const verticalCenter: string;
-export declare const calendar: string;
-export declare const headerCalendar: string;

package/dist/Input/InputDate.css.js

@@ -1,15 +0,0 @@
-/* empty css                                        */
-var calendarContainer = "skzved0";
-var calendarIcon = "skzved1";
-var inputDate = "skzved2";
-var verticalCenter = "skzved3";
-var calendar = "skzved4";
-var headerCalendar = "skzved5";
-export {
-  calendar,
-  calendarContainer,
-  calendarIcon,
-  headerCalendar,
-  inputDate,
-  verticalCenter
-};

package/dist/Input/InputDate.d.ts

@@ -1,3 +0,0 @@
-import { DatepickerInputProps } from './InputProps';
-
-export declare const InputDate: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input/InputDate.js

@@ -1,47 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import DatePicker from "react-date-picker";
-import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
-const InputDate = (props) => {
-  const {
-    disabled,
-    label,
-    iconLeft,
-    iconRight,
-    sizes,
-    error = false,
-    helperText: helper,
-    variant
-  } = props;
-  const [value, onChange] = useState();
-  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
-    label && /* @__PURE__ */ jsx(
-      "label",
-      {
-        className: labelClassName({ error, variant }),
-        htmlFor: props.name,
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
-      iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
-      /* @__PURE__ */ jsx(
-        DatePicker,
-        {
-          dayPlaceholder: "dd",
-          monthPlaceholder: "mm",
-          yearPlaceholder: "yyyy",
-          minDate: /* @__PURE__ */ new Date(),
-          onChange,
-          value
-        }
-      ),
-      iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
-  ] });
-};
-export {
-  InputDate
-};

package/dist/assets/Input/DatePicker.css

@@ -1,95 +0,0 @@
-.react-date-picker {
-  width: 100%;
-}
-.react-date-picker__wrapper {
-  border: none !important;
-}
-.react-calendar__month-view__weekdays__weekday {
-  width: 45px;
-  height: 22px;
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--main-font-family);
-  font-weight: 500;
-  letter-spacing: 0.2px;
-  justify-content: center;
-}
-.react-calendar__month-view__weekdays__weekday {
-  font-size: 12px;
-  line-height: 16;
-  color: #2F5B88;
-}
-.react-calendar__month-view__weekdays__weekday > abbr {
-  text-decoration: none;
-}
-.react-calendar__month-view__days__day {
-  width: 49px;
-  height: 49px;
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.react-calendar__month-view__days__day > abbr {
-  font-family: var(--main-font-family) !important;
-  font-weight: 500;
-  letter-spacing: 0.2px;
-  color: #051A3F;
-}
-.react-date-picker__inputGroup__input, .react-date-picker__inputGroup__divider {
-  color: #5E6A74 !important;
-}
-.react-date-picker__clear-button {
-  display: none;
-}
-.react-calendar__navigation__label__labelText {
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 36px;
-  letter-spacing: 0.2px;
-  color: #1E3860;
-  font-family: var(--header-font-family);
-}
-.react-datepicker-popper {
-  transform: translateY(40px)!important;
-}
-.react-calendar__month-view__days__day--neighboringMonth {
-  background-color: #F4F4F4 !important;
-  opacity: 50%;
-}
-.react-calendar__month-view__days__day--neighboringMonth > abbr {
-  color: #5E6A74;
-}
-.react-calendar__tile--active > abbr {
-  color: white;
-}
-.react-calendar {
-  border: 12px solid #FFFFFF4D !important;
-  border-radius: 4px;
-}
-.react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
-  display: none;
-}
-.react-date-picker__calendar {
-  max-width: 100% !important;
-}
-.react-date-picker__inputGroup__input:focus-visible {
-  outline: none;
-}
-.react-date-picker__inputGroup__input:invalid {
-  background: transparent !important;
-}
-@media screen and (max-width:320px) {
-  .react-calendar__month-view__weekdays__weekday {
-    width: 43.5px;
-  }
-  .react-calendar__month-view__days__day {
-    width: 43.5px;
-  }
-}
-@media screen and (max-width:400px) {
-  .react-calendar__navigation .react-calendar__navigation__prev-button, .react-calendar__navigation .react-calendar__navigation__next-button {
-    min-width: auto;
-  }
-}

package/dist/assets/Input/InputDate.css

@@ -1,39 +0,0 @@
-.skzved0 {
-  position: relative;
-}
-.skzved1 {
-  position: relative;
-  top: 5px;
-  left: 5px;
-}
-.skzved2 {
-  width: 100px;
-  padding-left: 5px;
-  padding-right: 5px;
-  line-height: 28px;
-  font-size: 14pt;
-}
-.skzved3 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.skzved4 {
-  display: block;
-  background: #FFFFFF;
-  width: 300px;
-  border: solid 1px #CCCCCC;
-  margin: 10px auto;
-  box-shadow: 0 0 15px 0 #C0C0C0;
-  font-size: 1.3rem;
-  text-align: center;
-  z-index: 999;
-}
-.skzved4 .skzved5 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #FFFFFF;
-  cursor: default;
-  font-weight: bold;
-}