@npm_leadtech/legal-lib-components 2.9.1 → 2.9.3

package/dist/cjs/legal-lib-components.css

@@ -2473,7 +2473,10 @@
 .wide-info-bar {
   background-color: #F8F9FA;
   font-family: "Inter", sans-serif;
-  color: #02374A; }
+  color: #3D4042; }
+  .wide-info-bar.green {
+    background-color: #EFF7F5;
+    color: #02374A; }
   .wide-info-bar__wrapper {
     display: flex;
     flex-flow: column nowrap;
@@ -2588,72 +2591,72 @@
     white-space: nowrap; }
 
 .bottom-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
-  /* Full width */
-  display: none; }
+  height: 100%;
+  z-index: 1001;
+  visibility: hidden; }
   .bottom-overlay.show {
-    background-color: #032a38;
-    /* Fallback color */
-    background-color: rgba(3, 42, 56, 0.8);
-    /* Black w/ opacity */
-    display: flex;
-    align-items: center;
+    visibility: visible; }
+    .bottom-overlay.show .bottom-overlay__background {
+      opacity: 0.8; }
+    .bottom-overlay.show .bottom-overlay__nav {
+      transform: translateY(0); }
+  .bottom-overlay__background {
+    background-color: #032A38;
+    position: absolute;
+    width: 100%;
     height: 100%;
-    /* Full height */
-    left: 0;
-    overflow: auto;
-    /* Enable scroll if needed */
-    position: fixed;
-    /* Stay in place */
     top: 0;
-    transition: all .4s ease-in-out;
-    z-index: 1001;
-    /* Sit on top */ }
-  .bottom-overlay .bottom-overlay__nav {
+    left: 0;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity ease-out 0.3s; }
+  .bottom-overlay__nav {
     background: #FFFFFF;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     bottom: 0;
-    position: fixed;
+    position: absolute;
     transform: translateY(100%);
-    transition: all .4s ease-in-out;
+    transition: transform 0.5s ease-in-out;
     width: 100%;
     z-index: 2; }
-    .bottom-overlay .bottom-overlay__nav.show {
-      transform: translateY(0); }
     @media (min-width: 720px) {
-      .bottom-overlay .bottom-overlay__nav {
+      .bottom-overlay__nav {
         display: block;
         transform: translateY(0); } }
-  .bottom-overlay .overlay__delimiter {
-    padding: 0.5rem 0 1.5rem; }
-    .bottom-overlay .overlay__delimiter:after {
-      content: "";
-      background: #B5BABD;
-      border-radius: 4px;
-      display: block;
-      height: 0.25rem;
-      margin: 0 auto;
-      width: 7.5rem; }
-    .bottom-overlay .overlay__delimiter.overlay__delimiter__scrolling {
-      box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
-      position: relative;
-      z-index: 1; }
-    @media (min-width: 720px) {
-      .bottom-overlay .overlay__delimiter {
-        display: none; } }
-  .bottom-overlay .overlay__scrollable-section {
-    position: sticky;
-    max-height: 21rem;
-    min-height: 8.5rem;
-    display: flex;
-    overflow-y: scroll;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    width: 100%; }
-  .bottom-overlay .overlay__footer {
-    border-top: solid 1px #DBE1E5;
-    padding: 1.5rem 1.5rem 2rem; }
+    .bottom-overlay__nav .overlay__delimiter {
+      padding: 0.5rem 0 1.5rem; }
+      .bottom-overlay__nav .overlay__delimiter:after {
+        content: '';
+        background: #B5BABD;
+        border-radius: 4px;
+        display: block;
+        height: 0.25rem;
+        margin: 0 auto;
+        width: 7.5rem; }
+      .bottom-overlay__nav .overlay__delimiter.overlay__delimiter__scrolling {
+        box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
+        position: relative;
+        z-index: 1; }
+      @media (min-width: 720px) {
+        .bottom-overlay__nav .overlay__delimiter {
+          display: none; } }
+    .bottom-overlay__nav .overlay__scrollable-section {
+      position: sticky;
+      max-height: 21rem;
+      min-height: 8.5rem;
+      display: flex;
+      overflow-y: scroll;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      width: 100%; }
+    .bottom-overlay__nav .overlay__footer {
+      border-top: solid 1px #DBE1E5;
+      padding: 1.5rem 1.5rem 2rem; }
 
 .box--form {
   background: #FFFFFF;

package/dist/cjs/src/components/atoms/WideInfoBar/WideInfoBar.d.ts

@@ -2,6 +2,7 @@ import React, { type FC } from 'react';
 import './WideInfoBar.scss';
 interface WideInfoBarProps {
     children?: React.ReactElement<any>;
+    color?: 'green';
 }
 declare const WideInfoBar: FC<WideInfoBarProps>;
 export default WideInfoBar;

package/dist/cjs/src/components/atoms/WideInfoBar/__stories__/WideInfoBar.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof WideInfoBar>;
 export default meta;
 type Story = StoryObj<typeof WideInfoBar>;
 export declare const Default: Story;
+export declare const Green: Story;