@smileid/web-components 11.5.0 → 11.6.0

package/dist/esm/styles-BTEClL7R.js

@@ -1,419 +0,0 @@
-const t = `
-  .text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-  .text-sm {
-    font-size: 0.875rem;
-    line-height: 1.125rem;
-  }
-  .text-base {
-    font-size: 1rem;
-    line-height: 1rem;
-  }
-  .text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-  .text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-  .text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-  .text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-  .text-4xl {
-    font-size: 2rem;
-    line-height: 2.5rem;
-  }
-  .text-5xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-  .font-bold {
-    font-weight: 700;
-  }
-  .font-semibold {
-    font-weight: 600;
-  }
-  .font-medium {
-    font-weight: 500;
-  }
-  .font-normal {
-    font-weight: 400;
-  }
-`, o = (e) => `<link rel="preconnect" href="https://fonts.gstatic.com" />
-<link
-  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
-  rel="stylesheet"
-  as="style"
-/>
-<style>
-${t}
-:host {
-    --theme-color: ${e || "#001096"};
-    --color-active: #001096;
-    --color-default: #2d2b2a;
-    --color-disabled: #848282;
-    --web-digital-blue: #001096;
-  }
-
-  * {
-    font-family: "DM Sans", sans-serif;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  [disabled] {
-    cursor: not-allowed !important;
-    filter: grayscale(75%);
-  }
-
-  .visually-hidden {
-    border: 0;
-    clip: rect(1px 1px 1px 1px);
-    clip: rect(1px, 1px, 1px, 1px);
-    height: auto;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  img {
-    height: auto;
-    max-width: 100%;
-  }
-
-  video {
-    background-color: black;
-  }
-
-  a {
-    color: currentColor;
-    text-decoration: none;
-  }
-
-  svg {
-    max-width: 100%;
-  }
-
-  .color-gray {
-    color: #797979;
-  }
-
-  .color-red {
-    color: red;
-  }
-
-  .color-richblue {
-    color: #4e6577;
-  }
-
-  .color-richblue-shade {
-    color: #0e1b42;
-  }
-
-  .color-digital-blue {
-    color: var(--web-digital-blue) !important;
-  }
-
-  .color-deep-blue {
-    color: #001096;
-  }
-
-  .title-color {
-    color: ${e || "#001096"};
-  }
-  
-  .theme-color {
-    color: ${e || "#001096"};
-  }
-
-  .center {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .font-size-small {
-    font-size: 0.75rem;
-  }
-
-  .font-size-large {
-    font-size: 1.5rem;
-  }
-
-  .text-transform-uppercase {
-    text-transform: uppercase;
-  }
-
-  [id*=-"screen"] {
-    min-block-size: 100%;
-  }
-
-  [data-variant~="full-width"] {
-    inline-size: 100%;
-  }
-
-  .flow > * + * {
-    margin-top: var(--flow-space, 1rem);
-  }
-
-  .button {
-    --button-color: ${e || "var(--active-color)"};
-    -webkit-appearance: none;
-    appearance: none;
-    border-radius: 2.5rem;
-    border: 0;
-    background-color: transparent;
-    color: #fff;
-    cursor: pointer;
-    display: block;
-    font-size: 18px;
-    font-weight: 600;
-    padding: 0.75rem 1.5rem;
-    text-align: center;
-  }
-
-  .button:hover,
-  .button:focus,
-  .button:active {
-    --button-color: var(--color-default);
-  }
-
-  .button:disabled {
-    --button-color: var(--color-disabled);
-  }
-
-  .button[data-variant~="solid"] {
-    background-color: var(--button-color);
-    border: 2px solid var(--button-color);
-  }
-
-  .button[data-variant~="outline"] {
-    color: var(--button-color);
-    border: 2px solid var(--button-color);
-  }
-
-  .button[data-variant~="ghost"] {
-    padding: 0px;
-    color: var(--button-color);
-    background-color: transparent;
-  }
-
-  .icon-btn {
-    appearance: none;
-    background: none;
-    border: none;
-    color: hsl(0deg 0% 94%);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px 8px;
-  }
-  .justify-right {
-    justify-content: end !important;
-  }
-  .nav {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .back-wrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  .back-button-text {
-    font-size: 11px;
-    line-height: 11px;
-    color: rgb(21, 31, 114);
-  }
-
-
-  .selfie-capture-review-image {
-    overflow: hidden;
-    aspect-ratio: 1/1;
-  }
-
-  #review-image {
-    scale: 1.75;
-  }
-
-  @media (max-aspect-ratio: 1/1) {
-    #review-image {
-      transform: scaleX(-1) translateY(-10%);
-    }
-  }
-
-  .tips,
-  .powered-by {
-    align-items: center;
-    border-radius: 0.25rem;
-    color: #4e6577;
-    display: flex;
-    justify-content: center;
-    letter-spacing: 0.075em;
-  }
-
-  .powered-by {
-    box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);
-    display: inline-flex;
-    font-size: 0.5rem;
-  }
-
-  .tips {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 17rem;
-  }
-
-  .tips > * + *,
-  .powered-by > * + * {
-    display: inline-block;
-    margin-left: 0.5em;
-  }
-
-  .powered-by .company {
-    color: #18406d;
-    font-weight: 700;
-    letter-spacing: 0.15rem;
-  }
-
-  .logo-mark {
-    background-color: #004071;
-    display: inline-block;
-    padding: 0.25em 0.5em;
-  }
-
-  .logo-mark svg {
-    height: auto;
-    justify-self: center;
-    width: 0.75em;
-  }
-
-  #document-capture-instructions-screen,
-  #back-of-document-capture-instructions-screen {
-    box-sizing: border-box;
-    height: 100%;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    max-block-size: 100%;
-    max-inline-size: 40ch;
-    justify-content: space-between;
-  }
-
-  #document-capture-instructions-screen header p {
-    margin-block: 0 !important;
-  }
-
-  .description {
-    color: var(--neutral-off-black, #2D2B2A);
-    text-align: center;
-
-    /* p */
-    font-family: DM Sans;
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-  }
-
-  .padding-bottom-2 {
-    padding-bottom: 2rem;
-  }
-
-  smart-camera-web, selfie-capture-screens, selfie-capture-instructions, document-capture-screens, document-capture-instructions, document-capture-instructions-v2 {
-    height: 100%;
-    display: block;
-  }
-
-  .instructions-wrapper {
-    display: inline-flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  @media (min-width: 40rem) {
-    .instructions-wrapper {
-      gap: 1.75rem;
-    }
-  }
-
-  .instructions {
-    display: flex;
-    align-items: center;
-    text-align: initial;
-    gap: 0.5rem;
-  }
-
-  .instructions svg {
-    flex-shrink: 0;
-    margin-inline-end: 0.25rem;
-  }
-
-  .instructions p {
-    margin-block: 0;
-  }
-
-  .instruction {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .instruction-body {
-    font-size: 0.75rem;
-  }
-
-  .instruction-header {
-    color: ${e};
-  }
-
-  .flex-column {
-    display: flex;
-    flex-direction: column;
-  }
-
-  @keyframes spin {
-    0% {
-        transform: translate3d(-50%, -50%, 0) rotate(0deg);
-    }
-    100% {
-        transform: translate3d(-50%, -50%, 0) rotate(360deg);
-    }
-}
-
-.spinner {
-    animation: 1.5s linear infinite spin;
-    animation-play-state: inherit;
-    border: solid 5px #cfd0d1;
-    border-bottom-color: var(--color-active);
-    border-radius: 50%;
-    content: "";
-    display: block;
-    height: 25px;
-    width: 25px;
-    will-change: transform;
-    position: relative;
-    top: .675rem;
-    left: 1.25rem;
-    }
-
-</style>`;
-export {
-  o as s
-};
-//# sourceMappingURL=styles-BTEClL7R.js.map

