@prom-ui/core 2.2.0 → 2.3.0

package/Overlay/cjs/style.development.v2.css

@@ -1 +1,305 @@
-.Overlay__root___-yvLz{position:fixed;right:0;bottom:0;top:0;left:0;width:100%;height:100%}.Overlay__backdrop___MKZgL{display:flex;top:0;left:0;right:0;bottom:0;z-index:-1;position:fixed;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.Overlay__popup___RJENA{z-index:1200;position:fixed;background:var(--white);box-sizing:border-box;display:flex;flex-direction:column;transform:none}.Overlay__popup_placement_top___ERdxO,.Overlay__popup_placement_bottom___MJb6v{right:0;left:0}.Overlay__popup_placement_right___nL79b,.Overlay__popup_placement_left___p-p5e{top:0;bottom:0}.Overlay__popup_placement_top___ERdxO{top:0;box-shadow:0 3px 6px 0 rgba(0,0,0,.1);border-radius:0 0 var(--pds-round-3xl) var(--pds-round-3xl)}.Overlay__popup_placement_bottom___MJb6v{bottom:0;box-shadow:0-3px 6px 0 rgba(0,0,0,.1);border-radius:var(--pds-round-3xl) var(--pds-round-3xl)0 0}.Overlay__popup_placement_right___nL79b{right:0;box-shadow:-3px 0 6px 0 rgba(0,0,0,.1);border-radius:var(--pds-round-3xl)0 0 var(--pds-round-3xl)}.Overlay__popup_placement_left___p-p5e{left:0;box-shadow:3px 0 6px 0 rgba(0,0,0,.1);border-radius:0 var(--pds-round-3xl) var(--pds-round-3xl)0}.Overlay__content___uHLyZ{order:2;flex:1;min-width:0;min-height:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.Overlay__content___uHLyZ:after{clear:both}.Overlay__content___uHLyZ:before,.Overlay__content___uHLyZ:after{content:"";display:table}.Overlay__header___ntf6X{order:1;flex:0;box-sizing:border-box;border-top-right-radius:inherit;border-top-left-radius:inherit}.Overlay__header___ntf6X:after{clear:both}.Overlay__header___ntf6X:before,.Overlay__header___ntf6X:after{content:"";display:table}.Overlay__header___ntf6X:empty~.Overlay__content___uHLyZ{border-top-right-radius:inherit;border-top-left-radius:inherit}.Overlay__header__grid___-OCio{box-sizing:border-box;display:flex;flex-wrap:wrap;min-width:0;align-items:center;min-height:50px;padding:var(--pds-spacing-xs)}.Overlay__header__item___gjOzy{display:block;box-sizing:border-box;min-width:0;max-width:100%}.Overlay__header__title___-s4aZ{flex:1}.Overlay__header__titleText___zkpK2{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-weight:700;font-size:var(--pds-font-size-h4);line-height:var(--pds-line-height)}.Overlay__header__action___fzZrE{min-width:34px}.Overlay__header__actionButton___CC-hv{padding:0;width:34px;height:34px}.Overlay__header__actionIcon___LoRyP{width:24px;height:24px}.Overlay__footer___nE-cV{order:3;flex:0;box-sizing:border-box;border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.Overlay__footer___nE-cV:after{clear:both}.Overlay__footer___nE-cV:before,.Overlay__footer___nE-cV:after{content:"";display:table}.Overlay__footer___nE-cV:empty~.Overlay__content___uHLyZ{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.Overlay__enter___v7DoD,.Overlay__exit___E0PkA{pointer-events:auto}.Overlay__enterActive___RFXzo,.Overlay__exitActive___a2xd2{pointer-events:none}.Overlay__enterActive___RFXzo .Overlay__popup_placement_top___ERdxO,.Overlay__exitActive___a2xd2 .Overlay__popup_placement_top___ERdxO,.Overlay__enterActive___RFXzo .Overlay__popup_placement_right___nL79b,.Overlay__exitActive___a2xd2 .Overlay__popup_placement_right___nL79b,.Overlay__enterActive___RFXzo .Overlay__popup_placement_bottom___MJb6v,.Overlay__exitActive___a2xd2 .Overlay__popup_placement_bottom___MJb6v,.Overlay__enterActive___RFXzo .Overlay__popup_placement_left___p-p5e,.Overlay__exitActive___a2xd2 .Overlay__popup_placement_left___p-p5e{transition:transform 225ms cubic-bezier(0,0,.2,1) 0ms}.Overlay__enter___v7DoD .Overlay__popup_placement_top___ERdxO{transform:translateY(-100%)}.Overlay__enter___v7DoD .Overlay__popup_placement_right___nL79b{transform:translateX(100%)}.Overlay__enter___v7DoD .Overlay__popup_placement_bottom___MJb6v{transform:translateY(100%)}.Overlay__enter___v7DoD .Overlay__popup_placement_left___p-p5e{transform:translateX(-100%)}.Overlay__enterActive___RFXzo .Overlay__popup_placement_top___ERdxO,.Overlay__enterActive___RFXzo .Overlay__popup_placement_bottom___MJb6v{transform:translateY(0)}.Overlay__enterActive___RFXzo .Overlay__popup_placement_left___p-p5e,.Overlay__enterActive___RFXzo .Overlay__popup_placement_right___nL79b{transform:translateX(0)}.Overlay__exit___E0PkA .Overlay__popup_placement_top___ERdxO,.Overlay__exit___E0PkA .Overlay__popup_placement_bottom___MJb6v{transform:translateY(0)}.Overlay__exit___E0PkA .Overlay__popup_placement_left___p-p5e,.Overlay__exit___E0PkA .Overlay__popup_placement_right___nL79b{transform:translateX(0)}.Overlay__exitActive___a2xd2 .Overlay__popup_placement_top___ERdxO{transform:translateY(-100%)}.Overlay__exitActive___a2xd2 .Overlay__popup_placement_right___nL79b{transform:translateX(100%)}.Overlay__exitActive___a2xd2 .Overlay__popup_placement_bottom___MJb6v{transform:translateY(100%)}.Overlay__exitActive___a2xd2 .Overlay__popup_placement_left___p-p5e{transform:translateX(-100%)}.Overlay__errorContainer___6Vqfn{padding-top:var(--pds-spacing-3xl);padding-bottom:var(--pds-spacing-5xl)}.Overlay__errorContainerLoading___1NWwx{opacity:.4}.Overlay__errorIcon___B2x3n{width:180px;height:161px;margin:0 auto var(--pds-spacing-m)}.Overlay__errorTitle___xzjW5{font-weight:700;font-size:var(--pds-font-size-h4);text-align:center;margin-bottom:var(--pds-spacing-s);line-height:var(--pds-line-height)}.Overlay__errorDescription___9ITQZ{text-align:center;margin-bottom:var(--pds-spacing-l);line-height:var(--pds-line-height)}.Overlay__errorWrapReloadButton___TztMO{text-align:center;margin-bottom:var(--pds-spacing-l)}.Overlay__errorWrapCloseButton___6pk7M{text-align:center}.Overlay__errorCloseButtonLoading___4NTmf{pointer-events:none}
+.Overlay__root___-yvLz {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.Overlay__backdrop___MKZgL {
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.Overlay__popup___RJENA {
+    z-index: 1200;
+    position: fixed;
+    background: var(--white);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    transform: none;
+}
+
+.Overlay__popup_placement_top___ERdxO,
+.Overlay__popup_placement_bottom___MJb6v {
+    right: 0;
+    left: 0;
+}
+
+.Overlay__popup_placement_right___nL79b,
+.Overlay__popup_placement_left___p-p5e {
+    top: 0;
+    bottom: 0;
+}
+
+.Overlay__popup_placement_top___ERdxO {
+    top: 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 0 0 var(--pds-round-3xl) var(--pds-round-3xl);
+}
+
+.Overlay__popup_placement_bottom___MJb6v {
+    bottom: 0;
+    box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.1);
+    border-radius: var(--pds-round-3xl) var(--pds-round-3xl) 0 0;
+}
+
+.Overlay__popup_placement_right___nL79b {
+    right: 0;
+    box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.1);
+    border-radius: var(--pds-round-3xl) 0 0 var(--pds-round-3xl);
+}
+
+.Overlay__popup_placement_left___p-p5e {
+    left: 0;
+    box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 0 var(--pds-round-3xl) var(--pds-round-3xl) 0;
+}
+
+.Overlay__content___uHLyZ {
+    order: 2;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.Overlay__content___uHLyZ:after {
+        clear: both;
+    }
+
+.Overlay__content___uHLyZ:before,
+    .Overlay__content___uHLyZ:after {
+        content: '';
+        display: table;
+    }
+
+/* header */
+
+.Overlay__header___ntf6X {
+    order: 1;
+    flex: 0;
+    box-sizing: border-box;
+    border-top-right-radius: inherit;
+    border-top-left-radius: inherit;
+}
+
+.Overlay__header___ntf6X:after {
+        clear: both;
+    }
+
+.Overlay__header___ntf6X:before,
+    .Overlay__header___ntf6X:after {
+        content: '';
+        display: table;
+    }
+
+.Overlay__header___ntf6X:empty ~ .Overlay__content___uHLyZ {
+        border-top-right-radius: inherit;
+        border-top-left-radius: inherit;
+    }
+
+.Overlay__header__grid___-OCio {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+    align-items: center;
+    min-height: 50px;
+    padding: var(--pds-spacing-xs);
+}
+
+.Overlay__header__item___gjOzy {
+    display: block;
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.Overlay__header__title___-s4aZ {
+    flex: 1;
+}
+
+.Overlay__header__titleText___zkpK2 {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    font-weight: 700;
+    font-size: var(--pds-font-size-h4);
+    line-height: var(--pds-line-height);
+}
+
+.Overlay__header__action___fzZrE {
+    min-width: 34px;
+}
+
+.Overlay__header__actionButton___CC-hv {
+    padding: 0;
+    width: 34px;
+    height: 34px;
+}
+
+.Overlay__header__actionIcon___LoRyP {
+    width: 24px;
+    height: 24px;
+}
+
+/* footer */
+
+.Overlay__footer___nE-cV {
+    order: 3;
+    flex: 0;
+    box-sizing: border-box;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+}
+
+.Overlay__footer___nE-cV:after {
+        clear: both;
+    }
+
+.Overlay__footer___nE-cV:before,
+    .Overlay__footer___nE-cV:after {
+        content: '';
+        display: table;
+    }
+
+.Overlay__footer___nE-cV:empty ~ .Overlay__content___uHLyZ {
+        border-bottom-right-radius: inherit;
+        border-bottom-left-radius: inherit;
+    }
+
+/* animation */
+
+.Overlay__enter___v7DoD,
+.Overlay__exit___E0PkA {
+    pointer-events: auto;
+}
+
+.Overlay__enterActive___RFXzo,
+.Overlay__exitActive___a2xd2 {
+    pointer-events: none;
+}
+
+.Overlay__enterActive___RFXzo .Overlay__popup_placement_top___ERdxO,
+    .Overlay__exitActive___a2xd2 .Overlay__popup_placement_top___ERdxO,
+    .Overlay__enterActive___RFXzo .Overlay__popup_placement_right___nL79b,
+    .Overlay__exitActive___a2xd2 .Overlay__popup_placement_right___nL79b,
+    .Overlay__enterActive___RFXzo .Overlay__popup_placement_bottom___MJb6v,
+    .Overlay__exitActive___a2xd2 .Overlay__popup_placement_bottom___MJb6v,
+    .Overlay__enterActive___RFXzo .Overlay__popup_placement_left___p-p5e,
+    .Overlay__exitActive___a2xd2 .Overlay__popup_placement_left___p-p5e {
+        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    }
+
+.Overlay__enter___v7DoD .Overlay__popup_placement_top___ERdxO {
+        transform: translateY(-100%);
+    }
+
+.Overlay__enter___v7DoD .Overlay__popup_placement_right___nL79b {
+        transform: translateX(100%);
+    }
+
+.Overlay__enter___v7DoD .Overlay__popup_placement_bottom___MJb6v {
+        transform: translateY(100%);
+    }
+
+.Overlay__enter___v7DoD .Overlay__popup_placement_left___p-p5e {
+        transform: translateX(-100%);
+    }
+
+.Overlay__enterActive___RFXzo .Overlay__popup_placement_top___ERdxO,
+    .Overlay__enterActive___RFXzo .Overlay__popup_placement_bottom___MJb6v {
+        transform: translateY(0);
+    }
+
+.Overlay__enterActive___RFXzo .Overlay__popup_placement_left___p-p5e,
+    .Overlay__enterActive___RFXzo .Overlay__popup_placement_right___nL79b {
+        transform: translateX(0);
+    }
+
+.Overlay__exit___E0PkA .Overlay__popup_placement_top___ERdxO,
+    .Overlay__exit___E0PkA .Overlay__popup_placement_bottom___MJb6v {
+        transform: translateY(0);
+    }
+
+.Overlay__exit___E0PkA .Overlay__popup_placement_left___p-p5e,
+    .Overlay__exit___E0PkA .Overlay__popup_placement_right___nL79b {
+        transform: translateX(0);
+    }
+
+.Overlay__exitActive___a2xd2 .Overlay__popup_placement_top___ERdxO {
+        transform: translateY(-100%);
+    }
+
+.Overlay__exitActive___a2xd2 .Overlay__popup_placement_right___nL79b {
+        transform: translateX(100%);
+    }
+
+.Overlay__exitActive___a2xd2 .Overlay__popup_placement_bottom___MJb6v {
+        transform: translateY(100%);
+    }
+
+.Overlay__exitActive___a2xd2 .Overlay__popup_placement_left___p-p5e {
+        transform: translateX(-100%);
+    }
+
+/* error */
+
+.Overlay__errorContainer___6Vqfn {
+    padding-top: var(--pds-spacing-3xl);
+    padding-bottom: var(--pds-spacing-5xl);
+}
+
+.Overlay__errorContainerLoading___1NWwx {
+    opacity: 0.4;
+}
+
+.Overlay__errorIcon___B2x3n {
+    width: 180px;
+    height: 161px;
+    margin: 0 auto var(--pds-spacing-m);
+}
+
+.Overlay__errorTitle___xzjW5 {
+    font-weight: 700;
+    font-size: var(--pds-font-size-h4);
+    text-align: center;
+    margin-bottom: var(--pds-spacing-s);
+    line-height: var(--pds-line-height);
+}
+
+.Overlay__errorDescription___9ITQZ {
+    text-align: center;
+    margin-bottom: var(--pds-spacing-l);
+    line-height: var(--pds-line-height);
+}
+
+.Overlay__errorWrapReloadButton___TztMO {
+    text-align: center;
+    margin-bottom: var(--pds-spacing-l);
+}
+
+.Overlay__errorWrapCloseButton___6pk7M {
+    text-align: center;
+}
+
+.Overlay__errorCloseButtonLoading___4NTmf {
+    pointer-events: none;
+}

package/Overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Overlay",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/PhotoGallery/cjs/style.development.css

@@ -1 +1,368 @@
-.PhotoGallery__scrolling___BeLzR{overflow:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}.PhotoGallery__scrolling___BeLzR::-webkit-scrollbar{display:none}.PhotoGallery__root___nJWgH{position:fixed;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);background:var(--white);z-index:1000;overflow:hidden}.PhotoGallery__layout___BDoOb{display:flex;flex-direction:column;height:100%}.PhotoGallery__layoutHeader___iNVA1{padding:var(--pds-spacing-l) var(--pds-spacing-m)}.PhotoGallery__layoutContent___C-jWr{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.PhotoGallery__layoutFooter___MQh-L{box-sizing:border-box;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;max-height:50%}.PhotoGallery__layoutSection___3FXm5{flex:1;min-width:0;min-height:0}.PhotoGallery__layoutPreviews___gQFQR{align-self:center;padding:var(--pds-spacing-m)0;min-width:0;min-height:0;max-width:100%}.PhotoGallery__layoutAdditional___pw0QV{box-sizing:border-box;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;max-height:50%}.PhotoGallery__headerTitle___NpSWI{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--pds-font-size-h3);font-weight:700;line-height:24px;padding-right:var(--pds-spacing-5xl);padding-left:var(--pds-spacing-5xl)}.PhotoGallery__headerClose___-B9Zg{position:absolute;right:0;top:0;margin:var(--pds-spacing-m)}.PhotoGallery__mainPhotoScrollControls___ckcap{height:100%;width:100%}.PhotoGallery__mainPhoto___-r4WP{display:flex;flex-wrap:nowrap;min-width:0;scroll-snap-type:x mandatory;width:100%;height:100%}.PhotoGallery__mainPhotoItem___Q7wDI{scroll-snap-align:center;scroll-snap-stop:always;flex:0 0 auto;width:100%;min-width:0;max-width:100%;overflow:hidden}.PhotoGallery__mainPhotoItem___Q7wDI+.PhotoGallery__mainPhotoItem___Q7wDI{margin-left:var(--pds-spacing-m)}.PhotoGallery__mainPhotoImage___NrcBT{display:block;outline:0;border:0;max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.PhotoGallery__mainPhotoIframe___kObZY{width:100%;height:100%;border:0}.PhotoGallery__preview___86-3f{display:flex;flex-wrap:nowrap;flex-direction:row;box-sizing:border-box;max-height:100%;max-width:100%;min-width:0}.PhotoGallery__previewItem___gnB8m{flex:0 0 auto;box-sizing:border-box;min-width:0;min-height:0}.PhotoGallery__previewItem___gnB8m:first-child{padding-left:var(--pds-spacing-m)}.PhotoGallery__previewItem___gnB8m:last-child{padding-right:var(--pds-spacing-m)}.PhotoGallery__previewItem___gnB8m+.PhotoGallery__previewItem___gnB8m{margin-left:var(--pds-spacing-xs)}.PhotoGallery__previewButton___L4PR-{display:block;position:relative;overflow:hidden;border-radius:var(--pds-round-m);border:1px solid var(--black-400);-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.PhotoGallery__previewButton___L4PR-:disabled{border-color:var(--violet-500)}.PhotoGallery__previewImage___8dsDI{display:block;outline:0;border:0;max-width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.PhotoGallery__videoPlayLabel___2kU58{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--black-100);width:45%;height:45%;min-width:24px;min-height:24px;max-width:48px;max-height:48px;display:flex;align-items:center;justify-content:center;color:var(--black-900);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PhotoGallery__videoPlayLabelIcon___WR7T8{width:100%;height:100%;min-width:10px;min-height:10px;max-width:16px;max-height:16px}.PhotoGallery__enter___sM8Qu,.PhotoGallery__exit___veHZr{pointer-events:auto}.PhotoGallery__enterActive___VP4oy,.PhotoGallery__exitActive___AMPJ3{pointer-events:none;transition:transform 240ms cubic-bezier(0,0,.2,1) 0ms,opacity 240ms cubic-bezier(0,0,.2,1) 0ms}.PhotoGallery__enter___sM8Qu{transform:translate(-50%,100%);opacity:0}.PhotoGallery__enterActive___VP4oy{transform:translate(-50%,-50%);opacity:1}.PhotoGallery__exit___veHZr{transform:translate(-50%,-50%);opacity:1}.PhotoGallery__exitActive___AMPJ3{transform:translate(-50%,100%);opacity:0}@media only screen and (min-width:960px){.PhotoGallery__root___nJWgH{max-width:80%;max-height:80%;border-radius:var(--pds-round-m)}.PhotoGallery__layoutHeader___iNVA1{padding:var(--pds-spacing-3xl)}.PhotoGallery__layoutContent___C-jWr{flex-direction:row;padding:0 var(--pds-spacing-3xl) var(--pds-spacing-3xl)}.PhotoGallery__layoutSection___3FXm5{order:2}.PhotoGallery__layoutPreviews___gQFQR{align-self:flex-start;order:1;padding:0;margin-right:var(--pds-spacing-xl);height:100%}.PhotoGallery__layoutAdditional___pw0QV{order:3;margin-left:var(--pds-spacing-xl);height:100%;max-height:none;max-width:50%}.PhotoGallery__layoutFooter___MQh-L{margin:0 var(--pds-spacing-3xl) var(--pds-spacing-3xl)}.PhotoGallery__headerTitle___NpSWI{padding-left:0;text-align:left;font-weight:400;font-size:var(--pds-font-size-h2)}.PhotoGallery__preview___86-3f{flex-direction:column}.PhotoGallery__previewItem___gnB8m:first-child{padding-left:0}.PhotoGallery__previewItem___gnB8m:last-child{padding-right:0}.PhotoGallery__previewItem___gnB8m+.PhotoGallery__previewItem___gnB8m{margin-left:0;margin-top:var(--pds-spacing-xs)}.PhotoGallery__enter___sM8Qu{transform:translate(-50%,-46%);opacity:0}.PhotoGallery__enterActive___VP4oy{transform:translate(-50%,-50%);opacity:1}.PhotoGallery__exit___veHZr{transform:translate(-50%,-50%);opacity:1}.PhotoGallery__exitActive___AMPJ3{transform:translate(-50%,-46%);opacity:0}}
+.PhotoGallery__scrolling___BeLzR {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.PhotoGallery__scrolling___BeLzR::-webkit-scrollbar {
+        display: none;
+    }
+
+.PhotoGallery__root___nJWgH {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+    background: var(--white);
+    z-index: 1000;
+    overflow: hidden;
+}
+
+@media only screen and (min-width: 960px) {
+    .PhotoGallery__root___nJWgH {
+        max-width: 80%;
+        max-height: 80%;
+        border-radius: var(--pds-round-m);
+    }
+}
+
+/* layout */
+
+.PhotoGallery__layout___BDoOb {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.PhotoGallery__layoutHeader___iNVA1 {
+    padding: var(--pds-spacing-l) var(--pds-spacing-m);
+}
+
+.PhotoGallery__layoutContent___C-jWr {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.PhotoGallery__layoutFooter___MQh-L {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 50%;
+}
+
+.PhotoGallery__layoutSection___3FXm5 {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+}
+
+.PhotoGallery__layoutPreviews___gQFQR {
+    align-self: center;
+    padding: var(--pds-spacing-m) 0;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100%;
+}
+
+.PhotoGallery__layoutAdditional___pw0QV {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 50%;
+}
+
+@media only screen and (min-width: 960px) {
+    .PhotoGallery__layoutHeader___iNVA1 {
+        padding: var(--pds-spacing-3xl);
+    }
+
+    .PhotoGallery__layoutContent___C-jWr {
+        flex-direction: row;
+        padding: 0 var(--pds-spacing-3xl) var(--pds-spacing-3xl);
+    }
+
+    .PhotoGallery__layoutSection___3FXm5 {
+        order: 2;
+    }
+
+    .PhotoGallery__layoutPreviews___gQFQR {
+        align-self: flex-start;
+        order: 1;
+        padding: 0;
+        margin-right: var(--pds-spacing-xl);
+        height: 100%;
+    }
+
+    .PhotoGallery__layoutAdditional___pw0QV {
+        order: 3;
+        margin-left: var(--pds-spacing-xl);
+        height: 100%;
+        max-height: none;
+        max-width: 50%;
+    }
+
+    .PhotoGallery__layoutFooter___MQh-L {
+        margin: 0 var(--pds-spacing-3xl) var(--pds-spacing-3xl);
+    }
+}
+
+/* header */
+
+.PhotoGallery__header___meCSL {
+}
+
+.PhotoGallery__headerTitle___NpSWI {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    font-size: var(--pds-font-size-h3);
+    font-weight: bold;
+    line-height: 24px;
+    padding-right: var(--pds-spacing-5xl);
+    padding-left: var(--pds-spacing-5xl);
+}
+
+@media only screen and (min-width: 960px) {
+
+.PhotoGallery__headerTitle___NpSWI {
+        padding-left: 0;
+        text-align: left;
+        font-weight: normal;
+        font-size: var(--pds-font-size-h2);
+}
+    }
+
+.PhotoGallery__headerClose___-B9Zg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: var(--pds-spacing-m);
+}
+
+/* MainPhotos.tsx */
+
+.PhotoGallery__mainPhotoScrollControls___ckcap {
+    height: 100%;
+    width: 100%;
+}
+
+.PhotoGallery__mainPhoto___-r4WP {
+    display: flex;
+    flex-wrap: nowrap;
+    min-width: 0;
+    scroll-snap-type: x mandatory;
+    width: 100%;
+    height: 100%;
+}
+
+.PhotoGallery__mainPhotoItem___Q7wDI {
+    scroll-snap-align: center;
+    scroll-snap-stop: always;
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.PhotoGallery__mainPhotoItem___Q7wDI + .PhotoGallery__mainPhotoItem___Q7wDI {
+        margin-left: var(--pds-spacing-m);
+    }
+
+.PhotoGallery__mainPhotoImage___NrcBT {
+    display: block;
+    outline: none;
+    border: 0;
+    max-width: 100%;
+    max-height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
+}
+
+.PhotoGallery__mainPhotoIframe___kObZY {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+/* PreviewPhotos.tsx */
+
+.PhotoGallery__preview___86-3f {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    box-sizing: border-box;
+    max-height: 100%;
+    max-width: 100%;
+    min-width: 0;
+}
+
+.PhotoGallery__previewItem___gnB8m {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+}
+
+.PhotoGallery__previewItem___gnB8m:first-child {
+        padding-left: var(--pds-spacing-m);
+    }
+
+.PhotoGallery__previewItem___gnB8m:last-child {
+        padding-right: var(--pds-spacing-m);
+    }
+
+.PhotoGallery__previewItem___gnB8m + .PhotoGallery__previewItem___gnB8m {
+        margin-left: var(--pds-spacing-xs);
+    }
+
+.PhotoGallery__previewButton___L4PR- {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--pds-round-m);
+    border: 1px solid var(--black-400);
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+}
+
+.PhotoGallery__previewButton___L4PR-:disabled {
+        border-color: var(--violet-500);
+    }
+
+.PhotoGallery__previewImage___8dsDI {
+    display: block;
+    outline: none;
+    border: 0;
+    max-width: 100%;
+    max-height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+}
+
+@media only screen and (min-width: 960px) {
+    .PhotoGallery__preview___86-3f {
+        flex-direction: column;
+    }
+        .PhotoGallery__previewItem___gnB8m:first-child {
+            padding-left: 0;
+        }
+
+        .PhotoGallery__previewItem___gnB8m:last-child {
+            padding-right: 0;
+        }
+
+        .PhotoGallery__previewItem___gnB8m + .PhotoGallery__previewItem___gnB8m {
+            margin-left: 0;
+            margin-top: var(--pds-spacing-xs);
+        }
+}
+
+/* video */
+
+.PhotoGallery__videoPlayLabel___2kU58 {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: var(--black-100);
+    width: 45%;
+    height: 45%;
+    min-width: 24px;
+    min-height: 24px;
+    max-width: 48px;
+    max-height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--black-900);
+    pointer-events: none;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+}
+
+.PhotoGallery__videoPlayLabelIcon___WR7T8 {
+    width: 100%;
+    height: 100%;
+    min-width: 10px;
+    min-height: 10px;
+    max-width: 16px;
+    max-height: 16px;
+}
+
+/* animation */
+
+.PhotoGallery__enter___sM8Qu,
+.PhotoGallery__exit___veHZr {
+    pointer-events: auto;
+}
+
+.PhotoGallery__enterActive___VP4oy,
+.PhotoGallery__exitActive___AMPJ3 {
+    pointer-events: none;
+    transition:
+        transform 240ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+        opacity 240ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.PhotoGallery__enter___sM8Qu {
+    transform: translate(-50%, 100%);
+    opacity: 0;
+}
+
+.PhotoGallery__enterActive___VP4oy {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+}
+
+.PhotoGallery__exit___veHZr {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+}
+
+.PhotoGallery__exitActive___AMPJ3 {
+    transform: translate(-50%, 100%);
+    opacity: 0;
+}
+
+@media only screen and (min-width: 960px) {
+    .PhotoGallery__enter___sM8Qu {
+        transform: translate(-50%, -46%);
+        opacity: 0;
+    }
+
+    .PhotoGallery__enterActive___VP4oy {
+        transform: translate(-50%, -50%);
+        opacity: 1;
+    }
+
+    .PhotoGallery__exit___veHZr {
+        transform: translate(-50%, -50%);
+        opacity: 1;
+    }
+
+    .PhotoGallery__exitActive___AMPJ3 {
+        transform: translate(-50%, -46%);
+        opacity: 0;
+    }
+}