@elliemae/ds-scrollable-container 3.1.0-next.13

package/dist/esm/styled.js

@@ -0,0 +1,521 @@
+import * as React from "react";
+import { styled, layout, space, sizing } from "@elliemae/ds-system";
+import { DSScrollableContainerName, DSScrollableContainerSlots } from "./exported_related";
+const StyledOsHostWrapper = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.ROOT
+})`
+  ${layout}
+  ${space}
+  ${sizing}
+  .os-host,
+  .os-host-textarea {
+    position: relative;
+    overflow: visible !important;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+  }
+  #os-dummy-scrollbar-size {
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    overflow: scroll;
+    height: 500px;
+    width: 500px;
+  }
+  #os-dummy-scrollbar-size > div {
+    width: 200%;
+    height: 200%;
+    margin: 10px 0;
+  }
+  #os-dummy-scrollbar-size:before,
+  #os-dummy-scrollbar-size:after,
+  .os-content:before,
+  .os-content:after {
+    content: '';
+    display: table;
+    width: 0.01px;
+    height: 0.01px;
+    line-height: 0;
+    font-size: 0;
+    flex-grow: 0;
+    flex-shrink: 0;
+    visibility: hidden;
+  }
+  #os-dummy-scrollbar-size,
+  .os-viewport {
+    -ms-overflow-style: scrollbar !important;
+  }
+  .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size,
+  .os-viewport-native-scrollbars-invisible.os-viewport {
+    scrollbar-width: none !important;
+  }
+  .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar,
+  .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar,
+  .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner,
+  .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    visibility: hidden !important;
+    background: transparent !important;
+  }
+  .os-content-glue {
+    box-sizing: inherit;
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+  .os-padding {
+    box-sizing: inherit;
+    direction: inherit;
+    position: absolute;
+    overflow: visible;
+    padding: 0;
+    margin: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: auto !important;
+    height: auto !important;
+    z-index: 0;
+  }
+  .os-host-overflow > .os-padding {
+    overflow: hidden;
+  }
+  .os-viewport {
+    direction: inherit !important;
+    box-sizing: inherit !important;
+    resize: none !important;
+    outline: none !important;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+  .os-content-arrange {
+    position: absolute;
+    z-index: -1;
+    min-height: 1px;
+    min-width: 1px;
+    pointer-events: none;
+  }
+  .os-content {
+    direction: inherit;
+    box-sizing: border-box !important;
+    position: relative;
+    display: block;
+    height: 100%;
+    width: 100%;
+    height: 100%;
+    width: 100%;
+    visibility: visible;
+  }
+  .os-content > .os-textarea {
+    box-sizing: border-box !important;
+    direction: inherit !important;
+    background: transparent !important;
+    outline: 0 none transparent !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    display: block !important;
+    top: 0 !important;
+    left: 0 !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    float: none !important;
+    filter: none !important;
+    border: none !important;
+    resize: none !important;
+    transform: none !important;
+    max-width: none !important;
+    max-height: none !important;
+    box-shadow: none !important;
+    perspective: none !important;
+    opacity: 1 !important;
+    z-index: 1 !important;
+    clip: auto !important;
+    padding: 0;
+  }
+  .os-content > .os-textarea-cover {
+    z-index: -1;
+    pointer-events: none;
+  }
+  .os-content > .os-textarea[wrap='off'] {
+    white-space: pre !important;
+    margin: 0 !important;
+  }
+  .os-text-inherit {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    font-style: inherit;
+    font-variant: inherit;
+    text-transform: inherit;
+    text-decoration: inherit;
+    text-indent: inherit;
+    text-align: inherit;
+    text-shadow: inherit;
+    text-overflow: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+    line-height: inherit;
+    unicode-bidi: inherit;
+    direction: inherit;
+    color: inherit;
+    cursor: text;
+  }
+  .os-resize-observer,
+  .os-resize-observer-host {
+    box-sizing: inherit;
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
+  }
+  .os-resize-observer-host {
+    padding: inherit;
+    border: inherit;
+    border-color: transparent;
+    border-style: solid;
+    box-sizing: border-box;
+  }
+  .os-resize-observer-host.observed {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  .os-resize-observer-host > .os-resize-observer,
+  .os-resize-observer-host.observed > .os-resize-observer {
+    height: 200%;
+    width: 200%;
+    padding: inherit;
+    border: inherit;
+    margin: 0;
+    display: block;
+    box-sizing: content-box;
+  }
+  .os-resize-observer-host.observed > .os-resize-observer,
+  .os-resize-observer-host.observed > .os-resize-observer:before {
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: auto;
+    box-sizing: border-box;
+  }
+  .os-resize-observer-host.observed > .os-resize-observer:before {
+    content: '';
+    box-sizing: content-box;
+    padding: inherit;
+    border: inherit;
+    margin: 0;
+  }
+  .os-size-auto-observer {
+    box-sizing: inherit !important;
+    height: 100%;
+    width: inherit;
+    max-width: 1px;
+    position: relative;
+    float: left;
+    max-height: 1px;
+    overflow: hidden;
+    z-index: -1;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+    flex-grow: inherit;
+    flex-shrink: 0;
+    flex-basis: 0;
+  }
+  .os-size-auto-observer > .os-resize-observer {
+    width: 1000%;
+    height: 1000%;
+    min-height: 1px;
+    min-width: 1px;
+  }
+  .os-resize-observer-item {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    z-index: -1;
+    opacity: 0;
+    direction: ltr !important;
+    flex: none !important;
+  }
+  .os-resize-observer-item-final {
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: none !important;
+    flex: none !important;
+  }
+  .os-resize-observer {
+    animation-duration: 0.001s;
+    animation-name: os-resize-observer-dummy-animation;
+  }
+  object.os-resize-observer {
+    box-sizing: border-box !important;
+  }
+  @-webkit-keyframes os-resize-observer-dummy-animation {
+    from {
+      z-index: 0;
+    }
+    to {
+      z-index: -1;
+    }
+  }
+  @keyframes os-resize-observer-dummy-animation {
+    from {
+      z-index: 0;
+    }
+    to {
+      z-index: -1;
+    }
+  }
+  .os-host-transition > .os-scrollbar,
+  .os-host-transition > .os-scrollbar-corner {
+    transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
+  }
+  html.os-html > .os-host > .os-scrollbar {
+    position: absolute;
+    z-index: 999999;
+  }
+  .os-scrollbar,
+  .os-scrollbar-corner {
+    position: absolute;
+    opacity: 1;
+    z-index: 1;
+  }
+  .os-scrollbar-corner {
+    bottom: 0;
+    right: 0;
+    height: 10px;
+    width: 10px;
+    background-color: transparent;
+  }
+  .os-scrollbar {
+    pointer-events: none;
+    padding: 2px;
+    box-sizing: border-box;
+    background: transparent;
+  }
+  .os-scrollbar-track {
+    pointer-events: auto;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    padding: 0 !important;
+    border: none !important;
+  }
+  .os-scrollbar-handle {
+    pointer-events: auto;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .os-scrollbar-handle-off,
+  .os-scrollbar-track-off {
+    pointer-events: none;
+  }
+  .os-scrollbar.os-scrollbar-unusable,
+  .os-scrollbar.os-scrollbar-unusable * {
+    pointer-events: none !important;
+  }
+  .os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle {
+    opacity: 0 !important;
+  }
+  .os-scrollbar-horizontal {
+    bottom: 0;
+    left: 0;
+    right: 10px;
+    height: 10px;
+  }
+  .os-scrollbar-vertical {
+    top: 0;
+    right: 0;
+    bottom: 10px;
+    width: 10px;
+  }
+  .os-scrollbar-auto-hidden,
+  .os-padding + .os-scrollbar-corner,
+  .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-corner,
+  .os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal,
+  .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-corner,
+  .os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical,
+  .os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical + .os-scrollbar-corner,
+  .os-scrollbar-horizontal + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner,
+  .os-scrollbar-horizontal.os-scrollbar-auto-hidden
+    + .os-scrollbar-vertical.os-scrollbar-auto-hidden
+    + .os-scrollbar-corner {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .os-scrollbar-corner-resize-both {
+    cursor: nwse-resize;
+  }
+  .os-scrollbar-corner-resize-horizontal {
+    cursor: ew-resize;
+  }
+  .os-scrollbar-corner-resize-vertical {
+    cursor: ns-resize;
+  }
+  .os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize {
+    cursor: default;
+  }
+  .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
+    top: 0;
+    bottom: 0;
+  }
+  .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
+    right: 0;
+    left: 0;
+  }
+  .os-scrollbar:hover,
+  .os-scrollbar-corner.os-scrollbar-corner-resize {
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+  .os-scrollbar-corner.os-scrollbar-corner-resize {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB3aWR0aD0iMTAiICAgaGVpZ2h0PSIxMCIgICB2ZXJzaW9uPSIxLjEiPiAgPGcgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwNDIuMzYyMikiICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjQ5NDExNzY1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDcuNDI0MjE4NywxMDQyLjM2MjIgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjYgLTEuMzEwMTU2MiwxLjMxMDIgMCwwLjI5OSAwLjEwNDM0MTksMC41NzEgMC4yNzI5NDkyLDAuNzkxNSAwLjIwOTEwMjQsMC4xNDEzIDAuNDY1NjIwNiwwLjIxODQgMC43MzY5NjI5LDAuMjE4NCAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NiAxLjMxMDE1NjMsLTEuMzEwMiAwLC0wLjI3MTMgLTAuMDc3MDkzLC0wLjUyNzggLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0MSwtMC4xNjg2IC0wLjQ5MjU0NDMsLTAuMjcyOSAtMC43OTE1NTI4LC0wLjI3MjkgeiBtIDAsMy4wODQzIGMgLTAuNzIzNTc5MiwwIC0xLjMxMDE1NjIsMC41ODY2IC0xLjMxMDE1NjIsMS4zMTAyIDAsMC4yOTkgMC4xMDQzNDE5LDAuNTcxIDAuMjcyOTQ5MiwwLjc5MTUgMC4yMDkxMDI0LDAuMTQxMyAwLjQ2NTYyMDYsMC4yMTg0IDAuNzM2OTYyOSwwLjIxODQgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjYgMS4zMTAxNTYzLC0xLjMxMDIgMCwtMC4yNzEzIC0wLjA3NzA5MywtMC41Mjc4IC0wLjIxODM1OTQsLTAuNzM2OSAtMC4yMjA0OTQxLC0wLjE2ODYgLTAuNDkyNTQ0MywtMC4yNzMgLTAuNzkxNTUyOCwtMC4yNzMgeiBtIC0zLjA4NDMyNjEsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NiAtMS4zMTAxNTYzLDEuMzEwMiAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MSAwLjI3Mjk0OTIsMC43OTE1IDAuMjA5MTAyNCwwLjE0MTMgMC40NjU2MjA3LDAuMjE4NCAwLjczNjk2MjksMC4yMTg0IDAuNzIzNTc5MywwIDEuMzEwMTU2MywtMC41ODY2IDEuMzEwMTU2MywtMS4zMTAyIDAsLTAuMjcxMyAtMC4wNzcwOTMsLTAuNTI3OCAtMC4yMTgzNTk0LC0wLjczNjkgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzMgLTAuNzkxNTUyNywtMC4yNzMgeiBtIC0zLjAyOTczNjQsMy4wMjk4IEMgMC41ODY1NzY5MywxMDQ4LjQ3NjMgMCwxMDQ5LjA2MjggMCwxMDQ5Ljc4NjQgYyAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyMiwwLjc5MTYgMC4yMDkxMDIyOSwwLjE0MTIgMC40NjU2MjA2NSwwLjIxODMgMC43MzY5NjI4OCwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHogbSAzLjAyOTczNjQsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NSAtMS4zMTAxNTYzLDEuMzEwMSAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyLDAuNzkxNiAwLjIwOTEwMjQsMC4xNDEyIDAuNDY1NjIwNywwLjIxODMgMC43MzY5NjI5LDAuMjE4MyAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NSAxLjMxMDE1NjMsLTEuMzEwMSAwLC0wLjI3MTQgLTAuMDc3MDkzLC0wLjUyNzkgLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzI5IC0wLjc5MTU1MjcsLTAuMjcyOSB6IG0gMy4wODQzMjYxLDAgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjUgLTEuMzEwMTU2MiwxLjMxMDEgMCwwLjI5OSAwLjEwNDM0MTksMC41NzExIDAuMjcyOTQ5MiwwLjc5MTYgMC4yMDkxMDI0LDAuMTQxMiAwLjQ2NTYyMDYsMC4yMTgzIDAuNzM2OTYyOSwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHoiLz4gIDwvZz4gIDxnICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDguMjE1NzcxNSwwLjI3Mjk0OTIyIGMgMC4xNDEyNjY3LDAuMjA5MTAyMjkgMC4yMTgzNTk0LDAuNDY1NjIwNjUgMC4yMTgzNTk0LDAuNzM2OTYyODggMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDc2IC0wLjIwNTUxNzYsLTAuNzk3Nzk2NTkgLTAuNTE4NjAzNSwtMS4wMzcyMDY5OCB6IG0gMCwzLjA4NDMyNjE4IGMgMC4xNDEyNjY3LDAuMjA5MTAyMyAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MiAtMS4zMTAxNTYzLDEuMzEwMTU2MiAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTkzIDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAtMy4wODQzMjYyLDAgYyAwLjE0MTI2NjcsMC4yMDkxMDIzIDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYyIC0xLjMxMDE1NjMsMS4zMTAxNTYyIC0wLjI3MTM0MjIsMCAtMC41Mjc4NjA1LC0wLjA3NzA5MyAtMC43MzY5NjI5LC0wLjIxODM1OTMgMC4yMzk0MTA0LDAuMzEzMDg1OSAwLjYxMjYzNjMsMC41MTg2MDM1IDEuMDM3MjA3MSwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYyLC0wLjU4NjU3NyAxLjMxMDE1NjIsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NSwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogTSAyLjEwMTcwOSw2LjM4NzAxMTcgYyAwLjE0MTI2NjcsMC4yMDkxMDI0IDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYzIC0xLjMxMDE1NjMsMS4zMTAxNTYzIC0wLjI3MTM0MjIzLDAgLTAuNTI3ODYwNTksLTAuMDc3MDkzIC0wLjczNjk2Mjg4LC0wLjIxODM1OTQgMC4yMzk0MTAzOSwwLjMxMzA4NTkgMC42MTI2MzYyMiwwLjUxODYwMzUgMS4wMzcyMDY5OCwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAzLjAyOTczNjMsMCBjIDAuMTQxMjY2NywwLjIwOTEwMjQgMC4yMTgzNTk0LDAuNDY1NjIwNiAwLjIxODM1OTQsMC43MzY5NjI5IDAsMC43MjM1NzkzIC0wLjU4NjU3NywxLjMxMDE1NjMgLTEuMzEwMTU2MywxLjMxMDE1NjMgLTAuMjcxMzQyMiwwIC0wLjUyNzg2MDUsLTAuMDc3MDkzIC0wLjczNjk2MjksLTAuMjE4MzU5NCAwLjIzOTQxMDQsMC4zMTMwODU5IDAuNjEyNjM2MywwLjUxODYwMzUgMS4wMzcyMDcxLDAuNTE4NjAzNSAwLjcyMzU3OTMsMCAxLjMxMDE1NjIsLTAuNTg2NTc3IDEuMzEwMTU2MiwtMS4zMTAxNTYzIDAsLTAuNDI0NTcwOCAtMC4yMDU1MTc1LC0wLjc5Nzc5NjYgLTAuNTE4NjAzNSwtMS4wMzcyMDcgeiBtIDMuMDg0MzI2MiwwIGMgMC4xNDEyNjY3LDAuMjA5MTAyNCAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHoiIC8+ICA8L2c+PC9zdmc+);
+    background-repeat: no-repeat;
+    background-position: 100% 100%;
+    pointer-events: auto !important;
+  }
+  .os-host-overflow {
+    overflow: hidden !important;
+  }
+  .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
+    min-width: 30px;
+  }
+  .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
+    min-height: 30px;
+  }
+  .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+    transition: background-color 0.3s;
+  }
+  .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
+  .os-scrollbar > .os-scrollbar-track {
+    border-radius: 10px;
+  }
+  .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+    background: rgba(0, 0, 0, 0.4);
+  }
+  .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
+    background: rgba(0, 0, 0, 0.55);
+  }
+  .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .os-scrollbar-horizontal .os-scrollbar-handle:before,
+  .os-scrollbar-vertical .os-scrollbar-handle:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: block;
+  }
+  .os-theme-dark.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
+  .os-theme-dark.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before {
+    display: none;
+  }
+  .os-scrollbar-horizontal .os-scrollbar-handle:before {
+    top: -6px;
+    bottom: -2px;
+  }
+  .os-scrollbar-vertical .os-scrollbar-handle:before {
+    left: -6px;
+    right: -2px;
+  }
+  .os-scrollbar.os-scrollbar-unusable,
+  .os-scrollbar > .os-scrollbar-track {
+    background: transparent;
+  }
+`;
+const StyledOsHost = styled("div", { name: DSScrollableContainerName, slot: DSScrollableContainerSlots.HOST })``;
+const StyledOsResizeObserverHost = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.RESIZE_OBSERVER_HOST
+})``;
+const StyledOsPadding = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.PADDING
+})``;
+const StyledOsViewport = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.VIEWPORT
+})``;
+const StyledOsContent = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.CONTENT
+})``;
+const StyledOsScrollbarHorizontal = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.SCROLLBAR_HORIZONTAL
+})``;
+const StyledOsScrollbarVertical = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.SCROLLBAR_VERTICAL
+})``;
+const StyledOsScrollbarTrack = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.SCROLLBAR_TRACK
+})``;
+const StyledOsScrollbarHandle = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.SCROLLBAR_HANDLE
+})`
+  width: 6px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  background-color: rgba(105, 116, 137, 0.5) !important;
+  border-radius: 7px;
+
+  :hover {
+    background-color: rgba(105, 116, 137, 0.7) !important;
+  }
+
+  :active {
+    background-color: rgba(105, 116, 137, 0.7) !important;
+  }
+`;
+const StyledOsScrollbarCorner = styled("div", {
+  name: DSScrollableContainerName,
+  slot: DSScrollableContainerSlots.SCROLLBAR_CORNER
+})``;
+export {
+  StyledOsContent,
+  StyledOsHost,
+  StyledOsHostWrapper,
+  StyledOsPadding,
+  StyledOsResizeObserverHost,
+  StyledOsScrollbarCorner,
+  StyledOsScrollbarHandle,
+  StyledOsScrollbarHorizontal,
+  StyledOsScrollbarTrack,
+  StyledOsScrollbarVertical,
+  StyledOsViewport
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, layout, space, sizing, LayoutProps, SpaceProps, SizingProps } from '@elliemae/ds-system';\nimport { DSScrollableContainerName, DSScrollableContainerSlots } from './exported_related';\n\nexport const StyledOsHostWrapper = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.ROOT,\n})<LayoutProps & SpaceProps & SizingProps>`\n  ${layout}\n  ${space}\n  ${sizing}\n  .os-host,\n  .os-host-textarea {\n    position: relative;\n    overflow: visible !important;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-content: flex-start;\n    align-items: flex-start;\n  }\n  #os-dummy-scrollbar-size {\n    position: fixed;\n    opacity: 0;\n    visibility: hidden;\n    overflow: scroll;\n    height: 500px;\n    width: 500px;\n  }\n  #os-dummy-scrollbar-size > div {\n    width: 200%;\n    height: 200%;\n    margin: 10px 0;\n  }\n  #os-dummy-scrollbar-size:before,\n  #os-dummy-scrollbar-size:after,\n  .os-content:before,\n  .os-content:after {\n    content: '';\n    display: table;\n    width: 0.01px;\n    height: 0.01px;\n    line-height: 0;\n    font-size: 0;\n    flex-grow: 0;\n    flex-shrink: 0;\n    visibility: hidden;\n  }\n  #os-dummy-scrollbar-size,\n  .os-viewport {\n    -ms-overflow-style: scrollbar !important;\n  }\n  .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size,\n  .os-viewport-native-scrollbars-invisible.os-viewport {\n    scrollbar-width: none !important;\n  }\n  .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar,\n  .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar,\n  .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner,\n  .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner {\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    visibility: hidden !important;\n    background: transparent !important;\n  }\n  .os-content-glue {\n    box-sizing: inherit;\n    max-height: 100%;\n    max-width: 100%;\n    width: 100%;\n    pointer-events: none;\n  }\n  .os-padding {\n    box-sizing: inherit;\n    direction: inherit;\n    position: absolute;\n    overflow: visible;\n    padding: 0;\n    margin: 0;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: auto !important;\n    height: auto !important;\n    z-index: 0;\n  }\n  .os-host-overflow > .os-padding {\n    overflow: hidden;\n  }\n  .os-viewport {\n    direction: inherit !important;\n    box-sizing: inherit !important;\n    resize: none !important;\n    outline: none !important;\n    position: absolute;\n    overflow: hidden;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    padding: 0;\n    margin: 0;\n    -webkit-overflow-scrolling: touch;\n  }\n  .os-content-arrange {\n    position: absolute;\n    z-index: -1;\n    min-height: 1px;\n    min-width: 1px;\n    pointer-events: none;\n  }\n  .os-content {\n    direction: inherit;\n    box-sizing: border-box !important;\n    position: relative;\n    display: block;\n    height: 100%;\n    width: 100%;\n    height: 100%;\n    width: 100%;\n    visibility: visible;\n  }\n  .os-content > .os-textarea {\n    box-sizing: border-box !important;\n    direction: inherit !important;\n    background: transparent !important;\n    outline: 0 none transparent !important;\n    overflow: hidden !important;\n    position: absolute !important;\n    display: block !important;\n    top: 0 !important;\n    left: 0 !important;\n    margin: 0 !important;\n    border-radius: 0 !important;\n    float: none !important;\n    filter: none !important;\n    border: none !important;\n    resize: none !important;\n    transform: none !important;\n    max-width: none !important;\n    max-height: none !important;\n    box-shadow: none !important;\n    perspective: none !important;\n    opacity: 1 !important;\n    z-index: 1 !important;\n    clip: auto !important;\n    padding: 0;\n  }\n  .os-content > .os-textarea-cover {\n    z-index: -1;\n    pointer-events: none;\n  }\n  .os-content > .os-textarea[wrap='off'] {\n    white-space: pre !important;\n    margin: 0 !important;\n  }\n  .os-text-inherit {\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    font-style: inherit;\n    font-variant: inherit;\n    text-transform: inherit;\n    text-decoration: inherit;\n    text-indent: inherit;\n    text-align: inherit;\n    text-shadow: inherit;\n    text-overflow: inherit;\n    letter-spacing: inherit;\n    word-spacing: inherit;\n    line-height: inherit;\n    unicode-bidi: inherit;\n    direction: inherit;\n    color: inherit;\n    cursor: text;\n  }\n  .os-resize-observer,\n  .os-resize-observer-host {\n    box-sizing: inherit;\n    display: block;\n    visibility: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    pointer-events: none;\n    z-index: -1;\n  }\n  .os-resize-observer-host {\n    padding: inherit;\n    border: inherit;\n    border-color: transparent;\n    border-style: solid;\n    box-sizing: border-box;\n  }\n  .os-resize-observer-host.observed {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n  .os-resize-observer-host > .os-resize-observer,\n  .os-resize-observer-host.observed > .os-resize-observer {\n    height: 200%;\n    width: 200%;\n    padding: inherit;\n    border: inherit;\n    margin: 0;\n    display: block;\n    box-sizing: content-box;\n  }\n  .os-resize-observer-host.observed > .os-resize-observer,\n  .os-resize-observer-host.observed > .os-resize-observer:before {\n    display: flex;\n    position: relative;\n    flex-grow: 1;\n    flex-shrink: 0;\n    flex-basis: auto;\n    box-sizing: border-box;\n  }\n  .os-resize-observer-host.observed > .os-resize-observer:before {\n    content: '';\n    box-sizing: content-box;\n    padding: inherit;\n    border: inherit;\n    margin: 0;\n  }\n  .os-size-auto-observer {\n    box-sizing: inherit !important;\n    height: 100%;\n    width: inherit;\n    max-width: 1px;\n    position: relative;\n    float: left;\n    max-height: 1px;\n    overflow: hidden;\n    z-index: -1;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n    flex-grow: inherit;\n    flex-shrink: 0;\n    flex-basis: 0;\n  }\n  .os-size-auto-observer > .os-resize-observer {\n    width: 1000%;\n    height: 1000%;\n    min-height: 1px;\n    min-width: 1px;\n  }\n  .os-resize-observer-item {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: hidden;\n    z-index: -1;\n    opacity: 0;\n    direction: ltr !important;\n    flex: none !important;\n  }\n  .os-resize-observer-item-final {\n    position: absolute;\n    left: 0;\n    top: 0;\n    transition: none !important;\n    flex: none !important;\n  }\n  .os-resize-observer {\n    animation-duration: 0.001s;\n    animation-name: os-resize-observer-dummy-animation;\n  }\n  object.os-resize-observer {\n    box-sizing: border-box !important;\n  }\n  @-webkit-keyframes os-resize-observer-dummy-animation {\n    from {\n      z-index: 0;\n    }\n    to {\n      z-index: -1;\n    }\n  }\n  @keyframes os-resize-observer-dummy-animation {\n    from {\n      z-index: 0;\n    }\n    to {\n      z-index: -1;\n    }\n  }\n  .os-host-transition > .os-scrollbar,\n  .os-host-transition > .os-scrollbar-corner {\n    transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;\n  }\n  html.os-html > .os-host > .os-scrollbar {\n    position: absolute;\n    z-index: 999999;\n  }\n  .os-scrollbar,\n  .os-scrollbar-corner {\n    position: absolute;\n    opacity: 1;\n    z-index: 1;\n  }\n  .os-scrollbar-corner {\n    bottom: 0;\n    right: 0;\n    height: 10px;\n    width: 10px;\n    background-color: transparent;\n  }\n  .os-scrollbar {\n    pointer-events: none;\n    padding: 2px;\n    box-sizing: border-box;\n    background: transparent;\n  }\n  .os-scrollbar-track {\n    pointer-events: auto;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    padding: 0 !important;\n    border: none !important;\n  }\n  .os-scrollbar-handle {\n    pointer-events: auto;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n  }\n  .os-scrollbar-handle-off,\n  .os-scrollbar-track-off {\n    pointer-events: none;\n  }\n  .os-scrollbar.os-scrollbar-unusable,\n  .os-scrollbar.os-scrollbar-unusable * {\n    pointer-events: none !important;\n  }\n  .os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle {\n    opacity: 0 !important;\n  }\n  .os-scrollbar-horizontal {\n    bottom: 0;\n    left: 0;\n    right: 10px;\n    height: 10px;\n  }\n  .os-scrollbar-vertical {\n    top: 0;\n    right: 0;\n    bottom: 10px;\n    width: 10px;\n  }\n  .os-scrollbar-auto-hidden,\n  .os-padding + .os-scrollbar-corner,\n  .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-corner,\n  .os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal,\n  .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-corner,\n  .os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical,\n  .os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical + .os-scrollbar-corner,\n  .os-scrollbar-horizontal + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner,\n  .os-scrollbar-horizontal.os-scrollbar-auto-hidden\n    + .os-scrollbar-vertical.os-scrollbar-auto-hidden\n    + .os-scrollbar-corner {\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n  }\n  .os-scrollbar-corner-resize-both {\n    cursor: nwse-resize;\n  }\n  .os-scrollbar-corner-resize-horizontal {\n    cursor: ew-resize;\n  }\n  .os-scrollbar-corner-resize-vertical {\n    cursor: ns-resize;\n  }\n  .os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize {\n    cursor: default;\n  }\n  .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {\n    top: 0;\n    bottom: 0;\n  }\n  .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {\n    right: 0;\n    left: 0;\n  }\n  .os-scrollbar:hover,\n  .os-scrollbar-corner.os-scrollbar-corner-resize {\n    opacity: 1 !important;\n    visibility: visible !important;\n  }\n  .os-scrollbar-corner.os-scrollbar-corner-resize {\n    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB3aWR0aD0iMTAiICAgaGVpZ2h0PSIxMCIgICB2ZXJzaW9uPSIxLjEiPiAgPGcgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwNDIuMzYyMikiICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjQ5NDExNzY1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDcuNDI0MjE4NywxMDQyLjM2MjIgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjYgLTEuMzEwMTU2MiwxLjMxMDIgMCwwLjI5OSAwLjEwNDM0MTksMC41NzEgMC4yNzI5NDkyLDAuNzkxNSAwLjIwOTEwMjQsMC4xNDEzIDAuNDY1NjIwNiwwLjIxODQgMC43MzY5NjI5LDAuMjE4NCAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NiAxLjMxMDE1NjMsLTEuMzEwMiAwLC0wLjI3MTMgLTAuMDc3MDkzLC0wLjUyNzggLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0MSwtMC4xNjg2IC0wLjQ5MjU0NDMsLTAuMjcyOSAtMC43OTE1NTI4LC0wLjI3MjkgeiBtIDAsMy4wODQzIGMgLTAuNzIzNTc5MiwwIC0xLjMxMDE1NjIsMC41ODY2IC0xLjMxMDE1NjIsMS4zMTAyIDAsMC4yOTkgMC4xMDQzNDE5LDAuNTcxIDAuMjcyOTQ5MiwwLjc5MTUgMC4yMDkxMDI0LDAuMTQxMyAwLjQ2NTYyMDYsMC4yMTg0IDAuNzM2OTYyOSwwLjIxODQgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjYgMS4zMTAxNTYzLC0xLjMxMDIgMCwtMC4yNzEzIC0wLjA3NzA5MywtMC41Mjc4IC0wLjIxODM1OTQsLTAuNzM2OSAtMC4yMjA0OTQxLC0wLjE2ODYgLTAuNDkyNTQ0MywtMC4yNzMgLTAuNzkxNTUyOCwtMC4yNzMgeiBtIC0zLjA4NDMyNjEsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NiAtMS4zMTAxNTYzLDEuMzEwMiAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MSAwLjI3Mjk0OTIsMC43OTE1IDAuMjA5MTAyNCwwLjE0MTMgMC40NjU2MjA3LDAuMjE4NCAwLjczNjk2MjksMC4yMTg0IDAuNzIzNTc5MywwIDEuMzEwMTU2MywtMC41ODY2IDEuMzEwMTU2MywtMS4zMTAyIDAsLTAuMjcxMyAtMC4wNzcwOTMsLTAuNTI3OCAtMC4yMTgzNTk0LC0wLjczNjkgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzMgLTAuNzkxNTUyNywtMC4yNzMgeiBtIC0zLjAyOTczNjQsMy4wMjk4IEMgMC41ODY1NzY5MywxMDQ4LjQ3NjMgMCwxMDQ5LjA2MjggMCwxMDQ5Ljc4NjQgYyAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyMiwwLjc5MTYgMC4yMDkxMDIyOSwwLjE0MTIgMC40NjU2MjA2NSwwLjIxODMgMC43MzY5NjI4OCwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHogbSAzLjAyOTczNjQsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NSAtMS4zMTAxNTYzLDEuMzEwMSAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyLDAuNzkxNiAwLjIwOTEwMjQsMC4xNDEyIDAuNDY1NjIwNywwLjIxODMgMC43MzY5NjI5LDAuMjE4MyAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NSAxLjMxMDE1NjMsLTEuMzEwMSAwLC0wLjI3MTQgLTAuMDc3MDkzLC0wLjUyNzkgLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzI5IC0wLjc5MTU1MjcsLTAuMjcyOSB6IG0gMy4wODQzMjYxLDAgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjUgLTEuMzEwMTU2MiwxLjMxMDEgMCwwLjI5OSAwLjEwNDM0MTksMC41NzExIDAuMjcyOTQ5MiwwLjc5MTYgMC4yMDkxMDI0LDAuMTQxMiAwLjQ2NTYyMDYsMC4yMTgzIDAuNzM2OTYyOSwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHoiLz4gIDwvZz4gIDxnICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDguMjE1NzcxNSwwLjI3Mjk0OTIyIGMgMC4xNDEyNjY3LDAuMjA5MTAyMjkgMC4yMTgzNTk0LDAuNDY1NjIwNjUgMC4yMTgzNTk0LDAuNzM2OTYyODggMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDc2IC0wLjIwNTUxNzYsLTAuNzk3Nzk2NTkgLTAuNTE4NjAzNSwtMS4wMzcyMDY5OCB6IG0gMCwzLjA4NDMyNjE4IGMgMC4xNDEyNjY3LDAuMjA5MTAyMyAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MiAtMS4zMTAxNTYzLDEuMzEwMTU2MiAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTkzIDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAtMy4wODQzMjYyLDAgYyAwLjE0MTI2NjcsMC4yMDkxMDIzIDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYyIC0xLjMxMDE1NjMsMS4zMTAxNTYyIC0wLjI3MTM0MjIsMCAtMC41Mjc4NjA1LC0wLjA3NzA5MyAtMC43MzY5NjI5LC0wLjIxODM1OTMgMC4yMzk0MTA0LDAuMzEzMDg1OSAwLjYxMjYzNjMsMC41MTg2MDM1IDEuMDM3MjA3MSwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYyLC0wLjU4NjU3NyAxLjMxMDE1NjIsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NSwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogTSAyLjEwMTcwOSw2LjM4NzAxMTcgYyAwLjE0MTI2NjcsMC4yMDkxMDI0IDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYzIC0xLjMxMDE1NjMsMS4zMTAxNTYzIC0wLjI3MTM0MjIzLDAgLTAuNTI3ODYwNTksLTAuMDc3MDkzIC0wLjczNjk2Mjg4LC0wLjIxODM1OTQgMC4yMzk0MTAzOSwwLjMxMzA4NTkgMC42MTI2MzYyMiwwLjUxODYwMzUgMS4wMzcyMDY5OCwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAzLjAyOTczNjMsMCBjIDAuMTQxMjY2NywwLjIwOTEwMjQgMC4yMTgzNTk0LDAuNDY1NjIwNiAwLjIxODM1OTQsMC43MzY5NjI5IDAsMC43MjM1NzkzIC0wLjU4NjU3NywxLjMxMDE1NjMgLTEuMzEwMTU2MywxLjMxMDE1NjMgLTAuMjcxMzQyMiwwIC0wLjUyNzg2MDUsLTAuMDc3MDkzIC0wLjczNjk2MjksLTAuMjE4MzU5NCAwLjIzOTQxMDQsMC4zMTMwODU5IDAuNjEyNjM2MywwLjUxODYwMzUgMS4wMzcyMDcxLDAuNTE4NjAzNSAwLjcyMzU3OTMsMCAxLjMxMDE1NjIsLTAuNTg2NTc3IDEuMzEwMTU2MiwtMS4zMTAxNTYzIDAsLTAuNDI0NTcwOCAtMC4yMDU1MTc1LC0wLjc5Nzc5NjYgLTAuNTE4NjAzNSwtMS4wMzcyMDcgeiBtIDMuMDg0MzI2MiwwIGMgMC4xNDEyNjY3LDAuMjA5MTAyNCAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHoiIC8+ICA8L2c+PC9zdmc+);\n    background-repeat: no-repeat;\n    background-position: 100% 100%;\n    pointer-events: auto !important;\n  }\n  .os-host-overflow {\n    overflow: hidden !important;\n  }\n  .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {\n    min-width: 30px;\n  }\n  .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {\n    min-height: 30px;\n  }\n  .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {\n    transition: background-color 0.3s;\n  }\n  .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,\n  .os-scrollbar > .os-scrollbar-track {\n    border-radius: 10px;\n  }\n  .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {\n    background: rgba(0, 0, 0, 0.4);\n  }\n  .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {\n    background: rgba(0, 0, 0, 0.55);\n  }\n  .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {\n    background: rgba(0, 0, 0, 0.7);\n  }\n  .os-scrollbar-horizontal .os-scrollbar-handle:before,\n  .os-scrollbar-vertical .os-scrollbar-handle:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    display: block;\n  }\n  .os-theme-dark.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,\n  .os-theme-dark.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before {\n    display: none;\n  }\n  .os-scrollbar-horizontal .os-scrollbar-handle:before {\n    top: -6px;\n    bottom: -2px;\n  }\n  .os-scrollbar-vertical .os-scrollbar-handle:before {\n    left: -6px;\n    right: -2px;\n  }\n  .os-scrollbar.os-scrollbar-unusable,\n  .os-scrollbar > .os-scrollbar-track {\n    background: transparent;\n  }\n`;\n\nexport const StyledOsHost = styled('div', { name: DSScrollableContainerName, slot: DSScrollableContainerSlots.HOST })``;\n\nexport const StyledOsResizeObserverHost = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.RESIZE_OBSERVER_HOST,\n})``;\n\nexport const StyledOsPadding = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.PADDING,\n})``;\n\nexport const StyledOsViewport = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.VIEWPORT,\n})``;\n\nexport const StyledOsContent = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.CONTENT,\n})``;\n\nexport const StyledOsScrollbarHorizontal = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.SCROLLBAR_HORIZONTAL,\n})``;\n\nexport const StyledOsScrollbarVertical = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.SCROLLBAR_VERTICAL,\n})``;\n\nexport const StyledOsScrollbarTrack = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.SCROLLBAR_TRACK,\n})``;\n\nexport const StyledOsScrollbarHandle = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.SCROLLBAR_HANDLE,\n})`\n  width: 6px;\n  border: 1px solid rgba(0, 0, 0, 0);\n  background-color: rgba(105, 116, 137, 0.5) !important;\n  border-radius: 7px;\n\n  :hover {\n    background-color: rgba(105, 116, 137, 0.7) !important;\n  }\n\n  :active {\n    background-color: rgba(105, 116, 137, 0.7) !important;\n  }\n`;\n\nexport const StyledOsScrollbarCorner = styled('div', {\n  name: DSScrollableContainerName,\n  slot: DSScrollableContainerSlots.SCROLLBAR_CORNER,\n})``;\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAicG,MAAM,eAAe,OAAO,OAAO,EAAE,MAAM,2BAA2B,MAAM,2BAA2B,KAAK,CAAC;AAE7G,MAAM,6BAA6B,OAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAEM,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAEM,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAEM,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAEM,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAEM,MAAM,4BAA4B,OAAO,OAAO;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAEM,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAEM,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeM,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@elliemae/ds-scrollable-container",
+  "version": "3.1.0-next.13",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Scrollable Container",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-system": "3.1.0-next.13",
+    "@elliemae/ds-utilities": "3.1.0-next.13",
+    "overlayscrollbars": "~1.13.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.16.2",
+    "@testing-library/react": "~12.1.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}