@bbl-digital/snorre 4.2.85 → 4.2.87

package/dist/snorre.es385.js

@@ -0,0 +1,237 @@
+import o from "@emotion/styled";
+import { css as d } from "@emotion/react";
+import p from "./snorre.es503.js";
+const e = o.div``, n = o.span``, l = o.span`
+  font-size: 14px;
+  padding-left: 25px;
+  line-height: 20px;
+  font-weight: 600;
+  margin-bottom: 0;
+  margin-top: 2px;
+  color: ${(r) => r.theme.alert};
+`, c = {
+  default: (r) => d`
+    /**
+    * INPUT STYLES
+    */
+    .input-wrapper {
+      display: grid;
+      grid-template-rows: min-content;
+
+      &:focus-within span:first-of-type {
+        color: ${r.primary};
+      }
+
+      & span:first-of-type {
+        line-height: 22px;
+        font-size: 1em;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+
+      input {
+        height: 36px;
+        width: calc(100% - 20px - 2px);
+        font-size: 16px;
+        line-height: 20px;
+        outline: none;
+        border-color: ${r.border};
+        border-width: 1px;
+        border-radius: 5px;
+        border-style: solid;
+        padding: 0 10px;
+
+        &:focus {
+          border-color: ${r.primary};
+        }
+        &:disabled {
+          background-color: ${r.disabled};
+        }
+      }
+    }
+
+    /**
+    * DIALOG STYLES
+    */
+
+    .rdp-root {
+      border: none;
+      border-radius: 10px;
+      margin-top: 10px;
+
+      --rdp-today-color: ${r.primary};
+      --rdp-accent-color: ${r.primary};
+      --rdp-selected-border: ${r.primary};
+      --rdp-background-color: ${r.bg};
+      --rdp-background-color-hover: ${r.bgLight};
+      --rdp-background-color-selected: ${r.btnDefault};
+      --rdp-background-color-range-start: ${r.btnDefault};
+      --rdp-background-color-range-end: ${r.btnDefault};
+    }
+
+    .rdp-month_caption {
+      text-transform: capitalize;
+    }
+
+    .rdp-day {
+      line-height: 1em;
+      border-radius: 50%;
+
+      &:hover {
+        background-color: ${r.bgLight};
+      }
+      &.rdp-selected {
+        background-color: ${r.btnDefault};
+        color: white;
+      }
+    }
+    .rdp-day_button {
+      border-radius: 50%;
+      &:hover {
+        background-color: ${r.primary10opa};
+      }
+    }
+    .rdp-selected,
+    .rdp-selected:hover,
+    .rdp-selected:focus {
+      background-color: ${r.btnDefault};
+      color: white;
+      border-radius: 50%;
+    }
+
+    .rdp-day:not(.rdp-selected):not(.rdp-day_disabled),
+    .rdp-nav {
+      margin-right: 8px;
+      .rdp-button_previous {
+        &:hover,
+        &:focus {
+          background-color: ${r.primary10opa};
+        }
+        &:focus {
+          border-color: ${r.secondary5darker};
+        }
+      }
+      .rdp-button_next {
+        &:hover,
+        &:focus {
+          background-color: ${r.primary10opa};
+        }
+        &:focus {
+          border-color: ${r.secondary5darker};
+        }
+      }
+    }
+
+    .rdp-day_disabled {
+      opacity: 0.25;
+      cursor: default;
+    }
+
+    .rdp-dropdowns {
+      margin-left: 12px;
+    }
+
+    .dialog-sheet {
+      width: fit-content;
+      box-shadow: 0 2px 5px rgb(0 0 0 / 15%);
+      background-color: #fff;
+      z-index: 10;
+      margin-top: 10px;
+      border-radius: 5px;
+    }
+
+    @media screen and (max-width: 379px) {
+      .DayPicker-NavButton {
+        right: 0em;
+      }
+    }
+  `,
+  validation: d`
+    .input-wrapper {
+      position: relative;
+      input {
+        width: calc(100% - 35px - 2px);
+        padding-right: 25px;
+      }
+
+      & > svg {
+        position: absolute;
+        bottom: 2px;
+        left: 3px;
+      }
+    }
+  `,
+  invalid: (r) => d`
+    .input-wrapper {
+      input {
+        border-color: ${r.alert};
+
+        &:active,
+        &:focus,
+        &:hover {
+          border-color: ${r.alert};
+        }
+      }
+
+      svg {
+        path {
+          fill: ${r.alert};
+        }
+      }
+
+      &:focus-within > span:first-of-type {
+        color: ${r.alert};
+      }
+    }
+  `,
+  nonInput: (r) => d`
+    .rdp {
+      margin: 0;
+    }
+
+    .rdp-month {
+      border: 1px solid ${r.border};
+      border-radius: 5px;
+      padding: 1em;
+      width: 100%;
+      max-width: 491px;
+
+      @media screen and (max-width: ${p.small}) {
+        padding: 0;
+      }
+    }
+
+    .rdp-table {
+      width: 100%;
+      max-width: unset;
+    }
+
+    .rdp-head_row,
+    .rdp-row {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .rdp-head_row {
+      margin-top: 1em;
+    }
+
+    .rdp-head_cell {
+      width: 40px;
+      height: 20px;
+    }
+  `
+};
+o.select`
+  border: none;
+  font-size: 16px;
+  min-width: 60px;
+  margin-right: 5px;
+`;
+o.div``;
+export {
+  l as ErrorMessage,
+  n as Label,
+  e as Wrapper,
+  c as styles
+};

