@axos-web-dev/shared-components 1.0.100-dev.85 → 1.0.100-dev.86-videoPoster

package/dist/assets/HeroBanner/LargeBanner.css

@@ -1,146 +1,191 @@
-._1bsyngo0 {
+._1bsyngo1 {
   position: relative;
   overflow: hidden;
   isolation: isolate;
 }
-._1bsyngo1 {
+._1bsyngo2 {
   background: var(--_1073cm81);
 }
-._1bsyngo2 {
+._1bsyngo3 {
   background: var(--_1073cm88);
 }
-._1bsyngo3 {
+._1bsyngo4 {
   background: var(--_1073cm8f);
 }
-._1bsyngo4 {
+._1bsyngo5 {
   background: var(--_1073cm8m);
 }
-._1bsyngo5 {
+._1bsyngo7 {
   isolation: isolate;
   overflow: hidden;
   position: relative;
 }
-._1bsyngo6 {
+._1bsyngoa {
   padding: 2rem 0;
   position: relative;
   z-index: 1;
 }
-._1bsyngo7 {
+._1bsyngob {
   background: var(--_1073cm8f);
   color: var(--_1073cm8h);
 }
-._1bsyngo8 {
+._1bsyngo0 ._1bsyngob {
+  background: var(--_1073cm81);
+  color: var(--_1073cm83);
+}
+._1bsyngoc {
   background: var(--_1073cm8f);
   color: var(--_1073cm8h);
 }
-._1bsyngo9 {
+._1bsyngo0 ._1bsyngoc {
+  background: var(--_1073cm88);
+  color: var(--_1073cm8a);
+}
+._1bsyngod {
   background: var(--_1073cm81);
   color: var(--_1073cm83);
 }
-._1bsyngoa {
+._1bsyngo0 ._1bsyngod {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm8h);
+}
+._1bsyngoe {
   background: var(--_1073cm81);
   color: var(--_1073cm83);
 }
-._1bsyngob {
+._1bsyngo0 ._1bsyngoe {
+  background: var(--_1073cm8m);
+  color: var(--_1073cm8o);
+}
+._1bsyngof {
   display: block;
   font: 700 14px / 1.5 var(--main-font-family);
   margin-bottom: 2px;
   letter-spacing: .2px;
 }
-._1bsyngoc {
+._1bsyngog {
   color: var(--_1073cm8h);
 }
-._1bsyngod {
+._1bsyngo0 ._1bsyngog {
+  color: var(--_1073cm85);
+}
+._1bsyngoh {
   color: var(--_1073cm8h);
 }
-._1bsyngoe {
+._1bsyngo0 ._1bsyngoh {
+  color: var(--_1073cm8c);
+}
+._1bsyngoi {
   color: var(--_1073cm85);
 }
-._1bsyngof {
+._1bsyngo0 ._1bsyngoi {
+  color: var(--_1073cm8j);
+}
+._1bsyngoj {
   color: var(--_1073cm85);
 }
-._1bsyngog {
+._1bsyngo0 ._1bsyngoj {
+  color: var(--_1073cm8q);
+}
+._1bsyngok {
   font: 700 2.5rem / 1.25 var(--header-font-family);
 }
-._1bsyngoh {
+._1bsyngol {
   color: var(--_1073cm8j);
 }
-._1bsyngoi {
+._1bsyngo0 ._1bsyngol {
+  color: var(--_1073cm85);
+}
+._1bsyngom {
   color: var(--_1073cm8j);
 }
-._1bsyngoj {
+._1bsyngo0 ._1bsyngom {
+  color: var(--_1073cm8c);
+}
+._1bsyngon {
   color: var(--_1073cm85);
 }
-._1bsyngok {
+._1bsyngo0 ._1bsyngon {
+  color: var(--_1073cm8j);
+}
+._1bsyngoo {
   color: var(--_1073cm85);
 }
-._1bsyngo6 p {
-  font: 400 16px / 1.5 var(--main-font-family);
-  letter-spacing: .2px;
+._1bsyngo0 ._1bsyngoo {
+  color: var(--_1073cm8q);
 }
-._1bsyngol {
+._1bsyngop {
   isolation: isolate;
   overflow: hidden;
   position: relative;
 }
-._1bsyngol picture {
-  display: contents;
-}
-._1bsyngom {
+._1bsyngoq {
   width: 100%;
   height: 100%;
   object-position: right bottom;
   object-fit: cover;
 }
+._1bsyngor {
+  position: absolute;
+  height: 100%;
+  inset: 0;
+  width: 100%;
+  z-index: -1;
+}
+._1bsyngos {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
 @media (max-width:1023px) {
-  ._1bsyngo0 > .containment {
+  ._1bsyngo6 {
     width: 100%;
     max-width: 100%;
     border-radius: 0 !important;
   }
-  ._1bsyngo5 > .containment {
-    padding: 24px;
-  }
-  ._1bsyngo5 > * {
+  ._1bsyngo9 {
     width: 100%;
     border-radius: 0 !important;
   }
 }
 @media (max-width: 1023px) {
-  ._1bsyngo5 {
+  ._1bsyngo7 {
     flex-direction: column;
   }
-  ._1bsyngo6 {
+  ._1bsyngoa {
     text-align: center;
     border-radius: 0;
   }
-  ._1bsyngol {
+  ._1bsyngop {
     justify-content: flex-start;
-    width: 100%;
-    max-width: min(330px,100%);
-    margin-right: auto;
-    margin-left: auto;
+    width: min(330px,calc(100% - 2rem));
+    margin-inline: auto;
+    margin: 1rem;
   }
-  ._1bsyngom {
-    justify-content: flex-start;
-    width: 100%;
-    max-width: min(330px,100%);
-    margin-right: auto;
-    margin-left: auto;
-    padding: 1em 0;
-    border-radius: 1em;
+  ._1bsyngoq {
+    border-radius: 1rem;
+  }
+  ._1bsyngor {
+    display: none;
   }
 }
 @media (min-width: 1024px) {
-  ._1bsyngo5 {
+  ._1bsyngo7 {
     min-height: calc(42.5rem + ((1vw - 10.24px) * 23.3463));
   }
-  ._1bsyngo6 {
+  ._1bsyngo0 ._1bsyngo7 {
+    min-height: 1px;
+    aspect-ratio: 16 / 9;
+  }
+  ._1bsyngoa {
     width: 59%;
     max-width: 690px;
     padding: 56px;
   }
-  ._1bsyngol {
+  ._1bsyngo0 ._1bsyngoa {
+    padding: 32px;
+  }
+  ._1bsyngop {
     position: absolute;
     right: 0;
     height: 81%;
@@ -148,24 +193,46 @@
     top: 50%;
     transform: translateY(-50%);
   }
+  ._1bsyngot {
+    position: absolute;
+  }
+  ._1bsyngou {
+    border-radius: 0 0 1rem 0;
+    left: 0;
+    top: 0;
+  }
+  ._1bsyngov {
+    border-radius: 0 0 0 1rem;
+    right: 0;
+    top: 0;
+  }
+  ._1bsyngow {
+    border-radius: 0 1rem 0 0;
+    bottom: 0;
+    left: 0;
+  }
+  ._1bsyngox {
+    border-radius: 1rem 0 0 0;
+    bottom: 0;
+    right: 0;
+  }
 }
 @media (min-width: 1281px) {
-  ._1bsyngo5 {
+  ._1bsyngo7 {
     min-height: 740px;
   }
+  ._1bsyngo0 ._1bsyngo7 {
+    min-height: 1px;
+  }
 }
 @media (min-width:1024px) {
-  ._1bsyngo5 .containment {
+  ._1bsyngo8 {
     display: contents;
   }
 }
 @media screen and (max-width:768px) {
-  ._1bsyngog {
+  ._1bsyngok {
     font-size: 28px;
     line-height: 1.29;
   }
-  ._1bsyngo6 p {
-    font-size: 1rem;
-    line-height: 1.5;
-  }
 }

package/dist/utils/getPosition.d.ts

@@ -0,0 +1 @@
+export declare const getPosition: (text: string | undefined) => "default" | "top left" | "top right" | "bottom left" | "bottom right";

package/dist/utils/getPosition.js

@@ -0,0 +1,17 @@
+const getPosition = (text) => {
+  switch (text) {
+    case "top left":
+      return "top left";
+    case "top right":
+      return "top right";
+    case "bottom left":
+      return "bottom left";
+    case "bottom right":
+      return "bottom right";
+    default:
+      return "default";
+  }
+};
+export {
+  getPosition
+};

package/dist/utils/variant.types.d.ts

@@ -6,3 +6,4 @@ export type SideProps = "left" | "right";
 export type StarIconTypes = "gold" | "gray";
 export declare const columnValues: readonly [1, 2, 3, 4, undefined];
 export type ColumnTypes = (typeof columnValues)[number];
+export type AnchorPointTypes = "default" | "top left" | "top right" | "bottom left" | "bottom right";

package/package.json

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