package/dist/esm/styles-BTEClL7R.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles-BTEClL7R.js","sources":["../../lib/styles/src/typography.js","../../lib/styles/src/styles.js"],"sourcesContent":["const typography = `\n  .text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .text-sm {\n    font-size: 0.875rem;\n    line-height: 1.125rem;\n  }\n  .text-base {\n    font-size: 1rem;\n    line-height: 1rem;\n  }\n  .text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  .text-xl {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n  .text-3xl {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n  }\n  .text-4xl {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n  .text-5xl {\n    font-size: 2.25rem;\n    line-height: 2.5rem;\n  }\n  .font-bold {\n    font-weight: 700;\n  }\n  .font-semibold {\n    font-weight: 600;\n  }\n  .font-medium {\n    font-weight: 500;\n  }\n  .font-normal {\n    font-weight: 400;\n  }\n`;\n\nexport default typography;\n","import typography from './typography';\n\nconst styles = (\n  themeColor,\n) => `<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" />\n<link\n  href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap\"\n  rel=\"stylesheet\"\n  as=\"style\"\n/>\n<style>\n${typography}\n:host {\n    --theme-color: ${themeColor || '#001096'};\n    --color-active: #001096;\n    --color-default: #2d2b2a;\n    --color-disabled: #848282;\n    --web-digital-blue: #001096;\n  }\n\n  * {\n    font-family: \"DM Sans\", sans-serif;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  [disabled] {\n    cursor: not-allowed !important;\n    filter: grayscale(75%);\n  }\n\n  .visually-hidden {\n    border: 0;\n    clip: rect(1px 1px 1px 1px);\n    clip: rect(1px, 1px, 1px, 1px);\n    height: auto;\n    margin: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  img {\n    height: auto;\n    max-width: 100%;\n  }\n\n  video {\n    background-color: black;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  svg {\n    max-width: 100%;\n  }\n\n  .color-gray {\n    color: #797979;\n  }\n\n  .color-red {\n    color: red;\n  }\n\n  .color-richblue {\n    color: #4e6577;\n  }\n\n  .color-richblue-shade {\n    color: #0e1b42;\n  }\n\n  .color-digital-blue {\n    color: var(--web-digital-blue) !important;\n  }\n\n  .color-deep-blue {\n    color: #001096;\n  }\n\n  .title-color {\n    color: ${themeColor || '#001096'};\n  }\n  \n  .theme-color {\n    color: ${themeColor || '#001096'};\n  }\n\n  .center {\n    text-align: center;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .font-size-small {\n    font-size: 0.75rem;\n  }\n\n  .font-size-large {\n    font-size: 1.5rem;\n  }\n\n  .text-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  [id*=-\"screen\"] {\n    min-block-size: 100%;\n  }\n\n  [data-variant~=\"full-width\"] {\n    inline-size: 100%;\n  }\n\n  .flow > * + * {\n    margin-top: var(--flow-space, 1rem);\n  }\n\n  .button {\n    --button-color: ${themeColor || 'var(--active-color)'};\n    -webkit-appearance: none;\n    appearance: none;\n    border-radius: 2.5rem;\n    border: 0;\n    background-color: transparent;\n    color: #fff;\n    cursor: pointer;\n    display: block;\n    font-size: 18px;\n    font-weight: 600;\n    padding: 0.75rem 1.5rem;\n    text-align: center;\n  }\n\n  .button:hover,\n  .button:focus,\n  .button:active {\n    --button-color: var(--color-default);\n  }\n\n  .button:disabled {\n    --button-color: var(--color-disabled);\n  }\n\n  .button[data-variant~=\"solid\"] {\n    background-color: var(--button-color);\n    border: 2px solid var(--button-color);\n  }\n\n  .button[data-variant~=\"outline\"] {\n    color: var(--button-color);\n    border: 2px solid var(--button-color);\n  }\n\n  .button[data-variant~=\"ghost\"] {\n    padding: 0px;\n    color: var(--button-color);\n    background-color: transparent;\n  }\n\n  .icon-btn {\n    appearance: none;\n    background: none;\n    border: none;\n    color: hsl(0deg 0% 94%);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 4px 8px;\n  }\n  .justify-right {\n    justify-content: end !important;\n  }\n  .nav {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .back-wrapper {\n    display: flex;\n    align-items: center;\n  }\n\n  .back-button-text {\n    font-size: 11px;\n    line-height: 11px;\n    color: rgb(21, 31, 114);\n  }\n\n\n  .selfie-capture-review-image {\n    overflow: hidden;\n    aspect-ratio: 1/1;\n  }\n\n  #review-image {\n    scale: 1.75;\n  }\n\n  @media (max-aspect-ratio: 1/1) {\n    #review-image {\n      transform: scaleX(-1) translateY(-10%);\n    }\n  }\n\n  .tips,\n  .powered-by {\n    align-items: center;\n    border-radius: 0.25rem;\n    color: #4e6577;\n    display: flex;\n    justify-content: center;\n    letter-spacing: 0.075em;\n  }\n\n  .powered-by {\n    box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);\n    display: inline-flex;\n    font-size: 0.5rem;\n  }\n\n  .tips {\n    margin-left: auto;\n    margin-right: auto;\n    max-width: 17rem;\n  }\n\n  .tips > * + *,\n  .powered-by > * + * {\n    display: inline-block;\n    margin-left: 0.5em;\n  }\n\n  .powered-by .company {\n    color: #18406d;\n    font-weight: 700;\n    letter-spacing: 0.15rem;\n  }\n\n  .logo-mark {\n    background-color: #004071;\n    display: inline-block;\n    padding: 0.25em 0.5em;\n  }\n\n  .logo-mark svg {\n    height: auto;\n    justify-self: center;\n    width: 0.75em;\n  }\n\n  #document-capture-instructions-screen,\n  #back-of-document-capture-instructions-screen {\n    box-sizing: border-box;\n    height: 100%;\n    padding: 1rem;\n    display: flex;\n    flex-direction: column;\n    max-block-size: 100%;\n    max-inline-size: 40ch;\n    justify-content: space-between;\n  }\n\n  #document-capture-instructions-screen header p {\n    margin-block: 0 !important;\n  }\n\n  .description {\n    color: var(--neutral-off-black, #2D2B2A);\n    text-align: center;\n\n    /* p */\n    font-family: DM Sans;\n    font-size: 0.875rem;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  .padding-bottom-2 {\n    padding-bottom: 2rem;\n  }\n\n  smart-camera-web, selfie-capture-screens, selfie-capture-instructions, document-capture-screens, document-capture-instructions, document-capture-instructions-v2 {\n    height: 100%;\n    display: block;\n  }\n\n  .instructions-wrapper {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n  \n  @media (min-width: 40rem) {\n    .instructions-wrapper {\n      gap: 1.75rem;\n    }\n  }\n\n  .instructions {\n    display: flex;\n    align-items: center;\n    text-align: initial;\n    gap: 0.5rem;\n  }\n\n  .instructions svg {\n    flex-shrink: 0;\n    margin-inline-end: 0.25rem;\n  }\n\n  .instructions p {\n    margin-block: 0;\n  }\n\n  .instruction {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  .instruction-body {\n    font-size: 0.75rem;\n  }\n\n  .instruction-header {\n    color: ${themeColor};\n  }\n\n  .flex-column {\n    display: flex;\n    flex-direction: column;\n  }\n\n  @keyframes spin {\n    0% {\n        transform: translate3d(-50%, -50%, 0) rotate(0deg);\n    }\n    100% {\n        transform: translate3d(-50%, -50%, 0) rotate(360deg);\n    }\n}\n\n.spinner {\n    animation: 1.5s linear infinite spin;\n    animation-play-state: inherit;\n    border: solid 5px #cfd0d1;\n    border-bottom-color: var(--color-active);\n    border-radius: 50%;\n    content: \"\";\n    display: block;\n    height: 25px;\n    width: 25px;\n    will-change: transform;\n    position: relative;\n    top: .675rem;\n    left: 1.25rem;\n    }\n\n</style>`;\n\nexport default styles;\n"],"names":["typography","styles","themeColor"],"mappings":"AAAA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEbC,IAAS,CACbC,MACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOHF,CAAU;AAAA;AAAA,qBAESE,KAAc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aA4E/BA,KAAc,SAAS;AAAA;AAAA;AAAA;AAAA,aAIvBA,KAAc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAkCdA,KAAc,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAiN5CA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}