package/dist/snorre.es387.js

@@ -0,0 +1,173 @@
+import { css as i } from "@emotion/react";
+import o from "@emotion/styled";
+import e from "./snorre.es503.js";
+const d = o.div``, l = o.div``, s = o.span``;
+o.span`
+  align-self: flex-end;
+  // Height of input elements
+  line-height: 38px;
+
+  @media screen and (max-width: ${e.medium}) {
+    display: none;
+  }
+`;
+const m = o.span`
+  font-size: 14px;
+  padding-left: 25px;
+  line-height: 30px;
+  font-weight: 600;
+  margin-bottom: 0;
+  color: ${(t) => t.theme.alert};
+`, c = {
+  wrapper: (t, r) => i`
+    display: flex;
+    max-width: ${t}px;
+    min-width: ${r}px;
+    width: 100%;
+    flex-wrap: nowrap;
+    gap: 0.5em;
+    align-items: flex-end;
+
+    @media screen and (max-width: ${e.medium}) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .InputFromTo .DayPickerInput-Overlay {
+      width: ${r}px;
+
+      @media screen and (max-width: ${e.medium}) {
+        width: ${r / 2}px;
+      }
+    }
+    .InputFromTo-to .DayPickerInput-Overlay {
+      width: ${r}px;
+      margin-left: -${r / 2 - 80}px;
+
+      @media screen and (max-width: ${e.medium}) {
+        width: ${r / 2}px;
+        margin-left: unset;
+      }
+    }
+
+    .InputFromTo-to .DayPicker-Day {
+      border-radius: 0 !important;
+    }
+    .InputFromTo-to .DayPicker-Day--start {
+      border-top-left-radius: 50% !important;
+      border-bottom-left-radius: 50% !important;
+    }
+    .InputFromTo-to .DayPicker-Day--end {
+      border-top-right-radius: 50% !important;
+      border-bottom-right-radius: 50% !important;
+    }
+
+    .InputFromTo .DayPicker-Day {
+      border-radius: 0 !important;
+    }
+    .InputFromTo .DayPicker-Day--start {
+      border-top-left-radius: 50% !important;
+      border-bottom-left-radius: 50% !important;
+    }
+    .InputFromTo .DayPicker-Day--end {
+      border-top-right-radius: 50% !important;
+      border-bottom-right-radius: 50% !important;
+    }
+  `,
+  default: (t) => i`
+    display: grid;
+    grid-template-rows: min-content;
+
+    &:focus-within span:first-of-type {
+      color: ${t.primary};
+    }
+
+    & > span:first-of-type {
+      line-height: 22px;
+      font-size: 1em;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    input {
+      height: 36px;
+      width: calc(100% - 20px - 2px);
+      font-size: 16px;
+      line-height: 20px;
+      outline: none;
+      border-color: ${t.border};
+      border-width: 1px;
+      border-radius: 5px;
+      border-style: solid;
+      padding: 0 10px;
+
+      &:focus {
+        border-color: ${t.primary};
+      }
+      &:disabled {
+        background-color: ${t.disabled};
+      }
+    }
+
+    .DayPicker-Day {
+      line-height: 1em;
+    }
+
+    .DayPicker-Day--today {
+      color: black;
+    }
+
+    .InputFromTo
+      .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+      background-color: ${t.btnDefault};
+      color: ${t.btnDefaultFontColor};
+    }
+
+    @media screen and (max-width: 379px) {
+      .DayPicker-NavButton {
+        right: 0em;
+      }
+    }
+  `,
+  validation: i`
+    position: relative;
+    input {
+      width: calc(100% - 35px - 2px);
+      padding-right: 25px;
+    }
+
+    & > svg {
+      position: absolute;
+      bottom: 7px;
+      left: 3px;
+    }
+  `,
+  invalid: (t) => i`
+    input {
+      border-color: ${t.alert};
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: ${t.alert};
+      }
+    }
+
+    svg {
+      path {
+        fill: ${t.alert};
+      }
+    }
+
+    &:focus-within span:nth-of-type(2) {
+      color: ${t.alert};
+    }
+  `
+};
+export {
+  m as ErrorMessage,
+  l as Input,
+  s as Label,
+  d as Wrapper,
+  c as styles
+};

