@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.style.js

@@ -1,38 +1,80 @@
-"use strict";var e=require("styled-components"),i=require("../shared/clickable-icon/clickable-icon.js"),t=require("../shared/image-placeholder/image-placeholder.js"),a=require("../typography/index.js"),r=require("../v3_theme/index.js"),o=require("./stateful-image.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(e);const c=s.default(i.ClickableIcon)`
+"use strict";var e=require("styled-components"),i=require("../shared/clickable-icon/clickable-icon.js"),t=require("../shared/image-placeholder/image-placeholder.js"),o=require("../typography/index.js"),a=require("../v3_theme/index.js"),n=require("./stateful-image.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e);const d=l.default(i.ClickableIcon)`
     padding: 0;
     border-radius: 100%;
-    background: ${r.V3_Colour.bg};
-    color: ${r.V3_Colour["icon-primary"]};
+    background: ${a.V3_Colour.bg};
+    color: ${a.V3_Colour["icon-primary"]};
     height: 2.5rem;
     width: 2.5rem;
-    box-shadow: ${r.V3_Shadow["md-strong"]};
+    box-shadow: ${a.V3_Shadow["md-strong"]};
 
     svg {
         height: 1.5rem;
         width: 1.5rem;
     }
-`,d=s.default(c)`
-    position: absolute;
-    top: ${i=>e.css`calc(${r.V3_Spacing["spacing-48"]} + ${i.$insetTop||0}px)`};
-    right: ${i=>e.css`calc(${r.V3_Spacing["spacing-48"]} + ${i.$insetRight||0}px)`};
-    z-index: 5;
 
-    ${r.V3_MediaQuery.MaxWidth.sm} {
-        top: ${i=>e.css`calc(${r.V3_Spacing["spacing-20"]} + ${i.$insetTop||0}px)`};
-        right: ${i=>e.css`calc(${r.V3_Spacing["spacing-20"]} + ${i.$insetRight||0}px)`};
+    &:focus {
+        outline: none;
     }
-`,l=s.default(c)`
-    position: absolute;
-    top: ${i=>e.css`calc(${r.V3_Spacing["spacing-48"]} + ${i.$insetTop||0}px)`};
-    right: ${i=>e.css`calc(2.5rem + ${r.V3_Spacing["spacing-48"]} + ${r.V3_Spacing["spacing-16"]} + ${i.$insetRight||0}px)`};
-
-    z-index: 5;
 
-    ${r.V3_MediaQuery.MaxWidth.sm} {
-        top: ${i=>e.css`calc(${r.V3_Spacing["spacing-20"]} + ${i.$insetTop||0}px)`};
-        right: ${i=>e.css`calc(2.5rem + ${r.V3_Spacing["spacing-20"]} + ${r.V3_Spacing["spacing-16"]} + ${i.$insetRight||0}px)`};
+    &:focus-visible {
+        outline: ${a.V3_Border["width-020"]} solid ${a.V3_Colour["border-selected"]};
+        outline-offset: 2px;
     }
-`,p=s.default(c)`
+`,s=l.default.div`
+    order: -1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${a.V3_Spacing["spacing-16"]};
+
+    ${i=>i.$hasFileInfo?e.css`
+                  flex-shrink: 0;
+                  background-color: ${a.V3_Colour["bg-inverse"]};
+                  padding-top: calc(
+                      ${a.V3_Spacing["spacing-24"]} + ${i.$insetTop||0}px
+                  );
+                  padding-bottom: ${a.V3_Spacing["spacing-24"]};
+                  padding-left: calc(
+                      ${a.V3_Spacing["spacing-32"]} + ${i.$insetLeft||0}px
+                  );
+                  padding-right: calc(
+                      ${a.V3_Spacing["spacing-32"]} + ${i.$insetRight||0}px
+                  );
+
+                  ${a.V3_MediaQuery.MaxWidth.sm} {
+                      padding-top: calc(
+                          ${a.V3_Spacing["spacing-16"]} + ${i.$insetTop||0}px
+                      );
+                      padding-bottom: ${a.V3_Spacing["spacing-16"]};
+                      padding-left: calc(
+                          ${a.V3_Spacing["spacing-20"]} + ${i.$insetLeft||0}px
+                      );
+                      padding-right: calc(
+                          ${a.V3_Spacing["spacing-20"]} + ${i.$insetRight||0}px
+                      );
+                  }
+              `:e.css`
+                  position: absolute;
+                  top: calc(
+                      ${a.V3_Spacing["spacing-48"]} + ${i.$insetTop||0}px
+                  );
+                  right: calc(
+                      ${a.V3_Spacing["spacing-48"]} + ${i.$insetRight||0}px
+                  );
+                  z-index: 5;
+
+                  ${a.V3_MediaQuery.MaxWidth.sm} {
+                      top: calc(
+                          ${a.V3_Spacing["spacing-20"]} + ${i.$insetTop||0}px
+                      );
+                      right: calc(
+                          ${a.V3_Spacing["spacing-20"]} + ${i.$insetRight||0}px
+                      );
+                  }
+              `}
+`,c=l.default(d)``,p=l.default(d)`
+    color: ${a.V3_Colour["icon-error"]};
+`,g=l.default(d)``,h=l.default(d)`
     z-index: 4;
     position: absolute;
     top: 50%;
@@ -40,44 +82,54 @@
 
     ${i=>"left"===i.$position&&e.css`
             left: calc(
-                ${r.V3_Spacing["spacing-48"]} + ${i.$insetLeft||0}px
+                ${a.V3_Spacing["spacing-48"]} + ${i.$insetLeft||0}px
             );
-            ${r.V3_MediaQuery.MaxWidth.sm} {
+
+            ${a.V3_MediaQuery.MaxWidth.sm} {
                 left: calc(
-                    ${r.V3_Spacing["spacing-20"]} + ${i.$insetLeft||0}px
+                    ${a.V3_Spacing["spacing-20"]} + ${i.$insetLeft||0}px
                 );
             }
         `}
 
     ${i=>"right"===i.$position&&e.css`
             right: calc(
-                ${r.V3_Spacing["spacing-48"]} + ${i.$insetRight||0}px
+                ${a.V3_Spacing["spacing-48"]} + ${i.$insetRight||0}px
             );
-            ${r.V3_MediaQuery.MaxWidth.sm} {
+
+            ${a.V3_MediaQuery.MaxWidth.sm} {
                 right: calc(
-                    ${r.V3_Spacing["spacing-20"]} + ${i.$insetRight||0}px
+                    ${a.V3_Spacing["spacing-20"]} + ${i.$insetRight||0}px
                 );
             }
         `}
-`,g=s.default.div`
+`,u=l.default.div`
+    position: relative;
+    width: 100%;
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+`,$=l.default.div`
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 100%;
-`,h=s.default.div`
+    flex: 1;
+    min-height: 0;
+`,x=l.default.div`
     user-select: none;
     position: relative;
     display: block;
     overflow: hidden;
     width: 100%;
-    height: 100%;
-`,u=s.default.div`
+    flex: 1;
+    min-height: 0;
+`,f=l.default.div`
     display: block;
     user-select: none;
     height: 100%;
     overflow: hidden;
     touch-action: pan-y;
-`,$=s.default.div`
+`,m=l.default.div`
     display: flex;
     transition: all 450ms ease-out 0s;
     position: relative;
@@ -85,34 +137,49 @@
     user-select: none;
     width: 100%;
     height: 100%;
-`,x=s.default.div`
+`,_=l.default.div`
     flex: 0 0 100%;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
+
     .react-transform-wrapper {
         height: 100%;
         width: 100%;
     }
+
     .react-transform-component {
         height: 100%;
         width: 100%;
     }
-`,f=s.default(o.StatefulImage)`
+`,V=l.default.div`
+    height: 100%;
+    width: 100%;
+    outline: none;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: ${a.V3_Border["width-020"]} solid ${a.V3_Colour["border-selected"]};
+        outline-offset: -2px;
+    }
+`,b=l.default(n.StatefulImage)`
     height: 100%;
     width: 100%;
-    border-radius: ${r.V3_Radius.none};
-`,m=s.default(t.ImagePlaceholder)`
+    border-radius: ${a.V3_Radius.none};
+`,y=l.default(t.ImagePlaceholder)`
     width: 60vw;
     height: auto;
     max-height: 100%;
-    border-radius: ${r.V3_Radius.none};
+    border-radius: ${a.V3_Radius.none};
     aspect-ratio: 4 / 3;
-`,_=s.default.div`
+`,w=l.default.div`
     display: flex;
     justify-content: center;
-    padding: ${r.V3_Spacing["spacing-16"]};
+    padding: ${a.V3_Spacing["spacing-16"]};
     position: absolute;
     bottom: 0;
     left: 0;
@@ -120,51 +187,51 @@
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
-`,V=s.default(a.Typography.BodyXS)`
+`,v=l.default(o.Typography.BodyXS)`
     display: inline-flex;
-    padding: ${r.V3_Spacing["spacing-4"]} ${r.V3_Spacing["spacing-16"]};
+    padding: ${a.V3_Spacing["spacing-4"]} ${a.V3_Spacing["spacing-16"]};
     justify-content: center;
     align-items: center;
-    border-radius: ${r.V3_Radius.full};
-    background-color: ${r.V3_Colour.bg};
+    border-radius: ${a.V3_Radius.full};
+    background-color: ${a.V3_Colour.bg};
     text-align: center;
-`,b=s.default.div`
+`,S=l.default.div`
     flex-shrink: 0;
     display: flex;
     overflow: auto;
-    background-color: ${r.V3_Colour["bg-inverse"]};
+    background-color: ${a.V3_Colour["bg-inverse"]};
     padding: ${i=>e.css`
-                ${r.V3_Spacing["spacing-24"]} ${r.V3_Spacing["spacing-16"]} calc(${r.V3_Spacing["spacing-24"]} + ${i.$insetBottom||0}px);
+                ${a.V3_Spacing["spacing-24"]} ${a.V3_Spacing["spacing-16"]} calc(${a.V3_Spacing["spacing-24"]} + ${i.$insetBottom||0}px);
             `}
-        ${r.V3_MediaQuery.MaxWidth.sm} {
+        ${a.V3_MediaQuery.MaxWidth.sm} {
         padding: ${i=>e.css`
-                ${r.V3_Spacing["spacing-16"]} ${r.V3_Spacing["spacing-20"]} calc(${r.V3_Spacing["spacing-16"]} + ${i.$insetBottom||0}px);
+                ${a.V3_Spacing["spacing-16"]} ${a.V3_Spacing["spacing-20"]} calc(${a.V3_Spacing["spacing-16"]} + ${i.$insetBottom||0}px);
             `};
     }
-`,y=s.default.div`
+`,C=l.default.div`
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    gap: ${r.V3_Spacing["spacing-16"]};
+    gap: ${a.V3_Spacing["spacing-16"]};
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
-`,S=s.default.div`
+`,I=l.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100px;
     width: 100px;
 
-    ${r.V3_MediaQuery.MaxWidth.sm} {
+    ${a.V3_MediaQuery.MaxWidth.sm} {
         height: 64px;
         width: 64px;
     }
-`,w=s.default.div`
+`,M=l.default.div`
     cursor: pointer;
-    background-color: ${r.V3_Colour["bg-inverse"]};
-    border-radius: ${r.V3_Radius.md};
-    border: ${r.V3_Border.solid} transparent;
+    background-color: ${a.V3_Colour["bg-inverse"]};
+    border-radius: ${a.V3_Radius.md};
+    border: ${a.V3_Border.solid} transparent;
     box-sizing: content-box;
 
     flex-shrink: 0;
@@ -175,31 +242,57 @@
     height: 92px;
     width: 92px;
 
-    ${r.V3_MediaQuery.MaxWidth.sm} {
+    ${a.V3_MediaQuery.MaxWidth.sm} {
         height: 60px;
         width: 60px;
     }
 
     ${i=>i.$active?e.css`
-                  border-width: ${r.V3_Border["width-040"]};
-                  border-color: ${r.V3_Colour["border-selected"]};
+                  border-width: ${a.V3_Border["width-040"]};
+                  border-color: ${a.V3_Colour["border-selected"]};
 
-                  ${r.V3_MediaQuery.MaxWidth.sm} {
-                      border-width: ${r.V3_Border["width-020"]};
+                  ${a.V3_MediaQuery.MaxWidth.sm} {
+                      border-width: ${a.V3_Border["width-020"]};
                   }
 
                   &:hover {
-                      border-color: ${r.V3_Colour["border-selected-hover"]};
+                      border-color: ${a.V3_Colour["border-selected-hover"]};
                   }
               `:e.css`
-                  border-width: ${r.V3_Border["width-010"]};
+                  border-width: ${a.V3_Border["width-010"]};
 
                   &:hover {
-                      border-color: ${r.V3_Colour["border-hover"]};
+                      border-color: ${a.V3_Colour["border-hover"]};
                   }
               `};
-`,v=s.default(o.StatefulImage)`
+`,B=l.default(n.StatefulImage)`
     height: 100%;
     width: 100%;
-`;exports.ArrowButton=p,exports.BoxChip=_,exports.Chip=V,exports.CloseButton=d,exports.ImageGalleryContainer=g,exports.ImageGallerySlide=x,exports.ImageGallerySlides=$,exports.ImageGallerySwipe=u,exports.ImageGalleryWrapper=h,exports.MagnifierButton=l,exports.SlideImage=f,exports.SlidePlaceholderImage=m,exports.ThumbnailContainer=b,exports.ThumbnailImage=v,exports.ThumbnailItem=w,exports.ThumbnailItemContainer=S,exports.ThumbnailWrapper=y;
+`,j=l.default.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ${a.V3_Spacing["spacing-8"]};
+    overflow: hidden;
+    min-width: 0;
+    min-height: calc(
+        ${a.V3_Font.Spec["body-lh-baseline"]} + ${a.V3_Spacing["spacing-8"]} +
+            ${a.V3_Font.Spec["body-lh-md"]}
+    );
+    ${i=>i.$centerContent&&e.css`
+            justify-content: center;
+        `}
+`,T=l.default(o.Typography.BodyBL)`
+    color: ${a.V3_Colour["text-inverse"]};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+`,k=l.default(o.Typography.BodyMD)`
+    color: ${a.V3_Colour["text-inverse"]};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+`;exports.ArrowButton=h,exports.BoxChip=w,exports.CarouselModalContent=u,exports.Chip=v,exports.CloseButton=c,exports.DeleteButton=p,exports.FileInfoFileName=T,exports.FileInfoFileSize=k,exports.FileInfoTextWrapper=j,exports.FocusableImageRegion=V,exports.ImageGalleryContainer=$,exports.ImageGallerySlide=_,exports.ImageGallerySlides=m,exports.ImageGallerySwipe=f,exports.ImageGalleryWrapper=x,exports.MagnifierButton=g,exports.SlideImage=b,exports.SlidePlaceholderImage=y,exports.ThumbnailContainer=S,exports.ThumbnailImage=B,exports.ThumbnailItem=M,exports.ThumbnailItemContainer=I,exports.ThumbnailWrapper=C,exports.TopActionButtons=s;
 //# sourceMappingURL=fullscreen-image-carousel.style.js.map

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport type { InsetStyleProps } from \"../shared/types\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${V3_Colour[\"bg\"]};\n    color: ${V3_Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n`;\n\nexport const CloseButton = styled(IconButton)<InsetStyleProps>`\n    position: absolute;\n    top: ${(props) =>\n        css`calc(${V3_Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px)`};\n    right: ${(props) =>\n        css`calc(${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px)`};\n    z-index: 5;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        top: ${(props) =>\n            css`calc(${V3_Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px)`};\n        right: ${(props) =>\n            css`calc(${V3_Spacing[\"spacing-20\"]} + ${\n                props.$insetRight || 0\n            }px)`};\n    }\n`;\n\nexport const MagnifierButton = styled(IconButton)<InsetStyleProps>`\n    position: absolute;\n    top: ${(props) =>\n        css`calc(${V3_Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px)`};\n    right: ${\n        (props) =>\n            css`calc(2.5rem + ${V3_Spacing[\"spacing-48\"]} + ${\n                V3_Spacing[\"spacing-16\"]\n            } + ${props.$insetRight || 0}px)` // close button + space from screen + gap between buttons\n    };\n\n    z-index: 5;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        top: ${(props) =>\n            css`calc(${V3_Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px)`};\n        right: ${\n            (props) =>\n                css`calc(2.5rem + ${V3_Spacing[\"spacing-20\"]} + ${\n                    V3_Spacing[\"spacing-16\"]\n                } + ${props.$insetRight || 0}px)` // close button + space from screen + gap between buttons\n        };\n    }\n`;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px\n            );\n            ${V3_MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n            );\n            ${V3_MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${V3_Radius[\"full\"]};\n    background-color: ${V3_Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\n                    \"spacing-16\"\n                ]} calc(${V3_Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\n                    \"spacing-20\"\n                ]} calc(${V3_Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${V3_Border[\"width-040\"]};\n                  border-color: ${V3_Colour[\"border-selected\"]};\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      border-width: ${V3_Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${V3_Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n"],"names":["IconButton","styled","ClickableIcon","V3_Colour","V3_Shadow","CloseButton","props","css","V3_Spacing","$insetTop","$insetRight","V3_MediaQuery","MaxWidth","sm","MagnifierButton","ArrowButton","$position","$insetLeft","ImageGalleryContainer","div","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","SlideImage","StatefulImage","V3_Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","V3_Border","$active","ThumbnailImage"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport type { InsetStyleProps } from \"../shared/types\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${V3_Colour[\"bg\"]};\n    color: ${V3_Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${V3_Border[\"width-020\"]} solid ${V3_Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${V3_Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${V3_Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${V3_Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${V3_Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${V3_Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${V3_Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${V3_Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${V3_Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${V3_Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px\n            );\n\n            ${V3_MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(\n                ${V3_Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n            );\n\n            ${V3_MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${V3_Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${V3_Border[\"width-020\"]} solid ${V3_Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${V3_Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${V3_Radius[\"full\"]};\n    background-color: ${V3_Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\n                    \"spacing-16\"\n                ]} calc(${V3_Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\n                    \"spacing-20\"\n                ]} calc(${V3_Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${V3_Colour[\"bg-inverse\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${V3_Border[\"width-040\"]};\n                  border-color: ${V3_Colour[\"border-selected\"]};\n\n                  ${V3_MediaQuery.MaxWidth.sm} {\n                      border-width: ${V3_Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${V3_Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${V3_Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${V3_Font.Spec[\"body-lh-baseline\"]} + ${V3_Spacing[\"spacing-8\"]} +\n            ${V3_Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${V3_Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","V3_Colour","V3_Shadow","V3_Border","TopActionButtons","div","V3_Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","V3_MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","V3_Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","V3_Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"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"}

package/cjs/fullscreen-image-carousel/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./fullscreen-image-carousel.js");exports.FullscreenImageCarousel=e.FullscreenImageCarousel;
+"use strict";var e=require("./fullscreen-image-carousel.js");exports.Component=e.Component,exports.FullscreenImageCarousel=e.FullscreenImageCarousel;
 //# sourceMappingURL=index.js.map

package/cjs/fullscreen-image-carousel/stateful-image.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("react"),r=require("../animations/loading-dots/loading-dots.js");require("../animations/loading-dots-spinner/loading-dots-spinner.js"),require("../animations/loading-spinner/loading-spinner.js"),require("styled-components");var i=require("./stateful-image.style.js");exports.StatefulImage=({src:t,className:a,alt:n,fit:o,placeholder:l,retrieveImageDimension:d,setDimension:u})=>{const[c,g]=s.useState(!0),[m,h]=s.useState();s.useEffect((()=>{g(!0),h(void 0);const e=new Image;e.src=t,e.onload=()=>{d&&u&&u({src:t,width:e.width,height:e.height}),g(!1)},e.onerror=e=>{g(!1),h(e)}}),[t]);return e.jsx(i.ImageWrapper,{className:a,children:m?null!=l?l:e.jsx(i.DefaultPlaceholder,{}):c?e.jsx(r.LoadingDots,{}):e.jsx(i.ImageBox,{src:t,alt:n,$fit:o})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),s=require("../animations/loading-dots/loading-dots.js");require("../animations/loading-dots-spinner/loading-dots-spinner.js"),require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var t=require("./stateful-image.style.js");exports.StatefulImage=({src:i,className:a,alt:n,fit:o,placeholder:l,retrieveImageDimension:d,setDimension:u})=>{const[c,m]=r.useState(!0),[g,h]=r.useState();r.useEffect((()=>{m(!0),h(void 0);const e=new Image;e.src=i,e.onload=()=>{d&&u&&u({src:i,width:e.width,height:e.height}),m(!1)},e.onerror=e=>{m(!1),h(e)}}),[i]);return e.jsx(t.ImageWrapper,{className:a,children:g?null!=l?l:e.jsx(t.DefaultPlaceholder,{}):c?e.jsx(s.LoadingDots,{}):e.jsx(t.ImageBox,{src:i,alt:n,$fit:o})})};
 //# sourceMappingURL=stateful-image.js.map

package/cjs/fullscreen-image-carousel/stateful-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"stateful-image.js","sources":["../../../src/fullscreen-image-carousel/stateful-image.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { LoadingDots } from \"../animations\";\nimport {\n    DefaultPlaceholder,\n    ImageBox,\n    ImageWrapper,\n} from \"./stateful-image.style\";\n\nexport interface StatefulImageProps {\n    src: string;\n    className?: string | undefined;\n    alt?: string | undefined;\n    fit?: React.CSSProperties[\"objectFit\"] | undefined;\n    placeholder?: React.ReactNode | undefined;\n    retrieveImageDimension?: boolean;\n    setDimension?: ({\n        src,\n        width,\n        height,\n    }: {\n        src: string;\n        width: number;\n        height: number;\n    }) => void;\n}\n\nexport const StatefulImage = ({\n    src,\n    className,\n    alt,\n    fit,\n    placeholder,\n    retrieveImageDimension,\n    setDimension,\n}: StatefulImageProps) => {\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Event | string>();\n\n    useEffect(() => {\n        setLoading(true);\n        setError(undefined);\n\n        const img = new Image();\n        img.src = src;\n        img.onload = () => {\n            if (!!retrieveImageDimension && setDimension) {\n                setDimension({\n                    src,\n                    width: img.width,\n                    height: img.height,\n                });\n            }\n\n            setLoading(false);\n        };\n        img.onerror = (e: Event | string) => {\n            setLoading(false);\n            setError(e);\n        };\n    }, [src]);\n\n    const renderContent = () => {\n        if (error) {\n            return placeholder ?? <DefaultPlaceholder />;\n        }\n\n        if (loading) {\n            return <LoadingDots />;\n        }\n\n        return <ImageBox src={src} alt={alt} $fit={fit} />;\n    };\n\n    return <ImageWrapper className={className}>{renderContent()}</ImageWrapper>;\n};\n"],"names":["src","className","alt","fit","placeholder","retrieveImageDimension","setDimension","loading","setLoading","useState","error","setError","useEffect","undefined","img","Image","onload","width","height","onerror","e","_jsx","ImageWrapper","children","DefaultPlaceholder","LoadingDots","ImageBox","$fit"],"mappings":"2VA4B6B,EACzBA,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,EAAAA,UAAS,IAChCC,EAAOC,GAAYF,aAE1BG,EAAAA,WAAU,KACNJ,GAAW,GACXG,OAASE,GAET,MAAMC,EAAM,IAAIC,MAChBD,EAAId,IAAMA,EACVc,EAAIE,OAAS,KACHX,GAA0BC,GAC5BA,EAAa,CACTN,MACAiB,MAAOH,EAAIG,MACXC,OAAQJ,EAAII,SAIpBV,GAAW,EAAM,EAErBM,EAAIK,QAAWC,IACXZ,GAAW,GACXG,EAASS,EAAE,CACd,GACF,CAACpB,IAcJ,OAAOqB,EAAAA,IAACC,EAAAA,aAAY,CAACrB,UAAWA,EAASsB,SAXjCb,EACON,QAAAA,EAAeiB,EAAAA,IAACG,EAAAA,mBAAkB,IAGzCjB,EACOc,EAAAA,IAACI,EAAAA,YAAW,IAGhBJ,EAAAA,IAACK,WAAQ,CAAC1B,IAAKA,EAAKE,IAAKA,EAAGyB,KAAQxB,KAG4B"}
+{"version":3,"file":"stateful-image.js","sources":["../../../src/fullscreen-image-carousel/stateful-image.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { LoadingDots } from \"../animations\";\nimport {\n    DefaultPlaceholder,\n    ImageBox,\n    ImageWrapper,\n} from \"./stateful-image.style\";\n\nexport interface StatefulImageProps {\n    src: string;\n    className?: string | undefined;\n    alt?: string | undefined;\n    fit?: React.CSSProperties[\"objectFit\"] | undefined;\n    placeholder?: React.ReactNode | undefined;\n    retrieveImageDimension?: boolean;\n    setDimension?: ({\n        src,\n        width,\n        height,\n    }: {\n        src: string;\n        width: number;\n        height: number;\n    }) => void;\n}\n\nexport const StatefulImage = ({\n    src,\n    className,\n    alt,\n    fit,\n    placeholder,\n    retrieveImageDimension,\n    setDimension,\n}: StatefulImageProps) => {\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Event | string>();\n\n    useEffect(() => {\n        setLoading(true);\n        setError(undefined);\n\n        const img = new Image();\n        img.src = src;\n        img.onload = () => {\n            if (!!retrieveImageDimension && setDimension) {\n                setDimension({\n                    src,\n                    width: img.width,\n                    height: img.height,\n                });\n            }\n\n            setLoading(false);\n        };\n        img.onerror = (e: Event | string) => {\n            setLoading(false);\n            setError(e);\n        };\n    }, [src]);\n\n    const renderContent = () => {\n        if (error) {\n            return placeholder ?? <DefaultPlaceholder />;\n        }\n\n        if (loading) {\n            return <LoadingDots />;\n        }\n\n        return <ImageBox src={src} alt={alt} $fit={fit} />;\n    };\n\n    return <ImageWrapper className={className}>{renderContent()}</ImageWrapper>;\n};\n"],"names":["src","className","alt","fit","placeholder","retrieveImageDimension","setDimension","loading","setLoading","useState","error","setError","useEffect","undefined","img","Image","onload","width","height","onerror","e","_jsx","ImageWrapper","children","DefaultPlaceholder","LoadingDots","ImageBox","$fit"],"mappings":"4WA4B6B,EACzBA,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,EAAAA,UAAS,IAChCC,EAAOC,GAAYF,aAE1BG,EAAAA,WAAU,KACNJ,GAAW,GACXG,OAASE,GAET,MAAMC,EAAM,IAAIC,MAChBD,EAAId,IAAMA,EACVc,EAAIE,OAAS,KACHX,GAA0BC,GAC5BA,EAAa,CACTN,MACAiB,MAAOH,EAAIG,MACXC,OAAQJ,EAAII,SAIpBV,GAAW,EAAM,EAErBM,EAAIK,QAAWC,IACXZ,GAAW,GACXG,EAASS,EAAE,CACd,GACF,CAACpB,IAcJ,OAAOqB,EAAAA,IAACC,EAAAA,aAAY,CAACrB,UAAWA,EAASsB,SAXjCb,EACON,QAAAA,EAAeiB,EAAAA,IAACG,EAAAA,mBAAkB,IAGzCjB,EACOc,EAAAA,IAACI,EAAAA,YAAW,IAGhBJ,EAAAA,IAACK,WAAQ,CAAC1B,IAAKA,EAAKE,IAAKA,EAAGyB,KAAQxB,KAG4B"}

package/cjs/histogram-slider/histogram-slider.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),n=require("react"),r=require("../typography/index.js"),s=require("./histogram-slider.styles.js");exports.HistogramSlider=i=>{var{bins:l=[],interval:t,disabled:u,readOnly:d,value:o,showRangeLabels:c,rangeLabelPrefix:m,rangeLabelSuffix:h,ariaLabels:g,onChange:b,onChangeEnd:x,renderEmptyView:p,renderRangeLabel:j}=i,y=e.__rest(i,["bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","onChange","onChangeEnd","renderEmptyView","renderRangeLabel"]);const L=l.map((e=>e.count)),f=Math.max(...L),v=l.map((e=>e.minValue)),V=Math.max(...v),C=Math.min(...v),[E,S]=n.useState(w()),q=n.useMemo((()=>{const e=[...l].sort(((e,a)=>e.minValue-a.minValue)),a=(V-C)/t+1,n=[];for(let r=0;r<a;r++){const a=e.find((e=>e.minValue===C+t*r));a?n.push(a):n.push({count:0,minValue:C+t*r})}return n}),[l,t]);n.useEffect((()=>{o!==E&&S(w())}),[o]);const O=e=>{const[a,n]=e,r=[a,n];S(r),null==b||b(r)},R=e=>{const[a,n]=e,r=[a,n];S(r),null==x||x(r)};function w(){return null!=o?o:[C,C+t]}const M=e=>j?j(e):a.jsxs(r.Typography.BodyBL,{children:[m,e,h]});return a.jsxs("div",Object.assign({},y,{children:[c&&a.jsxs(s.Label,{children:[M(E[0]),a.jsx(s.Separator,{children:"-"}),M(E[1])]}),q.every((e=>0===e.count))&&p?p():a.jsxs(a.Fragment,{children:[a.jsx(s.Histogram,{children:q.map(((e,n)=>{const r=e.count/f;return a.jsx(s.Bar,{style:{height:r?`calc(calc(100% - 0.25rem) * ${r} + 0.25rem)`:0},$selected:e.minValue>=E[0]&&e.minValue<E[1],$disabled:u||d},n)}))}),a.jsx(s.Slider,{min:C,max:V+t,step:t,minRange:t,numOfThumbs:2,value:E,disabled:u,readOnly:d,ariaLabels:g,onChange:O,onChangeEnd:R})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@react-aria/live-announcer"),n=require("clsx"),i=require("react"),s=require("../input-range-slider/input-range-slider.js"),t=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js"),u=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var c=require("../util/simple-id-generator.js");require("../util/string-helper.js");var d=require("./histogram-slider.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=o(n);const b=({item:e,maxCount:a,isSelected:n,isDisabled:s})=>{const t=e.count/a,u=i.useRef(null);return l.useApplyStyle(u,{height:t?`calc(calc(100% - 0.25rem) * ${t} + 0.25rem)`:"0"}),r.jsx("div",{"data-testid":"histogram-bar",className:m.default(d.bar,s&&n&&d.barSelectedDisabled,s&&d.barDisabled,n&&d.barSelected),ref:u})};exports.HistogramSlider=n=>{var{bins:l=[],interval:o,disabled:m,readOnly:h,value:g,showRangeLabels:p,rangeLabelPrefix:f,rangeLabelSuffix:j,ariaLabels:y,"aria-labelledby":x,"aria-describedby":v,onChange:q,onChangeEnd:L,renderEmptyView:V,renderRangeLabel:S,className:C}=n,N=e.__rest(n,["bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","aria-labelledby","aria-describedby","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","className"]);const R=l.map((e=>e.count)),E=Math.max(...R),D=l.map((e=>e.minValue)),M=Math.max(...D),O=Math.min(...D),[k,w]=i.useState(F()),T=c.useId(),_=i.useRef(null),I=`${T}-range-label`,$=t.concatIds(v,p?I:void 0),A=i.useMemo((()=>{const e=[...l].sort(((e,r)=>e.minValue-r.minValue)),r=(M-O)/o+1,a=[];for(let n=0;n<r;n++){const r=e.find((e=>e.minValue===O+o*n));r?a.push(r):a.push({count:0,minValue:O+o*n})}return a}),[l,o]);i.useEffect((()=>{g!==k&&w(F())}),[g]),i.useEffect((()=>()=>{H()}),[]);const B=e=>{const[r,a]=e,n=[r,a];w(n),G(n),null==q||q(n)},P=e=>{const[r,a]=e,n=[r,a];w(n),G(n),null==L||L(n)};function F(){return null!=g?g:[O,O+o]}function H(){_.current&&(clearTimeout(_.current),_.current=null)}function z(e){const r=A.reduce(((e,r)=>e+r.count),0);if(0===r)return"0% of results available in the range you specified.";const a=A.reduce(((r,a)=>a.minValue>=e[0]&&a.minValue<e[1]?r+a.count:r),0);return`${Math.round(a/r*100)}% of results available in the range you specified.`}function G(e){if(m||h)return;const r=z(e);H(),_.current=setTimeout((()=>{a.clearAnnouncer("polite"),a.announce(r,"polite")}),500)}const J=e=>S?S(e):r.jsxs(u.Typography.BodyBL,{children:[f,e,j]});return r.jsxs("div",Object.assign({role:"group"},N,{className:C,children:[p&&r.jsxs("div",{id:I,className:d.label,children:[J(k[0]),r.jsx("div",{className:d.separator,children:"-"}),J(k[1])]}),A.every((e=>0===e.count))&&V?V():(()=>{const e=z(k);return r.jsxs(r.Fragment,{children:[r.jsx("div",{className:d.histogram,children:A.map(((e,a)=>r.jsx(b,{item:e,maxCount:E,isSelected:e.minValue>=k[0]&&e.minValue<k[1],isDisabled:m||h},a)))}),r.jsx(s.InputRangeSlider,{min:O,max:M+o,step:o,minRange:o,numOfThumbs:2,value:k,disabled:m,readOnly:h,ariaLabels:y,ariaDescriptions:[e,e],"aria-describedby":$,"aria-labelledby":x,onChange:B,onChangeEnd:P,className:d.slider})]})})()]}))};
 //# sourceMappingURL=histogram-slider.js.map

package/cjs/histogram-slider/histogram-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.js","sources":["../../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport { Typography } from \"../typography\";\nimport {\n    Bar,\n    Histogram,\n    Label,\n    Separator,\n    Slider,\n} from \"./histogram-slider.styles\";\nimport type { HistogramSliderProps } from \"./types\";\n\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        return (\n            <>\n                <Histogram>\n                    {items.map((item, i) => {\n                        const ratio = item.count / maxCount;\n                        return (\n                            <Bar\n                                key={i}\n                                style={{\n                                    height: ratio\n                                        ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)`\n                                        : 0,\n                                }}\n                                $selected={\n                                    item.minValue >= selection[0] &&\n                                    item.minValue < selection[1]\n                                }\n                                $disabled={disabled || readOnly}\n                            />\n                        );\n                    })}\n                </Histogram>\n                <Slider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div {...otherProps}>\n            {showRangeLabels && (\n                <Label>\n                    {renderRangeItem(selection[0])}\n                    <Separator>-</Separator>\n                    {renderRangeItem(selection[1])}\n                </Label>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n"],"names":["_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","handleChange","val1","val2","newSelection","handleChangeEnd","renderRangeItem","_jsxs","Typography","BodyBL","children","Label","_jsx","Separator","every","_Fragment","Histogram","ratio","Bar","style","height","$selected","$disabled","Slider","step","minRange","numOfThumbs"],"mappings":"4MAYgCA,IAAA,IAAAC,KAC5BA,EAAO,GAAEC,SACTA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,EAAUC,SACVA,EAAQC,YACRA,EAAWC,gBACXA,EAAeC,iBACfA,GAAgBb,EACbc,EAAUC,EAAAA,OAAAf,EAde,sLAmB5B,MAAMgB,EAASf,EAAKgB,KAAKC,GAASA,EAAKC,QACjCC,EAAWC,KAAKC,OAAON,GAEvBO,EAAStB,EAAKgB,KAAKC,GAASA,EAAKM,WACjCC,EAAWJ,KAAKC,OAAOC,GACvBC,EAAWH,KAAKK,OAAOH,IAEtBI,EAAWC,GAAgBC,EAAAA,SAC9BC,KAGEC,EAAQC,EAAAA,SAAQ,KAClB,MAAMC,EAAS,IAAIhC,GAAMiC,MAAK,CAACC,EAAGC,IAAMD,EAAEX,SAAWY,EAAEZ,WACjDa,GAAWZ,EAAWD,GAAYtB,EAAW,EAE7C6B,EAAuB,GAC7B,IAAK,IAAIO,EAAI,EAAGA,EAAID,EAASC,IAAK,CAC9B,MAAMC,EAAMN,EAAOO,MACdJ,GAAMA,EAAEZ,WAAaA,EAAWtB,EAAWoC,IAE5CC,EACAR,EAAMU,KAAKF,GAEXR,EAAMU,KAAK,CAAEtB,MAAO,EAAGK,SAAUA,EAAWtB,EAAWoC,GAE/D,CACA,OAAOP,CAAK,GACb,CAAC9B,EAAMC,IAKVwC,EAAAA,WAAU,KACFrC,IAAUsB,GACVC,EAAaE,IACjB,GACD,CAACzB,IAKJ,MAAMsC,EAAgBpB,IAClB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbpC,SAAAA,EAAWoC,EAAa,EAGtBC,EAAmBxB,IACrB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbnC,SAAAA,EAAcmC,EAAa,EAM/B,SAAShB,IACL,OAAOzB,QAAAA,EAAS,CAACmB,EAAUA,EAAWtB,EAC1C,CAKA,MAAM8C,EAAmB3C,GACjBQ,EACOA,EAAiBR,GAGxB4C,EAAAA,KAACC,aAAWC,OAAM,CAAAC,SAAA,CACb7C,EACAF,EACAG,KA6Cb,OACIyC,EAAAA,4BAASnC,EAAU,CAAAsC,SAAA,CACd9C,GACG2C,EAAAA,KAACI,EAAAA,MAAK,CAAAD,SAAA,CACDJ,EAAgBrB,EAAU,IAC3B2B,EAAAA,IAACC,EAAAA,UAAS,CAAAH,SAAA,MACTJ,EAAgBrB,EAAU,OAGlCI,EAAMyB,OAAOtC,GAAwB,IAAfA,EAAKC,SAAgBP,EACtCA,IAhDNqC,EAAAA,KAAAQ,EAAAA,SAAA,CAAAL,SAAA,CACIE,EAAAA,IAACI,EAAAA,oBACI3B,EAAMd,KAAI,CAACC,EAAMoB,KACd,MAAMqB,EAAQzC,EAAKC,MAAQC,EAC3B,OACIkC,EAAAA,IAACM,MAAG,CAEAC,MAAO,CACHC,OAAQH,EACF,+BAA+BA,eAC/B,GACTI,UAEG7C,EAAKM,UAAYG,EAAU,IAC3BT,EAAKM,SAAWG,EAAU,GAAEqC,UAErB7D,GAAYC,GAVlBkC,EAWP,MAIdgB,EAAAA,IAACW,EAAAA,QACGvC,IAAKF,EACLF,IAAKG,EAAWvB,EAChBgE,KAAMhE,EACNiE,SAAUjE,EACVkE,YAAa,EACb/D,MAAOsB,EACPxB,SAAUA,EACVC,SAAUA,EACVK,WAAYA,EACZC,SAAUiC,EACVhC,YAAaoC,UAkBnB"}
+{"version":3,"file":"histogram-slider.js","sources":["../../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./histogram-slider.styles\";\nimport type { HistogramBinProps, HistogramSliderProps } from \"./types\";\n\nconst ANNOUNCEMENT_DEBOUNCE_MS = 500;\n\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    className,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const internalId = useId();\n    const announcementTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n        null\n    );\n    const rangeLabelId = `${internalId}-range-label`;\n    const sliderDescribedBy = concatIds(\n        ariaDescribedBy,\n        showRangeLabels ? rangeLabelId : undefined\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            clearPendingAnnouncement();\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    function clearPendingAnnouncement() {\n        if (announcementTimeoutRef.current) {\n            clearTimeout(announcementTimeoutRef.current);\n            announcementTimeoutRef.current = null;\n        }\n    }\n\n    function getRangePercentageDescription(currentSelection: [number, number]) {\n        const totalCount = items.reduce((sum, item) => sum + item.count, 0);\n\n        if (totalCount === 0) {\n            return \"0% of results available in the range you specified.\";\n        }\n\n        const selectedCount = items.reduce((sum, item) => {\n            const isSelected =\n                item.minValue >= currentSelection[0] &&\n                item.minValue < currentSelection[1];\n\n            return isSelected ? sum + item.count : sum;\n        }, 0);\n\n        const percentage = Math.round((selectedCount / totalCount) * 100);\n\n        return `${percentage}% of results available in the range you specified.`;\n    }\n\n    function scheduleRangePercentageAnnouncement(\n        currentSelection: [number, number]\n    ) {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const announcement = getRangePercentageDescription(currentSelection);\n\n        clearPendingAnnouncement();\n\n        announcementTimeoutRef.current = setTimeout(() => {\n            clearAnnouncer(\"polite\");\n            announce(announcement, \"polite\");\n        }, ANNOUNCEMENT_DEBOUNCE_MS);\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        const selectionDescription = getRangePercentageDescription(selection);\n\n        return (\n            <>\n                <div className={styles.histogram}>\n                    {items.map((item, i) => (\n                        <HistogramBar\n                            key={i}\n                            item={item}\n                            maxCount={maxCount}\n                            isSelected={\n                                item.minValue >= selection[0] &&\n                                item.minValue < selection[1]\n                            }\n                            isDisabled={disabled || readOnly}\n                        />\n                    ))}\n                </div>\n                <InputRangeSlider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    ariaDescriptions={[\n                        selectionDescription,\n                        selectionDescription,\n                    ]}\n                    aria-describedby={sliderDescribedBy}\n                    aria-labelledby={ariaLabelledBy}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                    className={styles.slider}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div role=\"group\" {...otherProps} className={className}>\n            {showRangeLabels && (\n                <div id={rangeLabelId} className={styles.label}>\n                    {renderRangeItem(selection[0])}\n                    <div className={styles.separator}>-</div>\n                    {renderRangeItem(selection[1])}\n                </div>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n\n// =============================================================================\n// SUB COMPONENT\n// =============================================================================\ninterface HistogramBarProps {\n    item: HistogramBinProps;\n    maxCount: number;\n    isSelected: boolean;\n    isDisabled: boolean | undefined;\n}\n\nconst HistogramBar = ({\n    item,\n    maxCount,\n    isSelected,\n    isDisabled,\n}: HistogramBarProps) => {\n    const ratio = item.count / maxCount;\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        height: ratio ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)` : \"0\",\n    });\n\n    return (\n        <div\n            data-testid=\"histogram-bar\"\n            className={clsx(\n                styles.bar,\n                isDisabled && isSelected && styles.barSelectedDisabled,\n                isDisabled && styles.barDisabled,\n                isSelected && styles.barSelected\n            )}\n            ref={barRef}\n        />\n    );\n};\n"],"names":["HistogramBar","item","maxCount","isSelected","isDisabled","ratio","count","barRef","useRef","useApplyStyle","height","_jsx","className","clsx","styles.bar","styles.barSelectedDisabled","styles.barDisabled","styles.barSelected","ref","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","ariaLabelledBy","ariaDescribedBy","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","otherProps","__rest","counts","map","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","internalId","useId","announcementTimeoutRef","rangeLabelId","sliderDescribedBy","concatIds","undefined","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","clearPendingAnnouncement","handleChange","val1","val2","newSelection","scheduleRangePercentageAnnouncement","handleChangeEnd","current","clearTimeout","getRangePercentageDescription","currentSelection","totalCount","reduce","sum","selectedCount","round","announcement","setTimeout","clearAnnouncer","announce","renderRangeItem","_jsxs","Typography","BodyBL","children","Object","assign","role","id","styles.label","styles.separator","every","selectionDescription","_Fragment","styles.histogram","InputRangeSlider","step","minRange","numOfThumbs","ariaDescriptions","styles.slider","renderHistogramSlider"],"mappings":"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"}

package/cjs/histogram-slider/histogram-slider.styles.js

@@ -1,25 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../input-range-slider/input-range-slider.js"),t=require("../v3_theme/index.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(e);const i=d.default.div`
-    display: flex;
-    margin-bottom: ${t.V3_Spacing["spacing-16"]};
-    align-items: baseline;
-`,a=d.default.div`
-    margin: 0 0.5rem;
-`,l=d.default.div`
-    width: 100%;
-    height: 4rem;
-    display: flex;
-    align-items: flex-end;
-    padding: 0 0.4375rem;
-`,o=d.default.div`
-    flex: 1;
-    border-radius: ${t.V3_Radius.sm} ${t.V3_Radius.sm} 0 0;
-    border: 0.5px solid transparent; // space between bars
-    background-clip: content-box;
-
-    ${r=>{let s=t.V3_Colour["bg-strongest"];return r.$disabled&&r.$selected?s=t.V3_Colour["bg-selected-stronger-disabled"]:r.$disabled?s=t.V3_Colour["bg-disabled"]:r.$selected&&(s=t.V3_Colour["bg-selected-stronger"]),e.css`
-            background-color: ${s};
-        `}}
-`,n=d.default(r.InputRangeSlider)`
-    margin-top: -0.3125rem;
-`;exports.Bar=o,exports.Histogram=l,exports.Label=i,exports.Separator=a,exports.Slider=n;
+"use strict";require("./histogram-slider.styles_wvd4w.css");exports.bar="b1koddre",exports.barDisabled="b1im7sez",exports.barSelected="b8ooyxk",exports.barSelectedDisabled="b9tfims",exports.histogram="hu29dsu",exports.label="l1qwb62w",exports.separator="s1f028jb",exports.slider="s1q1626e";
 //# sourceMappingURL=histogram-slider.styles.js.map

package/cjs/histogram-slider/histogram-slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.styles.js","sources":["../../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\ninterface BarStyleProps {\n    $selected: boolean;\n    $disabled: boolean | undefined;\n}\n\nexport const Label = styled.div`\n    display: flex;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n`;\n\nexport const Histogram = styled.div`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const Bar = styled.div<BarStyleProps>`\n    flex: 1;\n    border-radius: ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n\n    ${(props) => {\n        let color = V3_Colour[\"bg-strongest\"];\n        if (props.$disabled && props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger-disabled\"];\n        } else if (props.$disabled) {\n            color = V3_Colour[\"bg-disabled\"];\n        } else if (props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger\"];\n        }\n        return css`\n            background-color: ${color};\n        `;\n    }}\n`;\n\nexport const Slider = styled(InputRangeSlider)`\n    margin-top: -0.3125rem;\n`;\n"],"names":["Label","styled","div","V3_Spacing","Separator","Histogram","Bar","V3_Radius","props","color","V3_Colour","$disabled","$selected","css","Slider","InputRangeSlider"],"mappings":"8NAUO,MAAMA,EAAQC,EAAAA,QAAOC,GAAG;;qBAEVC,EAAAA,WAAW;;EAInBC,EAAYH,EAAAA,QAAOC,GAAG;;EAItBG,EAAYJ,EAAAA,QAAOC,GAAG;;;;;;EAQtBI,EAAML,EAAAA,QAAOC,GAAkB;;qBAEvBK,EAAAA,UAAc,MAAKA,EAAAA,UAAc;;;;MAI/CC,IACC,IAAIC,EAAQC,EAAAA,UAAU,gBAQtB,OAPIF,EAAMG,WAAaH,EAAMI,UACzBH,EAAQC,EAAAA,UAAU,iCACXF,EAAMG,UACbF,EAAQC,EAAAA,UAAU,eACXF,EAAMI,YACbH,EAAQC,EAAAA,UAAU,yBAEfG,KAAG;gCACcJ;SACvB;EAIIK,EAASb,EAAAA,QAAOc,EAAAA,iBAAiB;;"}
+{"version":3,"file":"histogram-slider.styles.js","sources":["../../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../theme\";\n\nexport const label = css`\n    display: flex;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n`;\n\nexport const histogram = css`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const bar = css`\n    flex: 1;\n    border-radius: ${Radius[\"sm\"]} ${Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n    background-color: ${Colour[\"bg-strongest\"]};\n`;\n\nexport const barDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const barSelected = css`\n    background-color: ${Colour[\"bg-selected-stronger\"]};\n`;\n\nexport const barSelectedDisabled = css`\n    background-color: ${Colour[\"bg-selected-stronger-disabled\"]};\n`;\n\nexport const slider = css`\n    margin-top: -0.3125rem;\n`;\n"],"names":[],"mappings":"wGAsBgB,+BAQQ,+BAIA,sCAIQ,4BAxBV,wBAVJ,6BAMI,0BAgCH"}

package/cjs/histogram-slider/histogram-slider.styles_wvd4w.css

@@ -0,0 +1,8 @@
+.l1qwb62w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:var(--fds-spacing-16);-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s1f028jb{margin:0 0.5rem;}
+.hu29dsu{width:100%;height:4rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding:0 0.4375rem;}
+.b1koddre{-webkit-flex:1;-ms-flex:1;flex:1;border-radius:var(--fds-radius-sm) var(--fds-radius-sm) 0 0;border:0.5px solid transparent;-webkit-background-clip:content-box;background-clip:content-box;background-color:var(--fds-colour-bg-strongest);}
+.b1im7sez{background-color:var(--fds-colour-bg-disabled);}
+.b8ooyxk{background-color:var(--fds-colour-bg-selected-stronger);}
+.b9tfims{background-color:var(--fds-colour-bg-selected-stronger-disabled);}
+.s1q1626e{margin-top:-0.3125rem;}

package/cjs/image-button/image-button.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react"),t=require("../shared/image-with-fallback/image-with-fallback.js"),a=require("./image-button.style.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=l(i).default.forwardRef(((i,l)=>{var{children:s,imgSrc:c,selected:d,error:n,type:u="button",disabled:o=!1,focusableWhenDisabled:b=!1,onClick:f}=i,h=e.__rest(i,["children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);return r.jsxs(a.Main,Object.assign({ref:l,$disabled:o,$selected:d,$error:n,type:u,"aria-disabled":o,disabled:o&&!b,onClick:o?void 0:f},h,{children:[r.jsx(t.ImageWithFallback,{src:c}),s]}))}));exports.ImageButton=s;
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("clsx"),i=require("react"),t=require("../shared/image-with-fallback/image-with-fallback.js"),s=require("./image-button.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(r);const n=l(i).default.forwardRef(((r,i)=>{var{children:l,className:n,imgSrc:d,selected:u,error:o,type:b="button",disabled:m=!1,focusableWhenDisabled:f=!1,onClick:h}=r,g=e.__rest(r,["children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);const j=!!m&&!f;return a.jsxs("button",Object.assign({ref:i,type:b,"aria-disabled":m,disabled:j,onClick:m?void 0:h,className:c.default(s.main,u&&s.mainSelectedText,u&&s.mainSelected,o&&s.mainError,m&&s.mainDisabled,n)},g,{children:[a.jsx(t.ImageWithFallback,{src:d}),l]}))}));exports.ImageButton=n;
 //# sourceMappingURL=image-button.js.map