package/dist/snorre.es388.js

@@ -0,0 +1,158 @@
+import { css as i } from "@emotion/react";
+import o from "@emotion/styled";
+import n from "./snorre.es503.js";
+const p = o.ul`
+  display: flex;
+  flex-flow: wrap;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  list-style-type: none;
+  padding-inline-start: 0;
+  > li {
+    list-style: none;
+  }
+`, d = {
+  default: i`
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    position: relative;
+    padding: 1em;
+    padding-left: 2.5em;
+
+    @media screen and (max-width: ${n.medium}) {
+      padding-left: 1em;
+    }
+  `,
+  darkTheme: (e, t) => i`
+      background: ${e.submenuColor};
+      padding-top: 2em;
+      padding-bottom: ${t};
+    `,
+  lightTheme: (e) => i`
+      min-height: calc(171px - 2em);
+      max-height: calc(171px - 2em);
+      background: linear-gradient(
+          rgba(255, 255, 255, 0.65),
+          rgba(255, 255, 255, 0.65)
+        ),
+        linear-gradient(
+          ${e.customIllustrationColor},
+          ${e.customIllustrationColor}
+        );
+
+      & > span {
+        z-index: 2;
+      }
+
+      @media screen and (max-width: ${n.medium}) {
+        min-height: calc(136px - 2em);
+        max-height: calc(136px - 2em);
+        overflow: unset;
+      }
+    `
+}, s = o.div`
+  position: absolute;
+  bottom: -4px;
+  right: 2em;
+  z-index: 0;
+  height: 150px;
+
+  svg {
+    height: 150px !important;
+  }
+
+  @media screen and (max-width: ${n.medium}) {
+    height: 100px;
+    width: 170px;
+    bottom: 1em;
+    right: 1em;
+
+    svg {
+      height: 100px !important;
+    }
+  }
+`, m = o.nav`
+  display: grid;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  overflow: unset;
+
+  @media screen and (max-width: ${n.medium}) {
+    margin-top: 1em;
+  }
+`, x = (e, t) => i`
+  background-color: ${t ? e.submenuItemColor : "white"};
+  color: ${t ? e.submenuTextColorActive : "black"};
+  border-color: transparent;
+  box-shadow: 0 2px 4px 0 rgba(9, 28, 68, 0.2);
+  border-radius: ${t ? "4px" : "19px"};
+  height: 38px;
+  justify-content: space-between;
+  padding: 0 1em;
+
+  svg,
+  polygon {
+    fill: ${t ? e.submenuTextColorActive : "black"} !important;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: ${t ? e.submenuItemColor : "white"};
+    color: ${t ? e.submenuTextColorActive : "black"};
+    border-color: transparent;
+  }
+`, c = o.nav`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 1em;
+  margin-left: -1em;
+  z-index: 1;
+
+  button:not(:last-of-type) {
+    margin-right: 3px;
+  }
+`, g = o.div(
+  (e) => i`
+    position: absolute;
+    left: 0;
+    right: 0;
+    min-width: 150px;
+    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    border-radius: ${e.lightTheme ? "19px" : "4px"};
+    overflow: hidden;
+    top: 40px;
+    padding-inline-start: 0;
+  `
+), u = o.span`
+  margin-left: -0.1em;
+
+  @media screen and (max-width: ${n.medium}) {
+    font-size: 22px;
+  }
+`, h = o.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+`;
+export {
+  x as ButtonStyle,
+  m as DropdownWrapper,
+  u as HeaderWrapper,
+  h as IllustrationOverlay,
+  s as IllustrationWrapper,
+  p as MenuItemList,
+  g as OptionsWrapper,
+  c as Wrapper,
+  d as styles
+};

package/dist/snorre.es389.js

@@ -0,0 +1,35 @@
+import e from "@emotion/styled";
+import { css as o } from "@emotion/react";
+import { motion as r } from "./snorre.es444.js";
+const d = e(r.div)(
+  (t) => o`
+    padding: 0.65em 1em;
+    border-radius: ${t.lightTheme ? "19px" : "7px"};
+    border: 1px solid transparent;
+    transition: border-color 0.1s ease-in-out;
+
+    background: ${t.active ? t.background : "transparent"};
+    box-shadow: ${t.active ? "0 2px 4px 0 rgba(9, 28, 68, 0.2)" : "none"};
+
+    & > span {
+      font-size: 14px;
+    }
+  `
+), s = o`
+  padding-left: 8px;
+  justify-content: flex-start;
+  height: 100%;
+  width: 100%;
+`, c = (t) => o`
+  &:focus {
+    text-decoration: none;
+    div {
+      border-color: ${t};
+    }
+  }
+`;
+export {
+  c as FocusState,
+  d as Wrapper,
+  s as optionButton
+};

package/dist/snorre.es39.js

@@ -0,0 +1,6 @@
+import { j as o } from "./snorre.es329.js";
+import t from "./snorre.es360.js";
+const n = (r) => /* @__PURE__ */ o.jsx("svg", { viewBox: "0 0 24 24", ...r, children: /* @__PURE__ */ o.jsx("polygon", { points: "4 12 5.41 13.41 11 7.83 11 20 13 20 13 7.83 18.58 13.42 20 12 12 4" }) }), i = t()(n);
+export {
+  i as default
+};

package/dist/snorre.es390.js

@@ -0,0 +1,18 @@
+import { css as m } from "@emotion/react";
+import d from "@emotion/styled";
+const i = d.div(
+  ({ maxWidth: e }) => m`
+    padding: 2em 2.5em;
+
+    @media screen and (max-width: 768px) {
+      padding: 1.5em 1em;
+    }
+
+    ${e && m`
+      max-width: ${e};
+    `}
+  `
+);
+export {
+  i as Wrapper
+};

package/dist/snorre.es391.js

@@ -0,0 +1,26 @@
+import i from "@emotion/styled";
+const d = i.div(
+  (e) => `
+  position: fixed;
+  left: ${e.sideBarWidth ? e.sideBarWidth : "0"};
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 40px;
+  background-color: ${e.bgcolor};
+  height: 60px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  transition: left .2s ease-in-out;
+  
+
+  @media screen and (max-width: 768px) {
+    padding: 0 1em;
+  }
+`
+);
+export {
+  d as TopMenuWrapper
+};

package/dist/snorre.es392.js

@@ -0,0 +1,33 @@
+import i from "@emotion/styled";
+import { css as t } from "@emotion/react";
+import o from "./snorre.es503.js";
+const r = i.div(
+  (e) => t`
+    position: fixed;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    background: ${e.lightTheme ? e.theme.lightMenuBackground : e.theme.defaultMenuBackground};
+    width: ${e.open ? "250px" : "56px"};
+    height: calc(100vh - 20px);
+    box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.05);
+    z-index: 90;
+    padding-top: 20px;
+    transition: width 0.2s ease-in-out;
+
+    @media screen and (max-width: ${o.medium}) {
+      padding: 0;
+      position: unset;
+      display: block;
+      overflow: unset;
+      overflow-x: scroll;
+      width: 100%;
+      height: 100%;
+    }
+  `
+);
+export {
+  r as Wrapper
+};